Fix wrong native asset being displayed on SignTransactionSheet (#6395)

* fix wrong native asset displayed on SignTransactionSheet * reduce call to backend network store * Update src/screens/SignTransactionSheet.tsx
rainbow-me · Jan 15, 2025 · 39a3775 · 39a3775
1 parent 6c94cd4
commit 39a3775
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 22 deletions.
diff --git a/src/components/Transactions/TransactionSimulationCard.tsx b/src/components/Transactions/TransactionSimulationCard.tsx
@@ -29,6 +29,7 @@ import {
 } from '@/components/Transactions/constants';
 import { ChainId } from '@/state/backendNetworks/types';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { ParsedAddressAsset } from '@/entities/tokens';
 
 interface TransactionSimulationCardProps {
   chainId: ChainId;
@@ -41,12 +42,7 @@ interface TransactionSimulationCardProps {
   simulation: TransactionSimulationResult | undefined;
   simulationError: TransactionErrorType | undefined;
   simulationScanResult: TransactionScanResultType | undefined;
-  walletBalance: {
-    amount: string | number;
-    display: string;
-    isLoaded: boolean;
-    symbol: string;
-  };
+  nativeAsset: ParsedAddressAsset | ReturnType<ReturnType<typeof useBackendNetworksStore.getState>['getChainsNativeAsset']>[ChainId];
 }
 
 export const TransactionSimulationCard = ({
@@ -60,7 +56,7 @@ export const TransactionSimulationCard = ({
   simulation,
   simulationError,
   simulationScanResult,
-  walletBalance,
+  nativeAsset,
 }: TransactionSimulationCardProps) => {
   const cardHeight = useSharedValue(COLLAPSED_CARD_HEIGHT);
   const contentHeight = useSharedValue(COLLAPSED_CARD_HEIGHT - CARD_BORDER_WIDTH * 2);
@@ -164,7 +160,7 @@ export const TransactionSimulationCard = ({
       return i18n.t(i18n.l.walletconnect.simulation.simulation_card.titles.simulating);
     }
     if (isBalanceEnough === false) {
-      return i18n.t(i18n.l.walletconnect.simulation.simulation_card.titles.not_enough_native_balance, { symbol: walletBalance?.symbol });
+      return i18n.t(i18n.l.walletconnect.simulation.simulation_card.titles.not_enough_native_balance, { symbol: nativeAsset.symbol });
     }
     if (txSimulationApiError || isPersonalSignRequest) {
       return i18n.t(i18n.l.walletconnect.simulation.simulation_card.titles.simulation_unavailable);
@@ -183,14 +179,14 @@ export const TransactionSimulationCard = ({
     }
     return i18n.t(i18n.l.walletconnect.simulation.simulation_card.titles.simulation_result);
   }, [
-    isBalanceEnough,
     isLoading,
+    isBalanceEnough,
+    txSimulationApiError,
+    isPersonalSignRequest,
+    simulationScanResult,
     noChanges,
     simulationError,
-    simulationScanResult,
-    isPersonalSignRequest,
-    txSimulationApiError,
-    walletBalance?.symbol,
+    nativeAsset.symbol,
   ]);
 
   const isExpanded = useMemo(() => {
@@ -270,7 +266,7 @@ export const TransactionSimulationCard = ({
             {isBalanceEnough === false ? (
               <Text color="labelQuaternary" size="13pt" weight="semibold">
                 {i18n.t(i18n.l.walletconnect.simulation.simulation_card.messages.need_more_native, {
-                  symbol: walletBalance?.symbol,
+                  symbol: nativeAsset.symbol,
                   network: useBackendNetworksStore.getState().getChainsName()[chainId],
                 })}
               </Text>

diff --git a/src/screens/SignTransactionSheet.tsx b/src/screens/SignTransactionSheet.tsx
@@ -107,7 +107,8 @@ export const SignTransactionSheet = () => {
   const addressToUse = specifiedAddress ?? accountAddress;
 
   const provider = getProvider({ chainId });
-  const nativeAsset = ethereumUtils.getNetworkNativeAsset({ chainId });
+  const nativeAsset =
+    ethereumUtils.getNetworkNativeAsset({ chainId }) ?? useBackendNetworksStore.getState().getChainsNativeAsset()[chainId];
 
   const isMessageRequest = isMessageDisplayType(transactionDetails.payload.method);
   const isPersonalSignRequest = isPersonalSign(transactionDetails.payload.method);
@@ -135,13 +136,21 @@ export const SignTransactionSheet = () => {
   }, [isMessageRequest, transactionDetails?.displayDetails?.request, nativeAsset]);
 
   const walletBalance = useMemo(() => {
+    if (typeof nativeAsset === 'object' && 'balance' in nativeAsset) {
+      return {
+        amount: nativeAsset?.balance?.amount || 0,
+        display: nativeAsset?.balance?.display || `0 ${nativeAsset?.symbol}`,
+        isLoaded: nativeAsset?.balance?.display !== undefined,
+        symbol: nativeAsset?.symbol || 'ETH',
+      };
+    }
     return {
-      amount: nativeAsset?.balance?.amount || 0,
-      display: nativeAsset?.balance?.display || `0 ${nativeAsset?.symbol}`,
-      isLoaded: nativeAsset?.balance?.display !== undefined,
+      amount: 0,
+      display: `0 ${nativeAsset?.symbol}`,
+      isLoaded: true,
       symbol: nativeAsset?.symbol || 'ETH',
     };
-  }, [nativeAsset?.balance?.amount, nativeAsset?.balance?.display, nativeAsset?.symbol]);
+  }, [nativeAsset]);
 
   const { gasLimit, isValidGas, startPollingGasFees, stopPollingGasFees, updateTxFee, selectedGasFee, gasFeeParamsBySpeed } = useGas();
 
@@ -573,11 +582,11 @@ export const SignTransactionSheet = () => {
     }
 
     if (!txSimulationLoading && isBalanceEnough === false) {
-      return i18n.t(i18n.l.walletconnect.simulation.buttons.buy_native_token, { symbol: walletBalance?.symbol });
+      return i18n.t(i18n.l.walletconnect.simulation.buttons.buy_native_token, { symbol: nativeAsset.symbol });
     }
 
     return i18n.t(i18n.l.walletconnect.simulation.buttons.confirm);
-  }, [txSimulationLoading, isBalanceEnough, isAuthorizing, walletBalance]);
+  }, [isAuthorizing, txSimulationLoading, isBalanceEnough, nativeAsset.symbol]);
 
   const primaryActionButtonColor = useMemo(() => {
     let color = colors.appleBlue;
@@ -681,7 +690,7 @@ export const SignTransactionSheet = () => {
                     simulation={simulationResult?.simulationData}
                     simulationError={simulationResult?.simulationError}
                     simulationScanResult={simulationResult?.simulationScanResult}
-                    walletBalance={walletBalance}
+                    nativeAsset={nativeAsset}
                   />
                   {isMessageRequest ? (
                     <TransactionMessageCard