deposit design from belen, feature missing: kyc

8 files changed, 152 insertions, 684 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/AddNewActionView.stories.tsx b/packages/taler-wallet-webextension/src/popup/AddNewActionView.stories.tsx
deleted file mode 100644
index 6ee56ef77..000000000
--- a/packages/taler-wallet-webextension/src/popup/AddNewActionView.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- 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 { createExample } from "../test-utils";
-import { AddNewActionView as TestedComponent } from "./AddNewActionView";
-
-export default {
-  title: "popup/add new action",
-  component: TestedComponent,
-  argTypes: {
-    setDeviceName: () => Promise.resolve(),
-  },
-};
-
-export const Initial = createExample(TestedComponent, {});
diff --git a/packages/taler-wallet-webextension/src/popup/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/popup/AddNewActionView.tsx
deleted file mode 100644
index d4158973e..000000000
--- a/packages/taler-wallet-webextension/src/popup/AddNewActionView.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
-import { useState } from "preact/hooks";
-import { Button, ButtonSuccess, InputWithLabel } from "../components/styled";
-import { actionForTalerUri } from "../utils/index";
-
-export interface Props {
-  onCancel: () => void;
-}
-
-function buttonLabelByTalerType(type: TalerUriType): string {
-  switch (type) {
-    case TalerUriType.TalerNotifyReserve:
-      return "Open reserve page";
-    case TalerUriType.TalerPay:
-      return "Open pay page";
-    case TalerUriType.TalerRefund:
-      return "Open refund page";
-    case TalerUriType.TalerTip:
-      return "Open tip page";
-    case TalerUriType.TalerWithdraw:
-      return "Open withdraw page";
-  }
-  return "";
-}
-
-export function AddNewActionView({ onCancel }: Props): VNode {
-  const [url, setUrl] = useState("");
-  const uriType = classifyTalerUri(url);
-
-  return (
-    <Fragment>
-      <section>
-        <InputWithLabel
-          invalid={url !== "" && uriType === TalerUriType.Unknown}
-        >
-          <label>GNU Taler URI</label>
-          <div>
-            <input
-              style={{ width: "100%" }}
-              type="text"
-              value={url}
-              placeholder="taler://pay/...."
-              onInput={(e) => setUrl(e.currentTarget.value)}
-            />
-          </div>
-        </InputWithLabel>
-      </section>
-      <footer>
-        <Button onClick={onCancel}>Back</Button>
-        {uriType !== TalerUriType.Unknown && (
-          <ButtonSuccess
-            onClick={() => {
-              // eslint-disable-next-line no-undef
-              chrome.tabs.create({ url: actionForTalerUri(uriType, url) });
-            }}
-          >
-            {buttonLabelByTalerType(uriType)}
-          </ButtonSuccess>
-        )}
-      </footer>
-    </Fragment>
-  );
-}
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index a4988cf2d..1af3b5858 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, NullLink } from "../test-utils";
+import { createExample } from "../test-utils";
 import { BalanceView as TestedComponent } from "./BalancePage";
 
 export default {
@@ -28,211 +28,124 @@ export default {
   argTypes: {},
 };
 
-export const NotYetLoaded = createExample(TestedComponent, {});
-
-export const GotError = createExample(TestedComponent, {
-  balance: {
-    hasError: true,
-    message: "Network error",
-  },
-  Linker: NullLink,
-});
-
 export const EmptyBalance = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [],
-    },
-  },
-  Linker: NullLink,
+  balances: [],
 });
 
 export const SomeCoins = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:10.5",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-      ],
+  balances: [
+    {
+      available: "USD:10.5",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
+  ],
 });
 
-export const SomeCoinsAndIncomingMoney = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:2.23",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:5.11",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-      ],
+export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, {
+  balances: [
+    {
+      available: "EUR:1",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
-});
-
-export const SomeCoinsAndOutgoingMoney = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:2.23",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:5.11",
-          requiresUserInput: false,
-        },
-      ],
+    {
+      available: "TESTKUDOS:2000",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
-});
-
-export const SomeCoinsAndMovingMoney = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:2.23",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:2",
-          pendingOutgoing: "USD:5.11",
-          requiresUserInput: false,
-        },
-      ],
+    {
+      available: "JPY:4",
+      hasPendingTransactions: false,
+      pendingIncoming: "EUR:15",
+      pendingOutgoing: "EUR:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
+  ],
 });
 
