feat(snaps): Add AssetSelector

app/scripts/controller-init/messengers/snaps/snap-interface-controller-messenger.ts

@@ -6,13 +6,17 @@ import {
 } from '@metamask/approval-controller';
 import { MaybeUpdateState, TestOrigin } from '@metamask/phishing-controller';
 import { NotificationListUpdatedEvent } from '@metamask/notification-services-controller/notification-services';
+import { AccountsControllerGetAccountByAddressAction } from '@metamask/accounts-controller';
+import { MultichainAssetsControllerGetStateAction } from '@metamask/assets-controllers';
 
 type Actions =
   | MaybeUpdateState
   | TestOrigin
   | HasApprovalRequest
   | AcceptRequest
-  | GetSnap;
+  | GetSnap
+  | AccountsControllerGetAccountByAddressAction
+  | MultichainAssetsControllerGetStateAction;
 
 type Events = NotificationListUpdatedEvent;
 
@@ -39,6 +43,8 @@ export function getSnapInterfaceControllerMessenger(
       `ApprovalController:hasRequest`,
       `ApprovalController:acceptRequest`,
       `SnapController:get`,
+      'AccountsController:getAccountByAddress',
+      'MultichainAssetsController:getState',
     ],
     allowedEvents: ['NotificationServicesController:notificationsListUpdated'],
   });

builds.yml

@@ -81,7 +81,7 @@ buildTypes:
       - ALLOW_LOCAL_SNAPS: true
       - REQUIRE_SNAPS_ALLOWLIST: false
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: false
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/7.0.0/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: http://localhost:6363
       - SUPPORT_LINK: https://support.metamask.io/
       - SUPPORT_REQUEST_LINK: https://support.metamask.io/
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -49,6 +49,7 @@ import { SnapUIMarkdown } from '../snaps/snap-ui-markdown';
 import { SnapUIRadioGroup } from '../snaps/snap-ui-radio-group';
 import { SnapUISelector } from '../snaps/snap-ui-selector';
 import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
+import { SnapUIAssetSelector } from '../snaps/snap-ui-asset-selector';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
@@ -107,6 +108,7 @@ export const safeComponentList = {
   SnapUIRadioGroup,
   SnapUISelector,
   SnapUITooltip,
+  SnapUIAssetSelector,
   span: 'span',
   Spinner,
   Skeleton,

ui/components/app/snaps/snap-ui-asset-selector/index.ts

@@ -0,0 +1 @@
+export * from './snap-ui-asset-selector';

ui/components/app/snaps/snap-ui-asset-selector/snap-ui-asset-selector.tsx

@@ -0,0 +1,124 @@
+import React, { FunctionComponent } from 'react';
+import { CaipAccountId, CaipChainId } from '@metamask/utils';
+
+import { SnapUISelector } from '../snap-ui-selector';
+
+import {
+  Display,
+  FlexDirection,
+  TextAlign,
+  TextColor,
+  TextVariant,
+  AlignItems,
+  BackgroundColor,
+  BlockSize,
+} from '../../../../helpers/constants/design-system';
+import {
+  Box,
+  Text,
+  AvatarToken,
+  BadgeWrapper,
+  AvatarNetwork,
+  AvatarNetworkSize,
+} from '../../../component-library';
+
+import { SnapUIAsset, useSnapAssetSelectorData } from './useSnapAssetDisplay';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+
+const SnapUIAssetSelectorOption: FunctionComponent<SnapUIAsset> = ({
+  icon,
+  symbol,
+  name,
+  balance,
+  fiat,
+  networkName,
+  networkIcon,
+}) => (
+  <Box
+    display={Display.Flex}
+    alignItems={AlignItems.center}
+    width={BlockSize.Full}
+    gap={4}
+  >
+    <Box alignItems={AlignItems.center}>
+      <BadgeWrapper
+        badge={
+          <AvatarNetwork
+            size={AvatarNetworkSize.Xs}
+            name={networkName}
+            src={networkIcon}
+            backgroundColor={BackgroundColor.backgroundDefault}
+          />
+        }
+      >
+        <AvatarToken src={icon} />
+      </BadgeWrapper>
+    </Box>
+    <Box
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
+      style={{ overflow: 'hidden' }}
+    >
+      <Text variant={TextVariant.bodyMdMedium} ellipsis>
+        {name}
+      </Text>
+      <Text
+        color={TextColor.textAlternative}
+        variant={TextVariant.bodySm}
+        ellipsis
+      >
+        {networkName}
+      </Text>
+    </Box>
+    <Box
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
+      marginLeft={'auto'}
+      textAlign={TextAlign.End}
+    >
+      <Text variant={TextVariant.bodySmMedium}>
+        {balance} {symbol}
+      </Text>
+      <Text color={TextColor.textAlternative} variant={TextVariant.bodySm}>
+        {fiat}
+      </Text>
+    </Box>
+  </Box>
+);
+
+type SnapUIAssetSelectorProps = {
+  name: string;
+  addresses: CaipAccountId[];
+  chainIds?: CaipChainId[];
+  disabled?: boolean;
+  form?: string;
+  label?: string;
+  error?: string;
+};
+
+export const SnapUIAssetSelector: FunctionComponent<
+  SnapUIAssetSelectorProps
+> = ({ addresses, chainIds, disabled, ...props }) => {
+  const t = useI18nContext();
+  const assets = useSnapAssetSelectorData({ addresses, chainIds });
+
+  const options = assets.map(({ address, name, symbol }) => ({
+    key: 'asset',
+    value: { asset: address, name, symbol },
+    disabled: false,
+  }));
+
+  const optionComponents = assets.map((asset, index) => (
+    <SnapUIAssetSelectorOption {...asset} key={index} />
+  ));
+
+  return (
+    <SnapUISelector
+      title={t('snapUIAssetSelectorTitle')}
+      options={options}
+      optionComponents={optionComponents}
+      disabled={disabled || assets.length === 0}
+      {...props}
+    />
+  );
+};