feat: AssetList SPL token support

app/scripts/controller-init/controller-list.ts

@@ -46,6 +46,7 @@ export type Controller =
   | MultiChainAssetsRatesController
   | MultichainBalancesController
   | MultichainTransactionsController
+  | MultiChainAssetsRatesController
   | NetworkController
   | OnboardingController
   | PermissionController<
@@ -78,6 +79,7 @@ export type ControllerFlatState = AccountsController['state'] &
   MultiChainAssetsRatesController['state'] &
   MultichainBalancesController['state'] &
   MultichainTransactionsController['state'] &
+  MultiChainAssetsRatesController['state'] &
   NetworkController['state'] &
   OnboardingController['state'] &
   PermissionController<

app/scripts/controller-init/messengers/index.ts

@@ -50,6 +50,9 @@ export const CONTROLLER_MESSENGERS = {
     getMessenger: getMultichainTransactionsControllerMessenger,
     getInitMessenger: noop,
   },
+  MultiChainAssetsRatesController: {
+    getMessenger: getMultiChainAssetsRatesControllerMessenger,
+  },
   RateLimitController: {
     getMessenger: getRateLimitControllerMessenger,
     getInitMessenger: getRateLimitControllerInitMessenger,

app/scripts/controller-init/messengers/multichain/index.ts

@@ -1,9 +1,11 @@
 export { getMultichainAssetsControllerMessenger } from './multichain-assets-controller-messenger';
 export { getMultiChainAssetsRatesControllerMessenger } from './multichain-assets-rates-controller-messenger';
 export { getMultichainBalancesControllerMessenger } from './multichain-balances-controller-messenger';
 export { getMultichainTransactionsControllerMessenger } from './multichain-transactions-controller-messenger';
+export { getMultiChainAssetsRatesControllerMessenger } from './multichain-assets-rates-controller-messenger';
 
 export type { MultichainAssetsControllerMessenger } from './multichain-assets-controller-messenger';
 export type { MultiChainAssetsRatesControllerMessenger } from './multichain-assets-rates-controller-messenger';
 export type { MultichainBalancesControllerMessenger } from './multichain-balances-controller-messenger';
 export type { MultichainTransactionsControllerMessenger } from './multichain-transactions-controller-messenger';
+export type { MultiChainAssetsRatesControllerMessenger } from './multichain-assets-rates-controller-messenger';

app/scripts/metamask-controller.js

@@ -2058,6 +2058,7 @@
       MultiChainAssetsRatesController: MultiChainAssetsRatesControllerInit,
       MultichainBalancesController: MultichainBalancesControllerInit,
       MultichainTransactionsController: MultichainTransactionsControllerInit,
+      MultiChainAssetsRatesController: MultiChainAssetsRatesControllerInit,
       ///: END:ONLY_INCLUDE_IF
     };
 

shared/constants/network.ts

@@ -3,6 +3,7 @@ import {
   RpcEndpointType,
 } from '@metamask/network-controller';
 import { capitalize, pick } from 'lodash';
+import { MultichainNetworks } from './multichain/networks';
 /**
  * A type representing built-in network types, used as an identifier.
  */
@@ -176,6 +177,7 @@ export const CHAIN_IDS = {
   INK: '0xdef1',
   MODE_SEPOLIA: '0x397',
   MODE: '0x868b',
+  SOLANA: MultichainNetworks.SOLANA,
 } as const;
 
 export const CHAINLIST_CHAIN_IDS_MAP = {
@@ -520,6 +522,7 @@ export const SONIC_MAINNET_IMAGE_URL = './images/sonic.svg';
 export const SONEIUM_IMAGE_URL = './images/soneium.svg';
 export const MODE_SEPOLIA_IMAGE_URL = './images/mode-sepolia.svg';
 export const MODE_IMAGE_URL = './images/mode.svg';
+export const SOLANA_IMAGE_URL = './images/solana-logo.svg';
 export const UNICHAIN_IMAGE_URL = './images/unichain.svg';
 
 export const INFURA_PROVIDER_TYPES = [
@@ -885,6 +888,7 @@ export const CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP = {
   [CHAINLIST_CHAIN_IDS_MAP.SONEIUM_TESTNET]: SONEIUM_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.MODE_SEPOLIA]: MODE_SEPOLIA_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.MODE]: MODE_IMAGE_URL,
+  [CHAIN_IDS.SOLANA]: SOLANA_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.UNICHAIN]: UNICHAIN_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.UNICHAIN_SEPOLIA]: UNICHAIN_IMAGE_URL,
 } as const;
