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 ; + + const firstPayto = hook.response.details.exchange.paytoUris[0]; + const payto = parsePaytoUri(firstPayto); + if (!payto) return ; if (payto.isKnown && payto.targetType === "bitcoin") { @@ -124,29 +146,65 @@ export function BankDetailsByPaytoType({ const receiver = payto.params["receiver"] || undefined; return ( -
-

- Bank transfer details -

+
+
+

+ Bank transfer details +

+ + {accountPart} + } + /> + + {receiver ? ( + + ) : undefined} +
+
- {accountPart} - } - /> - - {receiver ? ( - - ) : undefined} + + + + + + +
+ 
+                
+                  
+                    Payto URI
+                  
+                
+
+ 		+ {stringifyPaytoUri(payto)} + + stringifyPaytoUri(payto)} /> +
-
+

+ + + Make sure to use the correct subject, otherwise the money will not + arrive in this wallet. + + +

+ ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index 0bf9ef9d1..f489b805b 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -50,48 +50,11 @@ export function ReserveCreated({ function TransferDetails(): VNode { if (!paytoURI) return ; return ( -
- - - - - - - - - -
- 
-                  
-                    
-                      Payto URI
-                    
-                  
-
- 		- {stringifyPaytoUri(paytoURI)} - - stringifyPaytoUri(paytoURI)} /> -
-

- - - Make sure to use the correct subject, otherwise the money will not - arrive in this wallet. - - -

-
+ ); } diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 9ed41c5de..13adb34b2 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -32,9 +32,11 @@ import { TransactionAction, TransactionDeposit, TransactionIdStr, + TransactionInternalWithdrawal, TransactionMajorState, TransactionMinorState, TransactionType, + TransactionWithdrawal, TranslatedString, WithdrawalType, } from "@gnu-taler/taler-util"; @@ -459,96 +461,14 @@ export function TransactionView({ TransactionMajorState.Pending ? undefined : transaction .withdrawalDetails.type === WithdrawalType.ManualTransfer ? ( //manual withdrawal - - - - - - - - - - -
- 
-                      
-                        
-                          Payto URI
-                        
-                      
-
- 		- {transaction.withdrawalDetails.exchangePaytoUris[0]} - - - transaction.withdrawalDetails.type === - WithdrawalType.ManualTransfer - ? transaction.withdrawalDetails.exchangePaytoUris[0] - : "" - } - /> -
- - - Make sure to use the correct subject, otherwise the money will - not arrive in this wallet. - - - + ) : ( //integrated bank withdrawal - - {!transaction.withdrawalDetails.confirmed && - transaction.withdrawalDetails.bankConfirmationUrl ? ( - -
- - Wire transfer need a confirmation. Go to the{" "} - - bank site - {" "} - and check wire transfer operation to exchange account is - complete. - -
- - ) : undefined} - {transaction.withdrawalDetails.confirmed && - !transaction.withdrawalDetails.reserveIsReady && ( - - - Bank has confirmed the wire transfer. Waiting for the - exchange to send the coins - - - )} - {transaction.withdrawalDetails.confirmed && - transaction.withdrawalDetails.reserveIsReady && ( - - - Exchange is ready to send the coins, withdrawal in progress. - - - )} - + )} - Withdraw + Wire transfer @@ -1952,3 +1872,77 @@ function getShowButtonStates(transaction: Transaction) { }); return { abort, fail, resume, retry, remove, suspend }; } + +function ShowWithdrawalDetailForBankIntegrated({ + transaction, +}: { + transaction: TransactionWithdrawal | TransactionInternalWithdrawal; +}): VNode { + const { i18n } = useTranslationContext(); + const [showDetails, setShowDetails] = useState(false); + if ( + transaction.txState.major !== TransactionMajorState.Pending || + transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer + ) + return ; + const raw = Amounts.parseOrThrow(transaction.amountRaw); + return ( + + + { + e.preventDefault(); + setShowDetails(!showDetails); + }} + > + show details + + + + {showDetails && ( + + )} + {!transaction.withdrawalDetails.confirmed && + transaction.withdrawalDetails.bankConfirmationUrl ? ( + +
+ + Wire transfer need a confirmation. Go to the{" "} + + bank site + {" "} + and check wire transfer operation to exchange account is complete. + +
+ + ) : undefined} + {transaction.withdrawalDetails.confirmed && + !transaction.withdrawalDetails.reserveIsReady && ( + + + Bank has confirmed the wire transfer. Waiting for the exchange to + send the coins + + + )} + {transaction.withdrawalDetails.confirmed && + transaction.withdrawalDetails.reserveIsReady && ( + + + Exchange is ready to send the coins, withdrawal in progress. + + + )} + + ); +}