diff options
author | Sebastian <sebasjm@gmail.com> | 2023-06-21 11:28:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-06-21 11:28:27 -0300 |
commit | 81bf1cc9c12bcf82835c7dffca4557e39ec5e600 (patch) | |
tree | b7b63bfa7d82f6d37bf176374c7dc2266661b57e /packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | |
parent | 8b85fe1775e21f360ad028fc0eb3ea2c3155bfff (diff) | |
download | wallet-core-81bf1cc9c12bcf82835c7dffca4557e39ec5e600.tar.xz |
show bank details
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 108 |
1 files changed, 83 insertions, 25 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index cd4f88c0c..b6fd494fa 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -17,31 +17,53 @@ import { AmountJson, Amounts, + parsePaytoUri, PaytoUri, segwitMinAmount, + stringifyPaytoUri, TranslatedString, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + useAsyncAsHook, + useTranslationContext, +} from "@gnu-taler/web-util/browser"; import { CopiedIcon, CopyIcon } from "../svg/index.js"; import { Amount } from "./Amount.js"; -import { ButtonBox, TooltipLeft } from "./styled/index.js"; +import { ButtonBox, TooltipLeft, WarningBox } from "./styled/index.js"; +import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { useBackendContext } from "../context/backend.js"; export interface BankDetailsProps { - payto: PaytoUri | undefined; exchangeBaseUrl: string; subject: string; amount: AmountJson; } export function BankDetailsByPaytoType({ - payto, subject, exchangeBaseUrl, amount, }: BankDetailsProps): VNode { const { i18n } = useTranslationContext(); + const api = useBackendContext(); + + const hook = useAsyncAsHook(async () => { + const details = await api.wallet.call( + WalletApiOperation.GetExchangeDetailedInfo, + { + exchangeBaseUrl, + }, + ); + return { details }; + }); + + if (!hook || hook.hasError) return <Fragment />; + + const firstPayto = hook.response.details.exchange.paytoUris[0]; + const payto = parsePaytoUri(firstPayto); + if (!payto) return <Fragment />; if (payto.isKnown && payto.targetType === "bitcoin") { @@ -124,29 +146,65 @@ export function BankDetailsByPaytoType({ const receiver = payto.params["receiver"] || undefined; return ( - <div - style={{ - textAlign: "left", - border: "solid 1px black", - padding: 8, - borderRadius: 4, - }} - > - <p style={{ marginTop: 0 }}> - <i18n.Translate>Bank transfer details</i18n.Translate> - </p> + <section> + <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} + <Row + name={i18n.str`Amount`} + value={<Amount value={amount} hideCurrency />} + /> + <Row name={i18n.str`Subject`} value={subject} literal /> + {receiver ? ( + <Row name={i18n.str`Receiver name`} value={receiver} /> + ) : undefined} + </table> + </div> <table> - {accountPart} - <Row - name={i18n.str`Amount`} - value={<Amount value={amount} hideCurrency />} - /> - <Row name={i18n.str`Subject`} value={subject} literal /> - {receiver ? ( - <Row name={i18n.str`Receiver name`} value={receiver} /> - ) : undefined} + <tbody> + <tr> + <td> + <pre> + <b> + <a + target="_bank" + rel="noreferrer" + title="RFC 8905 for designating targets for payments" + href="https://tools.ietf.org/html/rfc8905" + > + Payto URI + </a> + </b> + </pre> + </td> + <td width="100%" style={{ wordBreak: "break-all" }}> + {stringifyPaytoUri(payto)} + </td> + <td> + <CopyButton getContent={() => stringifyPaytoUri(payto)} /> + </td> + </tr> + </tbody> </table> - </div> + <p> + <WarningBox> + <i18n.Translate> + Make sure to use the correct subject, otherwise the money will not + arrive in this wallet. + </i18n.Translate> + </WarningBox> + </p> + </section> ); } |