aboutsummaryrefslogtreecommitdiff
path: root/packages/merchant-backoffice-ui/src/paths/instance/details
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-12-19 12:23:39 -0300
committerSebastian <sebasjm@gmail.com>2022-12-19 12:23:39 -0300
commit72b429321553841ac1ff48cf974bfc65da01bb06 (patch)
tree7db9a4462f02de6cb86de695a1e64772b00ead5f /packages/merchant-backoffice-ui/src/paths/instance/details
parent770ab6f01dc81a16f384f314982bd761540f8e65 (diff)
downloadwallet-core-72b429321553841ac1ff48cf974bfc65da01bb06.tar.xz
pretty
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/details')
-rw-r--r--packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx84
-rw-r--r--packages/merchant-backoffice-ui/src/paths/instance/details/Details.stories.tsx2
-rw-r--r--packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx68
3 files changed, 82 insertions, 72 deletions
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>
+ );
+}