new wallet history and view refactoring

5 files changed, 20 insertions, 96 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
index 940d1f2a4..72139e1f8 100644
--- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
@@ -25,7 +25,7 @@ import {
   SmallText, SmallTextLight
 } from "../components/styled";
 import { useBackupStatus } from "../hooks/useBackupStatus";
-import { Pages } from "./popup";
+import { Pages } from "../NavigationBar";
 
 interface Props {
   onAddProvider: () => void;
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx
index b6b65314e..7c9eae54b 100644
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ b/packages/taler-wallet-webextension/src/popup/History.tsx
@@ -14,11 +14,19 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, Amounts, AmountString, Balance, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util";
+import { AmountString, Balance, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util";
+import { formatDistance } from "date-fns";
 import { JSX } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import imageBank from '../../static/img/ri-bank-line.svg';
+import imageHandHeart from '../../static/img/ri-hand-heart-line.svg';
+import imageRefresh from '../../static/img/ri-refresh-line.svg';
+import imageRefund from '../../static/img/ri-refund-2-line.svg';
+import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg';
+import { Column, ExtraLargeText, HistoryRow, PopupBox, SmallTextLight } from "../components/styled";
+import { useBalances } from "../hooks/useBalances";
 import * as wxApi from "../wxApi";
-import { Pages } from "./popup";
+import { Pages } from "../NavigationBar";
 
 
 export function HistoryPage(props: any): JSX.Element {
@@ -45,7 +53,7 @@ export function HistoryPage(props: any): JSX.Element {
 
 function amountToString(c: AmountString) {
   const idx = c.indexOf(':')
-  return `${c.substring(idx+1)} ${c.substring(0,idx)}`
+  return `${c.substring(idx + 1)} ${c.substring(0, idx)}`
 }
 
 
@@ -68,20 +76,14 @@ export function HistoryView({ list, balances }: { list: Transaction[], balances:
       ))}
     </section>
     <footer style={{ justifyContent: 'space-around' }}>
-      <a style={{ color: 'darkgreen', textDecoration:'none' }} href={Pages.transaction.replace(':tid', 'asd')}>VIEW MORE TRANSACTIONS</a>
+      <a target="_blank"
+        rel="noopener noreferrer"
+        style={{ color: 'darkgreen', textDecoration: 'none' }}
+        href={chrome.extension ? chrome.extension.getURL(`/static/wallet.html#/history`) : '#'}>VIEW MORE TRANSACTIONS</a>
     </footer>
   </PopupBox>
 }
 
-import imageBank from '../../static/img/ri-bank-line.svg';
-import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg';
-import imageRefund from '../../static/img/ri-refund-2-line.svg';
-import imageHandHeart from '../../static/img/ri-hand-heart-line.svg';
-import imageRefresh from '../../static/img/ri-refresh-line.svg';
-import { Column, ExtraLargeText, HistoryRow, PopupBox, Row, RowBorderGray, SmallTextLight } from "../components/styled";
-import { useBalances } from "../hooks/useBalances";
-import { formatDistance } from "date-fns";
-
 function TransactionItem(props: { tx: Transaction }): JSX.Element {
   const tx = props.tx;
   switch (tx.type) {
@@ -171,18 +173,16 @@ function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
   const now = new Date();
   const dateStr = formatDistance(date, now, { addSuffix: true })
   return (
-    <HistoryRow>
+    <HistoryRow href={Pages.transaction.replace(':tid', props.id)}>
       <img src={props.iconPath} />
       <Column>
         <ExtraLargeText>
-          <a href={Pages.transaction.replace(':tid', props.id)}><span>{props.title}</span></a>
+          <span>{props.title}</span>
           {props.pending ? (
             <span style={{ color: "darkblue" }}> (Pending)</span>
           ) : null}
         </ExtraLargeText>
         <SmallTextLight>{dateStr}</SmallTextLight>
-
-        {/* <div>{props.subtitle}</div> */}
       </Column>
       <TransactionAmount
         pending={props.pending}
diff --git a/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx
index ec3634d9b..ce5b11c32 100644
--- a/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx
@@ -20,7 +20,7 @@
 */
 
 import { Fragment, FunctionalComponent } from 'preact';
-import { NavBar as TestedComponent } from './popup';
+import { NavBar as TestedComponent } from '../NavigationBar';
 
 export default {
   title: 'popup/header',
diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx
index fd7389c04..8177b74ad 100644
--- a/packages/taler-wallet-webextension/src/popup/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Transaction.tsx
@@ -20,7 +20,7 @@ import { Fragment, JSX, VNode } from "preact";
 import { route } from 'preact-router';
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
-import { Pages } from "./popup";
+import { Pages } from "../NavigationBar";
 import emptyImg from "../../static/img/empty.png"
 import { Button, ButtonDestructive, ButtonPrimary, ListOfProducts, PopupBox, Row, RowBorderGray, SmallTextLight } from "../components/styled";
 import { ErrorMessage } from "../components/ErrorMessage";
diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx
deleted file mode 100644
index 4aee48fb7..000000000
--- a/packages/taler-wallet-webextension/src/popup/popup.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- This file is part of TALER
- (C) 2016 GNUnet e.V.
-
- TALER is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
- * Popup shown to the user when they click
- * the Taler browser action button.
- *
- * @author Florian Dold
- */
-
-/**
- * Imports.
- */
-import { i18n } from "@gnu-taler/taler-util";
-import { ComponentChildren, JSX } from "preact";
-import Match from "preact-router/match";
-import { useDevContext } from "../context/devContext";
-import { PopupNavigation } from '../components/styled'
-
-export enum Pages {
-  balance = '/balance',
-  settings = '/settings',
-  dev = '/dev',
-  backup = '/backup',
-  history = '/history',
-  transaction = '/transaction/:tid',
-  provider_detail = '/provider/:pid',
-  provider_add = '/provider/add',
-}
-
-interface TabProps {
-  target: string;
-  current?: string;
-  children?: ComponentChildren;
-}
-
-function Tab(props: TabProps): JSX.Element {
-  let cssClass = "";
-  if (props.current?.startsWith(props.target)) {
-    cssClass = "active";
-  }
-  return (
-    <a href={props.target} class={cssClass}>
-      {props.children}
-    </a>
-  );
-}
-
-export function NavBar({devMode, path}:{path:string, devMode:boolean}) {
-  return <PopupNavigation devMode={devMode}>
-    <Tab target="/balance" current={path}>{i18n.str`Balance`}</Tab>
-    <Tab target="/history" current={path}>{i18n.str`History`}</Tab>
-    <Tab target="/backup" current={path}>{i18n.str`Backup`}</Tab>
-    <Tab target="/settings" current={path}>{i18n.str`Settings`}</Tab>
-    {devMode && <Tab target="/dev" current={path}>{i18n.str`Dev`}</Tab>}
-  </PopupNavigation>
-}
-
-export function WalletNavBar() {
-  const { devMode } = useDevContext()
-  return <Match>{({ path }: any) => <NavBar devMode={devMode} path={path} />}</Match>
-}
-