diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 48 |
1 files changed, 20 insertions, 28 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 21bfc943d..423a641a3 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -26,11 +26,12 @@ import { } from "@gnu-taler/taler-util"; import { differenceInSeconds } from "date-fns"; import { ComponentChildren, Fragment, h, VNode } from "preact"; -import { route } from "preact-router"; import { useState } from "preact/hooks"; import emptyImg from "../../static/img/empty.png"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType"; import { ErrorTalerOperation } from "../components/ErrorTalerOperation"; +import { Loading } from "../components/Loading"; +import { LoadingError } from "../components/LoadingError"; import { Part } from "../components/Part"; import { Button, @@ -49,7 +50,11 @@ import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { Pages } from "../NavigationBar"; import * as wxApi from "../wxApi"; -export function TransactionPage({ tid }: { tid: string }): VNode { +interface Props { + tid: string; + goToWalletHistory: (currency?: string) => void; +} +export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { async function getTransaction(): Promise<Transaction> { const res = await wxApi.getTransactions(); const ts = res.transactions.filter((t) => t.transactionId === tid); @@ -65,43 +70,30 @@ export function TransactionPage({ tid }: { tid: string }): VNode { ]); if (!state) { - return ( - <div> - <i18n.Translate>Loading ...</i18n.Translate> - </div> - ); + return <Loading />; } if (state.hasError) { - route(Pages.balance); return ( - <div> - <i18n.Translate> - There was an error. Redirecting into the history page - </i18n.Translate> - </div> + <LoadingError + title="Could not load the transaction information" + error={state} + /> ); } - function goToHistory(): void { - const currency = - state !== undefined && !state.hasError - ? Amounts.parseOrThrow(state.response.amountRaw).currency - : undefined; - - if (currency) { - route(Pages.balance_history.replace(":currency", currency)); - } else { - route(Pages.balance); - } - } + const currency = Amounts.parse(state.response.amountRaw)?.currency; return ( <TransactionView transaction={state.response} - onDelete={() => wxApi.deleteTransaction(tid).then(goToHistory)} - onRetry={() => wxApi.retryTransaction(tid).then(goToHistory)} - onBack={goToHistory} + onDelete={() => + wxApi.deleteTransaction(tid).then(() => goToWalletHistory(currency)) + } + onRetry={() => + wxApi.retryTransaction(tid).then(() => goToWalletHistory(currency)) + } + onBack={() => goToWalletHistory(currency)} /> ); } |