chore: fix fee estimation

aave · Oct 16, 2024 · 728b8c6 · 728b8c6
1 parent e4a1703
commit 728b8c6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/src/components/transactions/Bridge/BridgeModalContent.tsx b/src/components/transactions/Bridge/BridgeModalContent.tsx
@@ -69,6 +69,7 @@ const feeTokens = [
     extensions: {
       isNative: false,
     },
+    balance: '0',
   },
   {
     name: 'Gho Token',
@@ -82,6 +83,7 @@ const feeTokens = [
     extensions: {
       isNative: false,
     },
+    balance: '0',
   },
   {
     name: 'Ethereum',
@@ -94,6 +96,7 @@ const feeTokens = [
     extensions: {
       isNative: true,
     },
+    balance: '0',
   },
   {
     name: 'Ethereum',
@@ -106,6 +109,7 @@ const feeTokens = [
     extensions: {
       isNative: true,
     },
+    balance: '0',
   },
 ];
 
@@ -138,22 +142,31 @@ export const BridgeModalContent = () => {
     (token) => token.chainId === sourceNetworkObj.chainId
   );
 
-  const { data: baseTokenList } = useTokensBalance(
+  const { data: feeTokenListWithBalance } = useTokensBalance(
     filteredFeeTokensByChainId,
     sourceNetworkObj.chainId,
     user
   );
 
-  const [selectedFeeToken, setSelectedFeeToken] = useState(filteredFeeTokensByChainId[0]);
+  const [selectedFeeToken, setSelectedFeeToken] = useState(
+    feeTokenListWithBalance?.[0] || filteredFeeTokensByChainId[0]
+  );
   const handleTokenChange = (event: SelectChangeEvent) => {
-    const token = filteredFeeTokensByChainId.find((token) => token.address === event.target.value);
+    const token = feeTokenListWithBalance?.find((token) => token.address === event.target.value);
+
     if (token) {
       setSelectedFeeToken(token);
     } else {
       setSelectedFeeToken(filteredFeeTokensByChainId[0]);
     }
   };
 
+  useEffect(() => {
+    if (feeTokenListWithBalance && feeTokenListWithBalance.length > 0 && !selectedFeeToken) {
+      setSelectedFeeToken(feeTokenListWithBalance[0]);
+    }
+  }, [feeTokenListWithBalance, selectedFeeToken]);
+
   useEffect(() => {
     // reset when source network changes
     setAmount('');
@@ -180,8 +193,8 @@ export const BridgeModalContent = () => {
     amount,
     sourceTokenAddress: sourceTokenInfo?.address || '',
     destinationAccount,
-    feeToken: selectedFeeToken.address,
-    feeTokenOracle: selectedFeeToken.oracle as string,
+    feeToken: selectedFeeToken?.address || '',
+    feeTokenOracle: selectedFeeToken?.oracle || ('' as string),
   });
 
   const { data: bridgeLimits, isFetching: fetchingBridgeLimits } = useGetBridgeLimit(
@@ -531,8 +544,8 @@ export const BridgeModalContent = () => {
                     },
                   }}
                 >
-                  {baseTokenList &&
-                    baseTokenList.map((token) => (
+                  {feeTokenListWithBalance &&
+                    feeTokenListWithBalance.map((token) => (
                       <MenuItem
                         sx={{ background: 'white' }}
                         key={token.address}
@@ -561,10 +574,10 @@ export const BridgeModalContent = () => {
               ) : (
                 <Stack direction="column" alignItems="flex-end" position="relative">
                   <Stack direction="row" alignItems="center">
-                    <TokenIcon symbol={selectedFeeToken.symbol} sx={{ mr: 1, fontSize: '16px' }} />
+                    <TokenIcon symbol={selectedFeeToken?.symbol} sx={{ mr: 1, fontSize: '16px' }} />
                     <FormattedNumber
                       value={bridgeFeeFormatted}
-                      symbol={selectedFeeToken.symbol}
+                      symbol={selectedFeeToken?.symbol}
                       variant="secondary14"
                     />
                   </Stack>
@@ -616,6 +629,18 @@ export const BridgeModalContent = () => {
               </Typography>
             </Warning>
           )}
+          {selectedFeeToken && parseFloat(selectedFeeToken.balance) < 0 && (
+            <Warning severity="warning" sx={{ my: 2 }}>
+              <Stack direction="row">
+                <Typography variant="caption">
+                  <Trans>
+                    You do not have a balance to pay for CCIP fee with your {selectedFeeToken.name},
+                    try changing to another token.
+                  </Trans>
+                </Typography>
+              </Stack>
+            </Warning>
+          )}
 
           <BridgeActions {...bridgeActionsProps} />
         </>

diff --git a/src/components/transactions/Bridge/useGetBridgeMessage.tsx b/src/components/transactions/Bridge/useGetBridgeMessage.tsx
@@ -76,6 +76,7 @@ export const useGetBridgeMessage = ({
         let transactionCostUsd;
 
         if (feeToken === constants.AddressZero) {
+          console.log('fee token ETH');
           // Handling for Ether (native token)
           const sourceLaneConfig = laneConfig.find(
             (config) => config.sourceChainId === sourceChainId
@@ -129,7 +130,7 @@ export const useGetBridgeMessage = ({
         setLoading(false);
       }
     }, 500);
-  }, [amount, destinationChainId, sourceChainId, sourceTokenAddress, destinationAccount]);
+  }, [amount, destinationChainId, sourceChainId, sourceTokenAddress, destinationAccount, feeToken]);
 
   useEffect(() => {
     if (amount && sourceTokenAddress) {
@@ -145,7 +146,7 @@ export const useGetBridgeMessage = ({
     return () => {
       debounced.cancel();
     };
-  }, [amount, debounced, sourceTokenAddress]);
+  }, [amount, debounced, sourceTokenAddress, feeToken]);
 
   return {
     message,

diff --git a/src/hooks/generic/useTokensBalance.ts b/src/hooks/generic/useTokensBalance.ts
@@ -7,11 +7,10 @@ import { getProvider } from 'src/utils/marketsAndNetworksConfig';
 
 export interface TokenInfoWithBalance extends TokenInfo {
   balance: string;
+  oracle?: string;
 }
 
 export const useTokensBalance = (tokenList: TokenInfo[], chainId: number, user: string) => {
-  console.log('do I have the setup', tokenList, chainId, user);
-
   return useQuery<TokenInfoWithBalance[]>({
     queryKey: queryKeysFactory.tokensBalance(tokenList, chainId, user),
     enabled: tokenList.length > 0,

diff --git a/src/locales/en/messages.js b/src/locales/en/messages.js
diff --git a/src/locales/en/messages.po b/src/locales/en/messages.po
@@ -3221,6 +3221,10 @@ msgstr "You cancelled the transaction."
 msgid "You did not participate in this proposal"
 msgstr "You did not participate in this proposal"
 
+#: src/components/transactions/Bridge/BridgeModalContent.tsx
+msgid "You do not have a balance to pay for CCIP fee with your {0}, try changing to another token."
+msgstr "You do not have a balance to pay for CCIP fee with your {0}, try changing to another token."
+
 #: src/components/transactions/CollateralChange/CollateralChangeModalContent.tsx
 msgid "You do not have supplies in this currency"
 msgstr "You do not have supplies in this currency"