Use accountApiClient within AccountController to fetch token metadata and balance

- Introduce 'getTokenBalanceAndMetadata' to account controllers
- Add placeholder icons for missing network/token SVGs
- Replace hardcoded ETH token details in UI with dynamic values

Author: jeffsmale90

packages/gator-permissions-snap/images/networks/not-found.svg

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snap-7715-permissions.git"
   },
   "source": {
-    "shasum": "B/45l1lyLyqYX2GkYxvKAmCCWOCSu030Do+IEMdQV+c=",
+    "shasum": "8RuzV/zrJlK0VNzSDBoQQ8t1ecofnqNn8WL7MwNKfAE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/gator-permissions-snap/images/tokens/not-found.svg

@@ -2,6 +2,16 @@ import { logger } from '@metamask/7715-permissions-shared/utils';
 import { CHAIN_ID as ChainsWithDelegatorDeployed } from '@metamask/delegation-toolkit';
 import type { SnapsProvider } from '@metamask/snaps-sdk';
 import * as chains from 'viem/chains';
+import type { Address } from 'viem';
+
+import type {
+  AccountApiClient,
+  TokenBalanceAndMetadata,
+} from '../clients/accountApiClient';
+import type {
+  AccountOptionsBase,
+  GetTokenBalanceAndMetadataOptions,
+} from './types';
 
 export type SupportedChains =
   (typeof chains)[keyof typeof ChainsWithDelegatorDeployed &
@@ -14,7 +24,9 @@ type SupportedChainId = SupportedChains[number]['id'];
  * Base class for account controllers that provides common functionality.
  */
 export abstract class BaseAccountController {
-  #snapsProvider: SnapsProvider;
+  readonly #snapsProvider: SnapsProvider;
+
+  readonly #accountApiClient: AccountApiClient;
 
   protected supportedChains: SupportedChains;
 
@@ -32,17 +44,20 @@ export abstract class BaseAccountController {
    * @param config - The configuration object.
    * @param config.snapsProvider - The provider for interacting with snaps.
    * @param config.supportedChains - The supported blockchain chains.
+   * @param config.accountApiClient - The client for interacting with the account API.
    */
   constructor(config: {
     snapsProvider: SnapsProvider;
     supportedChains?: SupportedChains;
+    accountApiClient: AccountApiClient;
   }) {
     // only validate if supportedChains is specified, as it will default to ALL_SUPPORTED_CHAINS
     if (config.supportedChains) {
       this.#validateSupportedChains(config.supportedChains);
     }
 
     this.#snapsProvider = config.snapsProvider;
+    this.#accountApiClient = config.accountApiClient;
     this.supportedChains =
       config.supportedChains ?? BaseAccountController.#allSupportedChains;
   }
@@ -147,4 +162,45 @@ export abstract class BaseAccountController {
   protected get snapsProvider(): SnapsProvider {
     return this.#snapsProvider;
   }
+
+  /**
+   * Gets the account address. Must be implemented by derived classes.
+   *
+   * @param options - The base account options including chainId.
+   * @returns A promise resolving to the account address.
+   */
+  protected abstract getAccountAddress(
+    options: AccountOptionsBase,
+  ): Promise<Address>;
+
+  /**
+   * Retrieves the token balance and metadata for the account.
+   *
+   * @param options - The options for fetching the token balance and metadata.
+   * @returns A promise resolving to the token balance and metadata.
+   */
+  public async getTokenBalanceAndMetadata(
+    options: GetTokenBalanceAndMetadataOptions,
+  ): Promise<TokenBalanceAndMetadata> {
+    logger.debug('accountController:getTokenBalanceAndMetadata()');
+
+    const { chainId, assetAddress } = options;
+
+    this.assertIsSupportedChainId(chainId);
+
+    const account = await this.getAccountAddress({ chainId });
+
+    const balanceAndMetadata =
+      await this.#accountApiClient.getTokenBalanceAndMetadata({
+        chainId,
+        account,
+        assetAddress,
+      });
+
+    logger.debug(
+      'accountController:getTokenBalanceAndMetadata() - balance and metadata resolved',
+    );
+
+    return balanceAndMetadata;
+  }
 }

packages/gator-permissions-snap/snap.manifest.json

@@ -7,6 +7,7 @@ import {
 import type { SnapsProvider } from '@metamask/snaps-sdk';
 import { type Address, type Hex } from 'viem';
 
+import { AccountApiClient } from '../clients/accountApiClient';
 import type { SupportedChains } from './baseAccountController';
 import { BaseAccountController } from './baseAccountController';
 import type {
@@ -37,11 +38,13 @@ export class EoaAccountController
    * @param config.snapsProvider - The provider for interacting with snaps.
    * @param config.ethereumProvider - The provider for interacting with Ethereum.
    * @param config.supportedChains - Optional list of supported blockchain chains.
+   * @param config.accountApiClient - The client for interacting with the account API.
    */
   constructor(config: {
     snapsProvider: SnapsProvider;
     ethereumProvider: EthereumProvider;
     supportedChains?: SupportedChains;
+    accountApiClient: AccountApiClient;
   }) {
     super(config);
     this.#ethereumProvider = config.ethereumProvider;
@@ -198,30 +201,6 @@ export class EoaAccountController
     };
   }
 
-  /**
-   * Retrieves the balance of the EOA account.
-   * @param options - The options object containing chain information.
-   * @returns The account balance in hex format.
-   */
-  public async getAccountBalance(options: AccountOptionsBase): Promise<Hex> {
-    logger.debug('eoaAccountController:getAccountBalance()');
-
-    this.assertIsSupportedChainId(options.chainId);
-
-    const address = await this.#getAccountAddress();
-
-    const provider = this.createExperimentalProviderRequestProvider(
-      options.chainId,
-    );
-
-    const balance = await provider.request({
-      method: 'eth_getBalance',
-      params: [address, 'latest'],
-    });
-
-    return balance as Hex;
-  }
-
   /**
    * Retrieves the delegation manager address.
    * @param options - The options object containing chain information.

packages/gator-permissions-snap/src/accountController/baseAccountController.ts

@@ -16,6 +16,7 @@ import {
 } from 'viem';
 import { privateKeyToAccount } from 'viem/accounts';
 
+import { AccountApiClient } from '../clients/accountApiClient';
 import type { SupportedChains } from './baseAccountController';
 import { BaseAccountController } from './baseAccountController';
 import type {
@@ -53,11 +54,13 @@ export class SmartAccountController
    * @param config.snapsProvider - The provider for interacting with snaps.
    * @param config.supportedChains - The supported blockchain chains.
    * @param config.deploymentSalt - The hex salt for smart account deployment.
+   * @param config.accountApiClient - The client for interacting with the account API.
    */
   constructor(config: {
     snapsProvider: SnapsProvider;
     supportedChains?: SupportedChains;
     deploymentSalt: Hex;
+    accountApiClient: AccountApiClient;
   }) {
     super(config);
     this.#deploymentSalt = config.deploymentSalt;
@@ -207,40 +210,24 @@ export class SmartAccountController
   }
 
   /**
-   * Retrieves the balance of the smart account.
+   * Retrieves the environment for the current account.
    *
    * @param options - The base account options including chainId.
-   * @returns A promise resolving to the account balance as a hex string.
+   * @returns A promise resolving to a DeleGatorEnvironment.
    */
-  public async getAccountBalance(options: AccountOptionsBase): Promise<Hex> {
-    logger.debug('accountController:getAccountBalance()');
-
-    const { chainId } = options;
+  public async getEnvironment(
+    options: AccountOptionsBase,
+  ): Promise<DeleGatorEnvironment> {
+    logger.debug('accountController:getEnvironment()');
 
     const smartAccount = await this.#getMetaMaskSmartAccount(options);
 
     logger.debug(
-      'accountController:getAccountBalance() - smartAccount resolved',
+      'accountController:getEnvironment() - smartAccount resolved',
       smartAccount,
     );
 
-    this.assertIsSupportedChainId(chainId);
-
-    const provider = this.createExperimentalProviderRequestProvider(chainId);
-
-    const accountAddress = await smartAccount.getAddress();
-
-    const balance = await provider.request({
-      method: 'eth_getBalance',
-      params: [accountAddress, 'latest'],
-    });
-
-    logger.debug(
-      'accountController:getAccountBalance() - balance resolved',
-      balance,
-    );
-
-    return balance as Hex;
+    return smartAccount.environment;
   }
 
   /**
@@ -272,25 +259,4 @@ export class SmartAccountController
 
     return { ...delegation, signature };
   }
-
-  /**
-   * Retrieves the environment for the current account.
-   *
-   * @param options - The base account options including chainId.
-   * @returns A promise resolving to a DeleGatorEnvironment.
-   */
-  public async getEnvironment(
-    options: AccountOptionsBase,
-  ): Promise<DeleGatorEnvironment> {
-    logger.debug('accountController:getEnvironment()');
-
-    const smartAccount = await this.#getMetaMaskSmartAccount(options);
-
-    logger.debug(
-      'accountController:getEnvironment() - smartAccount resolved',
-      smartAccount,
-    );
-
-    return smartAccount.environment;
-  }
 }

packages/gator-permissions-snap/src/accountController/eoaAccountController.ts

@@ -3,6 +3,7 @@ import type {
   DeleGatorEnvironment,
 } from '@metamask/delegation-toolkit';
 import type { Address, Hex } from 'viem';
+import type { TokenBalanceAndMetadata } from '../clients/accountApiClient';
 
 /**
  * Base options required for account operations.
@@ -12,6 +13,10 @@ export type AccountOptionsBase = {
   chainId: number;
 };
 
+export type GetTokenBalanceAndMetadataOptions = AccountOptionsBase & {
+  assetAddress?: Address;
+};
+
 /**
  * Options for signing a delegation.
  */
@@ -49,7 +54,9 @@ export type AccountController = {
   /**
    * Retrieves the balance of the smart account.
    */
-  getAccountBalance(options: AccountOptionsBase): Promise<Hex>;
+  getTokenBalanceAndMetadata(
+    options: GetTokenBalanceAndMetadataOptions,
+  ): Promise<TokenBalanceAndMetadata>;
 
   /**
    * Retrieves the delegation manager address for the current account.

packages/gator-permissions-snap/src/accountController/smartAccountController.ts

@@ -1,4 +1,5 @@
 import { logger } from '@metamask/7715-permissions-shared/utils';
+import { IconUrls } from '../ui/iconConstant';
 import { isAddressEqual, zeroAddress, type Address } from 'viem';
 
 /**
@@ -67,18 +68,21 @@ export class AccountApiClient {
     account,
   }: {
     chainId: number;
-    assetAddress?: Address;
     account: Address;
+    assetAddress?: Address | undefined;
   }): Promise<TokenBalanceAndMetadata> {
+    console.log('getTokenBalanceAndMetadata', chainId, assetAddress, account);
     if (!chainId) {
       const message = 'No chainId provided to fetch token balance';
+      console.log(message);
       logger.error(message);
 
       throw new Error(message);
     }
 
     if (!account) {
       const message = 'No account address provided to fetch token balance';
+      console.log(message);
       logger.error(message);
 
       throw new Error(message);
@@ -87,8 +91,12 @@ export class AccountApiClient {
     // zeroAddress is the native token on the specified chain
     const tokenAddress = assetAddress ?? zeroAddress;
 
+    console.log(
+      `${this.#baseUrl}/tokens/${tokenAddress}?accountAddresses=${account}&chainId=${1}`,
+    );
+    // todo: chainId is hardcoded to mainnet, because the account api does not support sepolia.
     const response = await this.#fetch(
-      `${this.#baseUrl}/tokens/${tokenAddress}?accountAddresses=${account}&chainId=${chainId}`,
+      `${this.#baseUrl}/tokens/${tokenAddress}?accountAddresses=${account}&chainId=${1}`,
     );
 
     if (!response.ok) {
@@ -120,11 +128,21 @@ export class AccountApiClient {
       throw new Error(message);
     }
 
+    // this is an awkward workaround. We cannot actually use the iconUrl from
+    // the response, because we must have an SVG literal. The service returns a
+    // png, and we cannot even fetch it due to CORs if it were svg.
+    const iconUrl = ICON_URLS[balanceData.iconUrl] ?? IconUrls.notFound.token;
+
     return {
       balance: BigInt(accountData.rawBalance),
       decimals: balanceData.decimals,
       symbol: balanceData.symbol,
-      iconUrl: balanceData.iconUrl,
+      iconUrl,
     };
   }
 }
+
+const ICON_URLS: Record<string, string> = {
+  'https://dev-static.cx.metamask.io/api/v1/tokenIcons/1/0x0000000000000000000000000000000000000000.png':
+    IconUrls.ethereum.token,
+};

packages/gator-permissions-snap/src/accountController/types.ts

@@ -39,6 +39,7 @@ import { RpcMethod } from './rpc/rpcMethod';
 import { TokenPricesService } from './services/tokenPricesService';
 import { createStateManager } from './stateManagement';
 import { UserEventDispatcher } from './userEventDispatcher';
+import { AccountApiClient } from './clients/accountApiClient';
 
 const isFeatureEnabled = process.env.STORE_PERMISSIONS_ENABLED === 'true';
 const snapEnv = process.env.SNAP_ENV;
@@ -48,16 +49,23 @@ const snapEnv = process.env.SNAP_ENV;
 // eslint-disable-next-line no-restricted-globals
 const useEoaAccountController = process.env.USE_EOA_ACCOUNT === 'true';
 
+// todo: set up the configuration properly
+const accountApiClient = new AccountApiClient(
+  'https://account.api.cx.metamask.io',
+);
+
 const accountController: AccountController = useEoaAccountController
   ? new EoaAccountController({
       snapsProvider: snap,
       supportedChains: [sepolia, lineaSepolia],
       ethereumProvider: ethereum,
+      accountApiClient,
     })
   : new SmartAccountController({
       snapsProvider: snap,
       supportedChains: [sepolia, lineaSepolia],
       deploymentSalt: '0x',
+      accountApiClient,
     });
 
 const stateManager = createStateManager(snap);