1 files changed, 83 insertions, 7 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
index b76543b46..b6d4f4cc2 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
@@ -14,9 +14,9 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts } from "@gnu-taler/taler-util";
+import { Amounts, TransactionType } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
@@ -34,19 +34,77 @@ export function useComponentState(props: Props): RecursiveState<State> {
 
   const hook = useAsyncAsHook(async () => {
     if (!parsedInitialAmount) return undefined;
-    const resp = await api.wallet.call(WalletApiOperation.GetBalanceDetail, {
+    const balance = await api.wallet.call(WalletApiOperation.GetBalanceDetail, {
       currency: parsedInitialAmount.currency,
     });
-    return resp;
+    return { balance };
   });
 
-  const total = hook && !hook.hasError ? hook.response : undefined;
+  const info = hook && !hook.hasError ? hook.response : undefined;
 
   // const initialCurrency = parsedInitialAmount?.currency;
 
   const [amount, setAmount] = useState(
     !parsedInitialAmount ? undefined : parsedInitialAmount,
   );
+  const [rawMode, setRawMode] = useState(false);
+
+  const [fee, setFee] = useState<any>({});
+  useEffect(() => {
+    if (!amount) return;
+
+    // const type = TransactionType.Deposit
+    [
+      TransactionType.Deposit as const,
+      TransactionType.Withdrawal as const,
+    ].forEach((type) => {
+      Promise.all([
+        api.wallet.call(WalletApiOperation.GetPlanForOperation, {
+          type,
+          mode: "effective",
+          account: "payto://iban/DE123",
+          instructedAmount: Amounts.stringify(amount),
+        }),
+        api.wallet.call(WalletApiOperation.GetPlanForOperation, {
+          type,
+          mode: "raw",
+          account: "payto://iban/DE123",
+          instructedAmount: Amounts.stringify(amount),
+        }),
+      ]).then(([effective1, raw1]) => {
+        Promise.all([
+          api.wallet.call(WalletApiOperation.GetPlanForOperation, {
+            type,
+            mode: "raw",
+            instructedAmount: effective1.rawAmount,
+            account: "payto://iban/DE123",
+          }),
+          api.wallet.call(WalletApiOperation.GetPlanForOperation, {
+            type,
+            mode: "effective",
+            instructedAmount: raw1.effectiveAmount,
+            account: "payto://iban/DE123",
+          }),
+        ]).then(([effective2, raw2]) => {
+          setFee({
+            ...fee,
+            [type]: {
+              effective: effective1,
+              raw: raw1,
+              // effective: {
+              //   // first: effective1,
+              //   // second: effective2,
+              // },
+              // raw: {
+              //   // first: raw1,
+              //   // second: raw2,
+              // },
+            },
+          });
+        });
+      });
+    });
+  }, [amount?.value, amount?.fraction, rawMode]);
 
   //FIXME: get this information from wallet
   // eslint-disable-next-line no-constant-condition
@@ -118,6 +176,15 @@ export function useComponentState(props: Props): RecursiveState<State> {
       return {
         status: "ready",
         error: undefined,
+        amounts: fee,
+        mode: {
+          button: {
+            onClick: pushAlertOnError(async () => {
+              setRawMode(!rawMode);
+            }),
+          },
+          value: rawMode,
+        },
         previous,
         selectCurrency: {
           onClick: pushAlertOnError(async () => {
@@ -133,10 +200,10 @@ export function useComponentState(props: Props): RecursiveState<State> {
         },
         sendAll: {
           onClick:
-            total === undefined
+            info === undefined
               ? undefined
               : pushAlertOnError(async () => {
-                  setAmount(total.balanceMerchantDepositable);
+                  setAmount(info.balance.balanceMerchantDepositable);
                 }),
         },
         goToWallet: {
@@ -156,7 +223,16 @@ export function useComponentState(props: Props): RecursiveState<State> {
       return {
         status: "ready",
         error: undefined,
+        amounts: fee,
         previous,
+        mode: {
+          button: {
+            onClick: pushAlertOnError(async () => {
+              setRawMode(!rawMode);
+            }),
+          },
+          value: rawMode,
+        },
         selectCurrency: {
           onClick: pushAlertOnError(async () => {
             setAmount(undefined);