feat(ramps): update isNativeTokenBuyable to include BTC

ui/components/app/asset-list/asset-list.js

@@ -19,6 +19,10 @@ import {
   getMultichainCurrencyImage,
   getMultichainIsMainnet,
   getMultichainSelectedAccountCachedBalance,
+  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+  getMultichainIsBitcoin,
+  ///: END:ONLY_INCLUDE_IF
+  getMultichainSelectedAccountCachedBalanceIsZero,
 } from '../../../selectors/multichain';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -98,24 +102,33 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
     getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
   );
 
-  const { tokensWithBalances, totalFiatBalance, loading } =
-    useAccountTotalFiatBalance(selectedAccount, shouldHideZeroBalanceTokens);
+  const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
+    selectedAccount,
+    shouldHideZeroBalanceTokens,
+  );
   tokensWithBalances.forEach((token) => {
     // token.string is the balance displayed in the TokenList UI
     token.string = roundToDecimalPlacesRemovingExtraZeroes(token.string, 5);
   });
-  const balanceIsZero = Number(totalFiatBalance) === 0;
+
+  const balanceIsZero = useSelector(
+    getMultichainSelectedAccountCachedBalanceIsZero,
+  );
+
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const isBuyableChain = useSelector(getIsNativeTokenBuyable);
   const shouldShowBuy = isBuyableChain && balanceIsZero;
   ///: END:ONLY_INCLUDE_IF
 
   const isEvm = useSelector(getMultichainIsEvm);
-
   // NOTE: Since we can parametrize it now, we keep the original behavior
   // for EVM assets
   const shouldShowTokensLinks = showTokensLinks ?? isEvm;
 
+  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+  const isBtc = useSelector(getMultichainIsBitcoin);
+  ///: END:ONLY_INCLUDE_IF
+
   let isStakeable = isMainnet && isEvm;
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   isStakeable = false;
@@ -133,7 +146,13 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
       {
         ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
         shouldShowBuy ? (
-          <RampsCard variant={RAMPS_CARD_VARIANT_TYPES.TOKEN} />
+          <RampsCard
+            variant={
+              isBtc
+                ? RAMPS_CARD_VARIANT_TYPES.BTC
+                : RAMPS_CARD_VARIANT_TYPES.TOKEN
+            }
+          />
         ) : null
         ///: END:ONLY_INCLUDE_IF
       }

ui/components/app/wallet-overview/btc-overview.test.tsx

@@ -9,6 +9,7 @@ import mockState from '../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import { MultichainNetworks } from '../../../../shared/constants/multichain/networks';
 import { RampsMetaMaskEntry } from '../../../hooks/ramps/useRamps/useRamps';
+import { defaultBuyableChains } from '../../../ducks/ramps/constants';
 import BtcOverview from './btc-overview';
 
 const PORTOFOLIO_URL = 'https://portfolio.test';
@@ -40,43 +41,63 @@ const mockNonEvmAccount = {
   type: BtcAccountType.P2wpkh,
 };
 