-export const SomeCoinsInTwoCurrencies = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:2",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:5.1",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "EUR:4",
-          hasPendingTransactions: false,
-          pendingIncoming: "EUR:0",
-          pendingOutgoing: "EUR:3.01",
-          requiresUserInput: false,
-        },
-      ],
+export const NoCoinsInTreeCurrencies = createExample(TestedComponent, {
+  balances: [
+    {
+      available: "EUR:3",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
-});
-
-export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:1",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "TESTKUDOS:2000",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "EUR:4",
-          hasPendingTransactions: false,
-          pendingIncoming: "EUR:15",
-          pendingOutgoing: "EUR:0",
-          requiresUserInput: false,
-        },
-      ],
+    {
+      available: "USD:2",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "ARS:1",
+      hasPendingTransactions: false,
+      pendingIncoming: "EUR:15",
+      pendingOutgoing: "EUR:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
+  ],
 });
 
 export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, {
-  balance: {
-    hasError: false,
-    response: {
-      balances: [
-        {
-          available: "USD:13451",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "EUR:202.02",
-          hasPendingTransactions: false,
-          pendingIncoming: "EUR:0",
-          pendingOutgoing: "EUR:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "ARS:30",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "JPY:51223233",
-          hasPendingTransactions: false,
-          pendingIncoming: "EUR:0",
-          pendingOutgoing: "EUR:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "JPY:51223233",
-          hasPendingTransactions: false,
-          pendingIncoming: "EUR:0",
-          pendingOutgoing: "EUR:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "DEMOKUDOS:6",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:0",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-        {
-          available: "TESTKUDOS:6",
-          hasPendingTransactions: false,
-          pendingIncoming: "USD:5",
-          pendingOutgoing: "USD:0",
-          requiresUserInput: false,
-        },
-      ],
+  balances: [
+    {
+      available: "USD:0",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "ARS:13451",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "EUR:202.02",
+      hasPendingTransactions: false,
+      pendingIncoming: "EUR:0",
+      pendingOutgoing: "EUR:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "JPY:0",
+      hasPendingTransactions: false,
+      pendingIncoming: "EUR:0",
+      pendingOutgoing: "EUR:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "JPY:51223233",
+      hasPendingTransactions: false,
+      pendingIncoming: "EUR:0",
+      pendingOutgoing: "EUR:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "DEMOKUDOS:6",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:0",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
+    },
+    {
+      available: "TESTKUDOS:6",
+      hasPendingTransactions: false,
+      pendingIncoming: "USD:5",
+      pendingOutgoing: "USD:0",
+      requiresUserInput: false,
     },
-  },
-  Linker: NullLink,
+  ],
 });
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 3eb5f4270..014d3b18e 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -14,70 +14,81 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { BalancesResponse, i18n } from "@gnu-taler/taler-util";
+import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BalanceTable } from "../components/BalanceTable";
 import { ButtonPrimary, ErrorBox } from "../components/styled";
