From c383fada9649bb99104e6ca0ffd01a6d9a7b8a29 Mon Sep 17 00:00:00 2001
From: Bilal Zahory <bilal.zahory@consensys.net>
Date: Fri, 19 Jul 2024 13:52:48 -0400
Subject: [PATCH] fix: vertically align asset image

---
 .../__snapshots__/asset-picker.test.tsx.snap  | 62 +++++++++++--------
 .../asset-picker/asset-picker.tsx             | 48 +++++++-------
 2 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
index 2662eb196a76..2f7765a5f200 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/__snapshots__/asset-picker.test.tsx.snap
@@ -13,29 +13,33 @@ 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-badge-wrapper mm-box--display-inline-block"
+          class="mm-box mm-box--display-flex"
         >
           <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"
+            class="mm-box mm-badge-wrapper mm-box--display-inline-block"
           >
             <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"
+              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>
@@ -80,20 +84,24 @@ 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-badge-wrapper mm-box--display-inline-block"
+          class="mm-box mm-box--display-flex"
         >
           <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"
+            class="mm-box mm-badge-wrapper mm-box--display-inline-block"
           >
             <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"
+              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>
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
index 85115498a1a7..100c6708fe7e 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -179,30 +179,32 @@ export function AssetPicker({
         title={handleAssetPickerTitle()}
       >
         <Box display={Display.Flex} alignItems={AlignItems.center} gap={3}>
-          <BadgeWrapper
-            badge={
-              <AvatarNetwork
-                size={AvatarNetworkSize.Xs}
-                name={currentNetwork?.nickname}
-                src={currentNetwork?.rpcPrefs?.imageUrl}
-                backgroundColor={testNetworkBackgroundColor}
-                borderColor={
-                  primaryTokenImage
-                    ? BorderColor.borderMuted
-                    : BorderColor.borderDefault
-                }
+          <Box display={Display.Flex}>
+            <BadgeWrapper
+              badge={
+                <AvatarNetwork
+                  size={AvatarNetworkSize.Xs}
+                  name={currentNetwork?.nickname}
+                  src={currentNetwork?.rpcPrefs?.imageUrl}
+                  backgroundColor={testNetworkBackgroundColor}
+                  borderColor={
+                    primaryTokenImage
+                      ? BorderColor.borderMuted
+                      : BorderColor.borderDefault
+                  }
+                />
+              }
+            >
+              <AvatarToken
+                borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
+                src={primaryTokenImage}
+                size={AvatarTokenSize.Md}
+                showHalo={!isNFT}
+                name={symbol}
+                {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
               />
-            }
-          >
-            <AvatarToken
-              borderRadius={isNFT ? BorderRadius.LG : BorderRadius.full}
-              src={primaryTokenImage}
-              size={AvatarTokenSize.Md}
-              showHalo={!isNFT}
-              name={symbol}
-              {...(isNFT && { backgroundColor: BackgroundColor.transparent })}
-            />
-          </BadgeWrapper>
+            </BadgeWrapper>
+          </Box>
 
           <Tooltip disabled={!isSymbolLong} title={symbol} position="bottom">
             <Text className="asset-picker__symbol" variant={TextVariant.bodyMd}>