From 51bbf08d241f0eff8847f6656accee03c0626d88 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 6 Dec 2022 11:28:56 -0300 Subject: implement web-utils in web-extension --- .../src/wallet/AddBackupProvider/stories.tsx | 2 +- .../src/wallet/AddNewActionView.stories.tsx | 2 +- .../src/wallet/Backup.stories.tsx | 8 +-- .../src/wallet/DepositPage/stories.tsx | 2 +- .../src/wallet/DestinationSelection/index.ts | 2 +- .../src/wallet/DestinationSelection/state.ts | 49 +++++++++---------- .../src/wallet/DestinationSelection/stories.tsx | 2 +- .../src/wallet/DestinationSelection/views.tsx | 18 +++++-- .../src/wallet/DeveloperPage.stories.tsx | 2 +- .../src/wallet/ExchangeAddConfirm.stories.tsx | 2 +- .../src/wallet/ExchangeAddSetUrl.stories.tsx | 8 +-- .../src/wallet/ExchangeSelection/stories.tsx | 2 +- .../src/wallet/History.stories.tsx | 2 +- .../src/wallet/ManageAccount/stories.tsx | 2 +- .../src/wallet/Notifications/stories.tsx | 2 +- .../wallet/ProviderAddConfirmProvider.stories.tsx | 2 +- .../src/wallet/ProviderAddSetUrl.stories.tsx | 2 +- .../src/wallet/ProviderDetail.stories.tsx | 2 +- .../src/wallet/QrReader.stories.tsx | 2 +- .../src/wallet/ReserveCreated.stories.tsx | 2 +- .../src/wallet/Settings.stories.tsx | 2 +- .../src/wallet/Transaction.stories.tsx | 2 +- .../src/wallet/Welcome.stories.tsx | 2 +- .../src/wallet/index.stories.tsx | 57 +++++++--------------- 24 files changed, 76 insertions(+), 102 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet') 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({ ); } +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 ( - + {icon !== undefined ? ( + + ) : ( + A + )} 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"; -- cgit v1.2.3