diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx | 135 |
1 files changed, 90 insertions, 45 deletions
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> + ); } |