showing off information about operation plan

2023-06-13 16:46:31 -03:00 · 2023-06-13 16:46:31 -03:00 · 4e7967dbac
commit 4e7967dbac
parent 8b74bda065
5 changed files with 144 additions and 27 deletions
--- a/packages/taler-wallet-webextension/src/pwa/index.html
+++ b/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"
-      height="100%"
+      style="height: calc(100% - 30px)"
+      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">
+    <div class="overlay" id="popup-overlay" onclick="closePopup()">
+      
      <iframe
-        id="popup-window"
-        name="popup"
-        src="about:blank"
-        width="500"
-        height="325"
+      id="popup-window"
+      name="popup"
+      src="about:blank"
+      width="500"
+      height="325"
      >
      </iframe>
    </div>
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
+++ b/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;
  }
 }

--- 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);
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
+++ b/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
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx
+++ b/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) =>
-          queryToSlashKeys<TalerConfigResponse>(url)
-            .then((config) => {
-              setVerifying({ url, config });
-            })
-            .catch((e) => e.message)
+        onConfirm={
+          async (url) => {
+            setVerifying({
+              url,
+              config: {
+                name: "1",
+                version: "15:0:0",
+                currency: "ARS",
+              },
+            });
+            return undefined;
+          }
+          // queryToSlashKeys<TalerConfigResponse>(url)
+          //   .then((config) => {
+          //     setVerifying({ url, config });
+          //   })
+          //   .catch((e) => e.message)
        }
      />
    );