From ed25c72416c1e87f6932d62108533d668a2e010f Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 12 Apr 2024 13:03:40 -0300 Subject: dd53: wire transfer subject is last, should be first -- PaytoURI should not be expanded on-screen --- .../src/components/BalanceTable.tsx | 4 - .../src/components/BankDetailsByPaytoType.tsx | 194 +++++++++++++-------- .../src/wallet/History.tsx | 5 +- .../src/wallet/Transaction.tsx | 2 +- 4 files changed, 126 insertions(+), 79 deletions(-) (limited to 'packages/taler-wallet-webextension') diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx index b92929ceb..6dd577b88 100644 --- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx +++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx @@ -27,12 +27,8 @@ export function BalanceTable({ balances: WalletBalance[]; goToWalletHistory: (currency: string) => void; }): VNode { - // const { i18n } = useTranslationContext(); return ( - {/* - Exchange Entries - */} {balances.map((entry, idx) => { const av = Amounts.parseOrThrow(entry.available); diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 007c840c6..6666413eb 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -21,11 +21,9 @@ import { segwitMinAmount, stringifyPaytoUri, TranslatedString, - WithdrawalExchangeAccountDetails + WithdrawalExchangeAccountDetails, } from "@gnu-taler/taler-util"; -import { - useTranslationContext -} from "@gnu-taler/web-util/browser"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import { CopiedIcon, CopyIcon } from "../svg/index.js"; @@ -36,7 +34,7 @@ import { Button } from "../mui/Button.js"; export interface BankDetailsProps { subject: string; amount: AmountJson; - accounts: WithdrawalExchangeAccountDetails[], + accounts: WithdrawalExchangeAccountDetails[]; } export function BankDetailsByPaytoType({ @@ -45,69 +43,85 @@ export function BankDetailsByPaytoType({ accounts: unsortedAccounts, }: BankDetailsProps): VNode { const { i18n } = useTranslationContext(); - const [index, setIndex] = useState(0) + const [index, setIndex] = useState(0); if (!unsortedAccounts.length) { - return
the exchange account list is empty
+ return
the exchange account list is empty
; } const accounts = unsortedAccounts.sort((a, b) => { - return (b.priority ?? 0) - (a.priority ?? 0) - }) + return (b.priority ?? 0) - (a.priority ?? 0); + }); const selectedAccount = accounts[index]; - const altCurrency = selectedAccount.currencySpecification?.name + const altCurrency = selectedAccount.currencySpecification?.name; const payto = parsePaytoUri(selectedAccount.paytoUri); if (!payto) return ; - payto.params["amount"] = altCurrency ? selectedAccount.transferAmount! : Amounts.stringify(amount); + payto.params["amount"] = altCurrency + ? selectedAccount.transferAmount! + : Amounts.stringify(amount); payto.params["message"] = subject; - - function Frame({ title, children }: { title: TranslatedString, children: ComponentChildren }): VNode { - return
-
-

- {title} -

-
- + function Frame({ + title, + children, + }: { + title: TranslatedString; + children: ComponentChildren; + }): VNode { + return ( +
+
+

{title}

+
-
- {children} + {children} - {accounts.length > 1 ? - - {accounts.map((ac, acIdx) => { - const accountLabel = ac.bankLabel ?? `Account #${acIdx + 1}` - return - })} + {accounts.length > 1 ? ( + + {accounts.map((ac, acIdx) => { + const accountLabel = ac.bankLabel ?? `Account #${acIdx + 1}`; + return ( + + ); + })} - {/* */} - - : undefined} -
+ + ) : undefined} + + ); } if (payto.isKnown && payto.targetType === "bitcoin") { @@ -163,7 +177,9 @@ export function BankDetailsByPaytoType({ } const accountPart = !payto.isKnown ? ( - + + + ) : payto.targetType === "x-taler-bank" ? ( @@ -178,30 +194,68 @@ export function BankDetailsByPaytoType({ ) : undefined; - const receiver = payto.params["receiver-name"] || payto.params["receiver"] || undefined; + const receiver = + payto.params["receiver-name"] || payto.params["receiver"] || undefined; return ( - {accountPart} + + + - } - /> - + + + + {accountPart} {receiver ? ( ) : undefined} + + + + + } + /> + - -
+ Step 1: +   + + Copy this code and paste it into the subject/purpose field in + your banking app or bank website + +
+ Step 2: +   + + If you don't already have it in your banking favourites list, + then copy and past this IBAN and the name into the receiver + fields in your banking app or website + +
+ Step 3: +   + + Finish the wire transfer setting the amount in your banking app + or website, then this withdrawal will proceed automatically. + +
- Make sure ALL data is correct, including the subject; otherwise, the money will not - arrive in this wallet. You can use the copy buttons () to prevent typing errors + Make sure ALL data is correct, including the subject; + otherwise, the money will not arrive in this wallet. You can + use the copy buttons () to prevent typing errors or the "payto://" URI below to copy just one value. @@ -210,22 +264,20 @@ export function BankDetailsByPaytoType({
- 
-                
-                  
-                    Payto URI
-                  
-                
-
- 		- {stringifyPaytoUri(payto)} + + + Alternative if your bank already supports PayTo URI, you can use + this{" "} + + PayTo URI + {" "} + link instead + stringifyPaytoUri(payto)} /> diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 3d1ab15b6..fcd21a5ee 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -35,8 +35,7 @@ import { CenteredBoldText, CenteredText, DateSeparator, - NiceSelect, - SubTitle, + NiceSelect } from "../components/styled/index.js"; import { alertFromError, useAlertContext } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; @@ -53,7 +52,7 @@ interface Props { goToWalletManualWithdraw: (currency?: string) => Promise; } export function HistoryPage({ - currency, + currency: _c, goToWalletManualWithdraw, goToWalletDeposit, }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index eaf98e906..27c9b5d77 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -576,7 +576,7 @@ export function TransactionView({ tid: r.transactionId, })} > - Was refunded + was refunded {" "} on{" "} { -- cgit v1.2.3