[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: fix ui transaction list
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: fix ui transaction list |
|
Date: |
Tue, 24 Aug 2021 17:01:31 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new bbcae18f fix ui transaction list
bbcae18f is described below
commit bbcae18f6a3f284f6fee719a9b90d156da960465
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Tue Aug 24 12:00:34 2021 -0300
fix ui transaction list
---
.../History.tsx => components/TransactionItem.tsx} | 123 +++-----------
.../src/components/styled/index.tsx | 5 +
.../src/popup/History.stories.tsx | 2 +-
.../src/popup/History.tsx | 181 +--------------------
.../src/wallet/History.stories.tsx | 6 +-
.../src/wallet/History.tsx | 175 +-------------------
6 files changed, 50 insertions(+), 442 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx
b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
similarity index 53%
copy from packages/taler-wallet-webextension/src/popup/History.tsx
copy to packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index fd97d975..e5545b95 100644
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -1,90 +1,15 @@
-/*
- 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/>
- */
-
-import { AmountString, Balance, Timestamp, Transaction, TransactionsResponse,
TransactionType } from "@gnu-taler/taler-util";
-import { formatDistance } from "date-fns";
-import { JSX, h } from "preact";
-import { useEffect, useState } from "preact/hooks";
+import { AmountString, Timestamp, Transaction, TransactionType } from
'@gnu-taler/taler-util';
+import { format, formatDistance } from 'date-fns';
+import { h } from 'preact';
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 "../NavigationBar";
+import { Column, ExtraLargeText, HistoryRow, SmallTextLight, LargeText } from
'./styled/index';
-
-export function HistoryPage(props: any): JSX.Element {
- const [transactions, setTransactions] = useState<
- TransactionsResponse | undefined
- >(undefined);
- const balance = useBalances()
- const balanceWithoutError = balance?.error ? [] :
(balance?.response.balances || [])
-
- useEffect(() => {
- const fetchData = async (): Promise<void> => {
- const res = await wxApi.getTransactions();
- setTransactions(res);
- };
- fetchData();
- }, []);
-
- if (!transactions) {
- return <div>Loading ...</div>;
- }
-
- return <HistoryView balances={balanceWithoutError}
list={[...transactions.transactions].reverse()} />;
-}
-
-function amountToString(c: AmountString) {
- const idx = c.indexOf(':')
- return `${c.substring(idx + 1)} ${c.substring(0, idx)}`
-}
-
-
-
-export function HistoryView({ list, balances }: { list: Transaction[],
balances: Balance[] }) {
- return <PopupBox noPadding>
- {balances.length > 0 && <header>
- {balances.length === 1 && <div class="title">
- Balance: <span>{amountToString(balances[0].available)}</span>
- </div>}
- {balances.length > 1 && <div class="title">
- Balance: <ul style={{ margin: 0 }}>
- {balances.map(b => <li>{b.available}</li>)}
- </ul>
- </div>}
- </header>}
- <section>
- {list.slice(0, 3).map((tx, i) => (
- <TransactionItem key={i} tx={tx} />
- ))}
- </section>
- <footer style={{ justifyContent: 'space-around' }}>
- <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>
-}
-
-function TransactionItem(props: { tx: Transaction }): JSX.Element {
+export function TransactionItem(props: { tx: Transaction, multiCurrency:
boolean }): JSX.Element {
const tx = props.tx;
switch (tx.type) {
case TransactionType.Withdrawal:
@@ -93,11 +18,11 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
- title="Withdrawal"
- subtitle={`via ${tx.exchangeBaseUrl}`}
+ title={new URL(tx.exchangeBaseUrl).hostname}
timestamp={tx.timestamp}
iconPath={imageBank}
pending={tx.pending}
+ multiCurrency={props.multiCurrency}
></TransactionLayout>
);
case TransactionType.Payment:
@@ -106,11 +31,11 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"debit"}
- title="Payment"
- subtitle={tx.info.summary}
+ title={tx.info.merchant.name}
timestamp={tx.timestamp}
iconPath={imageShoppingCart}
pending={tx.pending}
+ multiCurrency={props.multiCurrency}
></TransactionLayout>
);
case TransactionType.Refund:
@@ -119,11 +44,11 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
- title="Refund"
- subtitle={tx.info.summary}
+ title={tx.info.merchant.name}
timestamp={tx.timestamp}
iconPath={imageRefund}
pending={tx.pending}
+ multiCurrency={props.multiCurrency}
></TransactionLayout>
);
case TransactionType.Tip:
@@ -132,11 +57,11 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
- title="Tip"
- subtitle={`from ${new URL(tx.merchantBaseUrl).hostname}`}
+ title={new URL(tx.merchantBaseUrl).hostname}
timestamp={tx.timestamp}
iconPath={imageHandHeart}
pending={tx.pending}
+ multiCurrency={props.multiCurrency}
></TransactionLayout>
);
case TransactionType.Refresh:
@@ -145,11 +70,11 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
- title="Refresh"
- subtitle={`via exchange ${tx.exchangeBaseUrl}`}
+ title={new URL(tx.exchangeBaseUrl).hostname}
timestamp={tx.timestamp}
iconPath={imageRefresh}
pending={tx.pending}
+ multiCurrency={props.multiCurrency}
></TransactionLayout>
);
case TransactionType.Deposit:
@@ -158,11 +83,11 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"debit"}
- title="Refresh"
- subtitle={`to ${tx.targetPaytoUri}`}
+ title={tx.targetPaytoUri}
timestamp={tx.timestamp}
iconPath={imageRefresh}
pending={tx.pending}
+ multiCurrency={props.multiCurrency}
></TransactionLayout>
);
}
@@ -170,23 +95,24 @@ function TransactionItem(props: { tx: Transaction }):
JSX.Element {
function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
const date = new Date(props.timestamp.t_ms);
- const now = new Date();
- const dateStr = formatDistance(date, now, { addSuffix: true })
+ const dateStr = format(date, 'dd MMM, hh:mm')
+
return (
<HistoryRow href={Pages.transaction.replace(':tid', props.id)}>
<img src={props.iconPath} />
<Column>
- <ExtraLargeText>
+ <LargeText>
<span>{props.title}</span>
{props.pending ? (
<span style={{ color: "darkblue" }}> (Pending)</span>
) : null}
- </ExtraLargeText>
+ </LargeText>
<SmallTextLight>{dateStr}</SmallTextLight>
</Column>
<TransactionAmount
pending={props.pending}
amount={props.amount}
+ multiCurrency={props.multiCurrency}
debitCreditIndicator={props.debitCreditIndicator}
/>
</HistoryRow>
@@ -199,15 +125,16 @@ interface TransactionLayoutProps {
timestamp: Timestamp;
title: string;
id: string;
- subtitle: string;
iconPath: string;
pending: boolean;
+ multiCurrency: boolean;
}
interface TransactionAmountProps {
debitCreditIndicator: "debit" | "credit" | "unknown";
amount: AmountString | "unknown";
pending: boolean;
+ multiCurrency: boolean;
}
function TransactionAmount(props: TransactionAmountProps): JSX.Element {
@@ -235,7 +162,7 @@ function TransactionAmount(props: TransactionAmountProps):
JSX.Element {
{sign}
{amount}
</ExtraLargeText>
- <div>{currency}</div>
+ {props.multiCurrency && <div>{currency}</div>}
</Column>
);
}
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 6067fa44..66595d84 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -269,6 +269,7 @@ export const RowLightBorderGray = styled(Row2)`
export const HistoryRow = styled.a`
text-decoration: none;
+ color: #212121;
display: flex;
justify-content: space-between;
@@ -312,6 +313,10 @@ export const LightText = styled.div`
export const SmallText = styled.div`
font-size: small;
`
+export const LargeText = styled.div`
+ font-size: large;
+`
+
export const ExtraLargeText = styled.div`
font-size: x-large;
`
diff --git a/packages/taler-wallet-webextension/src/popup/History.stories.tsx
b/packages/taler-wallet-webextension/src/popup/History.stories.tsx
index c92033d4..c304b86e 100644
--- a/packages/taler-wallet-webextension/src/popup/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/History.stories.tsx
@@ -48,7 +48,7 @@ const exampleData = {
withdraw: {
...commonTransaction,
type: TransactionType.Withdrawal,
- exchangeBaseUrl: 'http://exchange.taler',
+ exchangeBaseUrl: 'http://exchange.demo.taler.net',
withdrawalDetails: {
confirmed: false,
exchangePaytoUris: ['payto://x-taler-bank/bank/account'],
diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx
b/packages/taler-wallet-webextension/src/popup/History.tsx
index fd97d975..77d60388 100644
--- a/packages/taler-wallet-webextension/src/popup/History.tsx
+++ b/packages/taler-wallet-webextension/src/popup/History.tsx
@@ -14,19 +14,13 @@
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 { formatDistance } from "date-fns";
-import { JSX, h } from "preact";
+import { AmountString, Balance, Transaction, TransactionsResponse } from
"@gnu-taler/taler-util";
+import { 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, PopupBox, SmallTextLight } from
"../components/styled";
+import { PopupBox } 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 {
@@ -59,20 +53,20 @@ function amountToString(c: AmountString) {
export function HistoryView({ list, balances }: { list: Transaction[],
balances: Balance[] }) {
+ const multiCurrency = balances.length > 1
return <PopupBox noPadding>
{balances.length > 0 && <header>
- {balances.length === 1 && <div class="title">
- Balance: <span>{amountToString(balances[0].available)}</span>
- </div>}
- {balances.length > 1 && <div class="title">
+ {multiCurrency ? <div class="title">
Balance: <ul style={{ margin: 0 }}>
{balances.map(b => <li>{b.available}</li>)}
</ul>
+ </div> : <div class="title">
+ Balance: <span>{amountToString(balances[0].available)}</span>
</div>}
</header>}
<section>
{list.slice(0, 3).map((tx, i) => (
- <TransactionItem key={i} tx={tx} />
+ <TransactionItem key={i} tx={tx} multiCurrency={multiCurrency}/>
))}
</section>
<footer style={{ justifyContent: 'space-around' }}>
@@ -83,160 +77,3 @@ export function HistoryView({ list, balances }: { list:
Transaction[], balances:
</footer>
</PopupBox>
}
-
-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 now = new Date();
- const dateStr = formatDistance(date, now, { addSuffix: true })
- return (
- <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>
- );
-}
-
-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>
- );
-}
-
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 7db13fef..32499a26 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -50,7 +50,7 @@ const exampleData = {
withdraw: {
...commonTransaction(),
type: TransactionType.Withdrawal,
- exchangeBaseUrl: 'http://exchange.taler',
+ exchangeBaseUrl: 'http://exchange.demo.taler.net',
withdrawalDetails: {
confirmed: false,
exchangePaytoUris: ['payto://x-taler-bank/bank/account'],
@@ -64,7 +64,7 @@ const exampleData = {
info: {
contractTermsHash: 'ASDZXCASD',
merchant: {
- name: 'the merchant',
+ name: 'Blog',
},
orderId: '2021.167-03NPY6MCYMVGT',
products: [],
@@ -88,7 +88,7 @@ const exampleData = {
tip: {
...commonTransaction(),
type: TransactionType.Tip,
- merchantBaseUrl: 'http://merchant.taler',
+ merchantBaseUrl: 'http://ads.merchant.taler.net/',
} as TransactionTip,
refund: {
...commonTransaction(),
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx
b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 7f9a9b1a..2bb59fcd 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>
- );
-}
-
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: fix ui transaction list,
gnunet <=