summaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2021-11-15 11:18:58 -0300
committerSebastian <sebasjm@gmail.com>2021-11-15 11:18:58 -0300
commit1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 (patch)
tree99e8241a5eb5af4d752be93a460004bc0c6255aa /packages/taler-wallet-webextension/src/components/TransactionItem.tsx
parent9692f589c687a2ba39a705ca4238cf123f444c61 (diff)
downloadwallet-core-1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5.tar.gz
wallet-core-1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5.tar.bz2
wallet-core-1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5.zip
prettier
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/TransactionItem.tsx')
-rw-r--r--packages/taler-wallet-webextension/src/components/TransactionItem.tsx76
1 files changed, 50 insertions, 26 deletions
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 991e97c94..1917d5627 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -14,18 +14,33 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-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 {
+ 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 { Pages } from "../NavigationBar";
-import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index';
+import {
+ Column,
+ ExtraLargeText,
+ HistoryRow,
+ SmallLightText,
+ LargeText,
+ LightText,
+} from "./styled/index";
-export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element {
+export function TransactionItem(props: {
+ tx: Transaction;
+ multiCurrency: boolean;
+}): JSX.Element {
const tx = props.tx;
switch (tx.type) {
case TransactionType.Withdrawal:
@@ -112,20 +127,26 @@ export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean
function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
const date = new Date(props.timestamp.t_ms);
- const dateStr = format(date, 'dd MMM, hh:mm')
+ const dateStr = format(date, "dd MMM, hh:mm");
return (
- <HistoryRow href={Pages.transaction.replace(':tid', props.id)}>
+ <HistoryRow href={Pages.transaction.replace(":tid", props.id)}>
<img src={props.iconPath} />
<Column>
<LargeText>
<div>{props.title}</div>
- {props.subtitle && <div style={{color:'gray', fontSize:'medium', marginTop: 5}}>{props.subtitle}</div>}
+ {props.subtitle && (
+ <div style={{ color: "gray", fontSize: "medium", marginTop: 5 }}>
+ {props.subtitle}
+ </div>
+ )}
</LargeText>
- {props.pending &&
- <LightText style={{ marginTop: 5, marginBottom: 5 }}>Waiting for confirmation</LightText>
- }
- <SmallLightText style={{marginTop:5 }}>{dateStr}</SmallLightText>
+ {props.pending && (
+ <LightText style={{ marginTop: 5, marginBottom: 5 }}>
+ Waiting for confirmation
+ </LightText>
+ )}
+ <SmallLightText style={{ marginTop: 5 }}>{dateStr}</SmallLightText>
</Column>
<TransactionAmount
pending={props.pending}
@@ -170,14 +191,18 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
sign = "";
}
return (
- <Column style={{
- textAlign: 'center',
- color:
- props.pending ? "gray" :
- (sign === '+' ? 'darkgreen' :
- (sign === '-' ? 'darkred' :
- undefined))
- }}>
+ <Column
+ style={{
+ textAlign: "center",
+ color: props.pending
+ ? "gray"
+ : sign === "+"
+ ? "darkgreen"
+ : sign === "-"
+ ? "darkred"
+ : undefined,
+ }}
+ >
<ExtraLargeText>
{sign}
{amount}
@@ -187,4 +212,3 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
</Column>
);
}
-