feature(on-ramp): update supported networks (#19268)

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

shared/constants/metametrics.ts

@@ -656,15 +656,6 @@ export enum MetaMetricsEventKeyType {
   Srp = 'srp',
 }
 
-// NOTE: This doesn't seem to be used at all
-export enum MetaMetricsEventOnrampProviderType {
-  Coinbase = 'coinbase',
-  Moonpay = 'moonpay',
-  SelfDeposit = 'direct_deposit',
-  Transak = 'transak',
-  Wyre = 'wyre',
-}
-
 export enum MetaMetricsNetworkEventSource {
   CustomNetworkForm = 'custom_network_form',
   PopularNetworkList = 'popular_network_list',

shared/constants/network.ts

@@ -152,6 +152,7 @@ export const CHAIN_IDS = {
   MOONBEAM: '0x504',
   MOONBEAM_TESTNET: '0x507',
   MOONRIVER: '0x505',
+  CRONOS: '0x19',
 } as const;
 
 /**
@@ -219,6 +220,10 @@ export const CURRENCY_SYMBOLS = {
   USDT: 'USDT',
   WETH: 'WETH',
   OPTIMISM: 'OP',
+  CRONOS: 'CRO',
+  GLIMMER: 'GLMR',
+  MOONRIVER: 'MOVR',
+  ONE: 'ONE',
 } as const;
 
 export const ETH_TOKEN_IMAGE_URL = './images/eth_logo.png';
@@ -508,17 +513,12 @@ export const BUYABLE_CHAINS_MAP: {
   [K in Exclude<
     ChainId,
     | typeof CHAIN_IDS.LOCALHOST
-    | typeof CHAIN_IDS.PALM
-    | typeof CHAIN_IDS.HARMONY
     | typeof CHAIN_IDS.OPTIMISM_TESTNET
     | typeof CHAIN_IDS.BSC_TESTNET
     | typeof CHAIN_IDS.POLYGON_TESTNET
     | typeof CHAIN_IDS.AVALANCHE_TESTNET
     | typeof CHAIN_IDS.FANTOM_TESTNET
-    | typeof CHAIN_IDS.MOONBEAM
     | typeof CHAIN_IDS.MOONBEAM_TESTNET
-    | typeof CHAIN_IDS.MOONRIVER
-    | typeof CHAIN_IDS.AURORA
     | typeof CHAIN_IDS.LINEA_TESTNET
     | typeof CHAIN_IDS.GOERLI
   >]: BuyableChainSettings;
@@ -559,6 +559,30 @@ export const BUYABLE_CHAINS_MAP: {
     nativeCurrency: CURRENCY_SYMBOLS.ARBITRUM,
     network: 'arbitrum',
   },
+  [CHAIN_IDS.CRONOS]: {
+    nativeCurrency: CURRENCY_SYMBOLS.CRONOS,
+    network: 'cronos',
+  },
+  [CHAIN_IDS.MOONBEAM]: {
+    nativeCurrency: CURRENCY_SYMBOLS.GLIMMER,
+    network: 'moonbeam',
+  },
+  [CHAIN_IDS.MOONRIVER]: {
+    nativeCurrency: CURRENCY_SYMBOLS.MOONRIVER,
+    network: 'moonriver',
+  },
+  [CHAIN_IDS.AURORA]: {
+    nativeCurrency: CURRENCY_SYMBOLS.AURORA_ETH,
+    network: 'aurora',
+  },
+  [CHAIN_IDS.HARMONY]: {
+    nativeCurrency: CURRENCY_SYMBOLS.ONE,
+    network: 'harmony',
+  },
+  [CHAIN_IDS.PALM]: {
+    nativeCurrency: CURRENCY_SYMBOLS.PALM,
+    network: 'palm',
+  },
 };
 
 export const FEATURED_RPCS: RPCDefinition[] = [

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -12,7 +12,6 @@ import { TypographyVariant } from '../../../../helpers/constants/design-system';
 
 import SecurityProviderBannerMessage from '../../security-provider-banner-message/security-provider-banner-message';
 import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../security-provider-banner-message/security-provider-banner-message.constants';
-import { getPortfolioUrl } from '../../../../helpers/utils/portfolio';
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.';
 
 export default class ConfirmPageContainerContent extends Component {
@@ -57,11 +56,11 @@ export default class ConfirmPageContainerContent extends Component {
     toAddress: PropTypes.string,
     transactionType: PropTypes.string,
     isBuyableChain: PropTypes.bool,
+    openBuyCryptoInPdapp: PropTypes.func,
     txData: PropTypes.object,
     ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
     noteComponent: PropTypes.node,
     ///: END:ONLY_INCLUDE_IN
-    metaMetricsId: PropTypes.string,
   };
 
   renderContent() {
@@ -196,8 +195,8 @@ export default class ConfirmPageContainerContent extends Component {
       toAddress,
       transactionType,
       isBuyableChain,
+      openBuyCryptoInPdapp,
       txData,
-      metaMetricsId,
     } = this.props;
 
     const { t } = this.context;
@@ -261,15 +260,7 @@ export default class ConfirmPageContainerContent extends Component {
                       <Button
                         type="inline"
                         className="confirm-page-container-content__link"
-                        onClick={() => {
-                          global.platform.openTab({
-                            url: getPortfolioUrl(
-                              'buy',
-                              'ext_buy_button',
-                              metaMetricsId,
-                            ),
-                          });
-                        }}
+                        onClick={openBuyCryptoInPdapp}
                         key={`${nativeCurrency}-buy-button`}
                       >
                         {t('buyAsset', [nativeCurrency])}

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -41,7 +41,6 @@ import {
   getIsBuyableChain,
   getMetadataContractName,
   getMetaMaskIdentities,
-  getMetaMetricsId,
   getNetworkIdentifier,
   getSwapsDefaultToken,
 } from '../../../selectors';
@@ -122,8 +121,6 @@ const ConfirmPageContainer = (props) => {
     getMetadataContractName(state, toAddress),
   );
 
-  const metaMetricsId = useSelector(getMetaMetricsId);
-
   // TODO: Move useRamps hook to the confirm-transaction-base parent component.
   // TODO: openBuyCryptoInPdapp should be passed to this component as a custom prop.
   // We try to keep this component for layout purpose only, we need to move this hook to the confirm-transaction-base parent
@@ -206,7 +203,6 @@ const ConfirmPageContainer = (props) => {
         )}
         {contentComponent || (
           <ConfirmPageContainerContent
-            metaMetricsId={metaMetricsId}
             action={action}
             title={title}
             image={image}
@@ -240,6 +236,7 @@ const ConfirmPageContainer = (props) => {
             toAddress={toAddress}
             transactionType={currentTransaction.type}
             isBuyableChain={isBuyableChain}
+            openBuyCryptoInPdapp={openBuyCryptoInPdapp}
             txData={txData}
             ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
             noteComponent={noteComponent}

ui/hooks/experiences/useRamps.test.js

@@ -46,7 +46,7 @@ describe('useRamps', () => {
 
   it('should open the buy crypto URL for MAINNET chain ID', () => {
     const mockChainId = '1';
-    const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=ext_buy_button`;
+    const mockBuyURI = `${process.env.PORTFOLIO_URL}/buy?metamaskEntry=ext_buy_button&metametricsId=1`;
 
     useSelector.mockReturnValue(mockChainId);
     const openTabSpy = jest.spyOn(global.platform, 'openTab');

ui/hooks/experiences/useRamps.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import type { Hex } from '@metamask/utils';
 import { ChainId, CHAIN_IDS } from '../../../shared/constants/network';
-import { getCurrentChainId } from '../../selectors';
+import { getCurrentChainId, getMetaMetricsId } from '../../selectors';
 
 interface IUseRamps {
   openBuyCryptoInPdapp: VoidFunction;
@@ -13,13 +13,20 @@ const portfolioUrl = process.env.PORTFOLIO_URL;
 
 const useRamps = (): IUseRamps => {
   const chainId = useSelector(getCurrentChainId);
+  const metaMetricsId = useSelector(getMetaMetricsId);
 
   const getBuyURI = useCallback((_chainId: Hex) => {
     switch (_chainId) {
       case CHAIN_IDS.SEPOLIA:
         return 'https://faucet.sepolia.dev/';
-      default:
-        return `${portfolioUrl}/buy?metamaskEntry=ext_buy_button`;
+      default: {
+        const params = new URLSearchParams();
+        params.set('metamaskEntry', 'ext_buy_button');
+        if (metaMetricsId) {
+          params.set('metametricsId', metaMetricsId);
+        }
+        return `${portfolioUrl}/buy?${params.toString()}`;
+      }
     }
   }, []);