implement web-utils in web-extension

24 files changed, 76 insertions, 102 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
index ae3e1b091..887ad235e 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
 import { ConfirmProviderView, SelectProviderView } from "./views.js";
 
 export default {
-  title: "wallet/backup/confirm",
+  title: "add backup provider",
 };
 
 export const DemoService = createExample(ConfirmProviderView, {
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
index cf1551127..f5db3825d 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { AddNewActionView as TestedComponent } from "./AddNewActionView.js";
 
 export default {
-  title: "wallet/add new action",
+  title: "add new action",
   component: TestedComponent,
   argTypes: {
     setDeviceName: () => Promise.resolve(),
diff --git a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
index 2e19d3944..c3a1ea5d6 100644
--- a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
@@ -29,13 +29,7 @@ import { createExample } from "../test-utils.js";
 import { TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 
 export default {
-  title: "wallet/backup/list",
-  component: TestedComponent,
-  argTypes: {
-    onRetry: { action: "onRetry" },
-    onDelete: { action: "onDelete" },
-    onBack: { action: "onBack" },
-  },
+  title: "backup",
 };
 
 export const LotOfProviders = createExample(TestedComponent, {
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
index 75c544c84..b4d1060eb 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/stories.tsx
@@ -25,7 +25,7 @@ import { labelForAccountType } from "./state.js";
 import { ReadyView } from "./views.js";
 
 export default {
-  title: "wallet/deposit",
+  title: "deposit",
 };
 
 // const ac = parsePaytoUri("payto://iban/ES8877998399652238")!;
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
index 492da193b..2f066d744 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts
@@ -74,7 +74,7 @@ export namespace State {
 }
 
 export type Contact = {
-  icon: string;
+  icon_type: string;
   name: string;
   description: string;
 };
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
index fe02151de..a67f926bc 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
@@ -21,7 +21,6 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { assertUnreachable, RecursiveState } from "../../utils/index.js";
 import { wxApi } from "../../wxApi.js";
 import { Contact, Props, State } from "./index.js";
-import bankIcon from "../../svg/ri-bank-line.svg";
 
 export function useComponentState(
   props: Props,
@@ -42,22 +41,22 @@ export function useComponentState(
   const previous: Contact[] = true
     ? []
     : [
-        {
-          name: "International Bank",
-          icon: bankIcon, //FIXME: should be decided in the view
-          description: "account ending with 3454",
-        },
-        {
-          name: "Max",
-          icon: bankIcon,
-          description: "account ending with 3454",
-        },
-        {
-          name: "Alex",
-          icon: bankIcon,
-          description: "account ending with 3454",
-        },
-      ];
+      {
+        name: "International Bank",
+        icon_type: 'bank',
+        description: "account ending with 3454",
+      },
+      {
+        name: "Max",
+        icon_type: 'bank',
+        description: "account ending with 3454",
+      },
+      {
+        name: "Alex",
+        icon_type: 'bank',
+        description: "account ending with 3454",
+      },
+    ];
 
   if (!amount) {
     return () => {
@@ -115,15 +114,15 @@ export function useComponentState(
           onClick: invalid
             ? undefined
             : async () => {
-                props.goToWalletBankDeposit(currencyAndAmount);
-              },
+              props.goToWalletBankDeposit(currencyAndAmount);
+            },
         },
         goToWallet: {
           onClick: invalid
             ? undefined
             : async () => {
-                props.goToWalletWalletSend(currencyAndAmount);
-              },
+              props.goToWalletWalletSend(currencyAndAmount);
+            },
         },
         amountHandler: {
           onInput: async (s) => setAmount(s),
@@ -145,15 +144,15 @@ export function useComponentState(
           onClick: invalid
             ? undefined
             : async () => {
-                props.goToWalletManualWithdraw(currencyAndAmount);
-              },
+              props.goToWalletManualWithdraw(currencyAndAmount);
+            },
         },
         goToWallet: {
           onClick: invalid
             ? undefined
             : async () => {
-                props.goToWalletWalletInvoice(currencyAndAmount);
-              },
+              props.goToWalletWalletInvoice(currencyAndAmount);
+            },
         },
         amountHandler: {
           onInput: async (s) => setAmount(s),
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
index b8d868683..ffec8ba36 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
 import { ReadyView, SelectCurrencyView } from "./views.js";
 
 export default {
-  title: "wallet/destination",
+  title: "destination",
 };
 
 export const GetCash = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
index ba8d65ffa..a9a4b2e41 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
@@ -377,6 +377,7 @@ export function ReadySendView({
     </Container>
   );
 }
+import bankIcon from "../../svg/ri-bank-line.svg";
 
 function RowExample({
   info,
@@ -385,15 +386,22 @@ function RowExample({
   info: Contact;
   disabled?: boolean;
 }): VNode {
+  const icon = info.icon_type === "bank" ? bankIcon : undefined;
   return (
     <MediaExample data-disabled={disabled}>
       <MediaLeft>
         <CircleDiv>
-          <SvgIcon
-            title={info.name}
-            dangerouslySetInnerHTML={{ __html: info.icon }}
-            color="currentColor"
-          />
+          {icon !== undefined ? (
+            <SvgIcon
+              title={info.name}
+              dangerouslySetInnerHTML={{
+                __html: icon,
+              }}
+              color="currentColor"
+            />
+          ) : (
+            <span>A</span>
+          )}
         </CircleDiv>
       </MediaLeft>
       <MediaBody>
diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
index 73bcbc6bc..d9a5a8fd7 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../test-utils.js";
 import { View as TestedComponent } from "./DeveloperPage.js";
 
 export default {
-  title: "wallet/developer",
+  title: "developer",
   component: TestedComponent,
   argTypes: {
     setDeviceName: () => Promise.resolve(),
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
index b58fce8e6..8fbecfc4c 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { ExchangeAddConfirmPage as TestedComponent } from "./ExchangeAddConfirm.js";
 
 export default {
-  title: "wallet/exchange add/confirm",
+  title: "exchange add confirm",
   component: TestedComponent,
   argTypes: {
     onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
index e71b34f31..cd86ad8c6 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
@@ -24,13 +24,7 @@ import { queryToSlashKeys } from "../utils/index.js";
 import { ExchangeSetUrlPage as TestedComponent } from "./ExchangeSetUrl.js";
 
 export default {
-  title: "wallet/exchange add/set url",
-  component: TestedComponent,
-  argTypes: {
-    onRetry: { action: "onRetry" },
-    onDelete: { action: "onDelete" },
-    onBack: { action: "onBack" },
-  },
+  title: "exchange add set url",
 };
 
 export const ExpectedUSD = createExample(TestedComponent, {
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
index dfa8bbd39..3706359a8 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
 import { ComparingView, ReadyView } from "./views.js";
 
 export default {
-  title: "wallet/select exchange",
+  title: "select exchange",
 };
 
 export const Bitcoin1 = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 1efd917c8..1674ac135 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -40,7 +40,7 @@ import { HistoryView as TestedComponent } from "./History.js";
 import { createExample } from "../test-utils.js";
 
 export default {
-  title: "wallet/balance",
+  title: "balance",
   component: TestedComponent,
 };
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
index 875dec227..ca6db8be9 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../../test-utils.js";
 import { ReadyView } from "./views.js";
 
 export default {
-  title: "wallet/manage account",
+  title: "manage account",
 };
 
 const nullFunction = async () => {
diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx b/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
index e4c7105e9..c4da99909 100644
--- a/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Notifications/stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../../test-utils.js";
 import { ReadyView } from "./views.js";
 
 export default {
-  title: "wallet/notifications",
+  title: "notifications",
 };
 
 export const Ready = createExample(ReadyView, {
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
index bd3b7d2d3..9ca397302 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddConfirmProvider.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { ConfirmProviderView as TestedComponent } from "./ProviderAddPage.js";
 
 export default {
-  title: "wallet/backup/confirm",
+  title: "confirm",
   component: TestedComponent,
   argTypes: {
     onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
index b728d1e2e..a5528c36b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddSetUrl.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { SetUrlView as TestedComponent } from "./ProviderAddPage.js";
 
 export default {
-  title: "wallet/backup/add",
+  title: "add",
   component: TestedComponent,
   argTypes: {
     onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
index 854c14ac1..98c68e6bd 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetail.stories.tsx
@@ -25,7 +25,7 @@ import { createExample } from "../test-utils.js";
 import { ProviderView as TestedComponent } from "./ProviderDetailPage.js";
 
 export default {
-  title: "wallet/backup/details",
+  title: "provider details",
   component: TestedComponent,
   argTypes: {
     onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
index caf833e79..0fc38e90f 100644
--- a/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/QrReader.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { QrReaderPage } from "./QrReader.js";
 
 export default {
-  title: "wallet/qr reader",
+  title: "qr reader",
 };
 
 export const Reading = createExample(QrReaderPage, {});
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
index 7d10ad0f4..7ea3b386b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
@@ -24,7 +24,7 @@ import { createExample } from "../test-utils.js";
 import { ReserveCreated as TestedComponent } from "./ReserveCreated.js";
 
 export default {
-  title: "wallet/manual withdraw/reserve created",
+  title: "reserve created",
   component: TestedComponent,
   argTypes: {},
 };
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index 4082ca29b..04b7f3e09 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { SettingsView as TestedComponent } from "./Settings.js";
 
 export default {
-  title: "wallet/settings",
+  title: "settings",
   component: TestedComponent,
   argTypes: {
     setDeviceName: () => Promise.resolve(),
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index abbc883bd..868d3b0e6 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -46,7 +46,7 @@ import {
 import { TransactionView as TestedComponent } from "./Transaction.js";
 
 export default {
-  title: "wallet/history/details",
+  title: "transaction details",
   component: TestedComponent,
   argTypes: {
     onRetry: { action: "onRetry" },
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
index 118d261fa..7e52d4270 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.stories.tsx
@@ -23,7 +23,7 @@ import { createExample } from "../test-utils.js";
 import { View as TestedComponent } from "./Welcome.js";
 
 export default {
-  title: "wallet/welcome",
+  title: "welcome",
   component: TestedComponent,
 };
 
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index 554527108..05e141dc6 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -19,42 +19,21 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import * as a1 from "./Backup.stories.js";
-import * as a4 from "./DepositPage/stories.js";
-import * as a5 from "./ExchangeAddConfirm.stories.js";
-import * as a6 from "./ExchangeAddSetUrl.stories.js";
-import * as a7 from "./History.stories.js";
-import * as a8 from "./AddBackupProvider/stories.js";
-import * as a10 from "./ProviderDetail.stories.js";
-import * as a11 from "./ReserveCreated.stories.js";
-import * as a12 from "./Settings.stories.js";
-import * as a13 from "./Transaction.stories.js";
-import * as a14 from "./Welcome.stories.js";
-import * as a15 from "./AddNewActionView.stories.js";
-import * as a16 from "./DeveloperPage.stories.js";
-import * as a17 from "./QrReader.stories.js";
-import * as a18 from "./DestinationSelection/stories.js";
-import * as a19 from "./ExchangeSelection/stories.js";
-import * as a20 from "./ManageAccount/stories.js";
-import * as a21 from "./Notifications/stories.js";
-
-export default [
-  a1,
-  a4,
-  a5,
-  a6,
-  a7,
-  a8,
-  a10,
-  a11,
-  a12,
-  a13,
-  a14,
-  a15,
-  a16,
-  a17,
-  a18,
-  a19,
-  a20,
-  a21,
-];
+export * as a1 from "./Backup.stories.js";
+export * as a4 from "./DepositPage/stories.js";
+export * as a5 from "./ExchangeAddConfirm.stories.js";
+export * as a6 from "./ExchangeAddSetUrl.stories.js";
+export * as a7 from "./History.stories.js";
+export * as a8 from "./AddBackupProvider/stories.js";
+export * as a10 from "./ProviderDetail.stories.js";
+export * as a11 from "./ReserveCreated.stories.js";
+export * as a12 from "./Settings.stories.js";
+export * as a13 from "./Transaction.stories.js";
+export * as a14 from "./Welcome.stories.js";
+export * as a15 from "./AddNewActionView.stories.js";
+export * as a16 from "./DeveloperPage.stories.js";
+export * as a17 from "./QrReader.stories.js";
+export * as a18 from "./DestinationSelection/stories.js";
+export * as a19 from "./ExchangeSelection/stories.js";
+export * as a20 from "./ManageAccount/stories.js";
+export * as a21 from "./Notifications/stories.js";