From d45f26e62bf200f87a527fe6bca544f4b5560029 Mon Sep 17 00:00:00 2001 From: alter-eggo Date: Fri, 16 Jun 2023 12:36:19 +0400 Subject: [PATCH] fix: brc-20 send form bug --- .../bitcoin-fees-list/bitcoin-fees-list.tsx | 5 ----- .../bitcoin-choose-fee/bitcoin-choose-fee.tsx | 8 +++++--- .../components/bitcoin-choose-fee.layout.tsx | 16 ++++++++++++++-- .../rpc-send-transfer-choose-fee.tsx | 6 ++++-- .../send-inscription-choose-fee.tsx | 6 ++++-- .../form/brc-20/brc-20-choose-fee.tsx | 6 ++++-- .../form/btc/btc-choose-fee.tsx | 6 ++++-- 7 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/app/components/bitcoin-fees-list/bitcoin-fees-list.tsx b/src/app/components/bitcoin-fees-list/bitcoin-fees-list.tsx index c54a14be..843fb4e0 100644 --- a/src/app/components/bitcoin-fees-list/bitcoin-fees-list.tsx +++ b/src/app/components/bitcoin-fees-list/bitcoin-fees-list.tsx @@ -4,7 +4,6 @@ import { Stack } from '@stacks/ui'; import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model'; -import { LoadingSpinner } from '../loading-spinner'; import { FeesListError } from './components/fees-list-error'; import { FeesListItem } from './components/fees-list-item'; @@ -26,7 +25,6 @@ export interface OnChooseFeeArgs { interface BitcoinFeesListProps { feesList: FeesListItem[]; - isLoading: boolean; onChooseFee({ feeRate, feeValue, time }: OnChooseFeeArgs): Promise; onSetSelectedFeeType(value: BtcFeeType): void; onValidateBitcoinSpend(value: number): boolean; @@ -34,7 +32,6 @@ interface BitcoinFeesListProps { } export function BitcoinFeesList({ feesList, - isLoading, onChooseFee, onSetSelectedFeeType, onValidateBitcoinSpend, @@ -50,8 +47,6 @@ export function BitcoinFeesList({ [onChooseFee, onSetSelectedFeeType, onValidateBitcoinSpend] ); - if (isLoading) return ; - // TODO: This should be changed when custom fees are implemented. We can simply // force custom fee setting when api requests fail and we can't calculate fees. if (!feesList.length) return ; diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx index 807a8509..2ffaacce 100644 --- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx +++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx @@ -24,7 +24,8 @@ interface BitcoinChooseFeeProps { onChooseFee({ feeRate, feeValue, time }: OnChooseFeeArgs): Promise; onValidateBitcoinSpend(value: number): boolean; recipient: string; - recommendedFeeRate: number; + recommendedFeeRate: string; + isLoading: boolean; } export function BitcoinChooseFee({ amount, @@ -34,15 +35,16 @@ export function BitcoinChooseFee({ onChooseFee, recipient, onValidateBitcoinSpend, + isLoading, recommendedFeeRate, }: BitcoinChooseFeeProps) { const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); const btcBalance = useNativeSegwitBalance(currentAccountBtcAddress); const hasAmount = amount.amount.isGreaterThan(0); - const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate.toString()); + const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate); return ( - + {hasAmount ? ( diff --git a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx b/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx index 6700bc9e..eed92a60 100644 --- a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx +++ b/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx @@ -1,8 +1,20 @@ import { Flex } from '@stacks/ui'; -import { HasChildren } from '@app/common/has-children'; +import { LoadingSpinner } from '@app/components/loading-spinner'; -export function BitcoinChooseFeeLayout({ children }: HasChildren) { +interface BitcoinChooseFeeLayoutProps { + children: JSX.Element; + isLoading: boolean; +} + +export function BitcoinChooseFeeLayout({ children, isLoading }: BitcoinChooseFeeLayoutProps) { + if (isLoading) { + return ( + + + + ); + } return ( {children} diff --git a/src/app/pages/rpc-send-transfer/rpc-send-transfer-choose-fee.tsx b/src/app/pages/rpc-send-transfer/rpc-send-transfer-choose-fee.tsx index 7ef0065d..de644eb9 100644 --- a/src/app/pages/rpc-send-transfer/rpc-send-transfer-choose-fee.tsx +++ b/src/app/pages/rpc-send-transfer/rpc-send-transfer-choose-fee.tsx @@ -42,6 +42,8 @@ export function RpcSendTransferChooseFee() { amount: Number(amountAsMoney.amount), recipient: address, }); + const recommendedFeeRate = feesList[1]?.feeRate.toString() || ''; + const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } = useValidateBitcoinSpend(); async function previewTransfer({ feeRate, feeValue, time, isCustomFee }: OnChooseFeeArgs) { @@ -70,17 +72,17 @@ export function RpcSendTransferChooseFee() { return ( setSelectedFeeType(value)} selectedFeeType={selectedFeeType} /> } - recommendedFeeRate={feesList[1].feeRate} + recommendedFeeRate={recommendedFeeRate} onValidateBitcoinSpend={onValidateBitcoinFeeSpend} recipient={address} onChooseFee={previewTransfer} diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx index ed8b79b3..215da69b 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx @@ -22,6 +22,8 @@ export function SendInscriptionChooseFee() { const navigate = useNavigate(); const { recipient, selectedFeeType, setSelectedFeeType, utxo } = useSendInscriptionState(); const { feesList, isLoading } = useSendInscriptionFeesList({ recipient, utxo }); + const recommendedFeeRate = feesList[1]?.feeRate.toString() || ''; + const { reviewTransaction } = useSendInscriptionForm(); const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } = useValidateBitcoinSpend(); @@ -40,17 +42,17 @@ export function SendInscriptionChooseFee() { navigate(-1)}> setSelectedFeeType(value)} selectedFeeType={selectedFeeType} /> } - recommendedFeeRate={feesList[1].feeRate} + recommendedFeeRate={recommendedFeeRate} onChooseFee={previewTransaction} recipient={recipient} onValidateBitcoinSpend={onValidateBitcoinFeeSpend} diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx index e935896d..68c73ce3 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx @@ -45,6 +45,8 @@ export function BrcChooseFee() { amount: Number(amount), recipient, }); + const recommendedFeeRate = feesList[1]?.feeRate.toString() || ''; + const amountAsMoney = createMoney(Number(amount), tick, 0); const { showInsufficientBalanceError, onValidateBitcoinFeeSpend } = @@ -121,17 +123,17 @@ export function BrcChooseFee() { ) : ( setSelectedFeeType(value)} onValidateBitcoinSpend={onValidateBitcoinFeeSpend} selectedFeeType={selectedFeeType} /> } - recommendedFeeRate={feesList[1].feeRate} + recommendedFeeRate={recommendedFeeRate} onChooseFee={previewTransaction} recipient={recipient} onValidateBitcoinSpend={onValidateBitcoinFeeSpend} diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx index cf9eaaf5..5167d958 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx @@ -31,6 +31,8 @@ export function BtcChooseFee() { isSendingMax, recipient: txValues.recipient, }); + const recommendedFeeRate = feesList[1]?.feeRate.toString() || ''; + const { amountAsMoney, onGoBack, previewTransaction } = useBtcChooseFee(); const { showInsufficientBalanceError, onValidateBitcoinAmountSpend } = useValidateBitcoinSpend(amountAsMoney); @@ -40,17 +42,17 @@ export function BtcChooseFee() { return ( setSelectedFeeType(value)} onValidateBitcoinSpend={onValidateBitcoinAmountSpend} selectedFeeType={selectedFeeType} /> } - recommendedFeeRate={feesList[1].feeRate} + recommendedFeeRate={recommendedFeeRate} onValidateBitcoinSpend={onValidateBitcoinAmountSpend} onChooseFee={previewTransaction} recipient={txValues.recipient}