show bank details

3 files changed, 171 insertions, 156 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>
   );
 }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 0bf9ef9d1..f489b805b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -50,48 +50,11 @@ export function ReserveCreated({
   function TransferDetails(): VNode {
     if (!paytoURI) return <Fragment />;
     return (
-      <section>
-        <BankDetailsByPaytoType
-          amount={amount}
-          exchangeBaseUrl={exchangeBaseUrl}
-          payto={paytoURI}
-          subject={reservePub}
-        />
-        <table>
-          <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(paytoURI)}
-              </td>
-              <td>
-                <CopyButton getContent={() => stringifyPaytoUri(paytoURI)} />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <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>
+      <BankDetailsByPaytoType
+        amount={amount}
+        exchangeBaseUrl={exchangeBaseUrl}
+        subject={reservePub}
+      />
     );
   }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 9ed41c5de..13adb34b2 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -32,9 +32,11 @@ import {
   TransactionAction,
   TransactionDeposit,
   TransactionIdStr,
+  TransactionInternalWithdrawal,
   TransactionMajorState,
   TransactionMinorState,
   TransactionType,
+  TransactionWithdrawal,
   TranslatedString,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
@@ -459,96 +461,14 @@ export function TransactionView({
         TransactionMajorState.Pending ? undefined : transaction
             .withdrawalDetails.type === WithdrawalType.ManualTransfer ? (
           //manual withdrawal
-          <Fragment>
-            <BankDetailsByPaytoType
-              amount={raw}
-              exchangeBaseUrl={transaction.exchangeBaseUrl}
-              payto={parsePaytoUri(
-                transaction.withdrawalDetails.exchangePaytoUris[0],
-              )}
-              subject={transaction.withdrawalDetails.reservePub}
-            />
-            <table>
-              <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" }}>
-                    {transaction.withdrawalDetails.exchangePaytoUris[0]}
-                  </td>
-                  <td>
-                    <CopyButton
-                      getContent={() =>
-                        transaction.withdrawalDetails.type ===
-                        WithdrawalType.ManualTransfer
-                          ? transaction.withdrawalDetails.exchangePaytoUris[0]
-                          : ""
-                      }
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <WarningBox>
-              <i18n.Translate>
-                Make sure to use the correct subject, otherwise the money will
-                not arrive in this wallet.
-              </i18n.Translate>
-            </WarningBox>
-          </Fragment>
+          <BankDetailsByPaytoType
+            amount={raw}
+            exchangeBaseUrl={transaction.exchangeBaseUrl}
+            subject={transaction.withdrawalDetails.reservePub}
+          />
         ) : (
           //integrated bank withdrawal
-          <Fragment>
-            {!transaction.withdrawalDetails.confirmed &&
-            transaction.withdrawalDetails.bankConfirmationUrl ? (
-              <InfoBox>
-                <div style={{ display: "block" }}>
-                  <i18n.Translate>
-                    Wire transfer need a confirmation. Go to the{" "}
-                    <a
-                      href={transaction.withdrawalDetails.bankConfirmationUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{ display: "inline" }}
-                    >
-                      <i18n.Translate>bank site</i18n.Translate>
-                    </a>{" "}
-                    and check wire transfer operation to exchange account is
-                    complete.
-                  </i18n.Translate>
-                </div>
-              </InfoBox>
-            ) : undefined}
-            {transaction.withdrawalDetails.confirmed &&
-              !transaction.withdrawalDetails.reserveIsReady && (
-                <InfoBox>
-                  <i18n.Translate>
-                    Bank has confirmed the wire transfer. Waiting for the
-                    exchange to send the coins
-                  </i18n.Translate>
-                </InfoBox>
-              )}
-            {transaction.withdrawalDetails.confirmed &&
-              transaction.withdrawalDetails.reserveIsReady && (
-                <InfoBox>
-                  <i18n.Translate>
-                    Exchange is ready to send the coins, withdrawal in progress.
-                  </i18n.Translate>
-                </InfoBox>
-              )}
-          </Fragment>
+          <ShowWithdrawalDetailForBankIntegrated transaction={transaction} />
         )}
         <Part
           title={i18n.str`Details`}
@@ -1404,7 +1324,7 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
     <PurchaseDetailsTable>
       <tr>
         <td>
-          <i18n.Translate>Withdraw</i18n.Translate>
+          <i18n.Translate>Wire transfer</i18n.Translate>
         </td>
         <td>
           <Amount value={amount.value} maxFracSize={amount.maxFrac} />
@@ -1952,3 +1872,77 @@ function getShowButtonStates(transaction: Transaction) {
   });
   return { abort, fail, resume, retry, remove, suspend };
 }
+
+function ShowWithdrawalDetailForBankIntegrated({
+  transaction,
+}: {
+  transaction: TransactionWithdrawal | TransactionInternalWithdrawal;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const [showDetails, setShowDetails] = useState(false);
+  if (
+    transaction.txState.major !== TransactionMajorState.Pending ||
+    transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer
+  )
+    return <Fragment />;
+  const raw = Amounts.parseOrThrow(transaction.amountRaw);
+  return (
+    <Fragment>
+      <EnabledBySettings name="advanceMode">
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            setShowDetails(!showDetails);
+          }}
+        >
+          show details
+        </a>
+      </EnabledBySettings>
+
+      {showDetails && (
+        <BankDetailsByPaytoType
+          amount={raw}
+          exchangeBaseUrl={transaction.exchangeBaseUrl}
+          subject={transaction.withdrawalDetails.reservePub}
+        />
+      )}
+      {!transaction.withdrawalDetails.confirmed &&
+      transaction.withdrawalDetails.bankConfirmationUrl ? (
+        <InfoBox>
+          <div style={{ display: "block" }}>
+            <i18n.Translate>
+              Wire transfer need a confirmation. Go to the{" "}
+              <a
+                href={transaction.withdrawalDetails.bankConfirmationUrl}
+                target="_blank"
+                rel="noreferrer"
+                style={{ display: "inline" }}
+              >
+                <i18n.Translate>bank site</i18n.Translate>
+              </a>{" "}
+              and check wire transfer operation to exchange account is complete.
+            </i18n.Translate>
+          </div>
+        </InfoBox>
+      ) : undefined}
+      {transaction.withdrawalDetails.confirmed &&
+        !transaction.withdrawalDetails.reserveIsReady && (
+          <InfoBox>
+            <i18n.Translate>
+              Bank has confirmed the wire transfer. Waiting for the exchange to
+              send the coins
+            </i18n.Translate>
+          </InfoBox>
+        )}
+      {transaction.withdrawalDetails.confirmed &&
+        transaction.withdrawalDetails.reserveIsReady && (
+          <InfoBox>
+            <i18n.Translate>
+              Exchange is ready to send the coins, withdrawal in progress.
+            </i18n.Translate>
+          </InfoBox>
+        )}
+    </Fragment>
+  );
+}