fix: #25189 - Display network badge for send flow asset

MetaMask · Jun 21, 2024 · 1852719 · 1852719
1 parent 48bc2f0
commit 1852719
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 20 deletions.
diff --git a/...ents/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/...ents/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -13,18 +13,31 @@ exports[`AssetPicker matches snapshot 1`] = `
         class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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-alternative mm-box--rounded-full"
+          class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
         >
-          <img
-            aria-hidden="true"
-            class="mm-avatar-token__token-image--blurred"
-            src="./images/eth_logo.svg"
-          />
-          <img
-            alt="undefined logo"
-            class="mm-avatar-token__token-image--size-reduced"
-            src="./images/eth_logo.svg"
-          />
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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-alternative mm-box--rounded-full"
+          >
+            <img
+              aria-hidden="true"
+              class="mm-avatar-token__token-image--blurred"
+              src="./images/eth_logo.svg"
+            />
+            <img
+              alt="NATIVE TICKER logo"
+              class="mm-avatar-token__token-image--size-reduced"
+              src="./images/eth_logo.svg"
+            />
+          </div>
+          <div
+            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+          >
+            <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-full mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+            >
+              ?
+            </div>
+          </div>
         </div>
         <div>
           <div
@@ -67,9 +80,22 @@ exports[`AssetPicker render if disabled 1`] = `
         class="mm-box mm-box--display-flex mm-box--gap-3 mm-box--align-items-center"
       >
         <div
-          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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-alternative mm-box--rounded-full"
+          class="mm-box mm-badge-wrapper mm-box--margin-right-3 mm-box--display-inline-block"
         >
-          ?
+          <div
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-token mm-avatar-token--with-halo 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-alternative mm-box--rounded-full"
+          >
+            s
+          </div>
+          <div
+            class="mm-box mm-badge-wrapper__badge-container mm-badge-wrapper__badge-container--circular-top-right"
+          >
+            <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-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
+            >
+              ?
+            </div>
+          </div>
         </div>
         <div>
           <div

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -7,11 +7,15 @@ import {
   Text,
   Box,
   Button,
+  AvatarNetworkSize,
+  BadgeWrapper,
+  AvatarNetwork,
 } from '../../../component-library';
 import { Asset, getSendAnalyticProperties } from '../../../../ducks/send';
 import {
   AlignItems,
   BackgroundColor,
+  BorderColor,
   BorderRadius,
   Display,
   IconColor,
@@ -23,8 +27,10 @@ import { AssetType } from '../../../../../shared/constants/transaction';
 import { AssetPickerModal } from '../asset-picker-modal/asset-picker-modal';
 import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import {
+  getCurrentNetwork,
   getIpfsGateway,
   getNativeCurrencyImage,
+  getTestNetworkBackgroundColor,
   getTokenList,
 } from '../../../../selectors';
 import Tooltip from '../../../ui/tooltip';
@@ -106,6 +112,10 @@ export function AssetPicker({
       ? `${symbol.substring(0, LARGE_SYMBOL_LENGTH - 1)}...`
       : symbol;
 
+  // Badge details
+  const currentNetwork = useSelector(getCurrentNetwork);
+  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
+
   return (
     <>
       {/* This is the Modal that ask to choose token to send */}
@@ -152,13 +162,32 @@ export function AssetPicker({
         title={isDisabled ? t('swapTokenNotAvailable') : undefined}
       >
         <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
-          <AvatarToken
-            borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
-            src={primaryTokenImage}
-            size={AvatarTokenSize.Md}
-            showHalo={!isNFT}
-            {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
-          />
+          <BadgeWrapper
+            badge={
+              <AvatarNetwork
+                size={AvatarNetworkSize.Xs}
+                name={currentNetwork?.nickname}
+                src={currentNetwork?.rpcPrefs?.imageUrl}
+                backgroundColor={testNetworkBackgroundColor}
+                borderColor={
+                  primaryTokenImage
+                    ? BorderColor.borderMuted
+                    : BorderColor.borderDefault
+                }
+              />
+            }
+            marginRight={3}
+          >
+            <AvatarToken
+              borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
+              src={primaryTokenImage}
+              size={AvatarTokenSize.Md}
+              showHalo={!isNFT}
+              name={symbol}
+              {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
+            />
+          </BadgeWrapper>
+
           <Tooltip disabled={!isSymbolLong} title={symbol} position="bottom">
             <Text className="asset-picker__symbol" variant={TextVariant.bodyMd}>
               {formattedSymbol}