-function getStore(state?: Record<string, unknown>) {
-  return configureMockStore([thunk])({
-    metamask: {
-      ...mockState.metamask,
-      internalAccounts: {
-        accounts: {
-          [mockNonEvmAccount.id]: mockNonEvmAccount,
-        },
-        selectedAccount: mockNonEvmAccount.id,
-      },
-      // (Multichain) BalancesController
-      balances: {
-        [mockNonEvmAccount.id]: {
-          [MultichainNativeAssets.BITCOIN]: {
-            amount: mockNonEvmBalance,
-            unit: 'BTC',
-          },
-        },
-      },
-      // (Multichain) RatesController
-      fiatCurrency: 'usd',
-      rates: {
-        [Cryptocurrency.Btc]: {
-          conversionRate: '1.000',
-          conversionDate: 0,
-        },
+const mockBtcChain = {
+  active: true,
+  chainId: MultichainNetworks.BITCOIN,
+  chainName: 'Bitcoin',
+  shortName: 'Bitcoin',
+  nativeTokenSupported: true,
+  isEvm: false,
+};
+// default chains do not include BTC
+const mockBuyableChainsWithoutBtc = defaultBuyableChains.filter(
+  (chain) => chain.chainId !== MultichainNetworks.BITCOIN,
+);
+const mockBuyableChainsWithBtc = [...mockBuyableChainsWithoutBtc, mockBtcChain];
+
+const mockMetamaskStore = {
+  ...mockState.metamask,
+  internalAccounts: {
+    accounts: {
+      [mockNonEvmAccount.id]: mockNonEvmAccount,
+    },
+    selectedAccount: mockNonEvmAccount.id,
+  },
+  // (Multichain) BalancesController
+  balances: {
+    [mockNonEvmAccount.id]: {
+      [MultichainNativeAssets.BITCOIN]: {
+        amount: mockNonEvmBalance,
+        unit: 'BTC',
       },
-      cryptocurrencies: [Cryptocurrency.Btc],
-      // Required, during onboarding, the extension will assume we're in an "EVM context", meaning
-      // most multichain selectors will not use non-EVM logic despite having a non-EVM
-      // selected account
-      completedOnboarding: true,
-      // Used when clicking on some buttons
-      metaMetricsId: mockMetaMetricsId,
-      // Override state if provided
-      ...state,
     },
+  },
+  // (Multichain) RatesController
+  fiatCurrency: 'usd',
+  rates: {
+    [Cryptocurrency.Btc]: {
+      conversionRate: '1.000',
+      conversionDate: 0,
+    },
+  },
+  cryptocurrencies: [Cryptocurrency.Btc],
+  // Required, during onboarding, the extension will assume we're in an "EVM context", meaning
+  // most multichain selectors will not use non-EVM logic despite having a non-EVM
+  // selected account
+  completedOnboarding: true,
+  // Used when clicking on some buttons
+  metaMetricsId: mockMetaMetricsId,
+  // Override state if provided
+};
+const mockRampsStore = {
+  buyableChains: mockBuyableChainsWithoutBtc,
+};
+
+function getStore(state?: Record<string, unknown>) {
+  return configureMockStore([thunk])({
+    metamask: mockMetamaskStore,
+    ramps: mockRampsStore,
+    ...state,
   });
 }
 
@@ -103,8 +124,11 @@ describe('BtcOverview', () => {
     const { container } = renderWithProvider(
       <BtcOverview />,
       getStore({
-        // The balances won't be available
-        balances: {},
+        metamask: {
+          ...mockMetamaskStore,
+          // The balances won't be available
+          balances: {},
+        },
       }),
     );
 
@@ -134,8 +158,44 @@ describe('BtcOverview', () => {
     expect(buyButton).toBeInTheDocument();
   });
 
-  it('opens the Portfolio "Buy & Sell" URI when clicking on "Buy & Sell" button', async () => {
+  it('"Buy & Sell" button is disabled if BTC is not buyable', () => {
     const { queryByTestId } = renderWithProvider(<BtcOverview />, getStore());
+    const buyButton = queryByTestId(BTC_OVERVIEW_BUY);
+
+    expect(buyButton).toBeInTheDocument();
+    expect(buyButton).toBeDisabled();
+  });
+
+  it('"Buy & Sell" button is enabled if BTC is buyable', () => {
+    const storeWithBtcBuyable = getStore({
+      ramps: {
+        buyableChains: mockBuyableChainsWithBtc,
+      },
+    });
+
+    const { queryByTestId } = renderWithProvider(
+      <BtcOverview />,
+      storeWithBtcBuyable,
+    );
+
+    const buyButton = queryByTestId(BTC_OVERVIEW_BUY);
+
+    expect(buyButton).toBeInTheDocument();
+    expect(buyButton).not.toBeDisabled();
+  });
+
+  it('opens the Portfolio "Buy & Sell" URI when clicking on "Buy & Sell" button', async () => {
+    const storeWithBtcBuyable = getStore({
+      ramps: {
+        buyableChains: mockBuyableChainsWithBtc,
+      },
+    });
+
+    const { queryByTestId } = renderWithProvider(
+      <BtcOverview />,
+      storeWithBtcBuyable,
+    );
+
     const openTabSpy = jest.spyOn(global.platform, 'openTab');
 
     const buyButton = queryByTestId(BTC_OVERVIEW_BUY);

ui/components/app/wallet-overview/btc-overview.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
-
 import { useSelector } from 'react-redux';
 import {
   getMultichainProviderConfig,
   getMultichainSelectedAccountCachedBalance,
 } from '../../../selectors/multichain';
+///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+import { getIsBitcoinBuyable } from '../../../ducks/ramps';
+///: END:ONLY_INCLUDE_IF
 import { CoinOverview } from './coin-overview';
 
 type BtcOverviewProps = {
@@ -14,6 +16,9 @@ type BtcOverviewProps = {
 const BtcOverview = ({ className }: BtcOverviewProps) => {
   const { chainId } = useSelector(getMultichainProviderConfig);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
+  ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+  const isBtcBuyable = useSelector(getIsBitcoinBuyable);
+  ///: END:ONLY_INCLUDE_IF
 
   return (
     <CoinOverview
@@ -25,10 +30,7 @@ const BtcOverview = ({ className }: BtcOverviewProps) => {
       isSwapsChain={false}
       ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
       isBridgeChain={false}
-      isBuyableChain
-      // TODO: Remove this logic once `isNativeTokenBuyable` has been
-      // merged (see: https://github.com/MetaMask/metamask-extension/pull/24041)
-      isBuyableChainWithoutSigning
+      isBuyableChain={isBtcBuyable}
       ///: END:ONLY_INCLUDE_IF
     />
   );

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -75,9 +75,6 @@ const CoinButtons = ({
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   isBridgeChain,
   isBuyableChain,
-  // TODO: Remove this logic once `isNativeTokenBuyable` has been
-  // merged (see: https://github.com/MetaMask/metamask-extension/pull/24041)
-  isBuyableChainWithoutSigning = false,
   defaultSwapsToken,
   ///: END:ONLY_INCLUDE_IF
   classPrefix = 'coin',
@@ -88,7 +85,6 @@ const CoinButtons = ({
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   isBridgeChain: boolean;
   isBuyableChain: boolean;
-  isBuyableChainWithoutSigning?: boolean;
   defaultSwapsToken?: SwapsEthToken;
   ///: END:ONLY_INCLUDE_IF
   classPrefix?: string;
@@ -112,10 +108,6 @@ const CoinButtons = ({
       ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
       { condition: !isBuyableChain, message: '' },
       ///: END:ONLY_INCLUDE_IF
-      {
-        condition: !(isSigningEnabled || isBuyableChainWithoutSigning),
-        message: 'methodNotSupported',
-      },
     ],
     sendButton: [
       { condition: !isSigningEnabled, message: 'methodNotSupported' },
@@ -339,10 +331,7 @@ const CoinButtons = ({
           Icon={
             <Icon name={IconName.PlusMinus} color={IconColor.primaryInverse} />
           }
-          disabled={
-            !isBuyableChain ||
-            !(isSigningEnabled || isBuyableChainWithoutSigning)
-          }
+          disabled={!isBuyableChain}
           data-testid={`${classPrefix}-overview-buy`}
           label={t('buyAndSell')}
           onClick={handleBuyAndSellOnClick}

ui/components/app/wallet-overview/coin-overview.tsx

@@ -39,7 +39,6 @@ export type CoinOverviewProps = {
   defaultSwapsToken?: SwapsEthToken;
   isBridgeChain: boolean;
   isBuyableChain: boolean;
-  isBuyableChainWithoutSigning: boolean;
   ///: END:ONLY_INCLUDE_IF
   isSwapsChain: boolean;
   isSigningEnabled: boolean;
@@ -55,7 +54,6 @@ export const CoinOverview = ({
   defaultSwapsToken,
   isBridgeChain,
   isBuyableChain,
-  isBuyableChainWithoutSigning,
   ///: END:ONLY_INCLUDE_IF
   isSwapsChain,
   isSigningEnabled,
@@ -152,7 +150,6 @@ export const CoinOverview = ({
             ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
             isBridgeChain,
             isBuyableChain,
-            isBuyableChainWithoutSigning,
             defaultSwapsToken,
             ///: END:ONLY_INCLUDE_IF
             classPrefix,

ui/components/app/wallet-overview/eth-overview.test.js

@@ -470,7 +470,6 @@ describe('EthOverview', () => {
 
   describe('Disabled buttons when an account cannot sign transactions', () => {
     const buttonTestCases = [
-      { testId: ETH_OVERVIEW_BUY, buttonText: 'Buy & Sell' },
       { testId: ETH_OVERVIEW_SEND, buttonText: 'Send' },
       { testId: ETH_OVERVIEW_SWAP, buttonText: 'Swap' },
       { testId: ETH_OVERVIEW_BRIDGE, buttonText: 'Bridge' },