chore: adds Solana support for the account overview

app/scripts/lib/accounts/BalancesController.ts

@@ -13,6 +13,7 @@ import {
   type CaipAssetType,
   type InternalAccount,
   isEvmAccountType,
+  SolAccountType,
 } from '@metamask/keyring-api';
 import type { HandleSnapRequest } from '@metamask/snaps-controllers';
 import type { SnapId } from '@metamask/snaps-sdk';
@@ -23,7 +24,10 @@ import type {
   AccountsControllerAccountRemovedEvent,
   AccountsControllerListMultichainAccountsAction,
 } from '@metamask/accounts-controller';
-import { isBtcMainnetAddress } from '../../../../shared/lib/multichain';
+import {
+  isBtcMainnetAddress,
+  isSolanaAddress,
+} from '../../../../shared/lib/multichain';
 import { BalancesTracker } from './BalancesTracker';
 
 const controllerName = 'BalancesController';
@@ -126,9 +130,15 @@ const BTC_TESTNET_ASSETS = ['bip122:000000000933ea01ad0ee984209779ba/slip44:0'];
 const BTC_MAINNET_ASSETS = ['bip122:000000000019d6689c085ae165831e93/slip44:0'];
 const BTC_AVG_BLOCK_TIME = 10 * 60 * 1000; // 10 minutes in milliseconds
 
+const SOLANA_ASSETS = ['solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501'];
+const SOLANA_DEVNET_ASSETS = [
+  'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1/slip44:501',
+];
+const SOLANA_AVG_BLOCK_TIME = 400; // 400 milliseconds
+
 // NOTE: We set an interval of half the average block time to mitigate when our interval
 // is de-synchronized with the actual block time.
-export const BALANCES_UPDATE_TIME = BTC_AVG_BLOCK_TIME / 2;
+export const BTC_BALANCES_UPDATE_TIME = BTC_AVG_BLOCK_TIME / 2;
 
 /**
  * The BalancesController is responsible for fetching and caching account
@@ -165,7 +175,11 @@ export class BalancesController extends BaseController<
     // Register all non-EVM accounts into the tracker
     for (const account of this.#listAccounts()) {
       if (this.#isNonEvmAccount(account)) {
-        this.#tracker.track(account.id, BALANCES_UPDATE_TIME);
+        const updateTime =
+          account.type === BtcAccountType.P2wpkh
+            ? BTC_BALANCES_UPDATE_TIME
+            : SOLANA_AVG_BLOCK_TIME;
+        this.#tracker.track(account.id, updateTime);
       }
     }
 
@@ -207,15 +221,16 @@ export class BalancesController extends BaseController<
   /**
    * Lists the accounts that we should get balances for.
    *
-   * Currently, we only get balances for P2WPKH accounts, but this will change
-   * in the future when we start support other non-EVM account types.
-   *
    * @returns A list of accounts that we should get balances for.
    */
   #listAccounts(): InternalAccount[] {
     const accounts = this.#listMultichainAccounts();
 
