1 files changed, 83 insertions, 25 deletions

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index cd4f88c0c..b6fd494fa 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -17,31 +17,53 @@
 import {
   AmountJson,
   Amounts,
+  parsePaytoUri,
   PaytoUri,
   segwitMinAmount,
+  stringifyPaytoUri,
   TranslatedString,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import {
+  useAsyncAsHook,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
 import { CopiedIcon, CopyIcon } from "../svg/index.js";
 import { Amount } from "./Amount.js";
-import { ButtonBox, TooltipLeft } from "./styled/index.js";
+import { ButtonBox, TooltipLeft, WarningBox } from "./styled/index.js";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { useBackendContext } from "../context/backend.js";
 
 export interface BankDetailsProps {
-  payto: PaytoUri | undefined;
   exchangeBaseUrl: string;
   subject: string;
   amount: AmountJson;
 }
 
 export function BankDetailsByPaytoType({
-  payto,
   subject,
   exchangeBaseUrl,
   amount,
 }: BankDetailsProps): VNode {
   const { i18n } = useTranslationContext();
+  const api = useBackendContext();
+
+  const hook = useAsyncAsHook(async () => {
+    const details = await api.wallet.call(
+      WalletApiOperation.GetExchangeDetailedInfo,
+      {
+        exchangeBaseUrl,
+      },
+    );
+    return { details };
+  });
+
+  if (!hook || hook.hasError) return <Fragment />;
+
+  const firstPayto = hook.response.details.exchange.paytoUris[0];
+  const payto = parsePaytoUri(firstPayto);
+
   if (!payto) return <Fragment />;
 
   if (payto.isKnown && payto.targetType === "bitcoin") {
@@ -124,29 +146,65 @@ export function BankDetailsByPaytoType({
 
   const receiver = payto.params["receiver"] || undefined;
   return (
-    <div
-      style={{
-        textAlign: "left",
-        border: "solid 1px black",
-        padding: 8,
-        borderRadius: 4,
-      }}
-    >
-      <p style={{ marginTop: 0 }}>
-        <i18n.Translate>Bank transfer details</i18n.Translate>
-      </p>
+    <section>
+      <div
+        style={{
+          textAlign: "left",
+          border: "solid 1px black",
+          padding: 8,
+          borderRadius: 4,
+        }}
+      >
+        <p style={{ marginTop: 0 }}>
+          <i18n.Translate>Bank transfer details</i18n.Translate>
+        </p>
+        <table>
+          {accountPart}
+          <Row
+            name={i18n.str`Amount`}
+            value={<Amount value={amount} hideCurrency />}
+          />
+          <Row name={i18n.str`Subject`} value={subject} literal />
+          {receiver ? (
+            <Row name={i18n.str`Receiver name`} value={receiver} />
+          ) : undefined}
+        </table>
+      </div>
       <table>
-        {accountPart}
-        <Row
-          name={i18n.str`Amount`}
-          value={<Amount value={amount} hideCurrency />}
-        />
-        <Row name={i18n.str`Subject`} value={subject} literal />
-        {receiver ? (
-          <Row name={i18n.str`Receiver name`} value={receiver} />
-        ) : undefined}
+        <tbody>
+          <tr>
+            <td>
+              <pre>
+                <b>
+                  <a
+                    target="_bank"
+                    rel="noreferrer"
+                    title="RFC 8905 for designating targets for payments"
+                    href="https://tools.ietf.org/html/rfc8905"
+                  >
+                    Payto URI
+                  </a>
+                </b>
+              </pre>
+            </td>
+            <td width="100%" style={{ wordBreak: "break-all" }}>
+              {stringifyPaytoUri(payto)}
+            </td>
+            <td>
+              <CopyButton getContent={() => stringifyPaytoUri(payto)} />
+            </td>
+          </tr>
+        </tbody>
       </table>
-    </div>
+      <p>
+        <WarningBox>
+          <i18n.Translate>
+            Make sure to use the correct subject, otherwise the money will not
+            arrive in this wallet.
+          </i18n.Translate>
+        </WarningBox>
+      </p>
+    </section>
   );
 }