new wallet history and view refactoring

1 files changed, 44 insertions, 26 deletions

diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index f487e54fc..f8191a0fb 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -20,17 +20,24 @@
  * @author Florian Dold <dold@taler.net>
  */
 
-import { render } from "preact";
+import { Fragment, render } from "preact";
 import { setupI18n } from "@gnu-taler/taler-util";
 import { strings } from "./i18n/strings";
 import { createHashHistory } from 'history';
 
-import { WithdrawPage } from "./wallet/Withdraw";
 import { WelcomePage } from "./wallet/Welcome";
-import { PayPage } from "./wallet/Pay";
-import { RefundPage } from "./wallet/Refund";
-import { TipPage } from './wallet/Tip';
+import { HistoryPage } from "./wallet/History";
+import { WithdrawPage } from "./cta/Withdraw";
+import { PayPage } from "./cta/Pay";
+import { RefundPage } from "./cta/Refund";
+import { TipPage } from './cta/Tip';
 import Router, { route, Route } from "preact-router";
+import { DevContextProvider } from "./context/devContext";
+import { LogoHeader } from "./components/LogoHeader";
+import { useEffect } from "preact/hooks";
+import {
+  Pages, WalletNavBar
+} from "./NavigationBar";
 
 function main(): void {
   try {
@@ -53,32 +60,43 @@ if (document.readyState === "loading") {
   main();
 }
 
-
-enum Pages {
-  welcome = '/welcome',
-  pay = '/pay',
-  payback = '/payback',
-  refund = '/refund',
-  reset_required = '/reset-required',
-  return_coins = '/return-coins',
-  tips = '/tips',
-  withdraw = '/withdraw',
+function withLogoAndNavBar(Component: any) {
+  return () => <Fragment>
+    <LogoHeader />
+    <WalletNavBar />
+    <Component />
+  </Fragment>
 }
 
 function Application() {
-  const h = createHashHistory();
-  return <Router history={h} >
+  return <div>
+    <DevContextProvider>
+      <Router history={createHashHistory()} >
+
+        <Route path={Pages.welcome} component={withLogoAndNavBar(WelcomePage)} />
 
-    <Route path={Pages.welcome} component={WelcomePage} />
-    <Route path={Pages.pay} component={PayPage} />
-    <Route path={Pages.refund} component={RefundPage} />
+        <Route path={Pages.history} component={withLogoAndNavBar(HistoryPage)} />
+        <Route path={Pages.transaction} component={withLogoAndNavBar(HistoryPage)} />
 
-    <Route path={Pages.tips} component={TipPage} />
-    <Route path={Pages.withdraw} component={WithdrawPage} />
+        <Route path={Pages.reset_required} component={() => <div>no yet implemented</div>} />
+        <Route path={Pages.payback} component={() => <div>no yet implemented</div>} />
+        <Route path={Pages.return_coins} component={() => <div>no yet implemented</div>} />
 
-    <Route path={Pages.reset_required} component={() => <div>no yet implemented</div>} />
-    <Route path={Pages.payback} component={() => <div>no yet implemented</div>} />
-    <Route path={Pages.return_coins} component={() => <div>no yet implemented</div>} />
+        {/** call to action */}
+        <Route path={Pages.pay} component={PayPage} />
+        <Route path={Pages.refund} component={RefundPage} />
+        <Route path={Pages.tips} component={TipPage} />
+        <Route path={Pages.withdraw} component={WithdrawPage} />
+
+        <Route default component={Redirect} to={Pages.history} />
+      </Router>
+    </DevContextProvider>
+  </div>
+}
 
-  </Router>
+function Redirect({ to }: { to: string }): null {
+  useEffect(() => {
+    route(to, true)
+  })
+  return null
 }