-    return accounts.filter((account) => account.type === BtcAccountType.P2wpkh);
+    return accounts.filter(
+      (account) =>
+        account.type === SolAccountType.DataAccount ||
+        account.type === BtcAccountType.P2wpkh,
+    );
   }
 
   /**
@@ -249,13 +264,21 @@ export class BalancesController extends BaseController<
     const partialState: BalancesControllerState = { balances: {} };
 
     if (account.metadata.snap) {
-      partialState.balances[account.id] = await this.#getBalances(
-        account.id,
-        account.metadata.snap.id,
-        isBtcMainnetAddress(account.address)
-          ? BTC_MAINNET_ASSETS
-          : BTC_TESTNET_ASSETS,
-      );
+      // In here we need to check which assets to query
+      let assetTypes: CaipAssetType[];
+      if (isSolanaAddress(account.address)) {
+        assetTypes = SOLANA_ASSETS;
+      } else if (isBtcMainnetAddress(account.address)) {
+        assetTypes = BTC_MAINNET_ASSETS;
+      } else {
+        // If not mainnet, we need to check if it's testnet or devnet
+        assetTypes =
+          account.type === BtcAccountType.P2wpkh
+            ? BTC_TESTNET_ASSETS
+            : SOLANA_DEVNET_ASSETS;
+      }
+
+      await this.#getBalances(account.id, account.metadata.snap.id, assetTypes);
     }
 
     this.update((state: Draft<BalancesControllerState>) => ({
@@ -312,8 +335,11 @@ export class BalancesController extends BaseController<
       return;
     }
 
-    this.#tracker.track(account.id, BTC_AVG_BLOCK_TIME);
-    // NOTE: Unfortunately, we cannot update the balance right away here, because
+    const updateTime =
+      account.type === BtcAccountType.P2wpkh
+        ? BTC_AVG_BLOCK_TIME
+        : SOLANA_AVG_BLOCK_TIME;
+    this.#tracker.track(account.id, updateTime); // NOTE: Unfortunately, we cannot update the balance right away here, because
     // messenger's events are running synchronously and fetching the balance is
     // asynchronous.
     // Updating the balance here would resume at some point but the event emitter

app/scripts/lib/snap-keyring/keyring-snaps-permissions.ts

@@ -8,6 +8,7 @@ import { KeyringRpcMethod } from '@metamask/keyring-api';
  * The origins of the Portfolio dapp.
  */
 const PORTFOLIO_ORIGINS: string[] = [
+  'http://localhost:3000',
   'https://portfolio.metamask.io',
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   'https://dev.portfolio.metamask.io',

shared/constants/network.ts

@@ -299,7 +299,6 @@ export const CURRENCY_SYMBOLS = {
   AVALANCHE: 'AVAX',
   BNB: 'BNB',
   BUSD: 'BUSD',
-  BTC: 'BTC', // Do we wanna mix EVM and non-EVM here?
   CELO: 'CELO',
   DAI: 'DAI',
   GNOSIS: 'XDAI',
@@ -320,8 +319,15 @@ export const CURRENCY_SYMBOLS = {
   ONE: 'ONE',
 } as const;
 
+// Non-EVM currency symbols
+export const NON_EVM_CURRENCY_SYMBOLS = {
+  BTC: 'BTC',
+  SOL: 'SOL',
+} as const;
+
 const CHAINLIST_CURRENCY_SYMBOLS_MAP = {
   ...CURRENCY_SYMBOLS,
+  ...NON_EVM_CURRENCY_SYMBOLS,
   BASE: 'ETH',
   LINEA_MAINNET: 'ETH',
   OPBNB: 'BNB',

ui/components/app/wallet-overview/index.js

@@ -1,2 +1,2 @@
 export { default as EthOverview } from './eth-overview';
-export { default as BtcOverview } from './btc-overview';
+export { default as NonEvmOverview } from './non-evm-overview';

ui/components/app/wallet-overview/btc-overview.stories.tsx → ui/components/app/wallet-overview/non-evm-overview.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import BtcOverview from './btc-overview';
+import NonEvmOverview from './non-evm-overview';
 
 export default {
   title: 'Components/App/WalletOverview/BtcOverview',
-  component: BtcOverview,
+  component: NonEvmOverview,
   parameters: {
     docs: {
       description: {
@@ -14,6 +14,6 @@ export default {
   },
 };
 
-const Template = (args) => <BtcOverview {...args} />;
+const Template = (args) => <NonEvmOverview {...args} />;
 
 export const Default = Template.bind({});

ui/components/app/wallet-overview/btc-overview.test.tsx → ui/components/app/wallet-overview/non-evm-overview.test.tsx

@@ -11,7 +11,7 @@ import { MultichainNetworks } from '../../../../shared/constants/multichain/netw
 import { RampsMetaMaskEntry } from '../../../hooks/ramps/useRamps/useRamps';
 import { defaultBuyableChains } from '../../../ducks/ramps/constants';
 import { setBackgroundConnection } from '../../../store/background-connection';
-import BtcOverview from './btc-overview';
+import NonEvmOverview from './non-evm-overview';
 
 const PORTOFOLIO_URL = 'https://portfolio.test';
 
@@ -113,7 +113,7 @@ describe('BtcOverview', () => {
   });
 
   it('shows the primary balance as BTC when showNativeTokenAsMainBalance if true', async () => {
-    const { queryByTestId } = renderWithProvider(<BtcOverview />, getStore());
+    const { queryByTestId } = renderWithProvider(<NonEvmOverview />, getStore());
 
     const primaryBalance = queryByTestId(BTC_OVERVIEW_PRIMARY_CURRENCY);
     expect(primaryBalance).toBeInTheDocument();
@@ -122,7 +122,7 @@ describe('BtcOverview', () => {
 
   it('shows the primary balance as fiat when showNativeTokenAsMainBalance if false', async () => {
     const { queryByTestId } = renderWithProvider(
-      <BtcOverview />,
+      <NonEvmOverview />,
       getStore({
         metamask: {
           ...mockMetamaskStore,
@@ -141,7 +141,7 @@ describe('BtcOverview', () => {
 
   it('shows a spinner if balance is not available', async () => {
     const { container } = renderWithProvider(
-      <BtcOverview />,
+      <NonEvmOverview />,
       getStore({
         metamask: {
           ...mockMetamaskStore,
@@ -158,7 +158,7 @@ describe('BtcOverview', () => {
   });
 
   it('buttons Swap/Bridge are disabled', () => {
-    const { queryByTestId } = renderWithProvider(<BtcOverview />, getStore());
+    const { queryByTestId } = renderWithProvider(<NonEvmOverview />, getStore());
 
     for (const buttonTestId of [BTC_OVERVIEW_SWAP, BTC_OVERVIEW_BRIDGE]) {
       const button = queryByTestId(buttonTestId);
@@ -168,13 +168,13 @@ describe('BtcOverview', () => {
   });
 
   it('shows the "Buy & Sell" button', () => {
-    const { queryByTestId } = renderWithProvider(<BtcOverview />, getStore());
+    const { queryByTestId } = renderWithProvider(<NonEvmOverview />, getStore());
     const buyButton = queryByTestId(BTC_OVERVIEW_BUY);
     expect(buyButton).toBeInTheDocument();
   });
 
   it('"Buy & Sell" button is disabled if BTC is not buyable', () => {
-    const { queryByTestId } = renderWithProvider(<BtcOverview />, getStore());
+    const { queryByTestId } = renderWithProvider(<NonEvmOverview />, getStore());
     const buyButton = queryByTestId(BTC_OVERVIEW_BUY);
 
     expect(buyButton).toBeInTheDocument();
@@ -189,7 +189,7 @@ describe('BtcOverview', () => {
     });
 
     const { queryByTestId } = renderWithProvider(
-      <BtcOverview />,
+      <NonEvmOverview />,
       storeWithBtcBuyable,
     );
 
@@ -207,7 +207,7 @@ describe('BtcOverview', () => {
     });
 
     const { queryByTestId } = renderWithProvider(
-      <BtcOverview />,
+      <NonEvmOverview />,
       storeWithBtcBuyable,
     );
 
@@ -229,7 +229,7 @@ describe('BtcOverview', () => {
   });
 
   it('always show the Receive button', () => {
-    const { queryByTestId } = renderWithProvider(<BtcOverview />, getStore());
+    const { queryByTestId } = renderWithProvider(<NonEvmOverview />, getStore());
     const receiveButton = queryByTestId(BTC_OVERVIEW_RECEIVE);
     expect(receiveButton).toBeInTheDocument();
   });

ui/components/app/wallet-overview/btc-overview.tsx → ui/components/app/wallet-overview/non-evm-overview.tsx

@@ -14,11 +14,11 @@ import { useMultichainSelector } from '../../../hooks/useMultichainSelector';
 ///: END:ONLY_INCLUDE_IF
 import { CoinOverview } from './coin-overview';
 
-type BtcOverviewProps = {
+type NonEvmOverviewProps = {
   className?: string;
 };
 
-const BtcOverview = ({ className }: BtcOverviewProps) => {
+const NonEvmOverview = ({ className }: NonEvmOverviewProps) => {
   const { chainId } = useSelector(getMultichainProviderConfig);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
@@ -47,4 +47,4 @@ const BtcOverview = ({ className }: BtcOverviewProps) => {
   );
 };
 
-export default BtcOverview;
+export default NonEvmOverview;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  getMultichainProviderConfig,
+  getMultichainSelectedAccountCachedBalance,
+} from '../../../selectors/multichain';
+import { CoinOverview } from './coin-overview';
+
+type SolOverviewProps = {
+  className?: string;
+};
+
+const SolOverview = ({ className }: SolOverviewProps) => {
+  const { chainId } = useSelector(getMultichainProviderConfig);
+  const balance = useSelector(getMultichainSelectedAccountCachedBalance);
+
+  return (
+    <CoinOverview
+      balance={balance}
+      balanceIsCached={false}
+      className={className}
+      chainId={chainId}
+      isSigningEnabled={true}
+      isSwapsChain={false}
+      isBridgeChain={false}
+      isBuyableChain={false}
+    />
+  );
+};
+
+export default SolOverview;

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -12,6 +12,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import {
   BtcAccountType,
   EthAccountType,
+  SolAccountType,
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   InternalAccount,
   KeyringAccountType,
@@ -218,6 +219,7 @@ export const AccountListMenu = ({
     EthAccountType.Eoa,
     EthAccountType.Erc4337,
     BtcAccountType.P2wpkh,
+    SolAccountType.DataAccount,
   ],
 }: AccountListMenuProps) => {
   const t = useI18nContext();

ui/components/multichain/account-overview/account-overview-non-evm.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { AccountOverviewNonEvm } from './account-overview-non-evm';
+import { AccountOverviewCommonProps } from './common';
+import { BtcAccountType, SolAccountType } from '@metamask/keyring-api';
+
+export default {
+  title: 'Components/Multichain/AccountOverviewNonEvm',
+  component: AccountOverviewNonEvm,
+  args: {
+    accountType: BtcAccountType.P2wpkh,
+  },
+};
+
+export const DefaultStory = (
+  args: JSX.IntrinsicAttributes &
+    AccountOverviewCommonProps & {
+      accountType: BtcAccountType.P2wpkh | SolAccountType.DataAccount;
+    },
+) => <AccountOverviewNonEvm {...args} />;

ui/components/multichain/account-overview/account-overview-btc.test.tsx → ui/components/multichain/account-overview/account-overview-non-evm.test.tsx

@@ -4,23 +4,23 @@ import configureStore from '../../../store/store';
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import { setBackgroundConnection } from '../../../store/background-connection';
 import {
-  AccountOverviewBtc,
-  AccountOverviewBtcProps,
-} from './account-overview-btc';
+  AccountOverviewNonEvm,
+  AccountOverviewNonEvmProps,
+} from './account-overview-non-evm';
 
-const defaultProps: AccountOverviewBtcProps = {
+const defaultProps: AccountOverviewNonEvmProps = {
   defaultHomeActiveTabName: '',
   onTabClick: jest.fn(),
   setBasicFunctionalityModalOpen: jest.fn(),
   onSupportLinkClick: jest.fn(),
 };
 
-const render = (props: AccountOverviewBtcProps = defaultProps) => {
+const render = (props: AccountOverviewNonEvmProps = defaultProps) => {
   const store = configureStore({
     metamask: mockState.metamask,
   });
 
-  return renderWithProvider(<AccountOverviewBtc {...props} />, store);
+  return renderWithProvider(<AccountOverviewNonEvm {...props} />, store);
 };
 
 describe('AccountOverviewBtc', () => {