diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
8 files changed, 101 insertions, 25 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index cff17af1a..5a2b9f747 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -43,7 +43,7 @@ export function BalanceView({ balance, Linker }: BalanceViewProps) { <div> <p>{i18n.str`Error: could not retrieve balance information.`}</p> <p> - Click <Linker pageName="welcome.html">here</Linker> for help and + Click <Linker pageName="welcome">here</Linker> for help and diagnostics. </p> </div> diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx index 1f6014e8e..33b82b05b 100644 --- a/packages/taler-wallet-webextension/src/popup/Debug.tsx +++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx @@ -16,10 +16,12 @@ import { JSX } from "preact"; import { Diagnostics } from "../components/Diagnostics"; +import { useDiagnostics } from "../hooks/useDiagnostics.js"; import * as wxApi from "../wxApi"; export function DeveloperPage(props: any): JSX.Element { + const [status, timedOut] = useDiagnostics(); return ( <div> <p>Debug tools:</p> @@ -27,7 +29,7 @@ export function DeveloperPage(props: any): JSX.Element { <br /> <button onClick={confirmReset}>reset</button> <button onClick={reload}>reload chrome extension</button> - <Diagnostics /> + <Diagnostics diagnostics={status} timedOut={timedOut} /> </div> ); } diff --git a/packages/taler-wallet-webextension/src/popup/History.stories.tsx b/packages/taler-wallet-webextension/src/popup/History.stories.tsx index 8eef7dc31..5337a6c1c 100644 --- a/packages/taler-wallet-webextension/src/popup/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/History.stories.tsx @@ -30,7 +30,7 @@ import { FunctionalComponent } from 'preact'; import { HistoryView as TestedComponent } from './History'; export default { - title: 'popup/transaction/list', + title: 'popup/history/list', component: TestedComponent, }; @@ -112,12 +112,26 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part } export const Empty = createExample(TestedComponent, { - list: [] + list: [], + balances: [{ + available: 'TESTKUDOS:10', + pendingIncoming: 'TESTKUDOS:0', + pendingOutgoing: 'TESTKUDOS:0', + hasPendingTransactions: false, + requiresUserInput: false, + }] }); export const One = createExample(TestedComponent, { - list: [exampleData.withdraw] + list: [exampleData.withdraw], + balances: [{ + available: 'USD:10', + pendingIncoming: 'USD:0', + pendingOutgoing: 'USD:0', + hasPendingTransactions: false, + requiresUserInput: false, + }] }); export const Several = createExample(TestedComponent, { @@ -130,7 +144,40 @@ export const Several = createExample(TestedComponent, { 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, + }] }); // export const WithdrawPending = createExample(TestedComponent, { diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx index 57fc10c26..b6b65314e 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 <http://www.gnu.org/licenses/> */ -import { AmountString, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util"; +import { AmountJson, Amounts, AmountString, Balance, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util"; import { JSX } from "preact"; import { useEffect, useState } from "preact/hooks"; import * as wxApi from "../wxApi"; @@ -25,6 +25,8 @@ export function HistoryPage(props: any): JSX.Element { const [transactions, setTransactions] = useState< TransactionsResponse | undefined >(undefined); + const balance = useBalances() + const balanceWithoutError = balance?.error ? [] : (balance?.response.balances || []) useEffect(() => { const fetchData = async (): Promise<void> => { @@ -38,16 +40,36 @@ export function HistoryPage(props: any): JSX.Element { return <div>Loading ...</div>; } - return <HistoryView list={[...transactions.transactions].reverse()} />; + return <HistoryView balances={balanceWithoutError} list={[...transactions.transactions].reverse()} />; } -export function HistoryView({ list }: { list: Transaction[] }) { - return <PopupBox> +function amountToString(c: AmountString) { + const idx = c.indexOf(':') + return `${c.substring(idx+1)} ${c.substring(0,idx)}` +} + + + +export function HistoryView({ list, balances }: { list: Transaction[], balances: Balance[] }) { + return <PopupBox noPadding> + {balances.length > 0 && <header> + {balances.length === 1 && <div class="title"> + Balance: <span>{amountToString(balances[0].available)}</span> + </div>} + {balances.length > 1 && <div class="title"> + Balance: <ul style={{ margin: 0 }}> + {balances.map(b => <li>{b.available}</li>)} + </ul> + </div>} + </header>} <section> - {list.map((tx, i) => ( + {list.slice(0, 3).map((tx, i) => ( <TransactionItem key={i} tx={tx} /> ))} </section> + <footer style={{ justifyContent: 'space-around' }}> + <a style={{ color: 'darkgreen', textDecoration:'none' }} href={Pages.transaction.replace(':tid', 'asd')}>VIEW MORE TRANSACTIONS</a> + </footer> </PopupBox> } @@ -57,6 +79,8 @@ import imageRefund from '../../static/img/ri-refund-2-line.svg'; import imageHandHeart from '../../static/img/ri-hand-heart-line.svg'; import imageRefresh from '../../static/img/ri-refresh-line.svg'; import { Column, ExtraLargeText, HistoryRow, PopupBox, Row, RowBorderGray, SmallTextLight } from "../components/styled"; +import { useBalances } from "../hooks/useBalances"; +import { formatDistance } from "date-fns"; function TransactionItem(props: { tx: Transaction }): JSX.Element { const tx = props.tx; @@ -144,23 +168,21 @@ function TransactionItem(props: { tx: Transaction }): JSX.Element { function TransactionLayout(props: TransactionLayoutProps): JSX.Element { const date = new Date(props.timestamp.t_ms); - const dateStr = date.toLocaleString([], { - dateStyle: "medium", - timeStyle: "short", - } as any); + const now = new Date(); + const dateStr = formatDistance(date, now, { addSuffix: true }) return ( <HistoryRow> <img src={props.iconPath} /> <Column> - <SmallTextLight>{dateStr}</SmallTextLight> <ExtraLargeText> <a href={Pages.transaction.replace(':tid', props.id)}><span>{props.title}</span></a> {props.pending ? ( <span style={{ color: "darkblue" }}> (Pending)</span> ) : null} </ExtraLargeText> + <SmallTextLight>{dateStr}</SmallTextLight> - <div>{props.subtitle}</div> + {/* <div>{props.subtitle}</div> */} </Column> <TransactionAmount pending={props.pending} @@ -202,7 +224,13 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element { sign = ""; } return ( - <Column style={{ color: props.pending ? "gray" : undefined }}> + <Column style={{ + color: + props.pending ? "gray" : + (sign === '+' ? 'darkgreen' : + (sign === '-' ? 'darkred' : + undefined)) + }}> <ExtraLargeText> {sign} {amount} diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index c92137ee3..707e6c33a 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -58,13 +58,12 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP const isPaid = info.paymentStatus.type === ProviderPaymentType.Paid || info.paymentStatus.type === ProviderPaymentType.TermsChanged return ( <PopupBox> - <header> + {info.backupProblem || info.lastError ? <header> <Error info={info} /> - - </header> + </header> : undefined } <header> <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3> - <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid': 'Unpaid' }</PaymentStatus> + <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus> </header> <section> <p><b>Last backup:</b> {lb == null || lb.t_ms == "never" ? "never" : format(lb.t_ms, 'dd MMM yyyy')} </p> diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index 18afcd100..40ab51561 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -68,7 +68,7 @@ const names: LangsNames = { export function SettingsView({ lang, changeLang, deviceName, setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode }: ViewProps): VNode { return ( <div> - <section style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}> + <section style={{ height: 300, overflow: 'auto' }}> <h2><i18n.Translate>Wallet</i18n.Translate></h2> <SelectList value={lang} diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx index 3c0bed6c7..4e63b9242 100644 --- a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx @@ -30,7 +30,7 @@ import { FunctionalComponent } from 'preact'; import { TransactionView as TestedComponent } from './Transaction'; export default { - title: 'popup/transaction/details', + title: 'popup/history/details', component: TestedComponent, argTypes: { onRetry: { action: 'onRetry' }, diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index a6be4d192..4aee48fb7 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -60,7 +60,7 @@ function Tab(props: TabProps): JSX.Element { } export function NavBar({devMode, path}:{path:string, devMode:boolean}) { - return <PopupNavigation> + return <PopupNavigation devMode={devMode}> <Tab target="/balance" current={path}>{i18n.str`Balance`}</Tab> <Tab target="/history" current={path}>{i18n.str`History`}</Tab> <Tab target="/backup" current={path}>{i18n.str`Backup`}</Tab> |