diff options
author | Sebastian <sebasjm@gmail.com> | 2023-01-04 11:24:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-01-04 11:38:00 -0300 |
commit | 24cac493dded00ef40e0e30a0d2263e4f35c3e29 (patch) | |
tree | 1bbd1fb4f9149af349358491c3720750d031d255 /packages/taler-wallet-webextension/src/popup/Application.tsx | |
parent | 7d02e4212346b7b7b88197259a7e74554e1b10a3 (diff) | |
download | wallet-core-24cac493dded00ef40e0e30a0d2263e4f35c3e29.tar.xz |
fix #7522
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup/Application.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/Application.tsx | 246 |
1 files changed, 137 insertions, 109 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx index 8186c6790..9cae0d048 100644 --- a/packages/taler-wallet-webextension/src/popup/Application.tsx +++ b/packages/taler-wallet-webextension/src/popup/Application.tsx @@ -21,7 +21,7 @@ */ import { createHashHistory } from "history"; -import { Fragment, h, VNode } from "preact"; +import { ComponentChildren, Fragment, h, VNode } from "preact"; import Router, { route, Route } from "preact-router"; import { Match } from "preact-router/match"; import { useEffect, useState } from "preact/hooks"; @@ -34,15 +34,28 @@ import { useTranslationContext, } from "../context/translation.js"; import { useTalerActionURL } from "../hooks/useTalerActionURL.js"; -import { Pages, PopupNavBar } from "../NavigationBar.js"; +import { PopupNavBarOptions, Pages, PopupNavBar } from "../NavigationBar.js"; import { platform } from "../platform/api.js"; import { BackupPage } from "../wallet/BackupPage.js"; import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js"; import { BalancePage } from "./BalancePage.js"; import { TalerActionFound } from "./TalerActionFound.js"; -function CheckTalerActionComponent(): VNode { - const [action] = useTalerActionURL(); +export function Application(): VNode { + return ( + <TranslationProvider> + <DevContextProvider> + <IoCProviderForRuntime> + <ApplicationView /> + </IoCProviderForRuntime> + </DevContextProvider> + </TranslationProvider> + ); +} +function ApplicationView(): VNode { + const hash_history = createHashHistory(); + + const [action, setDismissed] = useTalerActionURL(); const actionUri = action?.uri; @@ -52,116 +65,110 @@ function CheckTalerActionComponent(): VNode { } }, [actionUri]); - return <Fragment />; -} + async function redirectToTxInfo(tid: string): Promise<void> { + redirectTo(Pages.balanceTransaction({ tid })); + } -export function Application(): VNode { - const hash_history = createHashHistory(); return ( - <TranslationProvider> - <DevContextProvider> - {({ devMode }: { devMode: boolean }) => ( - <IoCProviderForRuntime> - <PendingTransactions - goToTransaction={(tid: string) => - redirectTo(Pages.balanceTransaction({ tid })) + <Router history={hash_history}> + <Route + path={Pages.balance} + component={() => ( + <PopupTemplate path="balance" goToTransaction={redirectToTxInfo}> + <BalancePage + goToWalletManualWithdraw={() => redirectTo(Pages.receiveCash({}))} + goToWalletDeposit={(currency: string) => + redirectTo(Pages.sendCash({ amount: `${currency}:0` })) + } + goToWalletHistory={(currency: string) => + redirectTo(Pages.balanceHistory({ currency })) } /> - <Match> - {({ path }: { path: string }) => <PopupNavBar path={path} />} - </Match> - <CheckTalerActionComponent /> - <PopupBox devMode={devMode}> - <Router history={hash_history}> - <Route - path={Pages.balance} - component={BalancePage} - goToWalletManualWithdraw={() => - redirectTo(Pages.receiveCash({})) - } - goToWalletDeposit={(currency: string) => - redirectTo(Pages.sendCash({ amount: `${currency}:0` })) - } - goToWalletHistory={(currency: string) => - redirectTo(Pages.balanceHistory({ currency })) - } - /> - - <Route - path={Pages.cta.pattern} - component={function Action({ action }: { action: string }) { - const [, setDismissed] = useTalerActionURL(); - - return ( - <TalerActionFound - url={decodeURIComponent(action)} - onDismiss={() => { - setDismissed(true); - return redirectTo(Pages.balance); - }} - /> - ); - }} - /> - - <Route - path={Pages.backup} - component={BackupPage} - onAddProvider={() => redirectTo(Pages.backupProviderAdd)} - /> - <Route - path={Pages.backupProviderDetail.pattern} - component={ProviderDetailPage} - onBack={() => redirectTo(Pages.backup)} - /> - - <Route - path={Pages.balanceTransaction.pattern} - component={RedirectToWalletPage} - /> - <Route - path={Pages.ctaWithdrawManual.pattern} - component={RedirectToWalletPage} - /> - <Route - path={Pages.balanceDeposit.pattern} - component={RedirectToWalletPage} - /> - <Route - path={Pages.balanceHistory.pattern} - component={RedirectToWalletPage} - /> - <Route - path={Pages.backupProviderAdd} - component={RedirectToWalletPage} - /> - <Route - path={Pages.receiveCash.pattern} - component={RedirectToWalletPage} - /> - <Route - path={Pages.sendCash.pattern} - component={RedirectToWalletPage} - /> - <Route path={Pages.qr} component={RedirectToWalletPage} /> - <Route path={Pages.settings} component={RedirectToWalletPage} /> - <Route - path={Pages.settingsExchangeAdd.pattern} - component={RedirectToWalletPage} - /> - <Route path={Pages.dev} component={RedirectToWalletPage} /> - <Route - path={Pages.notifications} - component={RedirectToWalletPage} - /> - - <Route default component={Redirect} to={Pages.balance} /> - </Router> - </PopupBox> - </IoCProviderForRuntime> + </PopupTemplate> )} - </DevContextProvider> - </TranslationProvider> + /> + + <Route + path={Pages.cta.pattern} + component={function Action({ action }: { action: string }) { + // const [, setDismissed] = useTalerActionURL(); + + return ( + <PopupTemplate> + <TalerActionFound + url={decodeURIComponent(action)} + onDismiss={() => { + setDismissed(true); + return redirectTo(Pages.balance); + }} + /> + </PopupTemplate> + ); + }} + /> + + <Route + path={Pages.backup} + component={() => ( + <PopupTemplate path="backup" goToTransaction={redirectToTxInfo}> + <BackupPage + onAddProvider={() => redirectTo(Pages.backupProviderAdd)} + /> + </PopupTemplate> + )} + /> + <Route + path={Pages.backupProviderDetail.pattern} + component={({ pid }: { pid: string }) => ( + <PopupTemplate path="backup"> + <ProviderDetailPage + onPayProvider={(uri: string) => + redirectTo(`${Pages.ctaPay}?talerPayUri=${uri}`) + } + onWithdraw={(amount: string) => + redirectTo(Pages.receiveCash({ amount })) + } + pid={pid} + onBack={() => redirectTo(Pages.backup)} + /> + </PopupTemplate> + )} + /> + + <Route + path={Pages.balanceTransaction.pattern} + component={RedirectToWalletPage} + /> + <Route + path={Pages.ctaWithdrawManual.pattern} + component={RedirectToWalletPage} + /> + <Route + path={Pages.balanceDeposit.pattern} + component={RedirectToWalletPage} + /> + <Route + path={Pages.balanceHistory.pattern} + component={RedirectToWalletPage} + /> + <Route path={Pages.backupProviderAdd} component={RedirectToWalletPage} /> + <Route + path={Pages.receiveCash.pattern} + component={RedirectToWalletPage} + /> + <Route path={Pages.sendCash.pattern} component={RedirectToWalletPage} /> + <Route path={Pages.ctaPay} component={RedirectToWalletPage} /> + <Route path={Pages.qr} component={RedirectToWalletPage} /> + <Route path={Pages.settings} component={RedirectToWalletPage} /> + <Route + path={Pages.settingsExchangeAdd.pattern} + component={RedirectToWalletPage} + /> + <Route path={Pages.dev} component={RedirectToWalletPage} /> + <Route path={Pages.notifications} component={RedirectToWalletPage} /> + + <Route default component={Redirect} to={Pages.balance} /> + </Router> ); } @@ -195,3 +202,24 @@ function Redirect({ to }: { to: string }): null { }); return null; } + +function PopupTemplate({ + path, + children, + goToTransaction, +}: { + path?: PopupNavBarOptions; + children: ComponentChildren; + goToTransaction?: (id: string) => Promise<void>; +}): VNode { + return ( + <Fragment> + {/* <CheckTalerActionComponent /> */} + {goToTransaction ? ( + <PendingTransactions goToTransaction={goToTransaction} /> + ) : undefined} + <PopupNavBar path={path} /> + <PopupBox>{children}</PopupBox> + </Fragment> + ); +} |