exchange account info

4 files changed, 137 insertions, 36 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index 3dc2b7f3d..5fb3b1d80 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -17,6 +17,7 @@
 import {
   AmountJson,
   AmountString,
+  CurrencySpecification,
   ExchangeListItem,
   WithdrawalExchangeAccountDetails,
 } from "@gnu-taler/taler-util";
@@ -92,7 +93,14 @@ export namespace State {
 
     doWithdrawal: ButtonHandler;
     doSelectExchange: ButtonHandler;
-    accounts: WithdrawalExchangeAccountDetails[];
+
+    chooseCurrencies: string[];
+    selectedCurrency: string;
+    changeCurrency: (s: string) => void;
+    conversionInfo: {
+      spec: CurrencySpecification,
+      amount: AmountJson,
+    } | undefined;
 
     ageRestriction?: SelectFieldHandler;
 
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index 46d221766..c10572d1a 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -297,7 +297,7 @@ function exchangeSelectionState(
     return selectedExchange;
   }
 
-  return () => {
+  return (): State.Success | State.LoadingUriError | State.Loading => {
     const { i18n } = useTranslationContext();
     const { pushAlertOnError } = useAlertContext();
     const [ageRestricted, setAgeRestricted] = useState(0);
@@ -306,6 +306,7 @@ function exchangeSelectionState(
       currentExchange.tosStatus == ExchangeTosStatus.Pending ||
       currentExchange.tosStatus == ExchangeTosStatus.Proposed;
 
+    const [selectedCurrency, setSelectedCurrency] = useState<string>(chosenAmount.currency)
     /**
      * With the exchange and amount, ask the wallet the information
      * about the withdrawal
@@ -324,7 +325,7 @@ function exchangeSelectionState(
         raw: Amounts.parseOrThrow(info.amountRaw),
         effective: Amounts.parseOrThrow(info.amountEffective),
       };
-      
+
       return {
         amount: withdrawAmount,
         ageRestrictionOptions: info.ageRestrictionOptions,
@@ -336,7 +337,7 @@ function exchangeSelectionState(
       undefined,
     );
     const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
-    
+
     async function doWithdrawAndCheckError(): Promise<void> {
       try {
         setDoingWithdraw(true);
@@ -401,13 +402,26 @@ function exchangeSelectionState(
       }
       : undefined;
 
+    const altCurrencies = amountHook.response.accounts.filter(a => !!a.currencySpecification).map(a => a.currencySpecification!.name)
+    const chooseCurrencies = altCurrencies.length === 0 ? [] : [toBeReceived.currency, ...altCurrencies]
+    const convAccount = amountHook.response.accounts.find(c => {
+      return c.currencySpecification && c.currencySpecification.name === selectedCurrency
+    })
+    const conversionInfo = !convAccount ? undefined : ({
+      spec: convAccount.currencySpecification!,
+      amount: Amounts.parseOrThrow(convAccount.transferAmount!)
+    })
+
     return {
       status: "success",
       error: undefined,
       doSelectExchange: selectedExchange.doSelect,
       currentExchange,
       toBeReceived,
-      accounts: amountHook.response.accounts,
+      chooseCurrencies,
+      selectedCurrency,
+      changeCurrency: (s) => { setSelectedCurrency(s) },
+      conversionInfo,
       withdrawalFee,
       chosenAmount,
       talerWithdrawUri,
@@ -417,7 +431,6 @@ function exchangeSelectionState(
           doingWithdraw || tosNeedToBeAccepted
             ? undefined
             : pushAlertOnError(doWithdrawAndCheckError),
-        error: withdrawError,
       },
       onTosUpdate,
       cancel,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
index df70a5c95..a3127fafc 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { ExchangeListItem } from "@gnu-taler/taler-util";
+import { CurrencySpecification, ExchangeListItem } from "@gnu-taler/taler-util";
 import * as tests from "@gnu-taler/web-util/testing";
 import { nullFunction } from "../../mui/handlers.js";
 // import { TermsState } from "../../utils/index.js";
@@ -64,7 +64,7 @@ export const TermsOfServiceNotYetLoaded = tests.createExample(SuccessView, {
     fraction: 0,
     value: 1,
   },
-  accounts: [],
+  chooseCurrencies: [],
 });
 
 export const WithSomeFee = tests.createExample(SuccessView, {
@@ -91,7 +91,7 @@ export const WithSomeFee = tests.createExample(SuccessView, {
     value: 1,
   },
   doSelectExchange: {},
-  accounts: [],
+  chooseCurrencies: [],
 });
 
 export const WithoutFee = tests.createExample(SuccessView, {
@@ -118,7 +118,7 @@ export const WithoutFee = tests.createExample(SuccessView, {
     fraction: 0,
     value: 2,
   },
-  accounts: [],
+  chooseCurrencies: [],
 });
 
 export const EditExchangeUntouched = tests.createExample(SuccessView, {
@@ -145,7 +145,7 @@ export const EditExchangeUntouched = tests.createExample(SuccessView, {
     fraction: 0,
     value: 2,
   },
-  accounts: [],
+  chooseCurrencies: [],
 });
 
 export const EditExchangeModified = tests.createExample(SuccessView, {
@@ -172,7 +172,7 @@ export const EditExchangeModified = tests.createExample(SuccessView, {
     fraction: 0,
     value: 2,
   },
-  accounts: [],
+  chooseCurrencies: [],
 });
 
 export const WithAgeRestriction = tests.createExample(SuccessView, {
@@ -200,31 +200,110 @@ export const WithAgeRestriction = tests.createExample(SuccessView, {
     fraction: 0,
     value: 2,
   },
-  accounts: [],
+  chooseCurrencies: [],
 });
 
-export const WithAlternateCurrencies = tests.createExample(SuccessView, {
+export const WithAlternateCurrenciesNETZBON = tests.createExample(SuccessView, {
   error: undefined,
   status: "success",
   chosenAmount: {
-    currency: "USD",
+    currency: "NETZBON",
     value: 2,
     fraction: 10000000,
   },
-  accounts: [],
+  chooseCurrencies: ["NETZBON", "EUR"],
+  selectedCurrency: "NETZBON",
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
-    exchangeBaseUrl: "https://exchange.demo.taler.net",
+    exchangeBaseUrl: "https://exchange.netzbon.ch",
     tos: {},
   } as Partial<ExchangeListItem> as any,
   withdrawalFee: {
-    currency: "USD",
+    currency: "NETZBON",
     fraction: 10000000,
     value: 1,
   },
   doSelectExchange: {},
   toBeReceived: {
-    currency: "USD",
+    currency: "NETZBON",
+    fraction: 0,
+    value: 1,
+  },
+});
+
+export const WithAlternateCurrenciesEURO = tests.createExample(SuccessView, {
+  error: undefined,
+  status: "success",
+  chosenAmount: {
+    currency: "NETZBON",
+    value: 2,
+    fraction: 10000000,
+  },
+  chooseCurrencies: ["NETZBON", "EUR"],
+  selectedCurrency: "EUR",
+  changeCurrency: () => { },
+  conversionInfo: {
+    spec: {
+      name: "EUR"
+    } as CurrencySpecification,
+    amount: {
+      currency: "EUR",
+      fraction: 10000000,
+      value: 1,
+    }
+  },
+  doWithdrawal: { onClick: nullFunction },
+  currentExchange: {
+    exchangeBaseUrl: "https://exchange.netzbon.ch",
+    tos: {},
+  } as Partial<ExchangeListItem> as any,
+  withdrawalFee: {
+    currency: "NETZBON",
+    fraction: 10000000,
+    value: 1,
+  },
+  doSelectExchange: {},
+  toBeReceived: {
+    currency: "NETZBON",
+    fraction: 0,
+    value: 1,
+  },
+});
+
+export const WithAlternateCurrenciesEURO11 = tests.createExample(SuccessView, {
+  error: undefined,
+  status: "success",
+  chosenAmount: {
+    currency: "NETZBON",
+    value: 2,
+    fraction: 10000000,
+  },
+  chooseCurrencies: ["NETZBON", "EUR"],
+  selectedCurrency: "EUR",
+  changeCurrency: () => { },
+  conversionInfo: {
+    spec: {
+      name: "EUR"
+    } as CurrencySpecification,
+    amount: {
+      currency: "EUR",
+      fraction: 10000000,
+      value: 2,
+    }
+  },
+  doWithdrawal: { onClick: nullFunction },
+  currentExchange: {
+    exchangeBaseUrl: "https://exchange.netzbon.ch",
+    tos: {},
+  } as Partial<ExchangeListItem> as any,
+  withdrawalFee: {
+    currency: "NETZBON",
+    fraction: 10000000,
+    value: 1,
+  },
+  doSelectExchange: {},
+  toBeReceived: {
+    currency: "NETZBON",
     fraction: 0,
     value: 1,
   },
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index aa8b58707..d732e60e2 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -39,8 +39,7 @@ export function SuccessView(state: State.Success): VNode {
   const { i18n } = useTranslationContext();
   const currentTosVersionIsAccepted =
     state.currentExchange.tosStatus === ExchangeTosStatus.Accepted;
-    const altCurrencies = state.accounts.filter(a => !!a.currencySpecification).map(a => a.currencySpecification!.name)
-    return (
+  return (
     <Fragment>
       <section style={{ textAlign: "left" }}>
         <Part
@@ -67,25 +66,27 @@ export function SuccessView(state: State.Success): VNode {
           kind="neutral"
           big
         />
-        <p>
-          This exchange allows alternative currency
-        </p>
-        <p>
-            <Button
-              variant="outlined"
-            >
-              EUR
-            </Button>
-            <Button
-              variant="outlined"
-            >
-              ARS
-            </Button>
-          </p>
+        {state.chooseCurrencies.length > 0 ?
+          <Fragment>
+            <p>
+              {state.chooseCurrencies.map(currency => {
+                return <Button variant={currency === state.selectedCurrency ? "contained" : "outlined"}
+                  onClick={async () => {
+                    state.changeCurrency(currency)
+                  }}
+                >
+                  {currency}
+                </Button>
+              })}
+            </p>
+          </Fragment>
+          : <Fragment />}
+
         <Part
           title={i18n.str`Details`}
           text={
             <WithdrawDetails
+              conversion={state.conversionInfo?.amount}
               amount={getAmountWithFee(
                 state.toBeReceived,
                 state.chosenAmount,