feat: add asset selector

app/components/Snaps/SnapUIAssetSelector/SnapUIAssetSelector.tsx

@@ -0,0 +1,168 @@
+import React, { FunctionComponent } from 'react';
+import { CaipAccountId, CaipChainId } from '@metamask/utils';
+import { SnapUISelector } from '../SnapUISelector/SnapUISelector';
+import { strings } from '../../../../locales/i18n';
+import { SnapUIAsset, useSnapAssetSelectorData } from './useSnapAssetDisplay';
+import { Box } from '../../UI/Box/Box';
+import { AlignItems, FlexDirection } from '../../UI/Box/box.types';
+import BadgeWrapper, {
+  BadgePosition,
+} from '../../../component-library/components/Badges/BadgeWrapper';
+import { AvatarSize } from '../../../component-library/components/Avatars/Avatar';
+import AvatarToken from '../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import { ImageSourcePropType, ViewStyle } from 'react-native';
+import Badge, {
+  BadgeVariant,
+} from '../../../component-library/components/Badges/Badge';
+
+/**
+ *
+ * @param props - The component props.
+ * @param props.icon - The asset icon.
+ * @param props.symbol - The asset symbol.
+ * @param props.name - The asset name.
+ * @param props.balance - The asset balance.
+ * @param props.fiat - The asset balance in fiat.
+ * @param props.networkName - The network name.
+ * @param props.networkIcon - The network icon.
+ * @param props.compact - Whether the selector is compact.
+ * @param props.context - The rendering context ('inline' or 'modal').
+ * @returns The Asset Selector option.
+ */
+const SnapUIAssetSelectorOption: FunctionComponent<
+  SnapUIAsset & {
+    style?: ViewStyle;
+    compact?: boolean;
+    context?: 'inline' | 'modal';
+  }
+> = ({
+  icon,
+  symbol,
+  name,
+  balance,
+  fiat,
+  networkName,
+  networkIcon,
+  compact = false,
+  context = 'modal',
+}) => (
+  <Box
+    alignItems={AlignItems.center}
+    flexDirection={FlexDirection.Row}
+    gap={16}
+    // eslint-disable-next-line react-native/no-inline-styles
+    style={{ overflow: 'hidden', flex: 1 }}
+  >
+    {/* eslint-disable-next-line react-native/no-inline-styles */}
+    <Box alignItems={AlignItems.center}>
+      <BadgeWrapper
+        badgeElement={
+          <Badge
+            variant={BadgeVariant.Network}
+            imageSource={networkIcon as ImageSourcePropType}
+            name={networkName}
+          />
+        }
+        badgePosition={BadgePosition.BottomRight}
+      >
+        <AvatarToken size={AvatarSize.Sm} imageSource={{ uri: icon }} />
+      </BadgeWrapper>
+    </Box>
+    <Box
+      flexDirection={FlexDirection.Column}
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={{ overflow: 'hidden', flex: 1 }}
+    >
+      <Text
+        variant={TextVariant.BodyMDMedium}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {name}
+      </Text>
+      <Text
+        color={TextColor.Alternative}
+        variant={TextVariant.BodySM}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+      >
+        {networkName}
+      </Text>
+    </Box>
+    <Box
+      flexDirection={FlexDirection.Column}
+      // We hide the balance and fiat in inline mode when the asset selector has a sibling element
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={{
+        marginLeft: 'auto',
+        marginRight: 8,
+        ...(context === 'inline' && compact ? { display: 'none' } : {}),
+      }}
+      alignItems={AlignItems.flexEnd}
+    >
+      <Text variant={TextVariant.BodySMMedium}>
+        {balance} {symbol}
+      </Text>
+      <Text color={TextColor.Alternative} variant={TextVariant.BodySM}>
+        {fiat}
+      </Text>
+    </Box>
+  </Box>
+);
+
+/**
+ * The props for the SnapUIAssetSelector.
+ */
+interface SnapUIAssetSelectorProps {
+  name: string;
+  addresses: CaipAccountId[];
+  chainIds?: CaipChainId[];
+  disabled?: boolean;
+  form?: string;
+  label?: string;
+  error?: string;
+  style?: Record<string, ViewStyle>;
+  compact?: boolean;
+}
+
+/**
+ * The SnapUIAssetSelector component.
+ *
+ * @param props - The component props.
+ * @param props.addresses - The addresses to get the assets for.
+ * @param props.chainIds - The chainIds to filter the assets by.
+ * @param props.disabled - Whether the selector is disabled.
+ * @param props.compact - Whether the selector is compact.
+ * @returns The AssetSelector component.
+ */
+export const SnapUIAssetSelector: FunctionComponent<
+  SnapUIAssetSelectorProps
+> = ({ addresses, chainIds, disabled, style, compact, ...props }) => {
+  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} compact={compact} />
+  ));
+
+  return (
+    <SnapUISelector
+      title={strings('snap_ui.asset_selector.title')}
+      options={options}
+      optionComponents={optionComponents}
+      disabled={disabled || assets.length === 0}
+      style={style}
+      compact={compact}
+      {...props}
+    />
+  );
+};

app/components/Snaps/SnapUIAssetSelector/useSnapAssetDisplay.tsx

