[UI] Update loading for fee selection on send Fund screen

packages/extension-koni-ui/src/Popup/Transaction/variants/SendFund.tsx

@@ -174,7 +174,8 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
   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<unknown>({});
+  const [showFeeSelector, setShowFeeSelector] = useState(false);
+  const [feeResetTrigger, setFeeResetTrigger] = useState<unknown>(Date.now());
   const assetRef = useRef<string | undefined>('');
   const proxyIdRef = useRef<string | undefined>('');
 
@@ -310,7 +311,7 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
         setTransactionFeeInfo(undefined);
 
         if (values.chain && BITCOIN_CHAINS.includes(values.chain)) {
-          setFeeResetTrigger({});
+          setFeeResetTrigger(Date.now());
         }
       }
 
@@ -523,6 +524,12 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
     }
   }, [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<Props> => {
           .finally(() => {
             setIsFetchingInfo(false);
           });
-      }, 800);
+      }, 100);
     }
 
     return () => {
@@ -739,13 +746,15 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
             </Form.Item>
           </div>
 
-          {!!fromValue && <FreeBalance
-            address={fromValue}
-            chain={chainValue}
-            className={'__free-balance-block'}
-            onBalanceReady={setIsBalanceReady}
-            tokenSlug={assetValue}
-          />}
+          {!!fromValue && (
+            <FreeBalance
+              address={fromValue}
+              chain={chainValue}
+              className={'__free-balance-block'}
+              onBalanceReady={setIsBalanceReady}
+              tokenSlug={assetValue}
+            />
+          )}
 
           <Form.Item
             name={'value'}
@@ -769,10 +778,10 @@ const _SendFund = ({ className = '' }: Props): React.ReactElement<Props> => {
         </Form>
 
         {
-          BITCOIN_CHAINS.includes(chainValue) && !!transferInfo && !!assetValue && (
+          BITCOIN_CHAINS.includes(chainValue) && !!assetValue && showFeeSelector && (
             <BitcoinFeeSelector
               className={'__bitcoin-fee-selector'}
-              feeDetail={transferInfo.feeOptions as BitcoinFeeDetail}
+              feeDetail={transferInfo?.feeOptions as BitcoinFeeDetail | undefined}
               isLoading={isFetchingInfo}
               onSelect={onSelectTransactionFeeInfo}
               resetTrigger={feeResetTrigger}

packages/extension-koni-ui/src/components/Field/TransactionFee/BitcoinFeeSelector/BitcoinFeeEditorModal.tsx

@@ -236,8 +236,8 @@ const Component = ({ className, feeDetail, modalId, onSelectOption, selectedOpti
       return Promise.reject(t('Please enter a valid number with optional decimal.'));
     }
 
-    const low = feeDetail?.options?.slow?.feeRate;
-    const val = parseFloat(value);
+    const low = feeDetail?.options?.slow?.feeRate || 0;
+    const val = value ? parseFloat(value) : 0;
 
     if (low > val) {
       const minString = formatNumber(low, 0, balanceFormatter);

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<BitcoinFeeOption>({ option: feeDetail?.options?.default });
+  const [selectedOption, setSelectedOption] = useState<BitcoinFeeOption | undefined>(undefined);
   const priceMap = useSelector((state) => state.price.priceMap);
   const resetTriggerRef = useRef<unknown>(resetTrigger);
   const [modalRenderKey, setModalRenderKey] = useState<string>(modalId);
@@ -45,14 +45,18 @@ 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;
 
       return new BigN(feeDetail.estimatedFee).div(BN_TEN.pow(decimals || 0)).multipliedBy(price);
     }
 
     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={(
           <div>
-            {isLoading
+            {isLoading || !feeDetail || !selectedOption
               ? (
                 <ActivityIndicator size={20} />
               )
@@ -96,7 +120,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to
                   decimal={decimals}
                   size={14}
                   suffix={symbol}
-                  value={feeDetail.estimatedFee}
+                  value={feeValue}
                 />
               )}
           </div>
@@ -113,7 +137,7 @@ const Component = ({ className, feeDetail, isLoading, onSelect, resetTrigger, to
               value={tokenFeePriceValue}
             />
             <Button
-              disabled={isLoading}
+              disabled={isLoading || !feeDetail || !selectedOption}
               icon={
                 <Icon
                   phosphorIcon={PencilSimpleLine}