aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-01-19 00:20:51 -0300
committerSebastian <sebasjm@gmail.com>2022-01-19 13:52:02 -0300
commita01ad4758f8d8f7605e9efd5694d6e203e2d2b6b (patch)
tree2b2e4353cc0878c58476143fdb7eb1477ec7f38d
parentac60a0559c660192710524e3c584ce2a91f8e6d2 (diff)
header rendering
-rw-r--r--packages/taler-wallet-webextension/package.json4
-rw-r--r--packages/taler-wallet-webextension/src/NavigationBar.tsx27
-rw-r--r--packages/taler-wallet-webextension/src/popupEntryPoint.tsx14
-rw-r--r--packages/taler-wallet-webextension/src/walletEntryPoint.tsx15
-rw-r--r--pnpm-lock.yaml2
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