diff options
| -rw-r--r-- | packages/taler-wallet-webextension/package.json | 4 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 27 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/popupEntryPoint.tsx | 14 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/walletEntryPoint.tsx | 15 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 2 |
5 files changed, 35 insertions, 27 deletions
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index 9b02eee24..900fb2ab7 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/packages/taler-wallet-webextension/package.json @@ -23,7 +23,7 @@ "date-fns": "^2.28.0", "history": "4.10.1", "preact": "^10.5.13", - "preact-router": "^3.2.1", + "preact-router": "3.2.1", "qrcode-generator": "^1.4.4", "tslib": "^2.3.1" }, @@ -74,4 +74,4 @@ ], "exclude": [] } -} +}
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 44e8af78e..a25790852 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -26,21 +26,20 @@ */ import { i18n } from "@gnu-taler/taler-util"; import { ComponentChildren, h, VNode } from "preact"; -import Match from "preact-router/match"; import { PopupNavigation } from "./components/styled"; export enum Pages { welcome = "/welcome", balance = "/balance", balance_history = "/balance/history/:currency", - manual_withdraw = "/manual-withdraw/:currency?", - deposit = "/deposit/:currency", + manual_withdraw = "/balance/manual-withdraw/:currency?", + deposit = "/balance/deposit/:currency", + transaction = "/balance/transaction/:tid", settings = "/settings", dev = "/dev", cta = "/cta/:action", backup = "/backup", last_activity = "/last-activity", - transaction = "/transaction/:tid", provider_detail = "/provider/:pid", provider_add = "/provider/add", exchange_add = "/exchange/add", @@ -73,7 +72,13 @@ function Tab(props: TabProps): VNode { ); } -export function NavBar({ devMode, path }: { path: string; devMode: boolean }) { +export function NavBar({ + devMode, + path, +}: { + path: string; + devMode: boolean; +}): VNode { return ( <PopupNavigation devMode={devMode}> <div> @@ -89,15 +94,3 @@ export function NavBar({ devMode, path }: { path: string; devMode: boolean }) { </PopupNavigation> ); } - -export function WalletNavBar({ devMode }: { devMode: boolean }) { - // const { devMode } = useDevContext(); - return ( - <Match> - {({ path }: any) => { - console.log("path", path); - return <NavBar devMode={devMode} path={path} />; - }} - </Match> - ); -} diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 5cd68b9b4..ecb49b01d 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -29,7 +29,7 @@ import { PopupBox } from "./components/styled"; import { DevContextProvider } from "./context/devContext"; import { useTalerActionURL } from "./hooks/useTalerActionURL"; import { strings } from "./i18n/strings"; -import { Pages, WalletNavBar } from "./NavigationBar"; +import { NavBar, Pages } from "./NavigationBar"; import { BackupPage } from "./wallet/BackupPage"; import { BalancePage } from "./popup/BalancePage"; import { DeveloperPage } from "./popup/DeveloperPage"; @@ -40,6 +40,7 @@ import { TalerActionFound } from "./popup/TalerActionFound"; import { ExchangeAddPage } from "./wallet/ExchangeAddPage"; import { IoCProviderForRuntime } from "./context/iocContext"; import { LastActivityPage } from "./wallet/LastActivityPage"; +import { Match } from "preact-router/match"; function main(): void { try { @@ -75,16 +76,21 @@ function CheckTalerActionComponent(): VNode { return <Fragment />; } -function Application() { +function Application(): VNode { + const hash_history = createHashHistory(); return ( // <div> <DevContextProvider> {({ devMode }: { devMode: boolean }) => ( <IoCProviderForRuntime> - <WalletNavBar devMode={devMode} /> + <Match> + {({ path }: { path: string }) => ( + <NavBar devMode={devMode} path={path} /> + )} + </Match> <CheckTalerActionComponent /> <PopupBox devMode={devMode}> - <Router history={createHashHistory()}> + <Router history={hash_history}> <Route path={Pages.dev} component={DeveloperPage} /> <Route diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index b54d49ded..978d6fde5 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -24,6 +24,7 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { createHashHistory } from "history"; import { h, render, VNode } from "preact"; import Router, { route, Route } from "preact-router"; +import Match from "preact-router/match"; import { useEffect, useState } from "preact/hooks"; import { LogoHeader } from "./components/LogoHeader"; import { SuccessBox, WalletBox } from "./components/styled"; @@ -34,7 +35,7 @@ import { RefundPage } from "./cta/Refund"; import { TipPage } from "./cta/Tip"; import { WithdrawPage } from "./cta/Withdraw"; import { strings } from "./i18n/strings"; -import { Pages, WalletNavBar } from "./NavigationBar"; +import { NavBar, Pages } from "./NavigationBar"; import { DeveloperPage } from "./popup/DeveloperPage"; import { BackupPage } from "./wallet/BackupPage"; import { BalancePage } from "./wallet/BalancePage"; @@ -76,20 +77,28 @@ function Application(): VNode { const [globalNotification, setGlobalNotification] = useState< string | undefined >(undefined); + const hash_history = createHashHistory(); return ( <div> <DevContextProvider> {({ devMode }: { devMode: boolean }) => ( <IoCProviderForRuntime> <LogoHeader /> - <WalletNavBar devMode={devMode} /> + {/* <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 }) => ( + <NavBar devMode={devMode} path={path} /> + )} + </Match> <WalletBox> {globalNotification && ( <SuccessBox onClick={() => setGlobalNotification(undefined)}> <div>{globalNotification}</div> </SuccessBox> )} - <Router history={createHashHistory()}> + <Router history={hash_history}> <Route path={Pages.welcome} component={WelcomePage} /> <Route diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c39313437..7a2682d7d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,7 +352,7 @@ importers: preact: ^10.5.13 preact-cli: ^3.0.5 preact-render-to-string: ^5.1.19 - preact-router: ^3.2.1 + preact-router: 3.2.1 qrcode-generator: ^1.4.4 rimraf: ^3.0.2 rollup: ^2.63.0 |