diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Application.tsx | 81 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 111 |
2 files changed, 111 insertions, 81 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx index 603163cee..f6cef7e90 100644 --- a/packages/taler-wallet-webextension/src/wallet/Application.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx @@ -76,33 +76,34 @@ export function Application(): VNode { <IoCProviderForRuntime> {/* <Match/> won't work in the first render if <Router /> is not called first */} {/* https://github.com/preactjs/preact-router/issues/415 */} - <Router history={hash_history} /> - <Match> - {({ path }: { path: string }) => { - if (path && path.startsWith("/cta")) return; - return ( - <Fragment> - <LogoHeader /> - <WalletNavBar path={path} /> - {shouldShowPendingOperations(path) && ( - <div - style={{ - backgroundColor: "lightcyan", - display: "flex", - justifyContent: "center", - }} - > - <PendingTransactions - goToTransaction={(tid: string) => - redirectTo(Pages.balanceTransaction({ tid })) - } - /> - </div> - )} - </Fragment> - ); - }} - </Match> + <Router history={hash_history}> + <Match default> + {({ path }: { path: string }) => { + if (path && path.startsWith("/cta")) return; + return ( + <Fragment> + <LogoHeader /> + <WalletNavBar path={path} /> + {shouldShowPendingOperations(path) && ( + <div + style={{ + backgroundColor: "lightcyan", + display: "flex", + justifyContent: "center", + }} + > + <PendingTransactions + goToTransaction={(tid: string) => + redirectTo(Pages.balanceTransaction({ tid })) + } + /> + </div> + )} + </Fragment> + ); + }} + </Match> + </Router> <WalletBox> {globalNotification && ( <SuccessBox onClick={clearNotification}> @@ -206,12 +207,28 @@ export function Application(): VNode { goToWalletManualWithdraw={(currency?: string) => redirectTo(Pages.balanceManualWithdraw({ currency })) } - goBack={() => redirectTo(Pages.balance)} + cancel={() => redirectTo(Pages.balance)} + /> + <Route + path={Pages.ctaRefund} + component={RefundPage} + cancel={() => redirectTo(Pages.balance)} + /> + <Route + path={Pages.ctaTips} + component={TipPage} + cancel={() => redirectTo(Pages.balance)} + /> + <Route + path={Pages.ctaWithdraw} + component={WithdrawPage} + cancel={() => redirectTo(Pages.balance)} + /> + <Route + path={Pages.ctaDeposit} + component={DepositPageCTA} + cancel={() => redirectTo(Pages.balance)} /> - <Route path={Pages.ctaRefund} component={RefundPage} /> - <Route path={Pages.ctaTips} component={TipPage} /> - <Route path={Pages.ctaWithdraw} component={WithdrawPage} /> - <Route path={Pages.ctaDeposit} component={DepositPageCTA} /> {/** * NOT FOUND diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index e643fef18..ff3b70b65 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -32,7 +32,6 @@ import { TransactionRefund, TransactionTip, TransactionType, - TransactionWithdrawal, WithdrawalType, } from "@gnu-taler/taler-util"; import { styled } from "@linaria/react"; @@ -308,7 +307,14 @@ export function TransactionView({ )} <Part title={<i18n.Translate>Details</i18n.Translate>} - text={<WithdrawDetails transaction={transaction} />} + text={ + <WithdrawDetails + amount={{ + effective: Amounts.parseOrThrow(transaction.amountEffective), + raw: Amounts.parseOrThrow(transaction.amountRaw), + }} + /> + } /> </TransactionTemplate> ); @@ -713,10 +719,64 @@ function DeliveryDetails({ ); } +export function ExchangeDetails({ exchange }: { exchange: string }): VNode { + return ( + <div> + <p style={{ marginTop: 0 }}> + <a rel="noreferrer" target="_blank" href={exchange}> + {exchange} + </a> + </p> + </div> + ); +} + export interface AmountWithFee { effective: AmountJson; raw: AmountJson; } + +export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { + const { i18n } = useTranslationContext(); + + const fee = Amounts.sub(amount.raw, amount.effective).amount; + + const maxFrac = [amount.raw, amount.effective, fee] + .map((a) => Amounts.maxFractionalDigits(a)) + .reduce((c, p) => Math.max(c, p), 0); + + return ( + <PurchaseDetailsTable> + <tr> + <td>Withdraw</td> + <td> + <Amount value={amount.raw} maxFracSize={maxFrac} /> + </td> + </tr> + + {Amounts.isNonZero(fee) && ( + <tr> + <td>Transaction fees</td> + <td> + <Amount value={fee} negative maxFracSize={maxFrac} /> + </td> + </tr> + )} + <tr> + <td colSpan={2}> + <hr /> + </td> + </tr> + <tr> + <td>Total</td> + <td> + <Amount value={amount.effective} maxFracSize={maxFrac} /> + </td> + </tr> + </PurchaseDetailsTable> + ); +} + export function PurchaseDetails({ price, refund, @@ -1020,53 +1080,6 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode { ); } -function WithdrawDetails({ - transaction, -}: { - transaction: TransactionWithdrawal; -}): VNode { - const { i18n } = useTranslationContext(); - - const r = Amounts.parseOrThrow(transaction.amountRaw); - const e = Amounts.parseOrThrow(transaction.amountEffective); - const fee = Amounts.sub(r, e).amount; - - const maxFrac = [r, e, fee] - .map((a) => Amounts.maxFractionalDigits(a)) - .reduce((c, p) => Math.max(c, p), 0); - - return ( - <PurchaseDetailsTable> - <tr> - <td>Withdraw</td> - <td> - <Amount value={transaction.amountRaw} maxFracSize={maxFrac} /> - </td> - </tr> - - {Amounts.isNonZero(fee) && ( - <tr> - <td>Transaction fees</td> - <td> - <Amount value={fee} negative maxFracSize={maxFrac} /> - </td> - </tr> - )} - <tr> - <td colSpan={2}> - <hr /> - </td> - </tr> - <tr> - <td>Total</td> - <td> - <Amount value={transaction.amountEffective} maxFracSize={maxFrac} /> - </td> - </tr> - </PurchaseDetailsTable> - ); -} - function Header({ timestamp, total, |