fix ui transaction list

1 files changed, 7 insertions, 168 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 7f9a9b1a8..2bb59fcdb 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -14,19 +14,14 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountString, Balance, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util";
+import { AmountString, Balance, Transaction, TransactionsResponse } from "@gnu-taler/taler-util";
 import { format } from "date-fns";
-import { Fragment, JSX, h } from "preact";
+import { Fragment, h, 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, WalletBox, DateSeparator, SmallTextLight } from "../components/styled";
+import { DateSeparator, WalletBox } from "../components/styled";
+import { TransactionItem } from "../components/TransactionItem";
 import { useBalances } from "../hooks/useBalances";
 import * as wxApi from "../wxApi";
-import { Pages } from "../NavigationBar";
 
 
 export function HistoryPage(props: any): JSX.Element {
@@ -65,6 +60,8 @@ export function HistoryView({ list, balances }: { list: Transaction[], balances:
     return rv;
   }, {} as { [x: string]: Transaction[] });
 
+  const multiCurrency = balances.length > 1
+
   return <WalletBox noPadding>
     {balances.length > 0 && <header>
       {balances.length === 1 && <div class="title">
@@ -81,168 +78,10 @@ export function HistoryView({ list, balances }: { list: Transaction[], balances:
         return <Fragment>
           <DateSeparator>{d}</DateSeparator>
           {byDate[d].map((tx, i) => (
-            <TransactionItem key={i} tx={tx} />
+            <TransactionItem key={i} tx={tx} multiCurrency={multiCurrency}/>
           ))}
         </Fragment>
       })}
     </section>
   </WalletBox>
 }
-
-function TransactionItem(props: { tx: Transaction }): JSX.Element {
-  const tx = props.tx;
-  switch (tx.type) {
-    case TransactionType.Withdrawal:
-      return (
-        <TransactionLayout
-          id={tx.transactionId}
-          amount={tx.amountEffective}
-          debitCreditIndicator={"credit"}
-          title="Withdrawal"
-          subtitle={`via ${tx.exchangeBaseUrl}`}
-          timestamp={tx.timestamp}
-          iconPath={imageBank}
-          pending={tx.pending}
-        ></TransactionLayout>
-      );
-    case TransactionType.Payment:
-      return (
-        <TransactionLayout
-          id={tx.transactionId}
-          amount={tx.amountEffective}
-          debitCreditIndicator={"debit"}
-          title="Payment"
-          subtitle={tx.info.summary}
-          timestamp={tx.timestamp}
-          iconPath={imageShoppingCart}
-          pending={tx.pending}
-        ></TransactionLayout>
-      );
-    case TransactionType.Refund:
-      return (
-        <TransactionLayout
-          id={tx.transactionId}
-          amount={tx.amountEffective}
-          debitCreditIndicator={"credit"}
-          title="Refund"
-          subtitle={tx.info.summary}
-          timestamp={tx.timestamp}
-          iconPath={imageRefund}
-          pending={tx.pending}
-        ></TransactionLayout>
-      );
-    case TransactionType.Tip:
-      return (
-        <TransactionLayout
-          id={tx.transactionId}
-          amount={tx.amountEffective}
-          debitCreditIndicator={"credit"}
-          title="Tip"
-          subtitle={`from ${new URL(tx.merchantBaseUrl).hostname}`}
-          timestamp={tx.timestamp}
-          iconPath={imageHandHeart}
-          pending={tx.pending}
-        ></TransactionLayout>
-      );
-    case TransactionType.Refresh:
-      return (
-        <TransactionLayout
-          id={tx.transactionId}
-          amount={tx.amountEffective}
-          debitCreditIndicator={"credit"}
-          title="Refresh"
-          subtitle={`via exchange ${tx.exchangeBaseUrl}`}
-          timestamp={tx.timestamp}
-          iconPath={imageRefresh}
-          pending={tx.pending}
-        ></TransactionLayout>
-      );
-    case TransactionType.Deposit:
-      return (
-        <TransactionLayout
-          id={tx.transactionId}
-          amount={tx.amountEffective}
-          debitCreditIndicator={"debit"}
-          title="Refresh"
-          subtitle={`to ${tx.targetPaytoUri}`}
-          timestamp={tx.timestamp}
-          iconPath={imageRefresh}
-          pending={tx.pending}
-        ></TransactionLayout>
-      );
-  }
-}
-
-function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
-  const date = new Date(props.timestamp.t_ms);
-  const dateStr = format(date, 'HH:mm:ss')
-  return (
-    // <a href={Pages.transaction.replace(':tid', props.id)}>
-      <HistoryRow href={Pages.transaction.replace(':tid', props.id)}>
-        <img src={props.iconPath} />
-        <Column>
-          <ExtraLargeText>
-            <span>{props.title}</span>
-            {props.pending ? (
-              <span style={{ color: "darkblue" }}> (Pending)</span>
-            ) : null}
-          </ExtraLargeText>
-          <SmallTextLight>{dateStr}</SmallTextLight>
-        </Column>
-        <TransactionAmount
-          pending={props.pending}
-          amount={props.amount}
-          debitCreditIndicator={props.debitCreditIndicator}
-        />
-      </HistoryRow>
-    // </a>
-  );
-}
-
-interface TransactionLayoutProps {
-  debitCreditIndicator: "debit" | "credit" | "unknown";
-  amount: AmountString | "unknown";
-  timestamp: Timestamp;
-  title: string;
-  id: string;
-  subtitle: string;
-  iconPath: string;
-  pending: boolean;
-}
-
-interface TransactionAmountProps {
-  debitCreditIndicator: "debit" | "credit" | "unknown";
-  amount: AmountString | "unknown";
-  pending: boolean;
-}
-
-function TransactionAmount(props: TransactionAmountProps): JSX.Element {
-  const [currency, amount] = props.amount.split(":");
-  let sign: string;
-  switch (props.debitCreditIndicator) {
-    case "credit":
-      sign = "+";
-      break;
-    case "debit":
-      sign = "-";
-      break;
-    case "unknown":
-      sign = "";
-  }
-  return (
-    <Column style={{
-      color:
-        props.pending ? "gray" :
-          (sign === '+' ? 'darkgreen' :
-            (sign === '-' ? 'darkred' :
-              undefined))
-    }}>
-      <ExtraLargeText>
-        {sign}
-        {amount}
-      </ExtraLargeText>
-      <div>{currency}</div>
-    </Column>
-  );
-}
-