diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/DestinationSelection')
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> |