refactor(ramp): transform aggregator network chain id to string

app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx

@@ -62,18 +62,24 @@ function NetworkSwitcher() {
   const error = errorFetchingNetworks || errorFetchingNetworksDetail;
   const rampNetworks = useMemo(() => {
     const activeNetworkDetails: Network[] = [];
+    // TODO(ramp, chainId-string): filter supportedNetworks by EVM compatible chains (chainId are strings of decimal numbers)
     supportedNetworks.forEach(({ chainId: supportedChainId, active }) => {
-      const currentChainId = toHex(supportedChainId);
+      let rampSupportedNetworkChainIdAsHex: `0x${string}`;
+      try {
+        rampSupportedNetworkChainIdAsHex = toHex(supportedChainId);
+      } catch {
+        return;
+      }
       if (
-        currentChainId === ChainId['linea-mainnet'] ||
-        currentChainId === ChainId.mainnet ||
+        rampSupportedNetworkChainIdAsHex === ChainId['linea-mainnet'] ||
+        rampSupportedNetworkChainIdAsHex === ChainId.mainnet ||
         !active
       ) {
         return;
       }
 
       const popularNetwork = PopularList.find(
-        ({ chainId }) => chainId === currentChainId,
+        ({ chainId }) => chainId === rampSupportedNetworkChainIdAsHex,
       );
 
       if (popularNetwork) {
@@ -82,7 +88,7 @@ function NetworkSwitcher() {
       }
 
       const networkDetail = networksDetails.find(
-        ({ chainId }) => toHex(chainId) === currentChainId,
+        ({ chainId }) => toHex(chainId) === rampSupportedNetworkChainIdAsHex,
       );
       if (networkDetail) {
         activeNetworkDetails.push(networkDetail);

app/components/UI/Ramp/Views/SendTransaction/SendTransaction.tsx

@@ -112,6 +112,12 @@ function SendTransaction() {
   }, [trackEvent, transactionAnalyticsPayload]);
 
   const handleSend = useCallback(async () => {
+    let chainIdAsHex: `0x${string}`;
+    try {
+      chainIdAsHex = toHex(orderData.cryptoCurrency.network.chainId);
+    } catch {
+      return;
+    }
     let transactionParams: Transaction;
     const amount = addHexPrefix(
       new BN(
@@ -126,7 +132,7 @@ function SendTransaction() {
         from: safeToChecksumAddress(orderData.walletAddress) as string,
         to: safeToChecksumAddress(orderData.depositWallet),
         value: amount,
-        chainId: toHex(orderData.cryptoCurrency.network.chainId),
+        chainId: chainIdAsHex,
       };
     } else {
       transactionParams = {

app/components/UI/Ramp/hooks/useCryptoCurrencies.ts

@@ -35,7 +35,8 @@ export default function useCryptoCurrencies() {
       sdkCryptoCurrencies
     ) {
       const filteredTokens = sdkCryptoCurrencies.filter(
-        (token) => Number(token.network?.chainId) === Number(selectedChainId),
+        // TODO(ramp, chainId-string): remove once chainId is a string
+        (token) => `${token.network?.chainId}` === selectedChainId,
       );
       return filteredTokens;
     }

app/components/UI/Ramp/hooks/useHandleSuccessfulOrder.ts

@@ -33,12 +33,10 @@ function useHandleSuccessfulOrder() {
       if (!token) return;
 
       const { address, symbol, decimals, network, name } = token;
-      const chainId = network?.chainId;
+      // TODO(ramp, chainId-string): remove once chainId is a string
+      const chainId = `${network?.chainId}`;
 
-      if (
-        Number(chainId) !== Number(selectedChainId) ||
-        address === NATIVE_ADDRESS
-      ) {
+      if (chainId !== selectedChainId || address === NATIVE_ADDRESS) {
         return;
       }
 

app/components/UI/Ramp/hooks/usePaymentMethods.ts

@@ -42,7 +42,8 @@ function usePaymentMethods() {
             if (
               cryptoCurrencies?.some(
                 (cryptoCurrency) =>
-                  String(cryptoCurrency.network.chainId) === selectedChainId,
+                  // TODO(ramp, chainId-string): remove once chainId is a string
+                  `${cryptoCurrency.network.chainId}` === selectedChainId,
               )
             ) {
               allowed.push(method.id);

app/components/UI/Ramp/orderProcessor/aggregator.ts

@@ -55,7 +55,8 @@ export const aggregatorOrderToFiatOrder = (aggregatorOrder: Order) => ({
   cryptocurrency: aggregatorOrder.cryptoCurrency?.symbol || '',
   network:
     aggregatorOrder.network ||
-    String(aggregatorOrder.cryptoCurrency?.network?.chainId),
+    // TODO(ramp, chainId-string): remove once chainId is a string
+    `${aggregatorOrder.cryptoCurrency?.network?.chainId}`,
   state: aggregatorOrderStateToFiatOrderState(aggregatorOrder.status),
   account: aggregatorOrder.walletAddress,
   txHash: aggregatorOrder.txHash,

app/components/UI/Ramp/utils/index.test.ts

@@ -3,7 +3,10 @@ import {
   QuoteResponse,
   SellQuoteResponse,
 } from '@consensys/on-ramp-sdk';
-import { OrderOrderTypeEnum } from '@consensys/on-ramp-sdk/dist/API';
+import {
+  AggregatorNetwork,
+  OrderOrderTypeEnum,
+} from '@consensys/on-ramp-sdk/dist/API';
 import {
   timeToDescription,
   TimeDescriptions,
@@ -96,6 +99,7 @@ describe('formatId', () => {
 });
 
 describe('isNetworkBuySupported', () => {
+  // TODO(ramp, chainId-string): remove tests with chainId as number once it's a string
   it('should return true if network is supported', () => {
     expect(
       isNetworkRampSupported('1', [
@@ -108,6 +112,18 @@ describe('isNetworkBuySupported', () => {
         },
       ]),
     ).toBe(true);
+
+    expect(
+      isNetworkRampSupported('1', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(true);
   });
 
   it('should return false if network is not supported', () => {
@@ -122,6 +138,17 @@ describe('isNetworkBuySupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampSupported('1', [
+        {
+          active: false,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return false if network is not found', () => {
@@ -136,6 +163,17 @@ describe('isNetworkBuySupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampSupported('22', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return true if network is supported when chainId is on hexadecimal format', () => {
@@ -150,6 +188,17 @@ describe('isNetworkBuySupported', () => {
         },
       ]),
     ).toBe(true);
+    expect(
+      isNetworkRampSupported('0x1', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(true);
   });
 
   it('should return false if network is not supported when chainId is on hexadecimal format', () => {
@@ -164,6 +213,17 @@ describe('isNetworkBuySupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampSupported('0x1', [
+        {
+          active: false,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return false if network is not found when chainId is on hexadecimal format', () => {
@@ -178,10 +238,22 @@ describe('isNetworkBuySupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampSupported('0x22', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 });
 
 describe('isNetworkBuyNativeTokenSupported', () => {
+  // TODO(ramp, chainId-string): remove tests with chainId as number once it's a string
   it('should return true if network is supported and native token is supported', () => {
     expect(
       isNetworkRampNativeTokenSupported('1', [
@@ -194,6 +266,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(true);
+    expect(
+      isNetworkRampNativeTokenSupported('1', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(true);
   });
 
   it('should return false if network is not supported', () => {
@@ -208,6 +291,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampNativeTokenSupported('1', [
+        {
+          active: false,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return false if network is not found', () => {
@@ -222,6 +316,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampNativeTokenSupported('22', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return false if network is supported but native token is not supported', () => {
@@ -236,6 +341,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampNativeTokenSupported('1', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: false,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return true if network is supported and native token is supported  when chainId is on hexadecimal format', () => {
@@ -250,6 +366,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(true);
+    expect(
+      isNetworkRampNativeTokenSupported('0x1', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(true);
   });
 
   it('should return false if network is not supported when chainId is on hexadecimal format', () => {
@@ -264,6 +391,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampNativeTokenSupported('0x1', [
+        {
+          active: false,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return false if network is not found when chainId is on hexadecimal format', () => {
@@ -278,6 +416,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampNativeTokenSupported('0x22', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: true,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 
   it('should return false if network is supported but native token is not supported when chainId is on hexadecimal format', () => {
@@ -292,6 +441,17 @@ describe('isNetworkBuyNativeTokenSupported', () => {
         },
       ]),
     ).toBe(false);
+    expect(
+      isNetworkRampNativeTokenSupported('0x1', [
+        {
+          active: true,
+          chainId: '1',
+          chainName: 'Ethereum Mainnet',
+          nativeTokenSupported: false,
+          shortName: 'Ethereum',
+        } as unknown as AggregatorNetwork,
+      ]),
+    ).toBe(false);
   });
 });