[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: rendring pending transation i
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: rendring pending transation item |
|
Date: |
Mon, 06 Sep 2021 19:56:04 +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 d2cf75b7 rendring pending transation item
d2cf75b7 is described below
commit d2cf75b782b63d7b217b14c0a3bdc953c5e3bca9
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon Sep 6 14:55:55 2021 -0300
rendring pending transation item
---
packages/taler-wallet-webextension/.gitignore | 1 +
.../src/components/TransactionItem.tsx | 12 +-
.../src/components/styled/index.tsx | 4 +-
.../src/popup/BackupPage.tsx | 8 +-
.../src/popup/ProviderAddPage.tsx | 4 +-
.../src/popup/ProviderDetailPage.tsx | 4 +-
.../src/wallet/BackupPage.tsx | 8 +-
.../src/wallet/History.stories.tsx | 124 +++------------------
.../src/wallet/ProviderAddPage.tsx | 4 +-
.../src/wallet/ProviderDetailPage.tsx | 4 +-
.../src/wallet/Transaction.tsx | 8 +-
11 files changed, 43 insertions(+), 138 deletions(-)
diff --git a/packages/taler-wallet-webextension/.gitignore
b/packages/taler-wallet-webextension/.gitignore
index 0974a77a..2897bd5d 100644
--- a/packages/taler-wallet-webextension/.gitignore
+++ b/packages/taler-wallet-webextension/.gitignore
@@ -1,3 +1,4 @@
extension/
/storybook-static/
/.linaria-cache/
+/lib
diff --git
a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index e5545b95..8ddfd0e3 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -7,7 +7,7 @@ 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, SmallTextLight, LargeText } from
'./styled/index';
+import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText,
LightText } from './styled/index';
export function TransactionItem(props: { tx: Transaction, multiCurrency:
boolean }): JSX.Element {
const tx = props.tx;
@@ -103,11 +103,11 @@ function TransactionLayout(props:
TransactionLayoutProps): JSX.Element {
<Column>
<LargeText>
<span>{props.title}</span>
- {props.pending ? (
- <span style={{ color: "darkblue" }}> (Pending)</span>
- ) : null}
</LargeText>
- <SmallTextLight>{dateStr}</SmallTextLight>
+ {props.pending &&
+ <LightText style={{marginTop: 5, marginBottom: 5}}>Waiting for
confirmation</LightText>
+ }
+ <SmallLightText>{dateStr}</SmallLightText>
</Column>
<TransactionAmount
pending={props.pending}
@@ -152,6 +152,7 @@ function TransactionAmount(props: TransactionAmountProps):
JSX.Element {
}
return (
<Column style={{
+ textAlign: 'center',
color:
props.pending ? "gray" :
(sign === '+' ? 'darkgreen' :
@@ -163,6 +164,7 @@ function TransactionAmount(props: TransactionAmountProps):
JSX.Element {
{amount}
</ExtraLargeText>
{props.multiCurrency && <div>{currency}</div>}
+ {props.pending && <div>PENDING</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 8f795ce8..de045584 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -366,7 +366,7 @@ export const ExtraLargeText = styled.div`
font-size: x-large;
`
-export const SmallTextLight = styled(SmallText)`
+export const SmallLightText = styled(SmallText)`
color: gray;
`
@@ -375,7 +375,7 @@ export const CenteredText = styled.div`
text-align: center;
`
-export const CenteredTextBold = styled(CenteredText)`
+export const CenteredBoldText = styled(CenteredText)`
white-space: nowrap;
text-align: center;
font-weight: bold;
diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
index 695f3aba..dcc5e531 100644
--- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx
@@ -21,8 +21,8 @@ import { differenceInMonths, formatDuration,
intervalToDuration } from "date-fns
import { Fragment, JSX, VNode, h } from "preact";
import {
BoldLight, ButtonPrimary, ButtonSuccess, Centered,
- CenteredText, CenteredTextBold, PopupBox, RowBorderGray,
- SmallText, SmallTextLight
+ CenteredText, CenteredBoldText, PopupBox, RowBorderGray,
+ SmallText, SmallLightText
} from "../components/styled";
import { useBackupStatus } from "../hooks/useBackupStatus";
import { Pages } from "../NavigationBar";
@@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps):
JSX.Element {
<a href={Pages.provider_detail.replace(':pid',
encodeURIComponent(props.id))}><span>{props.title}</span></a>
{dateStr && <SmallText style={{marginTop: 5}}>Last synced:
{dateStr}</SmallText>}
- {!dateStr && <SmallTextLight style={{marginTop: 5}}>Not
synced</SmallTextLight>}
+ {!dateStr && <SmallLightText style={{marginTop: 5}}>Not
synced</SmallLightText>}
</div>
<div>
{props.status?.type === 'paid' ?
@@ -114,7 +114,7 @@ function BackupLayout(props: TransactionLayoutProps):
JSX.Element {
function ExpirationText({ until }: { until: Timestamp }) {
return <Fragment>
<CenteredText> Expires in </CenteredText>
- <CenteredTextBold {...({ color: colorByTimeToExpire(until) })}>
{daysUntil(until)} </CenteredTextBold>
+ <CenteredBoldText {...({ color: colorByTimeToExpire(until) })}>
{daysUntil(until)} </CenteredBoldText>
</Fragment>
}
diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
index 05061497..ffefaedb 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
@@ -4,7 +4,7 @@ import { VNode, h } from "preact";
import { useEffect, useState } from "preact/hooks";
import { Checkbox } from "../components/Checkbox";
import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonPrimary, Input, LightText, PopupBox, SmallTextLight }
from "../components/styled/index";
+import { Button, ButtonPrimary, Input, LightText, PopupBox, SmallLightText }
from "../components/styled/index";
import * as wxApi from "../wxApi";
interface Props {
@@ -129,7 +129,7 @@ export function ConfirmProviderView({ url, provider,
onCancel, onConfirm }: Conf
<section>
<h1>Review terms of service</h1>
<div>Provider URL: <a href={url} target="_blank">{url}</a></div>
- <SmallTextLight>Please review and accept this provider's terms of
service</SmallTextLight>
+ <SmallLightText>Please review and accept this provider's terms of
service</SmallLightText>
<h2>1. Pricing</h2>
<p>
{Amounts.isZero(provider.annual_fee) ? 'free of charge' :
`${provider.annual_fee} per year of service`}
diff --git
a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
index 83d94ac0..04adbb21 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
@@ -20,7 +20,7 @@ import { ProviderInfo, ProviderPaymentStatus,
ProviderPaymentType } from "@gnu-t
import { format, formatDuration, intervalToDuration } from "date-fns";
import { Fragment, VNode, h } from "preact";
import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox,
SmallTextLight } from "../components/styled";
+import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox,
SmallLightText } from "../components/styled";
import { useProviderStatus } from "../hooks/useProviderStatus";
interface Props {
@@ -60,7 +60,7 @@ export function ProviderView({ info, onDelete, onSync,
onBack, onExtend }: ViewP
<PopupBox>
<Error info={info} />
<header>
- <h3>{info.name}
<SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
+ <h3>{info.name}
<SmallLightText>{info.syncProviderBaseUrl}</SmallLightText></h3>
<PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60,
60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus>
</header>
<section>
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 8b88432e..ffc4418e 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -21,8 +21,8 @@ import { differenceInMonths, formatDuration,
intervalToDuration } from "date-fns
import { Fragment, JSX, VNode, h } from "preact";
import {
BoldLight, ButtonPrimary, ButtonSuccess, Centered,
- CenteredText, CenteredTextBold, PopupBox, RowBorderGray,
- SmallText, SmallTextLight, WalletBox
+ CenteredText, CenteredBoldText, PopupBox, RowBorderGray,
+ SmallText, SmallLightText, WalletBox
} from "../components/styled";
import { useBackupStatus } from "../hooks/useBackupStatus";
import { Pages } from "../NavigationBar";
@@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps):
JSX.Element {
<a href={Pages.provider_detail.replace(':pid',
encodeURIComponent(props.id))}><span>{props.title}</span></a>
{dateStr && <SmallText style={{marginTop: 5}}>Last synced:
{dateStr}</SmallText>}
- {!dateStr && <SmallTextLight style={{marginTop: 5}}>Not
synced</SmallTextLight>}
+ {!dateStr && <SmallLightText style={{marginTop: 5}}>Not
synced</SmallLightText>}
</div>
<div>
{props.status?.type === 'paid' ?
@@ -114,7 +114,7 @@ function BackupLayout(props: TransactionLayoutProps):
JSX.Element {
function ExpirationText({ until }: { until: Timestamp }) {
return <Fragment>
<CenteredText> Expires in </CenteredText>
- <CenteredTextBold {...({ color: colorByTimeToExpire(until) })}>
{daysUntil(until)} </CenteredTextBold>
+ <CenteredBoldText {...({ color: colorByTimeToExpire(until) })}>
{daysUntil(until)} </CenteredBoldText>
</Fragment>
}
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 32499a26..c2b3bcd5 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -130,6 +130,19 @@ export const One = createExample(TestedComponent, {
}]
});
+export const OnePending = createExample(TestedComponent, {
+ list: [{...exampleData.withdraw,
+ pending: true
+ }],
+ balances: [{
+ available: 'USD:10',
+ pendingIncoming: 'USD:0',
+ pendingOutgoing: 'USD:0',
+ hasPendingTransactions: false,
+ requiresUserInput: false,
+ }]
+});
+
export const Several = createExample(TestedComponent, {
list: [
exampleData.withdraw,
@@ -176,114 +189,3 @@ export const SeveralWithTwoCurrencies =
createExample(TestedComponent, {
}]
});
-// export const WithdrawPending = createExample(TestedComponent, {
-// transaction: { ...exampleData.withdraw, pending: true },
-// });
-
-
-// export const Payment = createExample(TestedComponent, {
-// transaction: exampleData.payment
-// });
-
-// export const PaymentWithoutFee = createExample(TestedComponent, {
-// transaction: {
-// ...exampleData.payment,
-// amountRaw: 'USD:11',
-
-// }
-// });
-
-// export const PaymentPending = createExample(TestedComponent, {
-// transaction: { ...exampleData.payment, pending: true },
-// });
-
-// export const PaymentWithProducts = createExample(TestedComponent, {
-// transaction: {
-// ...exampleData.payment,
-// info: {
-// ...exampleData.payment.info,
-// summary: 'this order has 5 products',
-// products: [{
-// description: 't-shirt',
-// unit: 'shirts',
-// quantity: 1,
-// }, {
-// description: 't-shirt',
-// unit: 'shirts',
-// quantity: 1,
-// }, {
-// description: 'e-book',
-// }, {
-// description: 'beer',
-// unit: 'pint',
-// quantity: 15,
-// }, {
-// description: 'beer',
-// unit: 'pint',
-// quantity: 15,
-// }]
-// }
-// } as TransactionPayment,
-// });
-
-// export const PaymentWithLongSummary = createExample(TestedComponent, {
-// transaction: {
-// ...exampleData.payment,
-// info: {
-// ...exampleData.payment.info,
-// summary: 'this is a very long summary that will occupy severals
lines, this is a very long summary that will occupy severals lines, this is a
very long summary that will occupy severals lines, this is a very long summary
that will occupy severals lines, ',
-// products: [{
-// description: 'an xl sized t-shirt with some drawings on it, color
pink',
-// unit: 'shirts',
-// quantity: 1,
-// }, {
-// description: 'beer',
-// unit: 'pint',
-// quantity: 15,
-// }]
-// }
-// } as TransactionPayment,
-// });
-
-
-// export const Deposit = createExample(TestedComponent, {
-// transaction: exampleData.deposit
-// });
-
-// export const DepositPending = createExample(TestedComponent, {
-// transaction: { ...exampleData.deposit, pending: true }
-// });
-
-// export const Refresh = createExample(TestedComponent, {
-// transaction: exampleData.refresh
-// });
-
-// export const Tip = createExample(TestedComponent, {
-// transaction: exampleData.tip
-// });
-
-// export const TipPending = createExample(TestedComponent, {
-// transaction: { ...exampleData.tip, pending: true }
-// });
-
-// export const Refund = createExample(TestedComponent, {
-// transaction: exampleData.refund
-// });
-
-// export const RefundPending = createExample(TestedComponent, {
-// transaction: { ...exampleData.refund, pending: true }
-// });
-
-// export const RefundWithProducts = createExample(TestedComponent, {
-// transaction: {
-// ...exampleData.refund,
-// info: {
-// ...exampleData.refund.info,
-// products: [{
-// description: 't-shirt',
-// }, {
-// description: 'beer',
-// }]
-// }
-// } as TransactionRefund,
-// });
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 2b205ebe..aa87c91e 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -4,7 +4,7 @@ import { VNode, h } from "preact";
import { useEffect, useState } from "preact/hooks";
import { Checkbox } from "../components/Checkbox";
import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonPrimary, Input, LightText, WalletBox, SmallTextLight }
from "../components/styled/index";
+import { Button, ButtonPrimary, Input, LightText, WalletBox, SmallLightText }
from "../components/styled/index";
import * as wxApi from "../wxApi";
interface Props {
@@ -129,7 +129,7 @@ export function ConfirmProviderView({ url, provider,
onCancel, onConfirm }: Conf
<section>
<h1>Review terms of service</h1>
<div>Provider URL: <a href={url} target="_blank">{url}</a></div>
- <SmallTextLight>Please review and accept this provider's terms of
service</SmallTextLight>
+ <SmallLightText>Please review and accept this provider's terms of
service</SmallLightText>
<h2>1. Pricing</h2>
<p>
{Amounts.isZero(provider.annual_fee) ? 'free of charge' :
`${provider.annual_fee} per year of service`}
diff --git
a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 871e30b7..c45458eb 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -20,7 +20,7 @@ import { ProviderInfo, ProviderPaymentStatus,
ProviderPaymentType } from "@gnu-t
import { format, formatDuration, intervalToDuration } from "date-fns";
import { Fragment, VNode, h } from "preact";
import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox,
SmallTextLight } from "../components/styled";
+import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox,
SmallLightText } from "../components/styled";
import { useProviderStatus } from "../hooks/useProviderStatus";
interface Props {
@@ -60,7 +60,7 @@ export function ProviderView({ info, onDelete, onSync,
onBack, onExtend }: ViewP
<WalletBox>
<Error info={info} />
<header>
- <h3>{info.name}
<SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
+ <h3>{info.name}
<SmallLightText>{info.syncProviderBaseUrl}</SmallLightText></h3>
<PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60,
60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus>
</header>
<section>
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index ad00b3d1..cc5430d0 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -22,7 +22,7 @@ import { useEffect, useState } from "preact/hooks";
import * as wxApi from "../wxApi";
import { Pages } from "../NavigationBar";
import emptyImg from "../../static/img/empty.png"
-import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive,
ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox,
Row, RowBorderGray, SmallTextLight, WalletBox } from "../components/styled";
+import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive,
ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox,
Row, RowBorderGray, SmallLightText, WalletBox } from "../components/styled";
import { ErrorMessage } from "../components/ErrorMessage";
export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
@@ -94,7 +94,7 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
function Part({ text, title, kind, big }: { title: string, text: AmountLike,
kind: Kind, big?: boolean }) {
const Text = big ? ExtraLargeText : LargeText;
return <div style={{ margin: '1em' }}>
- <SmallTextLight style={{ margin: '.5em' }}>{title}</SmallTextLight>
+ <SmallLightText style={{ margin: '.5em' }}>{title}</SmallLightText>
<Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative'
? 'red' : 'black') }}>
{text}
</Text>
@@ -153,7 +153,7 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
<img src={p.image ? p.image : emptyImg} />
</a>
<div>
- {p.quantity && p.quantity > 0 && <SmallTextLight>x
{p.quantity} {p.unit}</SmallTextLight>}
+ {p.quantity && p.quantity > 0 && <SmallLightText>x
{p.quantity} {p.unit}</SmallLightText>}
<div>{p.description}</div>
</div>
</RowBorderGray>)}
@@ -235,7 +235,7 @@ export function TransactionView({ transaction, onDelete,
onRetry, onBack }: Wall
<img src={p.image ? p.image : emptyImg} />
</a>
<div>
- {p.quantity && p.quantity > 0 && <SmallTextLight>x
{p.quantity} {p.unit}</SmallTextLight>}
+ {p.quantity && p.quantity > 0 && <SmallLightText>x
{p.quantity} {p.unit}</SmallLightText>}
<div>{p.description}</div>
</div>
</RowBorderGray>)}
--
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: rendring pending transation item,
gnunet <=