diff options
author | Sebastian <sebasjm@gmail.com> | 2022-05-26 15:55:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-05-26 15:57:12 -0300 |
commit | 24162c1086c017305253c78280a82bfa9a572b1e (patch) | |
tree | 6842f44dad3fc029d44349527df8d0b09b92852d /packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | |
parent | 72d936eaf99ad1d5ee156ba8f156a983f4ec613c (diff) | |
download | wallet-core-24162c1086c017305253c78280a82bfa9a572b1e.tar.xz |
transaction details template
mayor change in the template of the transaction details for every
transaction
more work needs to be done in wallet core for tip and refund to show
more information about the merchant like logo and website
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 75 |
1 files changed, 43 insertions, 32 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 185021bc0..3a2a12c72 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -46,43 +46,47 @@ export function BankDetailsByPaytoType({ if (payto.isKnown && payto.targetType === "bitcoin") { const min = segwitMinAmount(amount.currency); return ( - <section style={{ textAlign: "left" }}> + <section + style={{ + textAlign: "left", + border: "solid 1px black", + padding: 8, + borderRadius: 4, + }} + > + <p style={{ marginTop: 0 }}>Bitcoin transfer details</p> <p> <i18n.Translate> - Bitcoin exchange need a transaction with 3 output, one output is the + The exchange need a transaction with 3 output, one output is the exchange account and the other two are segwit fake address for - metadata with an minimum amount. Reserve pub : {subject} + metadata with an minimum amount. </i18n.Translate> </p> + <Row + literal + name={<i18n.Translate>Reserve</i18n.Translate>} + value={subject} + /> + <p> <i18n.Translate> In bitcoincore wallet use 'Add Recipient' button to add two additional recipient and copy addresses and amounts </i18n.Translate> - <ul> - <li> - {payto.targetPath} {Amounts.stringifyValue(amount)} BTC - </li> - {payto.segwitAddrs.map((addr, i) => ( - <li key={i}> - {addr} {Amounts.stringifyValue(min)} BTC - </li> - ))} - </ul> - <i18n.Translate> - In Electrum wallet paste the following three lines in 'Pay - to' field : - </i18n.Translate> - <ul> - <li> - {payto.targetPath},{Amounts.stringifyValue(amount)} - </li> - {payto.segwitAddrs.map((addr, i) => ( - <li key={i}> - {addr} {Amounts.stringifyValue(min)} BTC - </li> - ))} - </ul> + </p> + <table> + <tr> + <td>{payto.targetPath}</td> + <td>{Amounts.stringifyValue(amount)} BTC</td> + </tr> + {payto.segwitAddrs.map((addr, i) => ( + <tr key={i}> + <td>{addr}</td> + <td>{Amounts.stringifyValue(min)} BTC</td> + </tr> + ))} + </table> + <p> <i18n.Translate> Make sure the amount show{" "} {Amounts.stringifyValue(Amounts.sum([amount, min, min]).amount)}{" "} @@ -93,7 +97,7 @@ export function BankDetailsByPaytoType({ ); } - const firstPart = !payto.isKnown ? ( + const accountPart = !payto.isKnown ? ( <Row name={<i18n.Translate>Account</i18n.Translate>} value={payto.targetPath} @@ -113,10 +117,17 @@ export function BankDetailsByPaytoType({ <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} /> ) : undefined; return ( - <div style={{ textAlign: "left" }}> - <p>Bank transfer details</p> + <div + style={{ + textAlign: "left", + border: "solid 1px black", + padding: 8, + borderRadius: 4, + }} + > + <p style={{ marginTop: 0 }}>Bank transfer details</p> <table> - {firstPart} + {accountPart} <Row name={<i18n.Translate>Exchange</i18n.Translate>} value={exchangeBaseUrl} @@ -176,7 +187,7 @@ function Row({ </TooltipRight> )} </td> - <td> + <td style={{ paddingRight: 8 }}> <b>{name}</b> </td> {literal ? ( |