cherry-pick: display correct asset icon and sizing for simulation det…

…ails (#23760) (#23909) Cherry-pick of PR #23760 for issue [#2317](MetaMask/MetaMask-planning#2317). No conflicts. Co-authored-by: Derek Brans <dbrans@gmail.com>
MetaMask · Apr 9, 2024 · 5ac9096 · 5ac9096
1 parent 1807f80
commit 5ac9096
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 83 deletions.
diff --git a/ui/components/app/confirm/info/row/__snapshots__/address.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/address.test.tsx.snap
@@ -320,7 +320,7 @@ exports[`ConfirmInfoRowAddress renders appropriately with PetNames enabled 1`] =
         class="name name__missing"
       >
         <span
-          class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+          class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
           style="mask-image: url('./images/icons/question.svg');"
         />
         <p

diff --git a/ui/components/app/name/__snapshots__/name.test.tsx.snap b/ui/components/app/name/__snapshots__/name.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Name renders address with no saved name 1`] = `
       class="name name__missing"
     >
       <span
-        class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+        class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
         style="mask-image: url('./images/icons/question.svg');"
       />
       <p
@@ -31,38 +31,38 @@ exports[`Name renders address with saved name 1`] = `
       >
         <div
           class="identicon"
-          style="height: 18px; width: 18px; border-radius: 9px;"
+          style="height: 16px; width: 16px; border-radius: 8px;"
         >
           <div
-            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(245, 196, 0);"
+            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(245, 196, 0);"
           >
             <svg
-              height="18"
-              width="18"
+              height="16"
+              width="16"
               x="0"
               y="0"
             >
               <rect
                 fill="#C8144D"
-                height="18"
-                transform="translate(-0.9231442102660704 -2.672213349688873) rotate(408.5 9 9)"
-                width="18"
+                height="16"
+                transform="translate(-0.8205726313476182 -2.375300755278998) rotate(408.5 8 8)"
+                width="16"
                 x="0"
                 y="0"
               />
               <rect
                 fill="#FB1860"
-                height="18"
-                transform="translate(8.699725589158856 -1.5148649719147114) rotate(402.6 9 9)"
-                width="18"
+                height="16"
+                transform="translate(7.733089412585649 -1.3465466417019656) rotate(402.6 8 8)"
+                width="16"
                 x="0"
                 y="0"
               />
               <rect
                 fill="#03505E"
-                height="18"
-                transform="translate(1.2375522258984861 -14.79073284594546) rotate(308.0 9 9)"
-                width="18"
+                height="16"
+                transform="translate(1.1000464230208766 -13.147318085284851) rotate(308.0 8 8)"
+                width="16"
                 x="0"
                 y="0"
               />

diff --git a/ui/components/app/name/index.scss b/ui/components/app/name/index.scss
@@ -1,6 +1,6 @@
 .name {
   border-radius: 36px;
-  padding: 2px 8px 2px 4px;
+  padding: 1px 8px 1px 4px;
   display: inline-flex;
   align-items: center;
   gap: 5px;

diff --git a/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap b/ui/components/app/name/name-details/__snapshots__/name-details.test.tsx.snap
@@ -75,38 +75,38 @@ exports[`NameDetails renders proposed names 1`] = `
                   >
                     <div
                       class="identicon"
-                      style="height: 18px; width: 18px; border-radius: 9px;"
+                      style="height: 16px; width: 16px; border-radius: 8px;"
                     >
                       <div
-                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(245, 196, 0);"
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(245, 196, 0);"
                       >
                         <svg
-                          height="18"
-                          width="18"
+                          height="16"
+                          width="16"
                           x="0"
                           y="0"
                         >
                           <rect
                             fill="#C8144D"
-                            height="18"
-                            transform="translate(-0.9231442102660704 -2.672213349688873) rotate(408.5 9 9)"
-                            width="18"
+                            height="16"
+                            transform="translate(-0.8205726313476182 -2.375300755278998) rotate(408.5 8 8)"
+                            width="16"
                             x="0"
                             y="0"
                           />
                           <rect
                             fill="#FB1860"
-                            height="18"
-                            transform="translate(8.699725589158856 -1.5148649719147114) rotate(402.6 9 9)"
-                            width="18"
+                            height="16"
+                            transform="translate(7.733089412585649 -1.3465466417019656) rotate(402.6 8 8)"
+                            width="16"
                             x="0"
                             y="0"
                           />
                           <rect
                             fill="#03505E"
-                            height="18"
-                            transform="translate(1.2375522258984861 -14.79073284594546) rotate(308.0 9 9)"
-                            width="18"
+                            height="16"
+                            transform="translate(1.1000464230208766 -13.147318085284851) rotate(308.0 8 8)"
+                            width="16"
                             x="0"
                             y="0"
                           />
@@ -330,7 +330,7 @@ exports[`NameDetails renders with no saved name 1`] = `
                   class="name name__missing"
                 >
                   <span
-                    class="mm-box name__icon mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+                    class="mm-box name__icon mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
                     style="mask-image: url('./images/icons/question.svg');"
                   />
                   <p
@@ -515,7 +515,7 @@ exports[`NameDetails renders with recognized name 1`] = `
                 >
                   <div
                     class="identicon"
-                    style="height: 18px; width: 18px; border-radius: 9px;"
+                    style="height: 16px; width: 16px; border-radius: 8px;"
                   >
                     <img
                       src="https://static.metafi.codefi.network/api/v1/tokenIcons/1/0x0a3bb08b3a15a19b4de82f8acfc862606fb69a2d.png"
@@ -707,38 +707,38 @@ exports[`NameDetails renders with saved name 1`] = `
                   >
                     <div
                       class="identicon"
-                      style="height: 18px; width: 18px; border-radius: 9px;"
+                      style="height: 16px; width: 16px; border-radius: 8px;"
                     >
                       <div
-                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(245, 196, 0);"
+                        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(245, 196, 0);"
                       >
                         <svg
-                          height="18"
-                          width="18"
+                          height="16"
+                          width="16"
                           x="0"
                           y="0"
                         >
                           <rect
                             fill="#C8144D"
-                            height="18"
-                            transform="translate(-0.9231442102660704 -2.672213349688873) rotate(408.5 9 9)"
-                            width="18"
+                            height="16"
+                            transform="translate(-0.8205726313476182 -2.375300755278998) rotate(408.5 8 8)"
+                            width="16"
                             x="0"
                             y="0"
                           />
                           <rect
                             fill="#FB1860"
-                            height="18"
-                            transform="translate(8.699725589158856 -1.5148649719147114) rotate(402.6 9 9)"
-                            width="18"
+                            height="16"
+                            transform="translate(7.733089412585649 -1.3465466417019656) rotate(402.6 8 8)"
+                            width="16"
                             x="0"
                             y="0"
                           />
                           <rect
                             fill="#03505E"
-                            height="18"
-                            transform="translate(1.2375522258984861 -14.79073284594546) rotate(308.0 9 9)"
-                            width="18"
+                            height="16"
+                            transform="translate(1.1000464230208766 -13.147318085284851) rotate(308.0 8 8)"
+                            width="16"
                             x="0"
                             y="0"
                           />

diff --git a/ui/components/app/name/name.tsx b/ui/components/app/name/name.tsx
@@ -101,12 +101,12 @@ export default function Name({
         onClick={handleClick}
       >
         {hasDisplayName ? (
-          <Identicon address={value} diameter={18} />
+          <Identicon address={value} diameter={16} />
         ) : (
           <Icon
             name={IconName.Question}
             className="name__icon"
-            size={IconSize.Lg}
+            size={IconSize.Md}
           />
         )}
         {hasDisplayName ? (

diff --git a/ui/pages/confirmations/components/simulation-details/asset-pill.tsx b/ui/pages/confirmations/components/simulation-details/asset-pill.tsx
@@ -10,6 +10,7 @@ import {
 import {
   AlignItems,
   BackgroundColor,
+  BorderColor,
   BorderRadius,
   Display,
   FlexDirection,
@@ -34,11 +35,18 @@ const NativeAssetPill: React.FC = () => {
       backgroundColor={BackgroundColor.backgroundAlternative}
       gap={1}
       style={{
-        padding: '2px 8px 2px 4px',
+        padding: '1px 8px 1px 4px',
       }}
     >
-      <AvatarNetwork name={ticker} size={AvatarNetworkSize.Sm} src={imgSrc} />
-      <Text variant={TextVariant.bodyMd}>{ticker}</Text>
+      <AvatarNetwork
+        name={ticker}
+        size={AvatarNetworkSize.Xs}
+        src={imgSrc}
+        borderColor={BorderColor.borderDefault}
+      />
+      <Text ellipsis variant={TextVariant.bodyMd}>
+        {ticker}
+      </Text>
     </Box>
   );
 };

diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.stories.tsx
@@ -84,6 +84,17 @@ const storeMockPolygon = configureStore({
   },
 });
 
+const storeMockArbitrum = configureStore({
+  metamask: {
+    ...mockState.metamask,
+    providerConfig: {
+      ...mockState.metamask.providerConfig,
+      chainId: CHAIN_IDS.ARBITRUM,
+      ticker: 'ETH',
+    },
+  },
+});
+
 const meta: Meta<typeof SimulationDetails> = {
   title: 'Components/App/SimulationDetails',
   component: SimulationDetails,
@@ -101,38 +112,33 @@ export const MultipleTokens: Story = {
         difference: '0x12345678912345678',
         isDecrease: true,
       },
-      tokenBalanceChanges: [
-        {
-          ...DUMMY_BALANCE_CHANGE,
-          address: ERC20_TOKEN_1_MOCK,
-          difference: '0x123456',
-          isDecrease: false,
-          standard: SimulationTokenStandard.erc20,
-        },
-        {
-          ...DUMMY_BALANCE_CHANGE,
-          address: ERC20_TOKEN_2_MOCK,
-          difference: '0x123456901',
-          isDecrease: false,
-          standard: SimulationTokenStandard.erc20,
-        },
-        {
-          ...DUMMY_BALANCE_CHANGE,
-          address: ERC721_TOKEN_MOCK,
-          difference: '0x1',
-          isDecrease: false,
-          id: '0x721',
-          standard: SimulationTokenStandard.erc721,
-        },
-        {
-          ...DUMMY_BALANCE_CHANGE,
-          address: ERC1155_TOKEN_MOCK,
-          difference: '0x13',
-          isDecrease: false,
-          id: '0x1155',
-          standard: SimulationTokenStandard.erc1155,
-        },
-      ],
+      tokenBalanceChanges: [{
+        ...DUMMY_BALANCE_CHANGE,
+        address: ERC20_TOKEN_1_MOCK,
+        difference: '0x123456',
+        isDecrease: false,
+        standard: SimulationTokenStandard.erc20,
+      }, {
+        ...DUMMY_BALANCE_CHANGE,
+        address: ERC20_TOKEN_2_MOCK,
+        difference: '0x123456901',
+        isDecrease: false,
+        standard: SimulationTokenStandard.erc20,
+      }, {
+        ...DUMMY_BALANCE_CHANGE,
+        address: ERC721_TOKEN_MOCK,
+        difference: '0x1',
+        isDecrease: false,
+        id: '0x721',
+        standard: SimulationTokenStandard.erc721,
+      }, {
+        ...DUMMY_BALANCE_CHANGE,
+        address: ERC1155_TOKEN_MOCK,
+        difference: '0x13',
+        isDecrease: false,
+        id: '0x1155',
+        standard: SimulationTokenStandard.erc1155,
+      }],
     },
   },
 };
@@ -150,12 +156,12 @@ export const SendSmallAmount: Story = {
   },
 };
 
-export const MaticNativeAsset: Story = {
+export const PolygonNativeAsset: Story = {
   args: {
     simulationData: {
       nativeBalanceChange: {
         ...DUMMY_BALANCE_CHANGE,
-        difference: '0x123456',
+        difference: '0x9345678923456789',
         isDecrease: true,
       },
       tokenBalanceChanges: [],
@@ -166,6 +172,22 @@ export const MaticNativeAsset: Story = {
   ],
 };
 
+export const ArbitrumNativeAsset: Story = {
+  args: {
+    simulationData: {
+      nativeBalanceChange: {
+        ...DUMMY_BALANCE_CHANGE,
+        difference: '0x9345678923456789',
+        isDecrease: true,
+      },
+      tokenBalanceChanges: [],
+    },
+  },
+  decorators: [
+    (story) => <Provider store={storeMockArbitrum}>{story()}</Provider>,
+  ],
+};
+
 export const ReceiveOnly: Story = {
   args: {
     simulationData: {