diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/transfers/list')
4 files changed, 149 insertions, 90 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx index 42fcdd733..92b3f9853 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx @@ -39,7 +39,7 @@ export default { function createExample<Props>( Component: FunctionalComponent<Props>, - props: Partial<Props> + props: Partial<Props>, ) { const r = (args: any) => <Component {...args} />; r.args = props; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx index 539f1ae34..cad989980 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx @@ -15,15 +15,15 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; +import { h, VNode } from "preact"; import { FormProvider } from "../../../../components/form/FormProvider.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from '../../../../i18n/index.js'; +import { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface Props { @@ -43,47 +43,92 @@ export interface Props { onDelete: () => void; } -export function ListPage({ payTo, onChangePayTo, transfers, onCreate, onDelete, accounts, onLoadMoreBefore, onLoadMoreAfter, isAllTransfers, isNonVerifiedTransfers, isVerifiedTransfers, onShowAll, onShowUnverified, onShowVerified }: Props): VNode { - const form = { payto_uri: payTo } +export function ListPage({ + payTo, + onChangePayTo, + transfers, + onCreate, + onDelete, + accounts, + onLoadMoreBefore, + onLoadMoreAfter, + isAllTransfers, + isNonVerifiedTransfers, + isVerifiedTransfers, + onShowAll, + onShowUnverified, + onShowVerified, +}: Props): VNode { + const form = { payto_uri: payTo }; const i18n = useTranslator(); - return <section class="section is-main-section"> - <div class="columns"> - <div class="column" /> - <div class="column is-10"> - <FormProvider object={form} valueHandler={(updater) => onChangePayTo(updater(form).payto_uri)}> - <InputSelector name="payto_uri" label={i18n`Address`} - values={accounts} - placeholder={i18n`Select one account`} - tooltip={i18n`filter by account address`} /> - </FormProvider> + return ( + <section class="section is-main-section"> + <div class="columns"> + <div class="column" /> + <div class="column is-10"> + <FormProvider + object={form} + valueHandler={(updater) => onChangePayTo(updater(form).payto_uri)} + > + <InputSelector + name="payto_uri" + label={i18n`Address`} + values={accounts} + placeholder={i18n`Select one account`} + tooltip={i18n`filter by account address`} + /> + </FormProvider> + </div> + <div class="column" /> + </div> + <div class="tabs"> + <ul> + <li class={isAllTransfers ? "is-active" : ""}> + <div + class="has-tooltip-right" + data-tooltip={i18n`remove all filters`} + > + <a onClick={onShowAll}> + <Translate>All</Translate> + </a> + </div> + </li> + <li class={isVerifiedTransfers ? "is-active" : ""}> + <div + class="has-tooltip-right" + data-tooltip={i18n`only show wire transfers confirmed by the merchant`} + > + <a onClick={onShowVerified}> + <Translate>Verified</Translate> + </a> + </div> + </li> + <li class={isNonVerifiedTransfers ? "is-active" : ""}> + <div + class="has-tooltip-right" + data-tooltip={i18n`only show wire transfers claimed by the exchange`} + > + <a onClick={onShowUnverified}> + <Translate>Unverified</Translate> + </a> + </div> + </li> + </ul> </div> - <div class="column" /> - </div> - <div class="tabs"> - <ul> - <li class={isAllTransfers ? 'is-active' : ''}> - <div class="has-tooltip-right" data-tooltip={i18n`remove all filters`}> - <a onClick={onShowAll}><Translate>All</Translate></a> - </div> - </li> - <li class={isVerifiedTransfers ? 'is-active' : ''}> - <div class="has-tooltip-right" data-tooltip={i18n`only show wire transfers confirmed by the merchant`}> - <a onClick={onShowVerified}><Translate>Verified</Translate></a> - </div> - </li> - <li class={isNonVerifiedTransfers ? 'is-active' : ''}> - <div class="has-tooltip-right" data-tooltip={i18n`only show wire transfers claimed by the exchange`}> - <a onClick={onShowUnverified}><Translate>Unverified</Translate></a> - </div> - </li> - </ul> - </div> - <CardTable transfers={transfers.map(o => ({ ...o, id: String(o.transfer_serial_id) }))} - accounts={accounts} - onCreate={onCreate} - onDelete={onDelete} - onLoadMoreBefore={onLoadMoreBefore} hasMoreBefore={!onLoadMoreBefore} - onLoadMoreAfter={onLoadMoreAfter} hasMoreAfter={!onLoadMoreAfter} /> - </section>; + <CardTable + transfers={transfers.map((o) => ({ + ...o, + id: String(o.transfer_serial_id), + }))} + accounts={accounts} + onCreate={onCreate} + onDelete={onDelete} + onLoadMoreBefore={onLoadMoreBefore} + hasMoreBefore={!onLoadMoreBefore} + onLoadMoreAfter={onLoadMoreAfter} + hasMoreAfter={!onLoadMoreAfter} + /> + </section> + ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx index 0f9b87732..2341fb80a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx @@ -173,7 +173,7 @@ function Table({ ? i18n`never` : format( i.execution_time.t_s * 1000, - "yyyy/MM/dd HH:mm:ss" + "yyyy/MM/dd HH:mm:ss", ) : i18n`unknown`} </td> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx index 439e81f9f..242380fbc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx @@ -15,12 +15,12 @@ */ /** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ + * + * @author Sebastian Javier Marchano (sebasjm) + */ -import { h, VNode } from 'preact'; -import { useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { MerchantBackend } from "../../../../declaration.js"; import { HttpError } from "../../../../hooks/backend.js"; @@ -35,51 +35,65 @@ interface Props { onCreate: () => void; } interface Form { - verified?: 'yes' | 'no'; + verified?: "yes" | "no"; payto_uri?: string; } -export default function ListTransfer({ onUnauthorized, onLoadError, onCreate, onNotFound }: Props): VNode { - const [form, setForm] = useState<Form>({ payto_uri: '' }) - const setFilter = (s?: 'yes' | 'no') => setForm({ ...form, verified: s }) - - const [position, setPosition] = useState<string | undefined>(undefined) +export default function ListTransfer({ + onUnauthorized, + onLoadError, + onCreate, + onNotFound, +}: Props): VNode { + const [form, setForm] = useState<Form>({ payto_uri: "" }); + const setFilter = (s?: "yes" | "no") => setForm({ ...form, verified: s }); - const instance = useInstanceDetails() - const accounts = !instance.ok ? [] : instance.data.accounts.map(a => a.payto_uri) + const [position, setPosition] = useState<string | undefined>(undefined); - const isVerifiedTransfers = form.verified === 'yes' - const isNonVerifiedTransfers = form.verified === 'no' - const isAllTransfers = form.verified === undefined + const instance = useInstanceDetails(); + const accounts = !instance.ok + ? [] + : instance.data.accounts.map((a) => a.payto_uri); - const result = useInstanceTransfers({ - position, - payto_uri: form.payto_uri === '' ? undefined : form.payto_uri, - verified: form.verified, - }, (id) => setPosition(id)) + const isVerifiedTransfers = form.verified === "yes"; + const isNonVerifiedTransfers = form.verified === "no"; + const isAllTransfers = form.verified === undefined; - if (result.clientError && result.isUnauthorized) return onUnauthorized() - if (result.clientError && result.isNotfound) return onNotFound() - if (result.loading) return <Loading /> - if (!result.ok) return onLoadError(result) + const result = useInstanceTransfers( + { + position, + payto_uri: form.payto_uri === "" ? undefined : form.payto_uri, + verified: form.verified, + }, + (id) => setPosition(id), + ); - return <ListPage - accounts={accounts} - transfers={result.data.transfers} - onLoadMoreBefore={result.isReachingStart ? result.loadMorePrev : undefined} - onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} - onCreate={onCreate} - onDelete={() => {null}} - // position={position} setPosition={setPosition} - onShowAll={() => setFilter(undefined)} - onShowUnverified={() => setFilter('no')} - onShowVerified={() => setFilter('yes')} - isAllTransfers={isAllTransfers} - isVerifiedTransfers={isVerifiedTransfers} - isNonVerifiedTransfers={isNonVerifiedTransfers} - payTo={form.payto_uri} - onChangePayTo={(p) => setForm(v => ({ ...v, payto_uri: p }))} - /> + if (result.clientError && result.isUnauthorized) return onUnauthorized(); + if (result.clientError && result.isNotfound) return onNotFound(); + if (result.loading) return <Loading />; + if (!result.ok) return onLoadError(result); + return ( + <ListPage + accounts={accounts} + transfers={result.data.transfers} + onLoadMoreBefore={ + result.isReachingStart ? result.loadMorePrev : undefined + } + onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} + onCreate={onCreate} + onDelete={() => { + null; + }} + // position={position} setPosition={setPosition} + onShowAll={() => setFilter(undefined)} + onShowUnverified={() => setFilter("no")} + onShowVerified={() => setFilter("yes")} + isAllTransfers={isAllTransfers} + isVerifiedTransfers={isVerifiedTransfers} + isNonVerifiedTransfers={isNonVerifiedTransfers} + payTo={form.payto_uri} + onChangePayTo={(p) => setForm((v) => ({ ...v, payto_uri: p }))} + /> + ); } - |