@@ -932,6 +936,7 @@ export const CHAIN_ID_TOKEN_IMAGE_MAP = {
   [CHAINLIST_CHAIN_IDS_MAP.SONIC_MAINNET]: SONIC_MAINNET_IMAGE_URL,
   [CHAIN_IDS.MODE]: ETH_TOKEN_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.FUNKICHAIN]: ETH_TOKEN_IMAGE_URL,
+  [CHAIN_IDS.SOLANA]: SOLANA_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.UNICHAIN]: ETH_TOKEN_IMAGE_URL,
   [CHAINLIST_CHAIN_IDS_MAP.UNICHAIN_SEPOLIA]: ETH_TOKEN_IMAGE_URL,
 } as const;

shared/lib/accounts/solana-wallet-snap.ts

@@ -3,7 +3,8 @@ import { SnapId } from '@metamask/snaps-sdk';
 // the Snap is being pre-installed only for Flask build (for the moment).
 import SolanaWalletSnap from '@metamask/solana-wallet-snap/dist/preinstalled-snap.json';
 
-export const SOLANA_WALLET_SNAP_ID: SnapId = SolanaWalletSnap.snapId as SnapId;
+export const SOLANA_WALLET_SNAP_ID: SnapId =
+  'local:http://localhost:8080' as SnapId;
 
 export const SOLANA_WALLET_NAME: string =
   SolanaWalletSnap.manifest.proposedName;

ui/components/app/assets/hooks/useMultichainAssets.tsx

@@ -0,0 +1,87 @@
+import { useSelector } from 'react-redux';
+import { Hex } from '@metamask/utils';
+import { getMultichainBalances } from '../../../../selectors/multichain';
+import {
+  getAccountAssets,
+  getAssetsMetadata,
+} from '../../../../selectors/assets';
+import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network';
+import { getSelectedInternalAccount } from '../../../../selectors';
+import {
+  TranslateFunction,
+  networkTitleOverrides,
+} from '../util/networkTitleOverrides';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { getAssetsRates } from '../../../../selectors/multichain-assets-rates';
+import { formatWithThreshold } from '../util/formatWithThreshold';
+import { getIntlLocale } from '../../../../ducks/locale/locale';
+import { getCurrentCurrency } from '../../../../ducks/metamask/metamask';
+
+const useMultiChainAssets = () => {
+  const t = useI18nContext();
+  const locale = useSelector(getIntlLocale);
+  const currentCurrency = useSelector(getCurrentCurrency);
+  const account = useSelector(getSelectedInternalAccount);
+  const multichainBalances = useSelector(getMultichainBalances);
+  const accountAssets = useSelector(getAccountAssets);
+  const assetsMetadata = useSelector(getAssetsMetadata);
+  const assetRates = useSelector(getAssetsRates);
+
+  const assetIds = accountAssets[account.id] || [];
+  const balances = multichainBalances[account.id];
+
+  return assetIds.map((assetId) => {
+    const [chainId, assetDetails] = assetId.split('/');
+    const isToken = assetDetails.split(':')[0] === 'token';
+
+    const balance = balances[assetId] || { amount: '0', unit: '' };
+    const rate = assetRates[assetId]?.rate || '0';
+    const fiatBalance = parseFloat(rate) * parseFloat(balance.amount);
+
+    const fiatAmount = formatWithThreshold(fiatBalance, 0.01, locale, {
+      style: 'currency',
+      currency: currentCurrency.toUpperCase(),
+    });
+
+    const metadata = assetsMetadata[assetId] || {
+      name: balance.unit,
+      symbol: balance.unit || '',
+      fungible: true,
+      units: [{ name: assetId, symbol: balance.unit || '', decimals: 0 }],
+    };
+
+    let tokenImage = '';
+
+    if (isToken) {
+      tokenImage = metadata.iconUrl || '';
+    } else {
+      tokenImage =
+        CHAIN_ID_TOKEN_IMAGE_MAP[
+          chainId as keyof typeof CHAIN_ID_TOKEN_IMAGE_MAP
+        ] || '';
+    }
+
+    const decimals = metadata.units[0]?.decimals || 0;
+
+    return {
+      title: isToken
+        ? metadata.name
+        : networkTitleOverrides(t as TranslateFunction, {
+            title: balance.unit,
+          }),
+      address: assetId as Hex,
+      symbol: metadata.symbol,
+      image: tokenImage,
+      decimals,
+      chainId,
+      isNative: false,
+      primary: balance.amount,
+      secondary: fiatAmount, // secondary balance (usually in fiat)
+      string: '',
+      tokenFiatAmount: fiatBalance, // for now we are keeping this is to satisfy sort, this should be fiat amount
+      isStakeable: false,
+    };
+  });
+};
+
+export default useMultiChainAssets;

