pretty

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>
+  );
 }