Merge pull request #422 from secretkeylabs/mahmoud/follow-up-eng-4371-…

…ord_sendinscription fix screen not correctly updating on fee rate change
secretkeylabs · Jul 22, 2024 · 435cdb2 · 435cdb2
2 parents ecb9251 + d6a6444
commit 435cdb2
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git a/src/app/screens/confirmOrdinalTransaction/SendInscriptionsRequest.tsx b/src/app/screens/confirmOrdinalTransaction/SendInscriptionsRequest.tsx
@@ -2,7 +2,6 @@ import ConfirmBtcTransaction from '@components/confirmBtcTransaction';
 import RequestError from '@components/requests/requestError';
 import { type Transport } from '@secretkeylabs/xverse-core';
 import Spinner from '@ui-library/spinner';
-import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -19,11 +18,10 @@ function SendInscriptionsRequest() {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const navigate = useNavigate();
   const {
-    buildTx,
     cancelOrdinalsTransferRequest,
     confirmOrdinalsTransferRequest,
     setFeeRate,
-    changeFeeRate,
+    getFeeForFeeRate,
     feeRate,
     isExecuting,
     isLoading,
@@ -32,15 +30,6 @@ function SendInscriptionsRequest() {
     txError,
   } = useSendInscriptions();
 
-  const createOrdinalsTransferTx = useCallback(async () => {
-    await buildTx();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    createOrdinalsTransferTx();
-  }, [createOrdinalsTransferTx]);
-
   const onClickCancel = async () => {
     await cancelOrdinalsTransferRequest();
     window.close();
@@ -80,7 +69,7 @@ function SendInscriptionsRequest() {
           cancelText={t('CANCEL')}
           onCancel={onClickCancel}
           onConfirm={onClickConfirm}
-          getFeeForFeeRate={changeFeeRate}
+          getFeeForFeeRate={getFeeForFeeRate}
           onFeeRateSet={(newFeeRate) => setFeeRate(newFeeRate.toString())}
           feeRate={+feeRate}
           isSubmitting={isExecuting}

diff --git a/src/app/screens/confirmOrdinalTransaction/useSendInscriptions.ts b/src/app/screens/confirmOrdinalTransaction/useSendInscriptions.ts
@@ -6,7 +6,7 @@ import useTransactionContext from '@hooks/useTransactionContext';
 import { RpcErrorCode, sendInscriptionsSchema } from '@sats-connect/core';
 import { type TransactionSummary } from '@screens/sendBtc/helpers';
 import { btcTransaction, type Transport } from '@secretkeylabs/xverse-core';
-import { useCallback, useState } from 'react';
+import { useEffect, useState } from 'react';
 import * as v from 'valibot';
 
 const useSendInscriptionsRequest = () => {
@@ -42,31 +42,27 @@ const useSendInscriptions = () => {
   const { data: btcFeeRates } = useBtcFeeRate();
   const txContext = useTransactionContext();
 
-  const generateTransferTxAndSummary = useCallback(
-    async (desiredFeeRate: number) => {
-      const tx = await btcTransaction.sendOrdinalsWithSplit(
-        txContext,
-        transfers.map((transfer) => ({
-          toAddress: transfer.address,
-          inscriptionId: transfer.inscriptionId,
-        })),
-        Number(desiredFeeRate),
-      );
-      const txSummary = await tx.getSummary();
-      setFeeRate(desiredFeeRate.toString());
-      setTransaction(tx);
-      setSummary(txSummary);
-      return { transaction: tx, summary: txSummary };
-    },
-    [transfers, txContext],
-  );
+  const generateTransferTxAndSummary = async (desiredFeeRate: number) => {
+    const tx = await btcTransaction.sendOrdinalsWithSplit(
+      txContext,
+      transfers.map((transfer) => ({
+        toAddress: transfer.address,
+        inscriptionId: transfer.inscriptionId,
+      })),
+      Number(desiredFeeRate),
+    );
+    const txSummary = await tx.getSummary();
+    return { tx, txSummary };
+  };
 
-  const buildTx = useCallback(async () => {
+  const buildTx = async (desiredFeeRate: number | undefined) => {
     try {
+      if (!desiredFeeRate) return;
       setIsLoading(true);
-      const initialFeeRate = +feeRate || btcFeeRates?.priority;
-      if (!initialFeeRate) return;
-      await generateTransferTxAndSummary(initialFeeRate);
+      const { tx, txSummary } = await generateTransferTxAndSummary(desiredFeeRate);
+      setFeeRate(desiredFeeRate.toString());
+      setTransaction(tx);
+      setSummary(txSummary);
     } catch (e) {
       setTransaction(undefined);
       setSummary(undefined);
@@ -77,15 +73,25 @@ const useSendInscriptions = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [feeRate, generateTransferTxAndSummary, btcFeeRates]);
+  };
 
-  const changeFeeRate = async (desiredFeeRate: number): Promise<number | undefined> => {
-    const { summary: tempSummary } = await generateTransferTxAndSummary(desiredFeeRate);
-    if (tempSummary) return Number(tempSummary.fee);
+  const getFeeForFeeRate = async (desiredFeeRate: number): Promise<number | undefined> => {
+    const { txSummary } = await generateTransferTxAndSummary(desiredFeeRate);
+    if (txSummary) return Number(txSummary.fee);
 
     return undefined;
   };
 
+  useEffect(() => {
+    let initialFeeRate: number | undefined = Number.parseInt(feeRate, 10);
+    if (Number.isNaN(initialFeeRate)) {
+      initialFeeRate = btcFeeRates?.priority;
+    }
+
+    buildTx(initialFeeRate);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [feeRate, btcFeeRates?.priority]);
+
   const confirmOrdinalsTransferRequest = async (ledgerTransport?: Transport) => {
     try {
       setIsExecuting(true);
@@ -129,9 +135,8 @@ const useSendInscriptions = () => {
     feeRate,
     isLoading,
     isExecuting,
-    buildTx,
     setFeeRate,
-    changeFeeRate,
+    getFeeForFeeRate,
     confirmOrdinalsTransferRequest,
     cancelOrdinalsTransferRequest,
   };