From be8e3f4b1d090a536967f132a7fd4742bbcd5343 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 11 Oct 2021 15:59:55 -0300 Subject: fixing withdrawal process --- .../src/popup/Balance.stories.tsx | 128 ++++++++++++++++++-- .../src/popup/BalancePage.tsx | 129 +++++++++++++-------- .../taler-wallet-webextension/src/popup/Debug.tsx | 1 - .../src/popup/History.stories.tsx | 6 +- .../src/popup/History.tsx | 30 +++-- .../src/popup/Settings.tsx | 19 ++- 6 files changed, 238 insertions(+), 75 deletions(-) (limited to 'packages/taler-wallet-webextension/src/popup') diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx index a0655d379..382f9b549 100644 --- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx @@ -35,14 +35,15 @@ export const NotYetLoaded = createExample(TestedComponent, { export const GotError = createExample(TestedComponent, { balance: { - error: true + hasError: true, + message: 'Network error' }, Linker: NullLink, }); export const EmptyBalance = createExample(TestedComponent, { balance: { - error: false, + hasError: false, response: { balances: [] }, @@ -52,7 +53,7 @@ export const EmptyBalance = createExample(TestedComponent, { export const SomeCoins = createExample(TestedComponent, { balance: { - error: false, + hasError: false, response: { balances: [{ available: 'USD:10.5', @@ -68,7 +69,7 @@ export const SomeCoins = createExample(TestedComponent, { export const SomeCoinsAndIncomingMoney = createExample(TestedComponent, { balance: { - error: false, + hasError: false, response: { balances: [{ available: 'USD:2.23', @@ -82,22 +83,135 @@ export const SomeCoinsAndIncomingMoney = createExample(TestedComponent, { 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 + }] + }, + }, + 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 + }] + }, + }, + Linker: NullLink, +}); + export const SomeCoinsInTwoCurrencies = createExample(TestedComponent, { balance: { - error: false, + hasError: false, response: { balances: [{ available: 'USD:2', hasPendingTransactions: false, - pendingIncoming: 'USD:5', + pendingIncoming: 'USD:5.1', pendingOutgoing: 'USD:0', requiresUserInput: false },{ available: 'EUR:4', hasPendingTransactions: false, - pendingIncoming: 'EUR:5', + pendingIncoming: 'EUR:0', + pendingOutgoing: 'EUR:3.01', + 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: 'COL:2000', + hasPendingTransactions: false, + pendingIncoming: 'USD:0', + pendingOutgoing: 'USD:0', + requiresUserInput: false + },{ + available: 'EUR:4', + 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 }] }, }, diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index e3bada8d4..8e5c5c42e 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -19,8 +19,9 @@ import { Balance, BalancesResponse, i18n } from "@gnu-taler/taler-util"; -import { JSX, h } from "preact"; -import { PopupBox, Centered, ButtonPrimary } from "../components/styled/index"; +import { JSX, h, Fragment } from "preact"; +import { ErrorMessage } from "../components/ErrorMessage"; +import { PopupBox, Centered, ButtonPrimary, ErrorBox, Middle } from "../components/styled/index"; import { BalancesHook, useBalances } from "../hooks/useBalances"; import { PageLink, renderAmount } from "../renderHtml"; @@ -34,34 +35,6 @@ export interface BalanceViewProps { Linker: typeof PageLink; goToWalletManualWithdraw: () => void; } -export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) { - if (!balance) { - return - } - - if (balance.error) { - return ( -
-

{i18n.str`Error: could not retrieve balance information.`}

-

- Click here for help and - diagnostics. -

-
- ) - } - if (balance.response.balances.length === 0) { - return ( -

- You have no balance to show. Need some{" "} - help getting started? -

- ) - } - return -} function formatPending(entry: Balance): JSX.Element { let incoming: JSX.Element | undefined; @@ -74,11 +47,20 @@ function formatPending(entry: Balance): JSX.Element { if (!Amounts.isZero(pendingIncoming)) { incoming = ( - + {"+"} {renderAmount(entry.pendingIncoming)} {" "} - incoming + + ); + } + if (!Amounts.isZero(pendingOutgoing)) { + payment = ( + + + {"-"} + {renderAmount(entry.pendingOutgoing)} + {" "} ); } @@ -89,36 +71,85 @@ function formatPending(entry: Balance): JSX.Element { } if (l.length === 1) { - return ({l}); + return {l}; } return ( - ({l[0]}, {l[1]}) + {l[0]}, {l[1]} ); } -function ShowBalances({ wallet, onWithdraw }: { wallet: BalancesResponse, onWithdraw: () => void }) { - return -
- {wallet.balances.map((entry) => { +export function BalanceView({ balance, Linker, goToWalletManualWithdraw }: BalanceViewProps) { + + function Content() { + if (!balance) { + return + } + + if (balance.hasError) { + return (
+ {balance.message} +

+ Click here for help and + diagnostics. +

+
) + } + if (balance.response.balances.length === 0) { + return (
+ +

+ You have no balance to show. Need some{" "} + help getting started? +

+ +
) + } + return
+ {balance.response.balances.map((entry) => { const av = Amounts.parseOrThrow(entry.available); - const v = av.value + av.fraction / amountFractionalBase; - return ( -

- - {v}{" "} - {av.currency} - - {formatPending(entry)} -

+ // Create our number formatter. + let formatter; + try { + formatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: av.currency, + currencyDisplay: 'symbol' + // These options are needed to round to whole numbers if that's what you want. + //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) + //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) + }); + } catch { + formatter = new Intl.NumberFormat('en-US', { + // style: 'currency', + // currency: av.currency, + // These options are needed to round to whole numbers if that's what you want. + //minimumFractionDigits: 0, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1) + //maximumFractionDigits: 0, // (causes 2500.99 to be printed as $2,501) + }); + } + + const v = formatter.format(av.value + av.fraction / amountFractionalBase); + const fontSize = v.length < 8 ? '3em' : (v.length < 13 ? '2em' : '1em') + return ( + + + + ); - })} + })}
{v}{av.currency}{formatPending(entry)}
+ } + + return + {/*
*/} + + {/*
*/}
- Withdraw + Withdraw
} diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx index 3968b0191..ccc747466 100644 --- a/packages/taler-wallet-webextension/src/popup/Debug.tsx +++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx @@ -28,7 +28,6 @@ export function DeveloperPage(props: any): JSX.Element {
- ); diff --git a/packages/taler-wallet-webextension/src/popup/History.stories.tsx b/packages/taler-wallet-webextension/src/popup/History.stories.tsx index ca9f545fe..daa263a81 100644 --- a/packages/taler-wallet-webextension/src/popup/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.stories.tsx @@ -105,7 +105,7 @@ const exampleData = { } as TransactionRefund, } -export const Empty = createExample(TestedComponent, { +export const EmptyWithBalance = createExample(TestedComponent, { list: [], balances: [{ available: 'TESTKUDOS:10', @@ -116,6 +116,10 @@ export const Empty = createExample(TestedComponent, { }] }); +export const EmptyWithNoBalance = createExample(TestedComponent, { + list: [], + balances: [] +}); export const One = createExample(TestedComponent, { list: [exampleData.withdraw], diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx index 77d603886..1447da9b0 100644 --- a/packages/taler-wallet-webextension/src/popup/History.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see */ -import { AmountString, Balance, Transaction, TransactionsResponse } from "@gnu-taler/taler-util"; +import { AmountString, Balance, i18n, Transaction, TransactionsResponse } from "@gnu-taler/taler-util"; import { h, JSX } from "preact"; import { useEffect, useState } from "preact/hooks"; import { PopupBox } from "../components/styled"; @@ -28,7 +28,7 @@ export function HistoryPage(props: any): JSX.Element { TransactionsResponse | undefined >(undefined); const balance = useBalances() - const balanceWithoutError = balance?.error ? [] : (balance?.response.balances || []) + const balanceWithoutError = balance?.hasError ? [] : (balance?.response.balances || []) useEffect(() => { const fetchData = async (): Promise => { @@ -64,16 +64,24 @@ export function HistoryView({ list, balances }: { list: Transaction[], balances: Balance: {amountToString(balances[0].available)} } } -
- {list.slice(0, 3).map((tx, i) => ( - - ))} -
+ {list.length === 0 ?
+

+ You have no history yet, here you will be able to check your last transactions. +

+
: +
+ {list.slice(0, 3).map((tx, i) => ( + + ))} +
+ } } diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index 52e72ee2f..8595c87ff 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -20,6 +20,7 @@ import { VNode, h } from "preact"; import { Checkbox } from "../components/Checkbox"; import { EditableText } from "../components/EditableText"; import { SelectList } from "../components/SelectList"; +import { PopupBox } from "../components/styled"; import { useDevContext } from "../context/devContext"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; @@ -67,10 +68,10 @@ const names: LangsNames = { export function SettingsView({ lang, changeLang, deviceName, setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode }: ViewProps): VNode { return ( -
-
-

Wallet

- +
+ {/*

Wallet

*/} + {/* + /> */}

Permissions

-
+ + ) } \ No newline at end of file -- cgit v1.2.3