diff --git a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx index 14b1de450a..63ee1ba5ff 100644 --- a/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx +++ b/packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx @@ -174,7 +174,8 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement => { const destChainGenesisHash = chainInfoMap[destChainValue]?.substrateInfo?.genesisHash || ''; const checkAction = usePreCheckAction(fromValue, true, detectTranslate('The account you are using is {{accountTitle}}, you cannot send assets with it')); - const [feeResetTrigger, setFeeResetTrigger] = useState({}); + const [showFeeSelector, setShowFeeSelector] = useState(false); + const [feeResetTrigger, setFeeResetTrigger] = useState(Date.now()); const assetRef = useRef(''); const proxyIdRef = useRef(''); @@ -310,7 +311,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement => { setTransactionFeeInfo(undefined); if (values.chain && BITCOIN_CHAINS.includes(values.chain)) { - setFeeResetTrigger({}); + setFeeResetTrigger(Date.now()); } } @@ -523,6 +524,12 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement => { } }, [assetRegistry, form, tokenItems]); + useEffect(() => { + if (!!fromValue && !!toValue && !!transferAmountValue) { + setShowFeeSelector(true); + } + }, [fromValue, toValue, transferAmountValue]); + // Get max transfer value useEffect(() => { let cancel = false; @@ -576,7 +583,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement => { .finally(() => { setIsFetchingInfo(false); }); - }, 800); + }, 100); } return () => { @@ -739,13 +746,15 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement => { - {!!fromValue && } + {!!fromValue && ( + + )} => { { - BITCOIN_CHAINS.includes(chainValue) && !!transferInfo && !!assetValue && ( + BITCOIN_CHAINS.includes(chainValue) && !!assetValue && showFeeSelector && ( val) { const minString = formatNumber(low, 0, balanceFormatter); diff --git a/packages/extension-koni-ui/src/components/Field/TransactionFee/BitcoinFeeSelector/index.tsx b/packages/extension-koni-ui/src/components/Field/TransactionFee/BitcoinFeeSelector/index.tsx index 5c8c6043f3..5f22dcb544 100644 --- a/packages/extension-koni-ui/src/components/Field/TransactionFee/BitcoinFeeSelector/index.tsx +++ b/packages/extension-koni-ui/src/components/Field/TransactionFee/BitcoinFeeSelector/index.tsx @@ -17,7 +17,7 @@ import styled from 'styled-components'; import { BitcoinFeeEditorModal } from './BitcoinFeeEditorModal'; type Props = ThemeProps & { - feeDetail: BitcoinFeeDetail; + feeDetail: BitcoinFeeDetail | undefined; onSelect: (transactionFee: TransactionFee) => void; isLoading?: boolean; tokenSlug: string; @@ -31,7 +31,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to const { t } = useTranslation(); const { activeModal } = useContext(ModalContext); const assetRegistry = useSelector((root) => root.assetRegistry.assetRegistry); - const [selectedOption, setSelectedOption] = useState({ option: feeDetail?.options?.default }); + const [selectedOption, setSelectedOption] = useState(undefined); const priceMap = useSelector((state) => state.price.priceMap); const resetTriggerRef = useRef(resetTrigger); const [modalRenderKey, setModalRenderKey] = useState(modalId); @@ -45,6 +45,10 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to const symbol = _getAssetSymbol(tokenAsset); const tokenFeePriceValue = useMemo(() => { + if (!feeDetail) { + return BN_ZERO; + } + if (!isLoading && feeDetail.estimatedFee) { const price = priceMap[priceId] || 0; @@ -52,7 +56,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to } return BN_ZERO; - }, [feeDetail.estimatedFee, decimals, priceId, priceMap, isLoading]); + }, [feeDetail, isLoading, priceMap, priceId, decimals]); const onClickEdit = useCallback(() => { setModalRenderKey(`${modalId}_${Date.now()}`); @@ -73,9 +77,29 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to }); }, [onSelect]); + const feeValue = useMemo(() => { + if (!selectedOption || !feeDetail) { + return '0'; + } + + if (selectedOption.option === 'custom') { + return new BigN(selectedOption.customValue.feeRate).multipliedBy(feeDetail.vSize); + } + + const feeRate = feeDetail.options[selectedOption.option].feeRate; + + return new BigN(feeRate).multipliedBy(feeDetail.vSize); + }, [feeDetail, selectedOption]); + + useEffect(() => { + if (feeDetail && !selectedOption) { + setSelectedOption({ option: feeDetail.options.default }); + } + }, [feeDetail, selectedOption]); + useEffect(() => { - if (resetTrigger !== resetTriggerRef.current) { - setSelectedOption({ option: feeDetail?.options?.default }); + if (feeDetail && resetTrigger !== resetTriggerRef.current) { + setSelectedOption({ option: feeDetail.options.default }); resetTriggerRef.current = resetTrigger; } }, [feeDetail, resetTrigger]); @@ -86,7 +110,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to className={className} content={(
- {isLoading + {isLoading || !feeDetail || !selectedOption ? ( ) @@ -96,7 +120,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to decimal={decimals} size={14} suffix={symbol} - value={feeDetail.estimatedFee} + value={feeValue} /> )}
@@ -113,7 +137,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to value={tokenFeePriceValue} />