Optimize backendNetworks store, remove worklet functions

rainbow-me · Jan 17, 2025 · 1cc2922 · 1cc2922
1 parent 6249021
commit 1cc2922
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 516 deletions.
diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.android.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, View } from 'react-native';
 import { getChainBadgeStyles } from '@/components/coin-icon/ChainImage';
-import { globalColors, useColorMode } from '@/design-system';
+import { useColorMode } from '@/design-system';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
 import { useSwapsStore } from '@/state/swaps/swapsStore';
@@ -41,16 +41,3 @@ export function AnimatedChainImage({
     </View>
   );
 }
-
-const sx = StyleSheet.create({
-  badge: {
-    position: 'absolute',
-    shadowColor: globalColors.grey100,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
-  },
-});
diff --git a/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx b/src/__swaps__/screens/Swap/components/AnimatedChainImage.ios.tsx
@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import { useAnimatedProps, useDerivedValue } from 'react-native-reanimated';
 import { AnimatedFasterImage } from '@/components/AnimatedComponents/AnimatedFasterImage';
 import { BLANK_BASE64_PIXEL } from '@/components/DappBrowser/constants';
 import { getChainBadgeStyles } from '@/components/coin-icon/ChainImage';
 import { DEFAULT_FASTER_IMAGE_CONFIG } from '@/components/images/ImgixImage';