ui/components/app/assets/hooks/useTokenDisplayInfo.tsx

@@ -109,9 +109,9 @@ export const useTokenDisplayInfo = ({
   }
   // TODO non-evm assets. this is only the native token
   return {
-    title: token.symbol,
+    title: token.title,
     tokenImage: token.image,
-    primary: '',
+    primary: token.primary,
     secondary: token.secondary,
     isStakeable: false,
     tokenChainImage: token.image as string,

ui/components/app/assets/token-cell/cells/token-cell-percent-change.tsx

@@ -2,20 +2,11 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { getNativeTokenAddress } from '@metamask/assets-controllers';
 import { Hex } from '@metamask/utils';
-import {
-  TextColor,
-  TextVariant,
-} from '../../../../../helpers/constants/design-system';
-import { Text } from '../../../../component-library';
+import { Box } from '../../../../component-library';
 import { getMarketData } from '../../../../../selectors';
 import { getMultichainIsEvm } from '../../../../../selectors/multichain';
-import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { TokenFiatDisplayInfo } from '../../types';
 import { PercentageChange } from '../../../../multichain/token-list-item/price/percentage-change';
-import {
-  TranslateFunction,
-  networkTitleOverrides,
-} from '../../util/networkTitleOverrides';
 
 type TokenCellPercentChangeProps = {
   token: TokenFiatDisplayInfo;
@@ -24,7 +15,6 @@ type TokenCellPercentChangeProps = {
 export const TokenCellPercentChange = React.memo(
   ({ token }: TokenCellPercentChangeProps) => {
     const isEvm = useSelector(getMultichainIsEvm);
-    const t = useI18nContext();
     const multiChainMarketData = useSelector(getMarketData);
 
     // We do not want to display any percentage with non-EVM since we don't have the data for this yet.
@@ -52,17 +42,9 @@ export const TokenCellPercentChange = React.memo(
       );
     }
 
-    // fallback value (is this valid?)
-    return (
-      <Text
-        variant={TextVariant.bodySmMedium}
-        color={TextColor.textAlternative}
-        data-testid="multichain-token-list-item-token-name"
-        ellipsis
-      >
-        {networkTitleOverrides(t as TranslateFunction, token)}
-      </Text>
-    );
+    // we don't support non-evm price changes yet.
+    // annoyingly, we need an empty component here for flexbox to align everything nicely
+    return <Box></Box>;
   },
   (prevProps, nextProps) => prevProps.token.address === nextProps.token.address,
 );

ui/components/app/assets/token-list/token-list.tsx

@@ -12,11 +12,13 @@ import {
 } from '../../../../selectors';
 import { endTrace, TraceName } from '../../../../../shared/lib/trace';
 import { useTokenBalances as pollAndUpdateEvmBalances } from '../../../../hooks/useTokenBalances';
-import { useNativeTokenBalance, useNetworkFilter } from '../hooks';
+import { useNetworkFilter } from '../hooks';
 import { TokenWithFiatAmount } from '../types';
-import { getMultichainIsEvm } from '../../../../selectors/multichain';
 import { filterAssets } from '../util/filter';
 import { sortAssets } from '../util/sort';
+import useMultiChainAssets from '../hooks/useMultichainAssets';
+import { getMultichainIsEvm } from '../../../../selectors/multichain';
+import { MultichainNetworks } from '../../../../../shared/constants/multichain/networks';
 
 type TokenListProps = {
   onTokenClick: (chainId: string, address: string) => void;
@@ -36,18 +38,18 @@ function TokenList({ onTokenClick }: TokenListProps) {
     chainIds: chainIdsToPoll as Hex[],
   });
 
-  const nonEvmNativeToken = useNativeTokenBalance();
+  const multichainAssets = useMultiChainAssets();
 
   // network filter to determine which tokens to show in list
   // on EVM we want to filter based on network filter controls, on non-evm we only want tokens from that chain identifier
   const { networkFilter } = useNetworkFilter();
 
   const sortedFilteredTokens = useMemo(() => {
-    const balances = isEvm ? evmBalances : [nonEvmNativeToken];
+    const balances = isEvm ? evmBalances : multichainAssets;
     const filteredAssets: TokenWithFiatAmount[] = filterAssets(balances, [
       {
         key: 'chainId',
-        opts: isEvm ? networkFilter : { [nonEvmNativeToken.chainId]: true },
+        opts: isEvm ? networkFilter : { [MultichainNetworks.SOLANA]: true },
         filterCallback: 'inclusive',
       },
     ]);
@@ -61,6 +63,7 @@ function TokenList({ onTokenClick }: TokenListProps) {
     selectedAccount,
     newTokensImported,
     evmBalances,
+    multichainAssets,
   ]);
 
   useEffect(() => {

ui/components/app/assets/types.ts

@@ -45,6 +45,7 @@ export type TokenWithFiatAmount = Token &
   TokenDisplayValues &
   TokenBalanceValues & {
     isStakeable?: boolean;
+    title: string;
   };
 
 export type TokenFiatDisplayInfo = TokenWithFiatAmount & TokenDisplayInfo;

ui/components/app/assets/util/networkTitleOverrides.ts

@@ -10,7 +10,7 @@ export type TranslateFunction = (arg: string) => string;
 // usually in the case of native tokens for L1 networks
 export const networkTitleOverrides = (
   t: TranslateFunction, // translate function from useI18nContext() hook
-  token: TokenFiatDisplayInfo,
+  token: Partial<TokenFiatDisplayInfo>,
 ) => {
   switch (token.title) {
     case CURRENCY_SYMBOLS.ETH:

ui/selectors/multichain-assets-rates.test.ts

@@ -0,0 +1,32 @@
+import { getAssetsRates, AssetsState } from './multichain-assets-rates';
+
+// Mock state for testing
+const mockState = {
+  metamask: {
+    conversionRates: {
+      'token-1': { rate: 1.5, currency: 'USD' },
+      'token-2': { rate: 0.8, currency: 'EUR' },
+    },
+  },
+};
+describe('getAssetsRates', () => {
+  it('should return the assetsRates from the state', () => {
+    const result = getAssetsRates(mockState);
+    expect(result).toEqual(mockState.metamask.conversionRates);
+  });
+
+  it('should return an empty object if assetsRates is empty', () => {
+    const emptyState: AssetsState = {
+      metamask: {
+        conversionRates: {},
+      },
+    };
+    const result = getAssetsRates(emptyState);
+    expect(result).toEqual({});
+  });
+
+  it('should return undefined if state does not have metamask property', () => {
+    const invalidState = {} as AssetsState;
+    expect(() => getAssetsRates(invalidState)).toThrow();
+  });
+});

ui/selectors/multichain-assets-rates.ts

@@ -0,0 +1,15 @@
+import { MultichainAssetsRatesControllerState } from '@metamask/assets-controllers';
+
+export type AssetsState = {
+  metamask: MultichainAssetsRatesControllerState;
+};
+
+/**
+ * Gets non-EVM accounts assets rates.
+ *
+ * @param state - Redux state object.
+ * @returns An object containing non-EVM assets per accounts.
+ */
+export function getAssetsRates(state: AssetsState) {
+  return state.metamask.conversionRates;
+}