@@ -0,0 +1,157 @@
+import {
+  CaipAccountId,
+  CaipAssetType,
+  CaipChainId,
+  KnownCaipNamespace,
+  parseCaipAccountId,
+  parseCaipChainId,
+} from '@metamask/utils';
+import { useSelector } from 'react-redux';
+import { getMemoizedInternalAccountByAddress } from '../../../selectors/accountsController';
+import { selectMultichainTokenListForAccountId } from '../../../selectors/multichain';
+import I18n from '../../../../locales/i18n';
+import { formatWithThreshold } from '../../../util/assets';
+import { selectNetworkConfigurations } from '../../../selectors/networkController';
+import { AllowedBridgeChainIds, NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../../constants/bridge';
+import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
+import { RootState } from '../../../reducers';
+import { getNonEvmNetworkImageSourceByChainId } from '../../../util/networks/customNetworks';
+
+/**
+ * An asset for the SnapUIAssetSelector.
+ */
+export interface SnapUIAsset {
+  icon: string;
+  symbol: string;
+  name: string;
+  balance: string;
+  fiat: string;
+  chainId: CaipChainId;
+  address: CaipAssetType;
+  networkName: string;
+  networkIcon?: string;
+}
+
+interface TokenWithFiatAmount {
+  image: string;
+  symbol: string;
+  name: string;
+  balance: string;
+  secondary: string;
+  chainId: CaipChainId;
+  address: CaipAssetType;
+}
+
+/**
+ * The parameters for the hook.
+ *
+ * @param addresses - The addresses to get the assets for.
+ * This is a list of the same address but for different chains.
+ * @param chainIds - The chainIds to filter the assets by.
+ */
+interface UseSnapAssetSelectorDataParams {
+  addresses: CaipAccountId[];
+  chainIds?: CaipChainId[];
+}
+
+/**
+ * Gets the assets from state and format them for the SnapUIAssetSelector.
+ *
+ * @param params - The parameters for the hook.
+ * @param params.addresses - The addresses to get the assets for.
+ * This is a list of the same address but for different chains.
+ * @param params.chainIds - The chainIds to filter the assets by.
+ * @returns The formatted assets.
+ */
+export const useSnapAssetSelectorData = ({
+  addresses,
+  chainIds,
+}: UseSnapAssetSelectorDataParams) => {
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const locale = I18n.locale;
+
+  const parsedAccounts = addresses.map(parseCaipAccountId);
+
+  const account = useSelector((state) =>
+    getMemoizedInternalAccountByAddress(state, parsedAccounts[0].address),
+  );
+  const networks = useSelector(selectNetworkConfigurations);
+
+  const assets = useSelector((state: RootState) =>
+    selectMultichainTokenListForAccountId(state, account?.id)
+  ) as TokenWithFiatAmount[];
+
+  /**
+   * Formats a fiat balance.
+   *
+   * @param balance - The balance to format.
+   * @returns The formatted balance.
+   */
+  const formatFiatBalance = (balance: number | null = 0) =>
+    formatWithThreshold(balance, 0.01, locale, {
+      style: 'currency',
+      currency: currentCurrency.toUpperCase(),
+    });
+
+  /**
+   * Formats an asset balance.
+   *
+   * @param balance - The balance to format.
+   * @returns The formatted balance.
+   */
+  const formatAssetBalance = (balance: string) => {
+    const parsedBalance = parseFloat(balance);
+    return formatWithThreshold(parsedBalance, 0.00001, locale, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 5,
+    });
+  };
+
+  /**
+   * Formats a non-EVM asset for the SnapUIAssetSelector.
+   *
+   * @param asset - The asset to format.
+   * @returns The formatted asset.
+   */
+  const formatAsset = (asset: TokenWithFiatAmount) => {
+    const networkName =
+      NETWORK_TO_SHORT_NETWORK_NAME_MAP[
+        asset.chainId as AllowedBridgeChainIds
+      ] ?? networks[asset.chainId]?.name;
+
+    return {
+      icon: asset.image,
+      symbol: asset.symbol,
+      name: asset.name,
+      balance: formatAssetBalance(asset.balance),
+      networkName,
+      networkIcon: getNonEvmNetworkImageSourceByChainId(asset.chainId as CaipChainId),
+      fiat: formatFiatBalance(Number(asset.secondary)),
+      chainId: asset.chainId as CaipChainId,
+      address: asset.address as CaipAssetType,
+    };
+  };
+
+  // Filter the chain IDs to only include the requested ones.
+  const requestedChainIds = parsedAccounts
+    .map((chainId) => chainId)
+    .filter(({ chainId }) => (chainIds ? chainIds?.includes(chainId) : true));
+
+  // Format the assets
+  const formattedAssets: SnapUIAsset[] = assets.map(formatAsset);
+
+  // Filter the assets by the requested chain IDs
+  const filteredAssets = formattedAssets.filter((asset) =>
+    requestedChainIds.some(({ chainId, chain: { namespace, reference } }) => {
+      // Handles the "eip155:0" case
+      if (namespace === KnownCaipNamespace.Eip155 && reference === '0') {
+        const { namespace: assetNamepace } = parseCaipChainId(asset.chainId);
+        return assetNamepace === namespace;
+      }
+
+      return chainId === asset.chainId;
+    }),
+  );
+
+  return filteredAssets;
+};

app/components/Snaps/SnapUIInput/SnapUIInput.tsx

@@ -77,6 +77,9 @@ export const SnapUIInput = ({
         onChangeText={handleChange}
         autoCapitalize="none"
         autoCorrect={false}
+        // We set a max height of 58px and let the input grow to fill the rest of the height next to a taller sibling element.
+        // eslint-disable-next-line react-native/no-inline-styles
+        style={{ maxHeight: 58, flexGrow: 1 }}
       />
       {error && (
         // eslint-disable-next-line react-native/no-inline-styles