show conversion service in withdrawal details

2 files changed, 86 insertions, 41 deletions

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index a28c34987..9fd117b08 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -26,11 +26,12 @@ import {
 import {
   useTranslationContext
 } from "@gnu-taler/web-util/browser";
-import { Fragment, h, VNode } from "preact";
+import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { CopiedIcon, CopyIcon } from "../svg/index.js";
 import { Amount } from "./Amount.js";
 import { ButtonBox, TooltipLeft, WarningBox } from "./styled/index.js";
+import { Button } from "../mui/Button.js";
 
 export interface BankDetailsProps {
   subject: string;
@@ -44,19 +45,68 @@ export function BankDetailsByPaytoType({
   accounts,
 }: BankDetailsProps): VNode {
   const { i18n } = useTranslationContext();
-
+  const [index, setIndex] = useState(0)
+  const [currency, setCurrency] = useState(amount.currency)
   if (!accounts.length) {
-    return <div>exchange doesn't have accounts to wire </div>
+    return <div>the exchange account list is empty</div>
   }
-  const [index, setIndex] = useState(0)
-  const fisrtAccount = accounts[index];
+  const selectedAccount = accounts[index];
+  const altCurrency = selectedAccount.currencySpecification?.name
 
-  const payto = parsePaytoUri(fisrtAccount.paytoUri);
+  const payto = parsePaytoUri(selectedAccount.paytoUri);
 
   if (!payto) return <Fragment />;
-  payto.params["amount"] = Amounts.stringify(amount);
+  payto.params["amount"] = currency === altCurrency ? selectedAccount.transferAmount! :Amounts.stringify(amount) ;
   payto.params["message"] = subject;
 
+
+  function Frame({ title, children }: { title: TranslatedString, children: ComponentChildren }): VNode {
+    return <section
+      style={{
+        textAlign: "left",
+        border: "solid 1px black",
+        padding: 8,
+        borderRadius: 4,
+      }}
+    >
+      <div style={{ display: "flex", width: "100%", justifyContent: "space-between" }}>
+        <p style={{ marginTop: 0 }}>
+          {title}
+        </p>
+        {accounts.length > 1 ?
+          <Button variant="contained"
+            onClick={async () => {
+              setIndex((index + 1) % accounts.length)
+            }}
+          >
+            <i18n.Translate>Next</i18n.Translate>
+          </Button>
+          : undefined}
+      </div>
+
+      {children}
+
+      {altCurrency ?
+        <Fragment>
+          <Button variant={currency === amount.currency ? "contained" : "outlined"}
+            onClick={async () => {
+              setCurrency(amount.currency)
+            }}
+          >
+            <i18n.Translate>{amount.currency}</i18n.Translate>
+          </Button>
+          <Button variant={currency === altCurrency ? "contained" : "outlined"}
+            onClick={async () => {
+              setCurrency(altCurrency)
+            }}
+          >
+            <i18n.Translate>{altCurrency}</i18n.Translate>
+          </Button>
+        </Fragment>
+        : undefined}
+    </section>
+  }
+
   if (payto.isKnown && payto.targetType === "bitcoin") {
     const min = segwitMinAmount(amount.currency);
     const addrs = payto.segwitAddrs.map(
@@ -65,17 +115,7 @@ export function BankDetailsByPaytoType({
     addrs.unshift(`${payto.targetPath} ${Amounts.stringifyValue(amount)}`);
     const copyContent = addrs.join("\n");
     return (
-      <section
-        style={{
-          textAlign: "left",
-          border: "solid 1px black",
-          padding: 8,
-          borderRadius: 4,
-        }}
-      >
-        <p style={{ marginTop: 0 }}>
-          <i18n.Translate>Bitcoin transfer details</i18n.Translate>
-        </p>
+      <Frame title={i18n.str`Bitcoin transfer details`}>
         <p>
           <i18n.Translate>
             The exchange need a transaction with 3 output, one output is the
@@ -115,7 +155,7 @@ export function BankDetailsByPaytoType({
             BTC, else you have to change the base unit to BTC
           </i18n.Translate>
         </p>
-      </section>
+      </Frame>
     );
   }
 
@@ -137,31 +177,30 @@ export function BankDetailsByPaytoType({
 
   const receiver = payto.params["receiver"] || undefined;
   return (
-    <section>
+    <Frame title={i18n.str`Bank transfer details`}>
+      <table>
+        {accountPart}
+        {currency === altCurrency ? <Fragment>
+          <Row
+            name={i18n.str`Amount`}
+            value={<Amount value={selectedAccount.transferAmount!} />}
+          />
+          <Row
+            name={i18n.str`Converted`}
+            value={<Amount value={amount} />}
+          />
 
-      <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}
+        </Fragment> :
           <Row
             name={i18n.str`Amount`}
-            value={<Amount value={amount} hideCurrency />}
+            value={<Amount value={amount} />}
           />
-          <Row name={i18n.str`Subject`} value={subject} literal />
-          {receiver ? (
-            <Row name={i18n.str`Receiver name`} value={receiver} />
-          ) : undefined}
-        </table>
-      </div>
+        }
+        <Row name={i18n.str`Subject`} value={subject} literal />
+        {receiver ? (
+          <Row name={i18n.str`Receiver name`} value={receiver} />
+        ) : undefined}
+      </table>
       <table>
         <tbody>
           <tr>
@@ -196,7 +235,7 @@ export function BankDetailsByPaytoType({
           </i18n.Translate>
         </WarningBox>
       </p>
-    </section>
+    </Frame>
   );
 }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 09f7c4dc1..c17d15b01 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -293,6 +293,12 @@ export const WithdrawPendingManual = tests.createExample(
         type: WithdrawalType.ManualTransfer,
         exchangePaytoUris: ["payto://iban/ES8877998399652238"],
         reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+        exchangeCreditAccountDetails: [{
+          paytoUri: "payto://IBAN/1231231231",
+        },
+        {
+          paytoUri: "payto://IBAN/2342342342",
+        }],
       } as WithdrawalDetails,
       txState: {
         major: TransactionMajorState.Pending,