implement web-utils in web-extension

4 files changed, 39 insertions, 32 deletions

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>