frontend: show bitrefill address in a blocking dialog

So the user can confirm the payment on the device.

Author: thisconnect

frontends/web/src/routes/market/bitrefill.tsx

@@ -18,18 +18,20 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Header } from '@/components/layout';
 import { Spinner } from '@/components/spinner/Spinner';
-import { AccountCode, IAccount, proposeTx, sendTx, TTxInput } from '@/api/account';
+import { AccountCode, IAccount, proposeTx, sendTx, TTxInput, TTxProposalResult } from '@/api/account';
 import { findAccount, isBitcoinOnly } from '@/routes/account/utils';
 import { useDarkmode } from '@/hooks/darkmode';
 import { getConfig } from '@/utils/config';
-import style from './iframe.module.css';
 import { i18n } from '@/i18n/i18n';
 import { alertUser } from '@/components/alert/Alert';
 import { parseExternalBtcAmount } from '@/api/coins';
 import { useLoad } from '@/hooks/api';
 import { BitrefillTerms, localeMapping } from '@/components/terms/bitrefill-terms';
 import { getBitrefillInfo } from '@/api/market';
 import { getURLOrigin } from '@/utils/url';
+import { WaitDialog } from '@/components/wait-dialog/wait-dialog';
+import { AmountWithUnit } from '@/components/amount/amount-with-unit';
+import style from './iframe.module.css';
 
 // Map coins supported by Bitrefill
 const coinMapping: Readonly<Record<string, string>> = {
@@ -61,6 +63,8 @@ export const Bitrefill = ({ accounts, code }: TProps) => {
   const config = useLoad(getConfig);
   const [agreedTerms, setAgreedTerms] = useState(false);
 
+  const [verifyPaymentRequest, setVerifyPaymentRequest] = useState<TTxProposalResult & { address: string } | false>();
+
   const hasOnlyBTCAccounts = accounts.every(({ coinCode }) => isBitcoinOnly(coinCode));
 
   useEffect(() => {
@@ -156,7 +160,13 @@ export const Bitrefill = ({ accounts, code }: TProps) => {
           name: 'Bitrefill',
           orderId: invoiceId,
         });
+
+        setVerifyPaymentRequest({
+          address: paymentAddress,
+          ...result
+        });
         const sendResult = await sendTx(code, txNote);
+        setVerifyPaymentRequest(false);
         if (!sendResult.success && !('aborted' in sendResult)) {
           alertUser(t('unknownError', { errorMessage: sendResult.errorMessage }));
         }
@@ -225,6 +235,26 @@ export const Bitrefill = ({ accounts, code }: TProps) => {
                     }}
                   />
                 )}
+
+                { verifyPaymentRequest && verifyPaymentRequest.success && (
+                  <WaitDialog title={t('receive.verifyBitBox02')}>
+                    <p>
+                      {t('transaction.details.address')}
+                      <br />
+                      {verifyPaymentRequest.address}
+                    </p>
+                    <p>
+                      {t('transaction.details.amount')}
+                      <br />
+                      <AmountWithUnit amount={verifyPaymentRequest.amount} />
+                    </p>
+                    <p>
+                      {t('transaction.fee')}
+                      <br />
+                      <AmountWithUnit amount={verifyPaymentRequest.fee} />
+                    </p>
+                  </WaitDialog>
+                )}
               </div>
             )}
           </div>