From fed60328a8ef0348ae80d7497429670b4b7b1ce1 Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Thu, 25 Apr 2024 17:01:50 -0400 Subject: [PATCH 1/2] refactor(ramp): transform aggregator network chain id to string --- .../Views/NetworkSwitcher/NetworkSwitcher.tsx | 16 +- .../Views/SendTransaction/SendTransaction.tsx | 8 +- .../UI/Ramp/hooks/useCryptoCurrencies.ts | 3 +- .../UI/Ramp/hooks/useHandleSuccessfulOrder.ts | 8 +- .../UI/Ramp/hooks/usePaymentMethods.ts | 3 +- .../UI/Ramp/orderProcessor/aggregator.ts | 3 +- app/components/UI/Ramp/utils/index.test.ts | 162 +++++++++++++++++- app/components/UI/Ramp/utils/index.ts | 10 +- 8 files changed, 194 insertions(+), 19 deletions(-) diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx b/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx index 3441401a1d2..62289af283c 100644 --- a/app/components/UI/Ramp/Views/NetworkSwitcher/NetworkSwitcher.tsx +++ b/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); diff --git a/app/components/UI/Ramp/Views/SendTransaction/SendTransaction.tsx b/app/components/UI/Ramp/Views/SendTransaction/SendTransaction.tsx index 4bf46677aba..5c217fd3fbf 100644 --- a/app/components/UI/Ramp/Views/SendTransaction/SendTransaction.tsx +++ b/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 = { diff --git a/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts b/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts index acd41420f0f..58c6cd02c61 100644 --- a/app/components/UI/Ramp/hooks/useCryptoCurrencies.ts +++ b/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; } diff --git a/app/components/UI/Ramp/hooks/useHandleSuccessfulOrder.ts b/app/components/UI/Ramp/hooks/useHandleSuccessfulOrder.ts index 72b77545a95..5731889f55c 100644 --- a/app/components/UI/Ramp/hooks/useHandleSuccessfulOrder.ts +++ b/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; } diff --git a/app/components/UI/Ramp/hooks/usePaymentMethods.ts b/app/components/UI/Ramp/hooks/usePaymentMethods.ts index c4a7b529e32..08cb3d52270 100644 --- a/app/components/UI/Ramp/hooks/usePaymentMethods.ts +++ b/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); diff --git a/app/components/UI/Ramp/orderProcessor/aggregator.ts b/app/components/UI/Ramp/orderProcessor/aggregator.ts index 19e26dddebe..5870e7a0639 100644 --- a/app/components/UI/Ramp/orderProcessor/aggregator.ts +++ b/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, diff --git a/app/components/UI/Ramp/utils/index.test.ts b/app/components/UI/Ramp/utils/index.test.ts index e6cdc1f5952..04dddcd45a1 100644 --- a/app/components/UI/Ramp/utils/index.test.ts +++ b/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); }); }); diff --git a/app/components/UI/Ramp/utils/index.ts b/app/components/UI/Ramp/utils/index.ts index 00f0ab8ad5c..cf111bcd963 100644 --- a/app/components/UI/Ramp/utils/index.ts +++ b/app/components/UI/Ramp/utils/index.ts @@ -129,8 +129,9 @@ export function isNetworkRampSupported( networks: AggregatorNetwork[], ) { return ( - networks.find( - (network) => String(network.chainId) === getDecimalChainId(chainId), + networks?.find( + // TODO(ramp, chainId-string): remove once chainId is a string + (network) => `${network.chainId}` === getDecimalChainId(chainId), )?.active ?? false ); } @@ -139,8 +140,9 @@ export function isNetworkRampNativeTokenSupported( chainId: string, networks: AggregatorNetwork[], ) { - const network = (networks || []).find( - (_network) => String(_network.chainId) === getDecimalChainId(chainId), + const network = networks?.find( + // TODO(ramp, chainId-string): remove once chainId is a string + (_network) => `${_network.chainId}` === getDecimalChainId(chainId), ); return (network?.active && network.nativeTokenSupported) ?? false; } From e76d8be29a78f61aebee40d3697a9f14301131df Mon Sep 17 00:00:00 2001 From: Pedro Pablo Aste Kompen Date: Fri, 26 Apr 2024 16:42:41 -0400 Subject: [PATCH 2/2] refactor(ramp): remove number transform in selectors --- app/reducers/fiatOrders/index.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/app/reducers/fiatOrders/index.ts b/app/reducers/fiatOrders/index.ts index 0cd54b54c75..822bd225c73 100644 --- a/app/reducers/fiatOrders/index.ts +++ b/app/reducers/fiatOrders/index.ts @@ -187,8 +187,7 @@ export const getOrders = createSelector( (order) => !order.excludeFromPurchases && order.account === selectedAddress && - (isTestNet(toHex(chainId)) || - Number(order.network) === Number(chainId)), + (order.network === chainId || isTestNet(toHex(chainId))), ), ); @@ -200,7 +199,7 @@ export const getPendingOrders = createSelector( orders.filter( (order) => order.account === selectedAddress && - Number(order.network) === Number(chainId) && + order.network === chainId && order.state === FIAT_ORDER_STATES.PENDING, ), ); @@ -218,7 +217,7 @@ export const getCustomOrderIds = createSelector( customOrderIds.filter( (customOrderId) => customOrderId.account === selectedAddress && - Number(customOrderId.chainId) === Number(chainId), + customOrderId.chainId === chainId, ), ); @@ -255,8 +254,8 @@ export const networkShortNameSelector = createSelector( getRampNetworks, (chainId, networks) => { const network = networks.find( - (aggregatorNetwork) => - Number(aggregatorNetwork.chainId) === Number(chainId), + // TODO(ramp, chainId-string): remove once chainId is a string + (aggregatorNetwork) => `${aggregatorNetwork.chainId}` === chainId, ); return network?.shortName;