diff options
author | Sebastian <sebasjm@gmail.com> | 2022-01-10 16:04:53 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-01-10 16:07:27 -0300 |
commit | fb22009ec4799a624f00c228fbd7435b44c1cbac (patch) | |
tree | b1f8427e845bb3687b8a64deb3545eff2290ec67 /packages/taler-wallet-webextension/src/popup | |
parent | 83b9d32b7812e63640a60b5b42a27c96d8053bce (diff) | |
download | wallet-core-fb22009ec4799a624f00c228fbd7435b44c1cbac.tar.xz |
deposit design from belen, feature missing: kyc
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
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]; |