-import { HookResponse, useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
+import { MultiActionButton } from "../components/MultiActionButton";
+import { Loading } from "../components/Loading";
+
 interface Props {
   goToWalletDeposit: (currency: string) => void;
+  goToWalletHistory: (currency: string) => void;
   goToWalletManualWithdraw: () => void;
 }
 export function BalancePage({
   goToWalletManualWithdraw,
   goToWalletDeposit,
+  goToWalletHistory,
 }: Props): VNode {
   const state = useAsyncAsHook(wxApi.getBalance);
+  const balances = !state || state.hasError ? [] : state.response.balances;
+
+  if (!state) {
+    return <Loading />;
+  }
+
+  if (state.hasError) {
+    return (
+      <Fragment>
+        <ErrorBox>{state.message}</ErrorBox>
+        <p>
+          Click <PageLink pageName="welcome">here</PageLink> for help and
+          diagnostics.
+        </p>
+      </Fragment>
+    );
+  }
+
   return (
     <BalanceView
-      balance={state}
-      Linker={PageLink}
+      balances={balances}
       goToWalletManualWithdraw={goToWalletManualWithdraw}
       goToWalletDeposit={goToWalletDeposit}
+      goToWalletHistory={goToWalletHistory}
     />
   );
 }
 export interface BalanceViewProps {
-  balance: HookResponse<BalancesResponse>;
-  Linker: typeof PageLink;
+  balances: Balance[];
   goToWalletManualWithdraw: () => void;
   goToWalletDeposit: (currency: string) => void;
+  goToWalletHistory: (currency: string) => void;
 }
 
 export function BalanceView({
-  balance,
-  Linker,
+  balances,
   goToWalletManualWithdraw,
   goToWalletDeposit,
+  goToWalletHistory,
 }: BalanceViewProps): VNode {
-  if (!balance) {
-    return <div>Loading...</div>;
-  }
+  const currencyWithNonZeroAmount = balances
+    .filter((b) => !Amounts.isZero(b.available))
+    .map((b) => b.available.split(":")[0]);
 
-  if (balance.hasError) {
-    return (
-      <Fragment>
-        <ErrorBox>{balance.message}</ErrorBox>
-        <p>
-          Click <Linker pageName="welcome">here</Linker> for help and
-          diagnostics.
-        </p>
-      </Fragment>
-    );
-  }
-  if (balance.response.balances.length === 0) {
+  if (balances.length === 0) {
     return (
       <Fragment>
         <p>
           <i18n.Translate>
             You have no balance to show. Need some{" "}
-            <Linker pageName="/welcome">help</Linker> getting started?
+            <PageLink pageName="/welcome">help</PageLink> getting started?
           </i18n.Translate>
         </p>
         <footer style={{ justifyContent: "space-between" }}>
-          <div />
           <ButtonPrimary onClick={goToWalletManualWithdraw}>
             Withdraw
           </ButtonPrimary>
@@ -90,15 +101,21 @@ export function BalanceView({
     <Fragment>
       <section>
         <BalanceTable
-          balances={balance.response.balances}
-          goToWalletDeposit={goToWalletDeposit}
+          balances={balances}
+          goToWalletHistory={goToWalletHistory}
         />
       </section>
       <footer style={{ justifyContent: "space-between" }}>
-        <div />
         <ButtonPrimary onClick={goToWalletManualWithdraw}>
           Withdraw
         </ButtonPrimary>
+        {currencyWithNonZeroAmount.length > 0 && (
+          <MultiActionButton
+            label={(s) => `Deposit ${s}`}
+            actions={currencyWithNonZeroAmount}
+            onClick={(c) => goToWalletDeposit(c)}
+          />
+        )}
       </footer>
     </Fragment>
   );
diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
index aec288dec..840398a44 100644
--- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
@@ -86,10 +86,6 @@ export function View({
   return (
     <div>
       <p>Debug tools:</p>
-      <button onClick={openExtensionPage("/static/popup.html")}>
-        wallet tab
-      </button>
-
       <button onClick={confirmReset}>reset</button>
       <br />
       <button onClick={onExportDatabase}>export database</button>
@@ -109,7 +105,8 @@ export function View({
               "yyyy/MM/dd_HH:mm",
             )}.json`}
           >
-            click here
+            {" "}
+            click here{" "}
           </a>
           to download
         </div>
diff --git a/packages/taler-wallet-webextension/src/popup/History.stories.tsx b/packages/taler-wallet-webextension/src/popup/History.stories.tsx
deleted file mode 100644
index 43d39da82..000000000
--- a/packages/taler-wallet-webextension/src/popup/History.stories.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-/*
- 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 {
-  PaymentStatus,
-  TransactionCommon,
-  TransactionDeposit,
-  TransactionPayment,
-  TransactionRefresh,
-  TransactionRefund,
-  TransactionTip,
-  TransactionType,
-  TransactionWithdrawal,
-  WithdrawalType,
-} from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
-import { HistoryView as TestedComponent } from "./History";
-
-export default {
-  title: "popup/history/list",
-  component: TestedComponent,
-};
-
-const commonTransaction = {
-  amountRaw: "USD:10",
-  amountEffective: "USD:9",
-  pending: false,
-  timestamp: {
-    t_ms: new Date().getTime(),
-  },
-  transactionId: "12",
-} as TransactionCommon;
-
-const exampleData = {
-  withdraw: {
-    ...commonTransaction,
-    type: TransactionType.Withdrawal,
-    exchangeBaseUrl: "http://exchange.demo.taler.net",
-    withdrawalDetails: {
-      reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-      confirmed: false,
-      exchangePaytoUris: ["payto://x-taler-bank/bank/account"],
-      type: WithdrawalType.ManualTransfer,
-    },
-  } as TransactionWithdrawal,
-  payment: {
-    ...commonTransaction,
-    amountEffective: "USD:11",
-    type: TransactionType.Payment,
-    info: {
-      contractTermsHash: "ASDZXCASD",
-      merchant: {
-        name: "the merchant",
-      },
-      orderId: "2021.167-03NPY6MCYMVGT",
-      products: [],
-      summary: "the summary",
-      fulfillmentMessage: "",
-    },
-    proposalId: "1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0",
-    status: PaymentStatus.Accepted,
-  } as TransactionPayment,
-  deposit: {
-    ...commonTransaction,
-    type: TransactionType.Deposit,
-    depositGroupId: "#groupId",
-    targetPaytoUri: "payto://x-taler-bank/bank/account",
-  } as TransactionDeposit,
-  refresh: {
-    ...commonTransaction,
-    type: TransactionType.Refresh,
-    exchangeBaseUrl: "http://exchange.taler",
-  } as TransactionRefresh,
-  tip: {
-    ...commonTransaction,
-    type: TransactionType.Tip,
-    merchantBaseUrl: "http://merchant.taler",
-  } as TransactionTip,
-  refund: {
-    ...commonTransaction,
-    type: TransactionType.Refund,
-    refundedTransactionId:
-      "payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0",
-    info: {
-      contractTermsHash: "ASDZXCASD",
-      merchant: {
-        name: "the merchant",
-      },
-      orderId: "2021.167-03NPY6MCYMVGT",
-      products: [],
-      summary: "the summary",
-      fulfillmentMessage: "",
-    },
-  } as TransactionRefund,
-};
-
-export const EmptyWithBalance = createExample(TestedComponent, {
-  list: [],
-  balances: [
-    {
-      available: "TESTKUDOS:10",
-      pendingIncoming: "TESTKUDOS:0",
-      pendingOutgoing: "TESTKUDOS:0",
-      hasPendingTransactions: false,
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const EmptyWithNoBalance = createExample(TestedComponent, {
-  list: [],
-  balances: [],
-});
-
-export const One = createExample(TestedComponent, {
-  list: [exampleData.withdraw],
-  balances: [
-    {
-      available: "USD:10",
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      hasPendingTransactions: false,
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const OnePending = createExample(TestedComponent, {
-  list: [
-    {
-      ...exampleData.withdraw,
-      pending: true,
-    },
-  ],
-  balances: [
-    {
-      available: "USD:10",
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      hasPendingTransactions: false,
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const Several = createExample(TestedComponent, {
-  list: [
-    exampleData.withdraw,
-    exampleData.payment,
-    exampleData.withdraw,
-    exampleData.payment,
-    exampleData.refresh,
-    exampleData.refund,
-    exampleData.tip,
-    exampleData.deposit,
-  ],
-  balances: [
-    {
-      available: "TESTKUDOS:10",
-      pendingIncoming: "TESTKUDOS:0",
-      pendingOutgoing: "TESTKUDOS:0",
-      hasPendingTransactions: false,
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const SeveralWithTwoCurrencies = createExample(TestedComponent, {
-  list: [
-    exampleData.withdraw,
-    exampleData.payment,
-    exampleData.withdraw,
-    exampleData.payment,
-    exampleData.refresh,
-    exampleData.refund,
-    exampleData.tip,
-    exampleData.deposit,
-  ],
-  balances: [
-    {
-      available: "TESTKUDOS:10",
-      pendingIncoming: "TESTKUDOS:0",
-      pendingOutgoing: "TESTKUDOS:0",
-      hasPendingTransactions: false,
-      requiresUserInput: false,
-    },
-    {
-      available: "USD:10",
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      hasPendingTransactions: false,
-      requiresUserInput: false,
-    },
-  ],
-});
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx
deleted file mode 100644
index 2dfddb8c4..000000000
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- 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 {
-  AmountString,
-  Balance,
-  i18n,
-  Transaction,
-  TransactionsResponse,
-} from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { ButtonPrimary } from "../components/styled";
-import { TransactionItem } from "../components/TransactionItem";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
-import * as wxApi from "../wxApi";
-import { AddNewActionView } from "./AddNewActionView";
-
-export function HistoryPage(): VNode {
-  const [transactions, setTransactions] = useState<
-    TransactionsResponse | undefined
-  >(undefined);
-  const balance = useAsyncAsHook(wxApi.getBalance);
-  const balanceWithoutError = balance?.hasError
-    ? []
-    : balance?.response.balances || [];
-
-  useEffect(() => {
-    const fetchData = async (): Promise<void> => {
-      const res = await wxApi.getTransactions();
-      setTransactions(res);
-    };
-    fetchData();
-  }, []);
-
-  const [addingAction, setAddingAction] = useState(false);
-
-  if (addingAction) {
-    return <AddNewActionView onCancel={() => setAddingAction(false)} />;
-  }
-
-  if (!transactions) {
-    return <div>Loading ...</div>;
-  }
-
-  return (
-    <HistoryView
-      balances={balanceWithoutError}
-      list={[...transactions.transactions].reverse()}
-      onAddNewAction={() => setAddingAction(true)}
-    />
-  );
-}
-
-function amountToString(c: AmountString): string {
-  const idx = c.indexOf(":");
-  return `${c.substring(idx + 1)} ${c.substring(0, idx)}`;
-}
-
-export function HistoryView({
-  list,
-  balances,
-  onAddNewAction,
-}: {
-  list: Transaction[];
-  balances: Balance[];
-  onAddNewAction: () => void;
-}): VNode {
-  const multiCurrency = balances.length > 1;
-  return (
-    <Fragment>
-      <header>
-        {balances.length > 0 ? (
-          <Fragment>
-            {multiCurrency ? (
-              <div class="title">
-                Balance:{" "}
-                <ul style={{ margin: 0 }}>
-                  {balances.map((b, i) => (
-                    <li key={i}>{b.available}</li>
-                  ))}
-                </ul>
-              </div>
-            ) : (
-              <div class="title">
-                Balance: <span>{amountToString(balances[0].available)}</span>
-              </div>
-            )}
-          </Fragment>
-        ) : (
-          <div />
-        )}
-        <div>
-          <ButtonPrimary onClick={onAddNewAction}>
-            <b>+</b>
-          </ButtonPrimary>
-        </div>
-      </header>
-      {list.length === 0 ? (
-        <section data-expanded data-centered>
-          <p>
-            <i18n.Translate>
-              You have no history yet, here you will be able to check your last
-              transactions.
-            </i18n.Translate>
-          </p>
-        </section>
-      ) : (
-        <section>
-          {list.slice(0, 3).map((tx, i) => (
-            <TransactionItem key={i} tx={tx} multiCurrency={multiCurrency} />
-          ))}
-        </section>
-      )}
-      <footer style={{ justifyContent: "space-around" }}>
-        {list.length > 0 && (
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ color: "darkgreen", textDecoration: "none" }}
-            href={
-              // eslint-disable-next-line no-undef
-              typeof chrome !== "undefined" && chrome.extension
-                ? // eslint-disable-next-line no-undef
-                  chrome.extension.getURL(`/static/wallet.html#/history`)
-                : "#"
-            }
-          >
-            VIEW MORE TRANSACTIONS
-          </a>
-        )}
-      </footer>
-    </Fragment>
-  );
-}
diff --git a/packages/taler-wallet-webextension/src/popup/index.stories.tsx b/packages/taler-wallet-webextension/src/popup/index.stories.tsx
index c3e60c4ed..3abb80021 100644
--- a/packages/taler-wallet-webextension/src/popup/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/index.stories.tsx
@@ -19,11 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import * as a1 from "./AddNewActionView.stories";
+import * as a1 from "../wallet/AddNewActionView.stories";
 import * as a2 from "./Balance.stories";
 import * as a3 from "./DeveloperPage.stories";
-import * as a4 from "./History.stories";
 import * as a5 from "./Popup.stories";
 import * as a6 from "./TalerActionFound.stories";
 
-export default [a1, a2, a3, a4, a5, a6];
+export default [a1, a2, a3, a5, a6];