feat: swap and bridge asset picker components

shared/constants/bridge.ts

@@ -3,9 +3,14 @@ import {
   BRIDGE_DEV_API_BASE_URL,
   BRIDGE_PROD_API_BASE_URL,
   ChainId,
+  formatChainIdToCaip,
 } from '@metamask/bridge-controller';
 import { MultichainNetworks } from './multichain/networks';
-import { CHAIN_IDS, NETWORK_TO_NAME_MAP } from './network';
+import {
+  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+  CHAIN_IDS,
+  NETWORK_TO_NAME_MAP,
+} from './network';
 
 const ALLOWED_MULTICHAIN_BRIDGE_CHAIN_IDS = [
   MultichainNetworks.SOLANA,
@@ -62,7 +67,18 @@ export const BRIDGE_API_BASE_URL = process.env.BRIDGE_USE_DEV_APIS
   ? BRIDGE_DEV_API_BASE_URL
   : BRIDGE_PROD_API_BASE_URL;
 
-export const ETH_USDT_ADDRESS = '0xdac17f958d2ee523a2206206994597c13d831ec7';
+export const BRIDGE_CHAIN_ID_TO_NETWORK_IMAGE_MAP: Record<
+  (typeof ALLOWED_BRIDGE_CHAIN_IDS_IN_CAIP)[number],
+  string
+> = ALLOWED_BRIDGE_CHAIN_IDS.reduce(
+  (acc, chainId) => {
+    acc[formatChainIdToCaip(chainId)] =
+      CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId];
+    return acc;
+  },
+  {} as Record<(typeof ALLOWED_BRIDGE_CHAIN_IDS_IN_CAIP)[number], string>,
+);
+
 export const NETWORK_TO_SHORT_NETWORK_NAME_MAP: Record<
   AllowedBridgeChainIds,
   string

ui/ducks/bridge/types.ts

