From c4a8a8870d9c814aa2903be25af31785d805a7fa Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Fri, 10 Jan 2025 12:49:19 -0500 Subject: [PATCH 1/3] fix wrong native asset displayed on SignTransactionSheet --- .../TransactionSimulationCard.tsx | 23 ++++++++----------- src/screens/SignTransactionSheet.tsx | 6 ++--- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/Transactions/TransactionSimulationCard.tsx b/src/components/Transactions/TransactionSimulationCard.tsx index 4c44080787c..4ccf6a378f2 100644 --- a/src/components/Transactions/TransactionSimulationCard.tsx +++ b/src/components/Transactions/TransactionSimulationCard.tsx @@ -41,12 +41,6 @@ interface TransactionSimulationCardProps { simulation: TransactionSimulationResult | undefined; simulationError: TransactionErrorType | undefined; simulationScanResult: TransactionScanResultType | undefined; - walletBalance: { - amount: string | number; - display: string; - isLoaded: boolean; - symbol: string; - }; } export const TransactionSimulationCard = ({ @@ -60,12 +54,13 @@ export const TransactionSimulationCard = ({ simulation, simulationError, simulationScanResult, - walletBalance, }: TransactionSimulationCardProps) => { const cardHeight = useSharedValue(COLLAPSED_CARD_HEIGHT); const contentHeight = useSharedValue(COLLAPSED_CARD_HEIGHT - CARD_BORDER_WIDTH * 2); const spinnerRotation = useSharedValue(0); + const nativeAsset = useBackendNetworksStore.getState().getChainsNativeAsset()[chainId]; + const listStyle = useAnimatedStyle(() => ({ opacity: noChanges ? withTiming(1, timingConfig) @@ -164,7 +159,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 +178,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 +265,7 @@ export const TransactionSimulationCard = ({ {isBalanceEnough === false ? ( {i18n.t(i18n.l.walletconnect.simulation.simulation_card.messages.need_more_native, { - symbol: walletBalance?.symbol, + symbol: nativeAsset.symbol, network: useBackendNetworksStore.getState().getChainsName()[chainId], })} diff --git a/src/screens/SignTransactionSheet.tsx b/src/screens/SignTransactionSheet.tsx index 3edec67474a..12f075e2867 100644 --- a/src/screens/SignTransactionSheet.tsx +++ b/src/screens/SignTransactionSheet.tsx @@ -573,11 +573,12 @@ export const SignTransactionSheet = () => { } if (!txSimulationLoading && isBalanceEnough === false) { - return i18n.t(i18n.l.walletconnect.simulation.buttons.buy_native_token, { symbol: walletBalance?.symbol }); + const nativeAsset = useBackendNetworksStore.getState().getChainsNativeAsset()[chainId]; + 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, chainId]); const primaryActionButtonColor = useMemo(() => { let color = colors.appleBlue; @@ -681,7 +682,6 @@ export const SignTransactionSheet = () => { simulation={simulationResult?.simulationData} simulationError={simulationResult?.simulationError} simulationScanResult={simulationResult?.simulationScanResult} - walletBalance={walletBalance} /> {isMessageRequest ? ( Date: Fri, 10 Jan 2025 12:57:52 -0500 Subject: [PATCH 2/3] reduce call to backend network store --- .../TransactionSimulationCard.tsx | 5 ++-- src/screens/SignTransactionSheet.tsx | 23 +++++++++++++------ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/components/Transactions/TransactionSimulationCard.tsx b/src/components/Transactions/TransactionSimulationCard.tsx index 4ccf6a378f2..a466fb330d5 100644 --- 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,6 +42,7 @@ interface TransactionSimulationCardProps { simulation: TransactionSimulationResult | undefined; simulationError: TransactionErrorType | undefined; simulationScanResult: TransactionScanResultType | undefined; + nativeAsset: ParsedAddressAsset | ReturnType['getChainsNativeAsset']>[ChainId]; } export const TransactionSimulationCard = ({ @@ -54,13 +56,12 @@ export const TransactionSimulationCard = ({ simulation, simulationError, simulationScanResult, + nativeAsset, }: TransactionSimulationCardProps) => { const cardHeight = useSharedValue(COLLAPSED_CARD_HEIGHT); const contentHeight = useSharedValue(COLLAPSED_CARD_HEIGHT - CARD_BORDER_WIDTH * 2); const spinnerRotation = useSharedValue(0); - const nativeAsset = useBackendNetworksStore.getState().getChainsNativeAsset()[chainId]; - const listStyle = useAnimatedStyle(() => ({ opacity: noChanges ? withTiming(1, timingConfig) diff --git a/src/screens/SignTransactionSheet.tsx b/src/screens/SignTransactionSheet.tsx index 12f075e2867..7f7ca918cd7 100644 --- 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: false, symbol: nativeAsset?.symbol || 'ETH', }; - }, [nativeAsset?.balance?.amount, nativeAsset?.balance?.display, nativeAsset?.symbol]); + }, [nativeAsset]); const { gasLimit, isValidGas, startPollingGasFees, stopPollingGasFees, updateTxFee, selectedGasFee, gasFeeParamsBySpeed } = useGas(); @@ -573,12 +582,11 @@ export const SignTransactionSheet = () => { } if (!txSimulationLoading && isBalanceEnough === false) { - const nativeAsset = useBackendNetworksStore.getState().getChainsNativeAsset()[chainId]; return i18n.t(i18n.l.walletconnect.simulation.buttons.buy_native_token, { symbol: nativeAsset.symbol }); } return i18n.t(i18n.l.walletconnect.simulation.buttons.confirm); - }, [isAuthorizing, txSimulationLoading, isBalanceEnough, chainId]); + }, [isAuthorizing, txSimulationLoading, isBalanceEnough, nativeAsset.symbol]); const primaryActionButtonColor = useMemo(() => { let color = colors.appleBlue; @@ -682,6 +690,7 @@ export const SignTransactionSheet = () => { simulation={simulationResult?.simulationData} simulationError={simulationResult?.simulationError} simulationScanResult={simulationResult?.simulationScanResult} + nativeAsset={nativeAsset} /> {isMessageRequest ? ( Date: Fri, 10 Jan 2025 12:59:50 -0500 Subject: [PATCH 3/3] Update src/screens/SignTransactionSheet.tsx --- src/screens/SignTransactionSheet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/SignTransactionSheet.tsx b/src/screens/SignTransactionSheet.tsx index 7f7ca918cd7..01854a2618e 100644 --- a/src/screens/SignTransactionSheet.tsx +++ b/src/screens/SignTransactionSheet.tsx @@ -147,7 +147,7 @@ export const SignTransactionSheet = () => { return { amount: 0, display: `0 ${nativeAsset?.symbol}`, - isLoaded: false, + isLoaded: true, symbol: nativeAsset?.symbol || 'ETH', }; }, [nativeAsset]);