showing off information about operation plan

packages/taler-wallet-webextension/src/pwa/index.html

@@ -23,7 +23,6 @@
       function openPopup() {
         document.getElementById("popup-overlay").style.display = "flex";
         window.frames["popup"].location = "popup.html";
-        window.frames["popup"];
       }
       function closePopup() {
         document.getElementById("popup-overlay").style.display = "none";
@@ -37,6 +36,9 @@
       function closeWallet() {
         redirectWallet("about:blank");
       }
+      function reloadWallet() {
+        window.frames["wallet"].location.reload()
+      }
       function openPage() {
         window.frames["other"].location =
           document.getElementById("page-url").value;
@@ -44,15 +46,19 @@
     </script>
     <button value="asd" onclick="openPopup()">open popup</button>
     <button value="asd" onclick="closeWallet();openWallet()">
-      reload wallet page
+      restart
+    </button>
+    <button value="asd" onclick="reloadWallet()">
+      refresh
     </button>
     <br />
     <iframe
       id="wallet-window"
       name="wallet"
       src="wallet.html"
-      width="1000"
+      style="height: calc(100% - 30px)"
-      height="100%"
+      width="850"
+      height="90%"
     >
     </iframe>
     <!-- <input id="page-url" type="text" />
@@ -70,14 +76,14 @@
       height="325"
     >
     </iframe> -->
-    <hr />
+    <div class="overlay" id="popup-overlay" onclick="closePopup()">
-    <div class="overlay" id="popup-overlay">
+      
       <iframe
-        id="popup-window"
+      id="popup-window"
-        name="popup"
+      name="popup"
-        src="about:blank"
+      src="about:blank"
-        width="500"
+      width="500"
-        height="325"
+      height="325"
       >
       </iframe>
     </div>

packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts

@@ -17,7 +17,11 @@
 import { ErrorAlertView } from "../../components/CurrentAlerts.js";
 import { Loading } from "../../components/Loading.js";
 import { ErrorAlert } from "../../context/alert.js";
-import { AmountFieldHandler, ButtonHandler } from "../../mui/handlers.js";
+import {
+  AmountFieldHandler,
+  ButtonHandler,
+  ToggleHandler,
+} from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
 import { ReadyView, SelectCurrencyView } from "./views.js";
@@ -71,6 +75,8 @@ export namespace State {
     goToBank: ButtonHandler;
     goToWallet: ButtonHandler;
     amountHandler: AmountFieldHandler;
+    amounts: any;
+    mode: ToggleHandler;
   }
 }
 

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);

packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx

@@ -34,6 +34,8 @@ import arrowIcon from "../../svg/chevron-down.inline.svg";
 import bankIcon from "../../svg/ri-bank-line.inline.svg";
 import { assertUnreachable } from "../../utils/index.js";
 import { Contact, State } from "./index.js";
+import { useEffect } from "preact/hooks";
+import { Checkbox } from "../../components/Checkbox.js";
 
 export function SelectCurrencyView({
   currencies,
@@ -192,6 +194,8 @@ export function ReadyView(props: State.Ready): VNode {
 export function ReadyGetView({
   amountHandler,
   goToBank,
+  amounts,
+  mode,
   goToWallet,
   selectCurrency,
   previous,
@@ -201,14 +205,22 @@ export function ReadyGetView({
   return (
     <Container>
       <h1>
-        <i18n.Translate>Specify the amount and the origin</i18n.Translate>
+        <i18n.Translate>Specify the amount and the origin2</i18n.Translate>
       </h1>
+      <pre>{JSON.stringify(amounts["withdrawal"], undefined, 2)}</pre>
       <Grid container columns={2} justifyContent="space-between">
         <AmountField
           label={i18n.str`Amount`}
           required
           handler={amountHandler}
         />
+        <Checkbox
+          label={i18n.str`Raw mode`}
+          name="rawMode"
+          enabled={mode.value!}
+          onToggle={mode.button.onClick!}
+        />
+
         <Button onClick={selectCurrency.onClick}>
           <i18n.Translate>Change currency</i18n.Translate>
         </Button>
@@ -281,6 +293,7 @@ export function ReadyGetView({
 }
 export function ReadySendView({
   amountHandler,
+  amounts,
   goToBank,
   goToWallet,
   previous,
@@ -293,6 +306,7 @@ export function ReadySendView({
       <h1>
         <i18n.Translate>Specify the amount and the destination</i18n.Translate>
       </h1>
+      <pre>{JSON.stringify(amounts["deposit"], undefined, 2)}</pre>
 
       <Grid container columns={2} justifyContent="space-between">
         <AmountField

packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx

@@ -59,14 +59,29 @@ export function ExchangeAddPage({ currency, onBack }: Props): VNode {
           if (found) {
             throw Error("This exchange is already known");
           }
-          return queryToSlashKeys(url);
+          return {
+            name: "1",
+            version: "15:0:0",
+            currency: "ARS",
+          };
         }}
-        onConfirm={(url) =>
+        onConfirm={
-          queryToSlashKeys<TalerConfigResponse>(url)
+          async (url) => {
-            .then((config) => {
+            setVerifying({
-              setVerifying({ url, config });
+              url,
-            })
+              config: {
-            .catch((e) => e.message)
+                name: "1",
+                version: "15:0:0",
+                currency: "ARS",
+              },
+            });
+            return undefined;
+          }
+          // queryToSlashKeys<TalerConfigResponse>(url)
+          //   .then((config) => {
+          //     setVerifying({ url, config });
+          //   })
+          //   .catch((e) => e.message)
         }
       />
     );