From 862753da65077e2116ea0b0dbb10213f83a97845 Mon Sep 17 00:00:00 2001 From: Denys Hriaznov Date: Thu, 11 Jan 2024 21:04:24 +0100 Subject: [PATCH 1/2] [ENG-3563] fix: BTC fee infinite loader when sending ordinals --- src/app/components/transactionSetting/editBtcFee.tsx | 2 +- src/app/hooks/useBtcFees.ts | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/components/transactionSetting/editBtcFee.tsx b/src/app/components/transactionSetting/editBtcFee.tsx index 5489f56b6..c278df213 100644 --- a/src/app/components/transactionSetting/editBtcFee.tsx +++ b/src/app/components/transactionSetting/editBtcFee.tsx @@ -55,7 +55,7 @@ const InputContainer = styled.div((props) => ({ })); const InputField = styled.input((props) => ({ - ...props.theme.body_m, + ...props.theme.typography.body_m, backgroundColor: 'transparent', color: props.theme.colors.white_0, border: 'transparent', diff --git a/src/app/hooks/useBtcFees.ts b/src/app/hooks/useBtcFees.ts index 5a118bf24..b5183167f 100644 --- a/src/app/hooks/useBtcFees.ts +++ b/src/app/hooks/useBtcFees.ts @@ -38,7 +38,7 @@ const useBtcFees = ({ highFeeRate: '', highTotalFee: '', }); - const { network, btcAddress, selectedAccount, ordinalsAddress } = useWalletSelector(); + const { network, btcAddress, ordinalsAddress } = useWalletSelector(); const btcClient = useBtcClient(); const { ordinals } = useOrdinalsByAddress(btcAddress); const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]); @@ -50,12 +50,12 @@ const useBtcFees = ({ if (isRestoreFlow) { feeInfo = await getBtcFeesForNonOrdinalBtcSend( btcAddress, - nonOrdinalUtxos!, + nonOrdinalUtxos || [], ordinalsAddress, network.type, mode, ); - } else if (btcRecipients && selectedAccount) { + } else if (type !== 'Ordinals' && btcRecipients) { feeInfo = await getBtcFees(btcRecipients, btcAddress, btcClient, network.type, mode); } else if (type === 'Ordinals' && btcRecipients && ordinalTxUtxo) { feeInfo = await getBtcFeesForOrdinalSend( @@ -102,7 +102,6 @@ const useBtcFees = ({ network, ordinalsUtxos, ordinalsAddress, - selectedAccount, ]); return feeData; From 86be489f64a7ec50d0af587543996b89fb0e78fd Mon Sep 17 00:00:00 2001 From: Abdul Haseeb Date: Fri, 12 Jan 2024 12:39:53 +0500 Subject: [PATCH 2/2] fix: handle btc fee error --- .../transactionSetting/editBtcFee.tsx | 4 +- .../components/transactionSetting/feeItem.tsx | 55 +++++++++++++++---- src/app/hooks/useBtcFees.ts | 16 ++++-- 3 files changed, 58 insertions(+), 17 deletions(-) diff --git a/src/app/components/transactionSetting/editBtcFee.tsx b/src/app/components/transactionSetting/editBtcFee.tsx index c278df213..77509d524 100644 --- a/src/app/components/transactionSetting/editBtcFee.tsx +++ b/src/app/components/transactionSetting/editBtcFee.tsx @@ -187,7 +187,7 @@ function EditBtcFee({ const { ordinals } = useOrdinalsByAddress(btcAddress); const ordinalsUtxos = useMemo(() => ordinals?.map((ord) => ord.utxo), [ordinals]); const btcClient = useBtcClient(); - const feeData = useBtcFees({ + const { feeData, highFeeError, mediumFeeError } = useBtcFees({ isRestoreFlow: !!isRestoreFlow, nonOrdinalUtxos, btcRecipients, @@ -341,6 +341,7 @@ function EditBtcFee({ setFeeMode('high'); }} selected={feeMode === 'high'} + error={highFeeError} /> props.theme.colors.white_200}; margin-bottom: ${(props) => props.theme.space.xxs}; `; @@ -75,9 +75,19 @@ interface FeeItemProps { fiat: string | JSX.Element; selected: boolean; onClick?: () => void; + error?: string; } -function FeeItem({ priority, time, feeRate, totalFee, fiat, selected, onClick }: FeeItemProps) { +function FeeItem({ + priority, + time, + feeRate, + totalFee, + fiat, + selected, + error, + onClick, +}: FeeItemProps) { const { t } = useTranslation('translation'); const getIcon = () => { switch (priority) { @@ -105,25 +115,50 @@ function FeeItem({ priority, time, feeRate, totalFee, fiat, selected, onClick }: } }; + const getErrorMessage = (btcError: string) => { + if ( + Number(btcError) === ErrorCodes.InSufficientBalance || + Number(btcError) === ErrorCodes.InSufficientBalanceWithTxFee + ) { + return t('SEND.ERRORS.INSUFFICIENT_BALANCE'); + } + return btcError; + }; + return ( - + {getIcon()} {getLabel()} - {time} - {`${feeRate} Sats/ vByte`} + + {time} + + {`${feeRate} Sats/ vByte`} - {totalFee ? ( - + + + {totalFee && ( {`${totalFee} Sats`} - {fiat} - - ) : ( + )} + + {fiat} + + {error && ( + + {getErrorMessage(error)} + + )} + + + {!totalFee && !error && ( diff --git a/src/app/hooks/useBtcFees.ts b/src/app/hooks/useBtcFees.ts index b5183167f..976b26308 100644 --- a/src/app/hooks/useBtcFees.ts +++ b/src/app/hooks/useBtcFees.ts @@ -31,13 +31,15 @@ const useBtcFees = ({ btcRecipients, type, ordinalTxUtxo, -}: Params): FeeData => { +}: Params): { feeData: FeeData; highFeeError?: string; mediumFeeError?: string } => { const [feeData, setFeeData] = useState({ standardFeeRate: '', standardTotalFee: '', highFeeRate: '', highTotalFee: '', }); + const [highFeeError, setHighFeeError] = useState(''); + const [standardFeeError, setStandardFeeError] = useState(''); const { network, btcAddress, ordinalsAddress } = useWalletSelector(); const btcClient = useBtcClient(); const { ordinals } = useOrdinalsByAddress(btcAddress); @@ -46,6 +48,8 @@ const useBtcFees = ({ useEffect(() => { async function fetchFees(mode: 'standard' | 'high') { try { + setStandardFeeError(''); + setHighFeeError(''); let feeInfo; if (isRestoreFlow) { feeInfo = await getBtcFeesForNonOrdinalBtcSend( @@ -55,7 +59,7 @@ const useBtcFees = ({ network.type, mode, ); - } else if (type !== 'Ordinals' && btcRecipients) { + } else if (type === 'BTC' && btcRecipients) { feeInfo = await getBtcFees(btcRecipients, btcAddress, btcClient, network.type, mode); } else if (type === 'Ordinals' && btcRecipients && ordinalTxUtxo) { feeInfo = await getBtcFeesForOrdinalSend( @@ -68,12 +72,13 @@ const useBtcFees = ({ mode, ); } - return { fee: feeInfo?.fee.toString() || '', feeRate: feeInfo?.selectedFeeRate.toString() || '', }; - } catch (error) { + } catch (error: any) { + if (mode === 'standard') setStandardFeeError(error.toString()); + else if (mode === 'high') setHighFeeError(error.toString()); return { fee: '', feeRate: '' }; } } @@ -103,8 +108,7 @@ const useBtcFees = ({ ordinalsUtxos, ordinalsAddress, ]); - - return feeData; + return { feeData, highFeeError, mediumFeeError: standardFeeError }; }; export default useBtcFees;