@@ -14,6 +14,7 @@ export type BridgeToken = {
   assetId?: CaipAssetType;
   symbol: string;
   image: string;
+  name: string;
   decimals: number;
   chainId: number | Hex | ChainId | CaipChainId;
   balance: string; // raw balance
@@ -58,6 +59,7 @@ export type TokenPayload = {
     address: GenericQuoteRequest['srcTokenAddress'];
     symbol: string;
     decimals: number;
+    name?: string;
     chainId: Exclude<ChainIdPayload['payload'], null>;
     balance?: string;
     image?: string;

ui/ducks/bridge/utils.ts

@@ -296,6 +296,7 @@ export const toBridgeToken = (
   const caipChainId = formatChainIdToCaip(payload.chainId);
   return {
     ...payload,
+    name: payload.name ?? payload.symbol,
     balance: payload.balance ?? '0',
     chainId: payload.chainId,
     image: getTokenImage(payload),

ui/pages/bridge/__snapshots__/index.test.tsx.snap

@@ -80,31 +80,38 @@ exports[`Bridge renders the component with initial props 1`] = `
                 />
               </div>
               <button
-                class="mm-box mm-text mm-select-button mm-select-button--size-lg mm-text--body-md mm-box--padding-top-3 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-0 mm-box--justify-content-space-between mm-box--align-items-center mm-box--height-full mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                class="mm-box mm-text mm-select-button mm-select-button--size-lg mm-text--body-md mm-box--padding-top-3 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--height-full mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
                 data-testid="bridge-source-button"
                 style="padding: 8px 11px 8px 8px; min-width: fit-content;"
               >
                 <div
-                  class="mm-box mm-badge-wrapper mm-box--margin-right-2 mm-box--display-inline-block"
+                  class="relative inline-flex self-start"
+                  style="margin-right: 2px;"
                 >
                   <div
-                    class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-hover mm-box--rounded-full"
+                    class="inline-flex"
                   >
-                    <img
-                      alt="ETH logo"
-                      class="mm-avatar-token__token-image"
-                      src="./images/eth_logo.svg"
-                    />
+                    <div
+                      class="inline-flex shrink-0 items-center justify-center overflow-hidden bg-section rounded-full h-8 w-8"
+                    >
+                      <img
+                        alt="ETH"
+                        class="size-full object-contain"
+                        src="./images/eth_logo.svg"
+                      />
+                    </div>
                   </div>
                   <div
-                    class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
+                    class="absolute"
+                    style="bottom: 0px; right: 0px;"
                   >
                     <div
-                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                      class="inline-flex shrink-0 items-center justify-center overflow-hidden bg-section rounded-sm h-[18px] w-[18px] border-background-default border"
+                      style="border-width: 1px; border-radius: 6px;"
                     >
                       <img
-                        alt="Ethereum logo"
-                        class="mm-avatar-network__network-image"
+                        alt="Ethereum"
+                        class="size-full object-contain"
                         src="./images/eth_logo.svg"
                       />
                     </div>
@@ -116,16 +123,12 @@ exports[`Bridge renders the component with initial props 1`] = `
                   <label
                     class="mm-box mm-text mm-label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
                   >
-                    <p
-                      class="mm-box mm-text mm-text--body-lg-medium mm-text--ellipsis mm-box--color-text-default"
-                    >
-                      ETH
-                    </p>
+                    ETH
                   </label>
                 </span>
                 <span
                   class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-                  style="mask-image: url('./images/icons/arrow-2-down.svg'); display: none;"
+                  style="mask-image: url('./images/icons/arrow-down.svg'); display: none;"
                 />
               </button>
             </div>
@@ -187,31 +190,38 @@ exports[`Bridge renders the component with initial props 1`] = `
                   />
                 </div>
                 <button
-                  class="mm-box mm-text mm-select-button mm-select-button--size-lg mm-text--body-md mm-box--padding-top-3 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-0 mm-box--justify-content-space-between mm-box--align-items-center mm-box--height-full mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                  class="mm-box mm-text mm-select-button mm-select-button--size-lg mm-text--body-md mm-box--padding-top-3 mm-box--padding-right-4 mm-box--padding-bottom-3 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--height-full mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-pill mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
                   data-testid="bridge-destination-button"
                   style="padding: 8px 11px 8px 8px; min-width: fit-content;"
                 >
                   <div
-                    class="mm-box mm-badge-wrapper mm-box--margin-right-2 mm-box--display-inline-block"
+                    class="relative inline-flex self-start"
+                    style="margin-right: 2px;"
                   >
                     <div
-                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-hover mm-box--rounded-full"
+                      class="inline-flex"
                     >
-                      <img
-                        alt="mUSD logo"
-                        class="mm-avatar-token__token-image"
-                        src="https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xaca92e438df0b2401ff60da7e4337b687a2435da.png"
-                      />
+                      <div
+                        class="inline-flex shrink-0 items-center justify-center overflow-hidden bg-section rounded-full h-8 w-8"
+                      >
+                        <img
+                          alt="mUSD"
+                          class="size-full object-contain"
+                          src="https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xaca92e438df0b2401ff60da7e4337b687a2435da.png"
+                        />
+                      </div>
                     </div>
                     <div
-                      class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--rectangular-bottom-right"
+                      class="absolute"
+                      style="bottom: 0px; right: 0px;"
                     >
                       <div
-                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-network mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-md mm-box--border-color-background-default mm-box--border-width-1 box--border-style-solid"
+                        class="inline-flex shrink-0 items-center justify-center overflow-hidden bg-section rounded-sm h-[18px] w-[18px] border-background-default border"
+                        style="border-width: 1px; border-radius: 6px;"
                       >
                         <img
-                          alt="Ethereum logo"
-                          class="mm-avatar-network__network-image"
+                          alt="Ethereum"
+                          class="size-full object-contain"
                           src="./images/eth_logo.svg"
                         />
                       </div>
@@ -223,16 +233,12 @@ exports[`Bridge renders the component with initial props 1`] = `
                     <label
                       class="mm-box mm-text mm-label mm-text--body-md mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
                     >
-                      <p
-                        class="mm-box mm-text mm-text--body-lg-medium mm-text--ellipsis mm-box--color-text-default"
-                      >
-                        mUSD
-                      </p>
+                      mUSD
                     </label>
                   </span>
                   <span
                     class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
-                    style="mask-image: url('./images/icons/arrow-2-down.svg'); display: none;"
+                    style="mask-image: url('./images/icons/arrow-down.svg'); display: none;"
                   />
                 </button>
               </div>

ui/pages/bridge/index.scss

@@ -2,6 +2,7 @@
 
 @import 'prepare/index';
 @import 'prepare/components/index';
+@import 'prepare/components/bridge-asset-picker/index';
 @import 'quotes/index';
 @import 'transaction-details/index';
 @import 'awaiting-signatures/index';

ui/pages/bridge/layout/row.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Container,
   ContainerProps,
+  PolymorphicRef,
 } from '../../../components/component-library';
 import {
   AlignItems,
@@ -11,17 +12,23 @@ import {
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 
-const Row = (props: ContainerProps<'div'>) => {
-  return (
-    <Container
-      display={Display.Flex}
-      flexDirection={FlexDirection.Row}
-      justifyContent={JustifyContent.spaceBetween}
-      flexWrap={FlexWrap.NoWrap}
-      alignItems={AlignItems.center}
-      {...props}
-    />
-  );
-};
+const Row = React.forwardRef(
+  <Element extends React.ElementType = 'div' | 'button'>(
+    props: ContainerProps<Element>,
+    ref?: PolymorphicRef<Element>,
+  ) => {
+    return (
+      <Container
+        display={Display.Flex}
+        ref={ref}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        flexWrap={FlexWrap.NoWrap}
+        alignItems={AlignItems.center}
+        {...props}
+      />
+    );
+  },
+);
 
 export default Row;