taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

better label for the fields

Browse Source
This commit is contained in:
Sebastian 2021-06-08 09:17:12 -03:00
parent e1b363c7dd
commit b9b6ac0cda
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
2 changed files with 118 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/taler-wallet-webextension/src/pages/popup.stories.tsx
View File

@ -61,6 +61,7 @@ const exampleData = {
} as TransactionWithdrawal, } as TransactionWithdrawal,
payment: { payment: {
...commonTransaction, ...commonTransaction,
amountEffective: 'USD:11',
type: TransactionType.Payment, type: TransactionType.Payment,
info: { info: {
contractTermsHash: 'ASDZXCASD', contractTermsHash: 'ASDZXCASD',

150
packages/taler-wallet-webextension/src/pages/popup.tsx
View File

@ -455,33 +455,6 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span> return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span>
} }
function CommonFields() {
if (!transaction) return null;
return <Fragment>
<tr>
<td>Amount deduce</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Amount received</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>Exchange fee</td>
<td>{Amounts.stringify(
Amounts.sub(
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
)}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</Fragment>
}
if (transaction.type === TransactionType.Withdrawal) { if (transaction.type === TransactionType.Withdrawal) {
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} >
@ -491,7 +464,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
From <b>{transaction.exchangeBaseUrl}</b> From <b>{transaction.exchangeBaseUrl}</b>
</p> </p>
<table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}>
<CommonFields /> <tr>
<td>Amount subtracted</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Amount received</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>Exchange fee</td>
<td>{Amounts.stringify(
Amounts.sub(
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
)}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</table> </table>
</section> </section>
<Footer /> <Footer />
@ -525,7 +518,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
)}</ol></td> )}</ol></td>
</tr> </tr>
} }
<CommonFields /> <tr>
<td>Order amount</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Order amount and fees</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>Exchange fee</td>
<td>{Amounts.stringify(
Amounts.sub(
Amounts.parseOrThrow(transaction.amountEffective),
Amounts.parseOrThrow(transaction.amountRaw),
).amount
)}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</table> </table>
</section> </section>
<Footer /> <Footer />
@ -542,7 +555,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
To <b>{transaction.targetPaytoUri}</b> To <b>{transaction.targetPaytoUri}</b>
</p> </p>
<table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}>
<CommonFields /> <tr>
<td>Amount deposit</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Amount deposit and fees</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>Exchange fee</td>
<td>{Amounts.stringify(
Amounts.sub(
Amounts.parseOrThrow(transaction.amountEffective),
Amounts.parseOrThrow(transaction.amountRaw),
).amount
)}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</table> </table>
</section> </section>
<Footer /> <Footer />
@ -559,7 +592,18 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
From <b>{transaction.exchangeBaseUrl}</b> From <b>{transaction.exchangeBaseUrl}</b>
</p> </p>
<table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}>
<CommonFields /> <tr>
<td>Amount refreshed</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Fees</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</table> </table>
</section> </section>
<Footer /> <Footer />
@ -576,7 +620,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
From <b>{transaction.merchantBaseUrl}</b> From <b>{transaction.merchantBaseUrl}</b>
</p> </p>
<table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}>
<CommonFields /> <tr>
<td>Amount deduce</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Amount received</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>Exchange fee</td>
<td>{Amounts.stringify(
Amounts.sub(
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
)}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</table> </table>
</section> </section>
<Footer /> <Footer />
@ -611,7 +675,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
)}</ol></td> )}</ol></td>
</tr> </tr>
} }
<CommonFields /> <tr>
<td>Amount deduce</td>
<td>{transaction.amountRaw}</td>
</tr>
<tr>
<td>Amount received</td>
<td>{transaction.amountEffective}</td>
</tr>
<tr>
<td>Exchange fee</td>
<td>{Amounts.stringify(
Amounts.sub(
Amounts.parseOrThrow(transaction.amountRaw),
Amounts.parseOrThrow(transaction.amountEffective),
).amount
)}</td>
</tr>
<tr>
<td>When</td>
<td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td>
</tr>
</table> </table>
</section> </section>
<Footer /> <Footer />