From 72b429321553841ac1ff48cf974bfc65da01bb06 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 19 Dec 2022 12:23:39 -0300
Subject: pretty

---
 .../src/paths/instance/details/DetailPage.tsx      | 84 +++++++++++-----------
 .../src/paths/instance/details/Details.stories.tsx |  2 +-
 .../src/paths/instance/details/index.tsx           | 68 ++++++++++--------
 3 files changed, 82 insertions(+), 72 deletions(-)

(limited to 'packages/merchant-backoffice-ui/src/paths/instance/details')

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
index 01e7771cf..59aa7a1d2 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx
@@ -15,9 +15,9 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -33,55 +33,57 @@ interface Props {
   selected: MerchantBackend.Instances.QueryInstancesResponse;
 }
 
-function convert(from: MerchantBackend.Instances.QueryInstancesResponse): Entity {
-  const { accounts, ...rest } = from
-  const payto_uris = accounts.filter(a => a.active).map(a => a.payto_uri)
+function convert(
+  from: MerchantBackend.Instances.QueryInstancesResponse,
+): Entity {
+  const { accounts, ...rest } = from;
+  const payto_uris = accounts.filter((a) => a.active).map((a) => a.payto_uri);
   const defaults = {
     default_wire_fee_amortization: 1,
     default_pay_delay: { d_us: 1000 * 60 * 60 }, //one hour
     default_wire_transfer_delay: { d_us: 1000 * 60 * 60 * 2 }, //two hours
-  }
+  };
   return { ...defaults, ...rest, payto_uris };
 }
 
 export function DetailPage({ selected }: Props): VNode {
-  const [value, valueHandler] = useState<Partial<Entity>>(convert(selected))
+  const [value, valueHandler] = useState<Partial<Entity>>(convert(selected));
+
+  const i18n = useTranslator();
 
-  const i18n = useTranslator()
-  
-  return <div>
-    <section class="hero is-hero-bar">
-      <div class="hero-body">
-        <div class="level">
-          <div class="level-left">
-            <div class="level-item">
-              <h1 class="title">
-                Here goes the instance description
-              </h1>
+  return (
+    <div>
+      <section class="hero is-hero-bar">
+        <div class="hero-body">
+          <div class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <h1 class="title">Here goes the instance description</h1>
+              </div>
+            </div>
+            <div class="level-right" style="display: none;">
+              <div class="level-item" />
             </div>
-          </div>
-          <div class="level-right" style="display: none;">
-            <div class="level-item" />
           </div>
         </div>
-      </div>
-    </section>
-
-    <section class="section is-main-section">
-      <div class="columns">
-        <div class="column" />
-        <div class="column is-6">
-          <FormProvider<Entity> object={value} valueHandler={valueHandler} >
+      </section>
 
-            <Input<Entity> name="name" readonly label={i18n`Name`} />
-            <Input<Entity> name="payto_uris" readonly label={i18n`Account address`} />
-
-          </FormProvider>
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-6">
+            <FormProvider<Entity> object={value} valueHandler={valueHandler}>
+              <Input<Entity> name="name" readonly label={i18n`Name`} />
+              <Input<Entity>
+                name="payto_uris"
+                readonly
+                label={i18n`Account address`}
+              />
+            </FormProvider>
+          </div>
+          <div class="column" />
         </div>
-        <div class="column" />
-      </div>
-    </section>
-
-  </div>
-
-}
\ No newline at end of file
+      </section>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx
index f7772895f..9ac1c4381 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx
@@ -33,7 +33,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/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx
index 09b692e00..49b64262b 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx
@@ -30,36 +30,44 @@ interface Props {
   onDelete: () => void;
 }
 
-export default function Detail({ onUpdate, onLoadError, onUnauthorized, onDelete, onNotFound }: Props): VNode {
-  const { id } = useInstanceContext()
-  const result = useInstanceDetails()
-  const [deleting, setDeleting] = useState<boolean>(false)
+export default function Detail({
+  onUpdate,
+  onLoadError,
+  onUnauthorized,
+  onDelete,
+  onNotFound,
+}: Props): VNode {
+  const { id } = useInstanceContext();
+  const result = useInstanceDetails();
+  const [deleting, setDeleting] = useState<boolean>(false);
 
-  const { deleteInstance } = useInstanceAPI()
+  const { deleteInstance } = useInstanceAPI();
 
-  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)
+  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 <Fragment>
-    <DetailPage
-      selected={result.data}
-      onUpdate={onUpdate}
-      onDelete={() => setDeleting(true)}
-    />
-    {deleting && <DeleteModal
-      element={{ name: result.data.name, id }}
-      onCancel={() => setDeleting(false)}
-      onConfirm={async (): Promise<void> => {
-        try {
-          await deleteInstance()
-          onDelete()
-        } catch (error) {
-        }
-        setDeleting(false)
-      }}
-    />}
-
-  </Fragment>
-}
\ No newline at end of file
+  return (
+    <Fragment>
+      <DetailPage
+        selected={result.data}
+        onUpdate={onUpdate}
+        onDelete={() => setDeleting(true)}
+      />
+      {deleting && (
+        <DeleteModal
+          element={{ name: result.data.name, id }}
+          onCancel={() => setDeleting(false)}
+          onConfirm={async (): Promise<void> => {
+            try {
+              await deleteInstance();
+              onDelete();
+            } catch (error) {}
+            setDeleting(false);
+          }}
+        />
+      )}
+    </Fragment>
+  );
+}
-- 
cgit v1.2.3