diff options
author | Sebastian <sebasjm@gmail.com> | 2023-12-01 12:18:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-12-01 12:18:47 -0300 |
commit | 66e1529f04ad2c2e2cb14e6b7ea08f76ad7b41d6 (patch) | |
tree | dc4bfb7989685a741bb11444232c3a931e92f23a /packages/taler-wallet-webextension/src | |
parent | dbfa3b78bea8dfa71a219f9c01ecc32a5339e154 (diff) | |
download | wallet-core-66e1529f04ad2c2e2cb14e6b7ea08f76ad7b41d6.tar.xz |
show conversion service in withdrawal details
Diffstat (limited to 'packages/taler-wallet-webextension/src')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 121 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx | 6 |
2 files changed, 86 insertions, 41 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index a28c34987..9fd117b08 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -26,11 +26,12 @@ import { import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { CopiedIcon, CopyIcon } from "../svg/index.js"; import { Amount } from "./Amount.js"; import { ButtonBox, TooltipLeft, WarningBox } from "./styled/index.js"; +import { Button } from "../mui/Button.js"; export interface BankDetailsProps { subject: string; @@ -44,19 +45,68 @@ export function BankDetailsByPaytoType({ accounts, }: BankDetailsProps): VNode { const { i18n } = useTranslationContext(); - + const [index, setIndex] = useState(0) + const [currency, setCurrency] = useState(amount.currency) if (!accounts.length) { - return <div>exchange doesn't have accounts to wire </div> + return <div>the exchange account list is empty</div> } - const [index, setIndex] = useState(0) - const fisrtAccount = accounts[index]; + const selectedAccount = accounts[index]; + const altCurrency = selectedAccount.currencySpecification?.name - const payto = parsePaytoUri(fisrtAccount.paytoUri); + const payto = parsePaytoUri(selectedAccount.paytoUri); if (!payto) return <Fragment />; - payto.params["amount"] = Amounts.stringify(amount); + payto.params["amount"] = currency === altCurrency ? selectedAccount.transferAmount! :Amounts.stringify(amount) ; payto.params["message"] = subject; + + function Frame({ title, children }: { title: TranslatedString, children: ComponentChildren }): VNode { + return <section + style={{ + textAlign: "left", + border: "solid 1px black", + padding: 8, + borderRadius: 4, + }} + > + <div style={{ display: "flex", width: "100%", justifyContent: "space-between" }}> + <p style={{ marginTop: 0 }}> + {title} + </p> + {accounts.length > 1 ? + <Button variant="contained" + onClick={async () => { + setIndex((index + 1) % accounts.length) + }} + > + <i18n.Translate>Next</i18n.Translate> + </Button> + : undefined} + </div> + + {children} + + {altCurrency ? + <Fragment> + <Button variant={currency === amount.currency ? "contained" : "outlined"} + onClick={async () => { + setCurrency(amount.currency) + }} + > + <i18n.Translate>{amount.currency}</i18n.Translate> + </Button> + <Button variant={currency === altCurrency ? "contained" : "outlined"} + onClick={async () => { + setCurrency(altCurrency) + }} + > + <i18n.Translate>{altCurrency}</i18n.Translate> + </Button> + </Fragment> + : undefined} + </section> + } + if (payto.isKnown && payto.targetType === "bitcoin") { const min = segwitMinAmount(amount.currency); const addrs = payto.segwitAddrs.map( @@ -65,17 +115,7 @@ export function BankDetailsByPaytoType({ addrs.unshift(`${payto.targetPath} ${Amounts.stringifyValue(amount)}`); const copyContent = addrs.join("\n"); return ( - <section - style={{ - textAlign: "left", - border: "solid 1px black", - padding: 8, - borderRadius: 4, - }} - > - <p style={{ marginTop: 0 }}> - <i18n.Translate>Bitcoin transfer details</i18n.Translate> - </p> + <Frame title={i18n.str`Bitcoin transfer details`}> <p> <i18n.Translate> The exchange need a transaction with 3 output, one output is the @@ -115,7 +155,7 @@ export function BankDetailsByPaytoType({ BTC, else you have to change the base unit to BTC </i18n.Translate> </p> - </section> + </Frame> ); } @@ -137,31 +177,30 @@ export function BankDetailsByPaytoType({ const receiver = payto.params["receiver"] || undefined; return ( - <section> + <Frame title={i18n.str`Bank transfer details`}> + <table> + {accountPart} + {currency === altCurrency ? <Fragment> + <Row + name={i18n.str`Amount`} + value={<Amount value={selectedAccount.transferAmount!} />} + /> + <Row + name={i18n.str`Converted`} + value={<Amount value={amount} />} + /> - <div - style={{ - textAlign: "left", - border: "solid 1px black", - padding: 8, - borderRadius: 4, - }} - > - <p style={{ marginTop: 0 }}> - <i18n.Translate>Bank transfer details</i18n.Translate> - </p> - <table> - {accountPart} + </Fragment> : <Row name={i18n.str`Amount`} - value={<Amount value={amount} hideCurrency />} + value={<Amount value={amount} />} /> - <Row name={i18n.str`Subject`} value={subject} literal /> - {receiver ? ( - <Row name={i18n.str`Receiver name`} value={receiver} /> - ) : undefined} - </table> - </div> + } + <Row name={i18n.str`Subject`} value={subject} literal /> + {receiver ? ( + <Row name={i18n.str`Receiver name`} value={receiver} /> + ) : undefined} + </table> <table> <tbody> <tr> @@ -196,7 +235,7 @@ export function BankDetailsByPaytoType({ </i18n.Translate> </WarningBox> </p> - </section> + </Frame> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx index 09f7c4dc1..c17d15b01 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx @@ -293,6 +293,12 @@ export const WithdrawPendingManual = tests.createExample( type: WithdrawalType.ManualTransfer, exchangePaytoUris: ["payto://iban/ES8877998399652238"], reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", + exchangeCreditAccountDetails: [{ + paytoUri: "payto://IBAN/1231231231", + }, + { + paytoUri: "payto://IBAN/2342342342", + }], } as WithdrawalDetails, txState: { major: TransactionMajorState.Pending, |