-import { globalColors, useColorMode } from '@/design-system';
-import { getChainsBadgeWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { useColorMode } from '@/design-system';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
 import { useSwapContext } from '../providers/swap-provider';
 
@@ -20,15 +20,15 @@ export function AnimatedChainImage({
   size?: number;
 }) {
   const { internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
-  const backendNetworks = useBackendNetworksStore(state => state.backendNetworksSharedValue);
+  const networkBadges = useBackendNetworksStore(state => state.getChainsBadge());
 
   const url = useDerivedValue(() => {
     const asset = assetType === 'input' ? internalSelectedInputAsset : internalSelectedOutputAsset;
     const chainId = asset?.value?.chainId;
 
     let url = 'eth';
     if (chainId !== undefined && !(!showMainnetBadge && chainId === ChainId.mainnet)) {
-      url = getChainsBadgeWorklet(backendNetworks)[chainId];
+      url = networkBadges[chainId];
     }
     return url;
   });
@@ -55,16 +55,3 @@ export function AnimatedChainImage({
     </View>
   );
 }
-
-const sx = StyleSheet.create({
-  badge: {
-    position: 'absolute',
-    shadowColor: globalColors.grey100,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
-  },
-});
diff --git a/src/__swaps__/screens/Swap/components/ReviewPanel.tsx b/src/__swaps__/screens/Swap/components/ReviewPanel.tsx
@@ -41,7 +41,7 @@ import { useSelectedGasSpeed } from '../hooks/useSelectedGas';
 import { NavigationSteps, useSwapContext } from '../providers/swap-provider';
 import { EstimatedSwapGasFee, EstimatedSwapGasFeeSlot } from './EstimatedSwapGasFee';
 import { UnmountOnAnimatedReaction } from './UnmountOnAnimatedReaction';
-import { getChainsLabelWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
 
 const UNKNOWN_LABEL = i18n.t(i18n.l.swap.unknown);
@@ -245,17 +245,15 @@ export const SlippageRow = () => {
 export function ReviewPanel() {
   const { navigate } = useNavigation();
   const { isDarkMode } = useColorMode();
-  const backendNetworks = useBackendNetworksStore(state => state.backendNetworksSharedValue);
   const { configProgress, lastTypedInput, internalSelectedInputAsset, internalSelectedOutputAsset, quote } = useSwapContext();
+  const chainLabels = useBackendNetworksStore(state => state.getChainsLabel());
 
   const labelTertiary = useForegroundColor('labelTertiary');
   const separator = useForegroundColor('separator');
 
   const unknown = i18n.t(i18n.l.swap.unknown);
 
-  const chainName = useDerivedValue(
-    () => getChainsLabelWorklet(backendNetworks)[internalSelectedInputAsset.value?.chainId ?? ChainId.mainnet]
-  );
+  const chainName = useDerivedValue(() => chainLabels[internalSelectedInputAsset.value?.chainId ?? ChainId.mainnet]);
 
   const minReceivedOrMaxSoldLabel = useDerivedValue(() => {
     const isInputBasedTrade = lastTypedInput.value === 'inputAmount' || lastTypedInput.value === 'inputNativeValue';

diff --git a/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx b/src/__swaps__/screens/Swap/components/TokenList/ChainSelection.tsx
@@ -15,7 +15,7 @@ import { useAccountAccentColor } from '@/hooks';
 import { useSharedValueState } from '@/hooks/reanimated/useSharedValueState';
 import { userAssetsStore, useUserAssetsStore } from '@/state/assets/userAssets';
 import { swapsStore } from '@/state/swaps/swapsStore';
-import { getChainsBadgeWorklet, getChainsLabelWorklet, useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { DropdownMenu, MenuItem } from '@/components/DropdownMenu';
 
 type ChainSelectionProps = {
@@ -27,7 +27,9 @@ export const ChainSelection = memo(function ChainSelection({ allText, output }:
   const { isDarkMode } = useColorMode();
   const { accentColor: accountColor } = useAccountAccentColor();
   const { selectedOutputChainId, setSelectedOutputChainId } = useSwapContext();
-  const backendNetworks = useBackendNetworksStore(state => state.backendNetworksSharedValue);
+
+  const chainLabels = useBackendNetworksStore(state => state.getChainsLabel());
+  const networkBadges = useBackendNetworksStore(state => state.getChainsBadge());
 
   // chains sorted by balance on output, chains without balance hidden on input
   const balanceSortedChainList = useUserAssetsStore(state => (output ? state.getBalanceSortedChainList() : state.getChainsWithBalance()));
@@ -45,8 +47,6 @@ export const ChainSelection = memo(function ChainSelection({ allText, output }:
   }, [accountColor, isDarkMode]);
 
   const chainName = useDerivedValue(() => {
-    const chainLabels = getChainsLabelWorklet(backendNetworks);
-
     return output
       ? chainLabels[selectedOutputChainId.value]
       : inputListFilter.value === 'all'
@@ -79,11 +79,11 @@ export const ChainSelection = memo(function ChainSelection({ allText, output }:
     supportedChains = balanceSortedChainList.map(chainId => {
       return {
         actionKey: `${chainId}`,
-        actionTitle: getChainsLabelWorklet(backendNetworks)[chainId],
+        actionTitle: chainLabels[chainId],
         icon: {
           iconType: 'REMOTE',
           iconValue: {
-            uri: getChainsBadgeWorklet(backendNetworks)[chainId],
+            uri: networkBadges[chainId],
           },
         },
       };
@@ -103,7 +103,7 @@ export const ChainSelection = memo(function ChainSelection({ allText, output }:
     return {
       menuItems: supportedChains,
     };
-  }, [backendNetworks, balanceSortedChainList, output]);
+  }, [balanceSortedChainList, chainLabels, networkBadges, output]);
 
   return (
     <Box as={Animated.View} paddingBottom={output ? '8px' : { custom: 14 }} paddingHorizontal="20px" paddingTop="20px">

diff --git a/src/__swaps__/screens/Swap/hooks/useSwapOutputQuotesDisabled.ts b/src/__swaps__/screens/Swap/hooks/useSwapOutputQuotesDisabled.ts
@@ -1,10 +1,6 @@
 import { SharedValue, useDerivedValue } from 'react-native-reanimated';
 import { ExtendedAnimatedAssetWithColors } from '@/__swaps__/types/assets';
-import {
-  useBackendNetworksStore,
-  getSwapExactOutputSupportedChainIdsWorklet,
-  getBridgeExactOutputSupportedChainIdsWorklet,
-} from '@/state/backendNetworks/backendNetworks';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 
 export const useSwapOutputQuotesDisabled = ({
   inputAsset,
@@ -13,15 +9,16 @@ export const useSwapOutputQuotesDisabled = ({
   inputAsset: SharedValue<ExtendedAnimatedAssetWithColors | null>;
   outputAsset: SharedValue<ExtendedAnimatedAssetWithColors | null>;
 }): SharedValue<boolean> => {
-  const backendNetworks = useBackendNetworksStore(state => state.backendNetworksSharedValue);
+  const swapSupportedChainIds = useBackendNetworksStore(state => state.getSwapExactOutputSupportedChainIds());
+  const bridgeSupportedChainIds = useBackendNetworksStore(state => state.getBridgeExactOutputSupportedChainIds());
 
   const outputQuotesAreDisabled = useDerivedValue(() => {
     if (!inputAsset.value || !outputAsset.value) return false;
 
     if (inputAsset.value.chainId === outputAsset.value.chainId) {
-      return !getSwapExactOutputSupportedChainIdsWorklet(backendNetworks).includes(inputAsset.value.chainId);
+      return !swapSupportedChainIds.includes(inputAsset.value.chainId);
     } else {
-      return !getBridgeExactOutputSupportedChainIdsWorklet(backendNetworks).includes(inputAsset.value.chainId);
+      return !bridgeSupportedChainIds.includes(inputAsset.value.chainId);
     }
   });
 

diff --git a/src/__swaps__/screens/Swap/providers/swap-provider.tsx b/src/__swaps__/screens/Swap/providers/swap-provider.tsx
@@ -1,5 +1,5 @@
 // @refresh
-import React, { createContext, ReactNode, useCallback, useContext, useEffect, useRef } from 'react';
+import React, { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { InteractionManager, NativeModules, StyleProp, TextInput, TextStyle } from 'react-native';
 import {
   AnimatedRef,
@@ -49,15 +49,14 @@ import { haptics } from '@/utils';
 import { CrosschainQuote, Quote, QuoteError, SwapType } from '@rainbow-me/swaps';
 
 import { IS_IOS } from '@/env';
-import { Address } from 'viem';
 import { clearCustomGasSettings } from '../hooks/useCustomGas';
 import { getGasSettingsBySpeed, getSelectedGas } from '../hooks/useSelectedGas';
 import { useSwapOutputQuotesDisabled } from '../hooks/useSwapOutputQuotesDisabled';
 import { SyncGasStateToSharedValues, SyncQuoteSharedValuesToState } from './SyncSwapStateAndSharedValues';
 import { performanceTracking, Screens, TimeToSignOperation } from '@/state/performance/performance';
 import { getRemoteConfig } from '@/model/remoteConfig';
 import { useConnectedToAnvilStore } from '@/state/connectedToAnvil';
-import { useBackendNetworksStore, getChainsNativeAssetWorklet } from '@/state/backendNetworks/backendNetworks';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { getSwapsNavigationParams } from '../navigateToSwaps';
 import { LedgerSigner } from '@/handlers/LedgerSigner';
 import showWalletErrorAlert from '@/helpers/support';
@@ -154,7 +153,7 @@ const getInitialSliderXPosition = ({
 export const SwapProvider = ({ children }: SwapProviderProps) => {
   const { nativeCurrency } = useAccountSettings();
 
-  const backendNetworks = useBackendNetworksStore(state => state.backendNetworksSharedValue);
+  const [nativeChainAssets] = useState(useBackendNetworksStore.getState().getChainsNativeAsset());
   const initialValues = getSwapsNavigationParams();
 
   const isFetching = useSharedValue(false);
@@ -787,7 +786,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
     }
 
     if (hasEnoughFundsForGas.value === false) {
-      const nativeCurrency = getChainsNativeAssetWorklet(backendNetworks)[sellAsset?.chainId || ChainId.mainnet];
+      const nativeCurrency = nativeChainAssets[sellAsset?.chainId || ChainId.mainnet];
       return {
         label: `${insufficient} ${nativeCurrency.symbol}`,
         disabled: true,