From 97a05ff659af274dcfcd9c76bf19100bbd51ce0e Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 19 Aug 2021 00:34:47 -0300
Subject: new wallet history and view refactoring

---
 .../src/popup/History.tsx                          | 34 +++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/popup/History.tsx')

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}
-- 
cgit v1.2.3