pretty

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