From 2e71117f59e0ae6106930e705ae6a54a9839281b Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 23 Dec 2021 15:17:36 -0300
Subject: deposit from wallet webex: wip

---
 .../src/NavigationBar.tsx                          |   1 +
 .../src/components/BalanceTable.tsx                |  18 +-
 .../src/components/styled/index.tsx                |   4 +
 .../src/popup/BalancePage.tsx                      |  24 ++-
 .../src/popup/DeveloperPage.tsx                    |  68 ++++--
 .../src/popupEntryPoint.tsx                        |   4 +
 .../src/wallet/BalancePage.tsx                     |  42 ++--
 .../src/wallet/DepositPage.stories.tsx             |  52 +++++
 .../src/wallet/DepositPage.tsx                     | 234 +++++++++++++++++++++
 .../src/wallet/Transaction.tsx                     |  10 +-
 .../src/walletEntryPoint.tsx                       |   8 +
 packages/taler-wallet-webextension/src/wxApi.ts    |  23 +-
 12 files changed, 440 insertions(+), 48 deletions(-)
 create mode 100644 packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
 create mode 100644 packages/taler-wallet-webextension/src/wallet/DepositPage.tsx

(limited to 'packages/taler-wallet-webextension')

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 8dc73efdb..e7108679c 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -34,6 +34,7 @@ export enum Pages {
   welcome = "/welcome",
   balance = "/balance",
   manual_withdraw = "/manual-withdraw",
+  deposit = "/deposit/:currency",
   settings = "/settings",
   dev = "/dev",
   cta = "/cta",
diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
index e1c19cc23..cf396e129 100644
--- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
+++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
@@ -16,9 +16,18 @@
 
 import { amountFractionalBase, Amounts, Balance } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
-import { TableWithRoundRows as TableWithRoundedRows } from "./styled/index";
+import {
+  ButtonPrimary,
+  TableWithRoundRows as TableWithRoundedRows,
+} from "./styled/index";
 
-export function BalanceTable({ balances }: { balances: Balance[] }): VNode {
+export function BalanceTable({
+  balances,
+  goToWalletDeposit,
+}: {
+  balances: Balance[];
+  goToWalletDeposit: (currency: string) => void;
+}): VNode {
   const currencyFormatter = new Intl.NumberFormat("en-US");
   return (
     <TableWithRoundedRows>
@@ -40,6 +49,11 @@ export function BalanceTable({ balances }: { balances: Balance[] }): VNode {
             >
               {v}
             </td>
+            <td>
+              <ButtonPrimary onClick={() => goToWalletDeposit(av.currency)}>
+                Deposit
+              </ButtonPrimary>
+            </td>
           </tr>
         );
       })}
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index a5c9f2837..216a1fabc 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -716,6 +716,10 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>`
   }
 `;
 
+export const ErrorText = styled.div`
+  color: red;
+`;
+
 export const ErrorBox = styled.div`
   border: 2px solid #f5c6cb;
   border-radius: 0.25em;
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 33164783d..40499b87c 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -21,18 +21,21 @@ import { ButtonPrimary, ErrorBox } from "../components/styled/index";
 import { HookResponse, useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
-
+interface Props {
+  goToWalletDeposit: (currency: string) => void;
+  goToWalletManualWithdraw: () => void;
+}
 export function BalancePage({
   goToWalletManualWithdraw,
-}: {
-  goToWalletManualWithdraw: () => void;
-}): VNode {
+  goToWalletDeposit,
+}: Props): VNode {
   const state = useAsyncAsHook(wxApi.getBalance);
   return (
     <BalanceView
       balance={state}
       Linker={PageLink}
       goToWalletManualWithdraw={goToWalletManualWithdraw}
+      goToWalletDeposit={goToWalletDeposit}
     />
   );
 }
@@ -40,12 +43,14 @@ export interface BalanceViewProps {
   balance: HookResponse<BalancesResponse>;
   Linker: typeof PageLink;
   goToWalletManualWithdraw: () => void;
+  goToWalletDeposit: (currency: string) => void;
 }
 
 export function BalanceView({
   balance,
   Linker,
   goToWalletManualWithdraw,
+  goToWalletDeposit,
 }: BalanceViewProps): VNode {
   if (!balance) {
     return <div>Loading...</div>;
@@ -71,7 +76,8 @@ export function BalanceView({
             <Linker pageName="/welcome">help</Linker> getting started?
           </i18n.Translate>
         </p>
-        <footer style={{ justifyContent: "space-around" }}>
+        <footer style={{ justifyContent: "space-between" }}>
+          <div />
           <ButtonPrimary onClick={goToWalletManualWithdraw}>
             Withdraw
           </ButtonPrimary>
@@ -83,9 +89,13 @@ export function BalanceView({
   return (
     <Fragment>
       <section>
-        <BalanceTable balances={balance.response.balances} />
+        <BalanceTable
+          balances={balance.response.balances}
+          goToWalletDeposit={goToWalletDeposit}
+        />
       </section>
-      <footer style={{ justifyContent: "space-around" }}>
+      <footer style={{ justifyContent: "space-between" }}>
+        <div />
         <ButtonPrimary onClick={goToWalletManualWithdraw}>
           Withdraw
         </ButtonPrimary>
diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
index b32555248..b689004cc 100644
--- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
@@ -43,14 +43,17 @@ export function DeveloperPage(): VNode {
       ? []
       : operationsResponse.response.pendingOperations;
 
-  return <View status={status} 
-    timedOut={timedOut} 
-    operations={operations} 
-    onDownloadDatabase={async () => {
-      const db = await wxApi.exportDB()
-      return JSON.stringify(db)
-    }}
-  />;
+  return (
+    <View
+      status={status}
+      timedOut={timedOut}
+      operations={operations}
+      onDownloadDatabase={async () => {
+        const db = await wxApi.exportDB();
+        return JSON.stringify(db);
+      }}
+    />
+  );
 }
 
 export interface Props {
@@ -64,14 +67,21 @@ function hashObjectId(o: any): string {
   return JSON.stringify(o);
 }
 
-export function View({ status, timedOut, operations, onDownloadDatabase }: Props): VNode {
-  const [downloadedDatabase, setDownloadedDatabase] = useState<{time: Date; content: string}|undefined>(undefined)
+export function View({
+  status,
+  timedOut,
+  operations,
+  onDownloadDatabase,
+}: Props): VNode {
+  const [downloadedDatabase, setDownloadedDatabase] = useState<
+    { time: Date; content: string } | undefined
+  >(undefined);
   async function onExportDatabase(): Promise<void> {
-    const content = await onDownloadDatabase()
+    const content = await onDownloadDatabase();
     setDownloadedDatabase({
       time: new Date(),
-      content
-    })
+      content,
+    });
   }
   return (
     <div>
@@ -83,9 +93,27 @@ export function View({ status, timedOut, operations, onDownloadDatabase }: Props
       <button onClick={confirmReset}>reset</button>
       <br />
       <button onClick={onExportDatabase}>export database</button>
-      {downloadedDatabase && <div>
-        Database exported at <Time timestamp={{t_ms: downloadedDatabase.time.getTime()}} format="yyyy/MM/dd HH:mm:ss" /> <a href={`data:text/plain;charset=utf-8;base64,${btoa(downloadedDatabase.content)}`} download={`taler-wallet-database-${format(downloadedDatabase.time, 'yyyy/MM/dd_HH:mm')}.json`}>click here</a> to download
-        </div>}
+      {downloadedDatabase && (
+        <div>
+          Database exported at
+          <Time
+            timestamp={{ t_ms: downloadedDatabase.time.getTime() }}
+            format="yyyy/MM/dd HH:mm:ss"
+          />
+          <a
+            href={`data:text/plain;charset=utf-8;base64,${toBase64(
+              downloadedDatabase.content,
+            )}`}
+            download={`taler-wallet-database-${format(
+              downloadedDatabase.time,
+              "yyyy/MM/dd_HH:mm",
+            )}.json`}
+          >
+            click here
+          </a>
+          to download
+        </div>
+      )}
       <br />
       <Diagnostics diagnostics={status} timedOut={timedOut} />
       {operations && operations.length > 0 && (
@@ -109,6 +137,14 @@ export function View({ status, timedOut, operations, onDownloadDatabase }: Props
   );
 }
 
+function toBase64(str: string): string {
+  return btoa(
+    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+      return String.fromCharCode(parseInt(p1, 16));
+    }),
+  );
+}
+
 export function reload(): void {
   try {
     // eslint-disable-next-line no-undef
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index 568913753..ac1872fb1 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -84,6 +84,9 @@ function Application() {
               goToWalletManualWithdraw={() =>
                 goToWalletPage(Pages.manual_withdraw)
               }
+              goToWalletDeposit={(currency: string) =>
+                goToWalletPage(Pages.deposit.replace(":currency", currency))
+              }
             />
             <Route path={Pages.settings} component={SettingsPage} />
             <Route
@@ -107,6 +110,7 @@ function Application() {
             />
 
             <Route path={Pages.history} component={HistoryPage} />
+
             <Route
               path={Pages.backup}
               component={BackupPage}
diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
index 0a8910646..52edbbe51 100644
--- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
@@ -24,7 +24,9 @@ import * as wxApi from "../wxApi";
 
 export function BalancePage({
   goToWalletManualWithdraw,
+  goToWalletDeposit,
 }: {
+  goToWalletDeposit: (currency: string) => void;
   goToWalletManualWithdraw: () => void;
 }): VNode {
   const state = useAsyncAsHook(wxApi.getBalance);
@@ -33,6 +35,7 @@ export function BalancePage({
       balance={state}
       Linker={PageLink}
       goToWalletManualWithdraw={goToWalletManualWithdraw}
+      goToWalletDeposit={goToWalletDeposit}
     />
   );
 }
@@ -41,12 +44,14 @@ export interface BalanceViewProps {
   balance: HookResponse<BalancesResponse>;
   Linker: typeof PageLink;
   goToWalletManualWithdraw: () => void;
+  goToWalletDeposit: (currency: string) => void;
 }
 
 export function BalanceView({
   balance,
   Linker,
   goToWalletManualWithdraw,
+  goToWalletDeposit,
 }: BalanceViewProps): VNode {
   if (!balance) {
     return <div>Loading...</div>;
@@ -65,28 +70,35 @@ export function BalanceView({
   }
   if (balance.response.balances.length === 0) {
     return (
-      <p>
-        <Centered style={{ marginTop: 100 }}>
-          <i18n.Translate>
-            You have no balance to show. Need some{" "}
-            <Linker pageName="/welcome">help</Linker> getting started?
-          </i18n.Translate>
-          <div>
-            <ButtonPrimary onClick={goToWalletManualWithdraw}>
-              Withdraw
-            </ButtonPrimary>
-          </div>
-        </Centered>
-      </p>
+      <Fragment>
+        <p>
+          <Centered style={{ marginTop: 100 }}>
+            <i18n.Translate>
+              You have no balance to show. Need some{" "}
+              <Linker pageName="/welcome">help</Linker> getting started?
+            </i18n.Translate>
+          </Centered>
+        </p>
+        <footer style={{ justifyContent: "space-between" }}>
+          <div />
+          <ButtonPrimary onClick={goToWalletManualWithdraw}>
+            Withdraw
+          </ButtonPrimary>
+        </footer>
+      </Fragment>
     );
   }
 
   return (
     <Fragment>
       <section>
-        <BalanceTable balances={balance.response.balances} />
+        <BalanceTable
+          balances={balance.response.balances}
+          goToWalletDeposit={goToWalletDeposit}
+        />
       </section>
-      <footer style={{ justifyContent: "space-around" }}>
+      <footer style={{ justifyContent: "space-between" }}>
+        <div />
         <ButtonPrimary onClick={goToWalletManualWithdraw}>
           Withdraw
         </ButtonPrimary>
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
new file mode 100644
index 000000000..346b85d4f
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
@@ -0,0 +1,52 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { AmountJson, Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
+import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
+import { createExample } from "../test-utils";
+import { View as TestedComponent } from "./DepositPage";
+
+export default {
+  title: "wallet/deposit",
+  component: TestedComponent,
+  argTypes: {},
+};
+
+async function alwaysReturnFeeToOne(): Promise<DepositFee> {
+  const fee = {
+    currency: "EUR",
+    value: 1,
+    fraction: 0,
+  };
+  return { coin: fee, refresh: fee, wire: fee };
+}
+
+export const WithEmptyAccountList = createExample(TestedComponent, {
+  knownBankAccounts: [],
+  balance: Amounts.parseOrThrow("USD:10"),
+  onCalculateFee: alwaysReturnFeeToOne,
+});
+
+export const WithSomeBankAccounts = createExample(TestedComponent, {
+  knownBankAccounts: [parsePaytoUri("payto://iban/ES8877998399652238")!],
+  balance: Amounts.parseOrThrow("EUR:10"),
+  onCalculateFee: alwaysReturnFeeToOne,
+});
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
new file mode 100644
index 000000000..d4759c537
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -0,0 +1,234 @@
+/*
+ This file is part of TALER
+ (C) 2016 GNUnet e.V.
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+*/
+
+import {
+  AmountJson,
+  Amounts,
+  AmountString,
+  PaytoUri,
+} from "@gnu-taler/taler-util";
+import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
+import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { Part } from "../components/Part";
+import { SelectList } from "../components/SelectList";
+import {
+  ButtonPrimary,
+  ErrorText,
+  Input,
+  InputWithLabel,
+} from "../components/styled";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import * as wxApi from "../wxApi";
+
+interface Props {
+  currency: string;
+}
+export function DepositPage({ currency }: Props): VNode {
+  const [success, setSuccess] = useState(false);
+
+  const state = useAsyncAsHook(async () => {
+    const balance = await wxApi.getBalance();
+    const bs = balance.balances.filter((b) => b.available.startsWith(currency));
+    const currencyBalance =
+      bs.length === 0
+        ? Amounts.getZero(currency)
+        : Amounts.parseOrThrow(bs[0].available);
+    const knownAccounts = await wxApi.listKnownBankAccounts(currency);
+    return { accounts: knownAccounts.accounts, currencyBalance };
+  });
+
+  const accounts =
+    state === undefined ? [] : state.hasError ? [] : state.response.accounts;
+
+  const currencyBalance =
+    state === undefined
+      ? Amounts.getZero(currency)
+      : state.hasError
+      ? Amounts.getZero(currency)
+      : state.response.currencyBalance;
+
+  async function doSend(account: string, amount: AmountString): Promise<void> {
+    await wxApi.createDepositGroup(account, amount);
+    setSuccess(true);
+  }
+
+  async function getFeeForAmount(
+    account: string,
+    amount: AmountString,
+  ): Promise<DepositFee> {
+    return await wxApi.getFeeForDeposit(account, amount);
+  }
+
+  if (accounts.length === 0) return <div>loading..</div>;
+  if (success) return <div>deposit created</div>;
+  return (
+    <View
+      knownBankAccounts={accounts}
+      balance={currencyBalance}
+      onSend={doSend}
+      onCalculateFee={getFeeForAmount}
+    />
+  );
+}
+
+interface ViewProps {
+  knownBankAccounts: Array<PaytoUri>;
+  balance: AmountJson;
+  onSend: (account: string, amount: AmountString) => Promise<void>;
+  onCalculateFee: (
+    account: string,
+    amount: AmountString,
+  ) => Promise<DepositFee>;
+}
+
+export function View({
+  knownBankAccounts,
+  balance,
+  onSend,
+  onCalculateFee,
+}: ViewProps): VNode {
+  const accountMap = createLabelsForBankAccount(knownBankAccounts);
+  const [accountIdx, setAccountIdx] = useState(0);
+  const [amount, setAmount] = useState<number | undefined>(undefined);
+  const [fee, setFee] = useState<DepositFee | undefined>(undefined);
+  const currency = balance.currency;
+  const amountStr: AmountString = `${currency}:${amount}`;
+
+  const account = knownBankAccounts[accountIdx];
+  const accountURI = `payto://${account.targetType}/${account.targetPath}`;
+  useEffect(() => {
+    if (amount === undefined) return;
+    onCalculateFee(accountURI, amountStr).then((result) => {
+      setFee(result);
+    });
+  }, [amount]);
+
+  if (!balance) {
+    return <div>no balance</div>;
+  }
+  if (!knownBankAccounts || !knownBankAccounts.length) {
+    return <div>there is no known bank account to send money to</div>;
+  }
+  const parsedAmount =
+    amount === undefined ? undefined : Amounts.parse(amountStr);
+  const isDirty = amount !== 0;
+  const error = !isDirty
+    ? undefined
+    : !parsedAmount
+    ? "Invalid amount"
+    : Amounts.cmp(balance, parsedAmount) === -1
+    ? `To much, your current balance is ${balance.value}`
+    : undefined;
+
+  return (
+    <Fragment>
+      <h2>Send {currency} to your account</h2>
+      <section>
+        <Input>
+          <SelectList
+            label="Bank account IBAN number"
+            list={accountMap}
+            name="account"
+            value={String(accountIdx)}
+            onChange={(s) => setAccountIdx(parseInt(s, 10))}
+          />
+        </Input>
+        <InputWithLabel invalid={!!error}>
+          <label>Amount to send</label>
+          <div>
+            <span>{currency}</span>
+            <input
+              type="number"
+              value={amount}
+              onInput={(e) => {
+                const num = parseFloat(e.currentTarget.value);
+                console.log(num);
+                if (!Number.isNaN(num)) {
+                  setAmount(num);
+                } else {
+                  setAmount(undefined);
+                  setFee(undefined);
+                }
+              }}
+            />
+          </div>
+          {error && <ErrorText>{error}</ErrorText>}
+        </InputWithLabel>
+        {!error && fee && (
+          <div style={{ textAlign: "center" }}>
+            <Part
+              title="Exchange fee"
+              text={Amounts.stringify(Amounts.sum([fee.wire, fee.coin]).amount)}
+              kind="negative"
+            />
+            <Part
+              title="Change cost"
+              text={Amounts.stringify(fee.refresh)}
+              kind="negative"
+            />
+            {parsedAmount && (
+              <Part
+                title="Total received"
+                text={Amounts.stringify(
+                  Amounts.sub(
+                    parsedAmount,
+                    Amounts.sum([fee.wire, fee.coin]).amount,
+                  ).amount,
+                )}
+                kind="positive"
+              />
+            )}
+          </div>
+        )}
+      </section>
+      <footer>
+        <div />
+        <ButtonPrimary
+          disabled={!parsedAmount}
+          onClick={() => onSend(accountURI, amountStr)}
+        >
+          Send
+        </ButtonPrimary>
+      </footer>
+    </Fragment>
+  );
+}
+
+function createLabelsForBankAccount(knownBankAccounts: Array<PaytoUri>): {
+  [label: number]: string;
+} {
+  if (!knownBankAccounts) return {};
+  return knownBankAccounts.reduce((prev, cur, i) => {
+    let label = cur.targetPath;
+    if (cur.isKnown) {
+      switch (cur.targetType) {
+        case "x-taler-bank": {
+          label = cur.account;
+          break;
+        }
+        case "iban": {
+          label = cur.iban;
+          break;
+        }
+      }
+    }
+    return {
+      ...prev,
+      [i]: label,
+    };
+  }, {} as { [label: number]: string });
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 22947d0c4..8172e02a2 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -369,8 +369,8 @@ export function TransactionView({
 
   if (transaction.type === TransactionType.Deposit) {
     const fee = Amounts.sub(
-      Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
+      Amounts.parseOrThrow(transaction.amountRaw),
     ).amount;
     return (
       <TransactionTemplate>
@@ -379,15 +379,15 @@ export function TransactionView({
         <br />
         <Part
           big
-          title="Total deposit"
+          title="Total send"
           text={amountToString(transaction.amountEffective)}
-          kind="negative"
+          kind="neutral"
         />
         <Part
           big
-          title="Purchase amount"
+          title="Deposit amount"
           text={amountToString(transaction.amountRaw)}
-          kind="neutral"
+          kind="positive"
         />
         <Part big title="Fee" text={amountToString(fee)} kind="negative" />
       </TransactionTemplate>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index 714e3fe5a..a38add3ca 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -45,6 +45,7 @@ import { WalletBox } from "./components/styled";
 import { ProviderDetailPage } from "./wallet/ProviderDetailPage";
 import { ProviderAddPage } from "./wallet/ProviderAddPage";
 import { ExchangeAddPage } from "./wallet/ExchangeAddPage";
+import { DepositPage } from "./wallet/DepositPage";
 
 function main(): void {
   try {
@@ -105,6 +106,9 @@ function Application(): VNode {
             path={Pages.balance}
             component={withLogoAndNavBar(BalancePage)}
             goToWalletManualWithdraw={() => route(Pages.manual_withdraw)}
+            goToWalletDeposit={(currency: string) =>
+              route(Pages.deposit.replace(":currency", currency))
+            }
           />
           <Route
             path={Pages.settings}
@@ -145,6 +149,10 @@ function Application(): VNode {
             component={withLogoAndNavBar(ManualWithdrawPage)}
           />
 
+          <Route
+            path={Pages.deposit}
+            component={withLogoAndNavBar(DepositPage)}
+          />
           <Route
             path={Pages.reset_required}
             component={() => <div>no yet implemented</div>}
diff --git a/packages/taler-wallet-webextension/src/wxApi.ts b/packages/taler-wallet-webextension/src/wxApi.ts
index 4d8b932d3..64a506c13 100644
--- a/packages/taler-wallet-webextension/src/wxApi.ts
+++ b/packages/taler-wallet-webextension/src/wxApi.ts
@@ -24,10 +24,11 @@
 import {
   AcceptExchangeTosRequest,
   AcceptManualWithdrawalResult, AcceptTipRequest, AcceptWithdrawalResponse,
-  AddExchangeRequest, ApplyRefundResponse, BalancesResponse, ConfirmPayResult,
-  CoreApiResponse, DeleteTransactionRequest, ExchangesListRespose,
+  AddExchangeRequest, AmountJson, AmountString, ApplyRefundResponse, BalancesResponse, ConfirmPayResult,
+  CoreApiResponse, CreateDepositGroupRequest, CreateDepositGroupResponse, DeleteTransactionRequest, ExchangesListRespose,
   GetExchangeTosResult, GetExchangeWithdrawalInfo,
-  GetWithdrawalDetailsForUriRequest, NotificationType, PreparePayResult, PrepareTipRequest,
+  GetFeeForDepositRequest,
+  GetWithdrawalDetailsForUriRequest, KnownBankAccounts, NotificationType, PreparePayResult, PrepareTipRequest,
   PrepareTipResult, RetryTransactionRequest,
   SetWalletDeviceIdRequest, TransactionsResponse, WalletDiagnostics, WithdrawUriInfoResponse
 } from "@gnu-taler/taler-util";
@@ -36,6 +37,7 @@ import {
   PendingOperationsResponse,
   RemoveBackupProviderRequest
 } from "@gnu-taler/taler-wallet-core";
+import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { ExchangeWithdrawDetails } from "@gnu-taler/taler-wallet-core/src/operations/withdraw";
 import { MessageFromBackend } from "./wxBackend.js";
 
@@ -119,6 +121,18 @@ export function resetDb(): Promise<void> {
   return callBackend("reset-db", {});
 }
 
+export function getFeeForDeposit(depositPaytoUri: string, amount: AmountString): Promise<DepositFee> {
+  return callBackend("getFeeForDeposit", {
+    depositPaytoUri, amount
+  } as GetFeeForDepositRequest);
+}
+
+export function createDepositGroup(depositPaytoUri: string, amount: AmountString): Promise<CreateDepositGroupResponse> {
+  return callBackend("createDepositGroup", {
+    depositPaytoUri, amount
+  } as CreateDepositGroupRequest);
+}
+
 /**
  * Get balances for all currencies/exchanges.
  */
@@ -170,6 +184,9 @@ export function listKnownCurrencies(): Promise<ListOfKnownCurrencies> {
 export function listExchanges(): Promise<ExchangesListRespose> {
   return callBackend("listExchanges", {});
 }
+export function listKnownBankAccounts(currency?: string): Promise<KnownBankAccounts> {
+  return callBackend("listKnownBankAccounts", { currency });
+}
 
 /**
  * Get information about the current state of wallet backups.
-- 
cgit v1.2.3