AvatarIcon prod updates and some deprecated fixes (#20557)

* AvatarIcon prod updates and some deprecated fixes

* fix flex display

* fix iconsize on props

* fix IconSize import

* IconSize

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

ui/components/app/permission-cell/permission-cell.js

@@ -13,6 +13,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import {
   AvatarIcon,
+  AvatarIconSize,
   Icon,
   IconName,
   IconSize,
@@ -77,7 +78,7 @@ const PermissionCell = ({
         {typeof permissionIcon === 'string' ? (
           <AvatarIcon
             iconName={permissionIcon}
-            size={IconSize.Md}
+            size={AvatarIconSize.Md}
             iconProps={{
               size: IconSize.Sm,
             }}

ui/components/app/snaps/install-error/install-error.js

@@ -16,7 +16,7 @@ import {
 
 import {
   AvatarIcon,
-  IconSize,
+  AvatarIconSize,
   Text,
   Box,
   BannerAlert,
@@ -35,10 +35,7 @@ const InstallError = ({ title, error, description, iconName }) => {
       {iconName && (
         <AvatarIcon
           iconName={iconName}
-          size={IconSize.Xl}
+          size={AvatarIconSize.Xl}
-          iconProps={{
-            size: IconSize.Xl,
-          }}
           color={IconColor.errorDefault}
           backgroundColor={BackgroundColor.errorMuted}
           marginBottom={4}

ui/components/app/snaps/snap-avatar/snap-avatar.js

@@ -50,7 +50,6 @@ const SnapAvatar = ({
           borderColor={BackgroundColor.backgroundDefault}
           borderWidth={borderWidth}
           iconProps={{
-            size: badgeSize,
             color: IconColor.infoInverse,
           }}
         />

ui/components/app/snaps/snap-delineator/snap-delineator.js

@@ -10,12 +10,13 @@ import {
   IconColor,
   TextVariant,
   TextColor,
+  Display,
 } from '../../../../helpers/constants/design-system';
-import Box from '../../../ui/box';
 import {
   AvatarIcon,
+  AvatarIconSize,
+  Box,
   IconName,
-  IconSize,
   Text,
 } from '../../../component-library';
 import {
@@ -42,19 +43,19 @@ export const SnapDelineator = ({
     >
       <Box
         className="snap-delineator__header"
+        display={Display.Flex}
         alignItems={AlignItems.center}
         padding={1}
       >
         <AvatarIcon
           iconName={IconName.Snaps}
-          size={IconSize.Sm}
+          size={AvatarIconSize.Sm}
           backgroundColor={
             isError ? IconColor.errorDefault : IconColor.infoDefault
           }
           borderColor={BackgroundColor.backgroundDefault}
           borderWidth={2}
           iconProps={{
-            size: IconSize.Sm,
             color: IconColor.infoInverse,
           }}
         />

ui/components/app/snaps/snap-install-warning/snap-install-warning.js

@@ -10,14 +10,18 @@ import {
   IconColor,
   TextVariant,
   TextAlign,
-  Size,
   JustifyContent,
   FontWeight,
 } from '../../../../helpers/constants/design-system';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
-import { AvatarIcon, IconName, Text } from '../../../component-library';
+import {
-import Box from '../../../ui/box/box';
+  AvatarIcon,
+  AvatarIconSize,
+  Box,
+  IconName,
+  Text,
+} from '../../../component-library';
 
 /**
  * a very simple reducer using produce from Immer to keep checkboxes state manipulation
@@ -87,7 +91,7 @@ export default function SnapInstallWarning({
           iconName={IconName.Danger}
           backgroundColor={BackgroundColor.warningMuted}
           color={IconColor.warningDefault}
-          size={Size.XL}
+          size={AvatarIconSize.Xl}
         />
       </Box>
       <Text

ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import Box from '../../../ui/box/box';
 import Popover from '../../../ui/popover';
 import {
   AvatarIcon,
+  AvatarIconSize,
+  Box,
   Button,
   BUTTON_SIZES,
   BUTTON_VARIANT,
   ButtonLink,
   ButtonLinkSize,
   IconName,
-  IconSize,
   Text,
 } from '../../../component-library';
 import {
   AlignItems,
   BackgroundColor,
-  BLOCK_SIZES,
+  BlockSize,
-  DISPLAY,
+  Display,
   FontWeight,
   IconColor,
   JustifyContent,
@@ -43,7 +43,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
           <Box
             marginTop={4}
             className="snap-privacy-warning__header__info-icon"
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             justifyContent={JustifyContent.center}
             alignItems={AlignItems.center}
           >
@@ -51,14 +51,14 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
               iconName={IconName.Info}
               color={IconColor.infoDefault}
               backgroundColor={BackgroundColor.primaryMuted}
-              size={IconSize.Md}
+              size={AvatarIconSize.Md}
             />
           </Box>
           <Box
             className="snap-privacy-warning__header__title"
             marginTop={4}
             marginBottom={4}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             justifyContent={JustifyContent.center}
             alignItems={AlignItems.center}
           >
@@ -119,12 +119,12 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
           <Box
             className="snap-privacy-warning__footer"
             marginTop={6}
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
           >
             <Button
               variant={BUTTON_VARIANT.SECONDARY}
               size={BUTTON_SIZES.LG}
-              width={BLOCK_SIZES.FULL}
+              width={BlockSize.Full}
               className="snap-privacy-warning__cancel-button"
               onClick={onCanceled}
               marginRight={2}
@@ -134,7 +134,7 @@ export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
             <Button
               variant={BUTTON_VARIANT.PRIMARY}
               size={BUTTON_SIZES.LG}
-              width={BLOCK_SIZES.FULL}
+              width={BlockSize.Full}
               className="snap-privacy-warning__ok-button"
               onClick={onAccepted}
               marginLeft={2}

ui/components/app/transaction-icon/transaction-icon.js

@@ -7,11 +7,10 @@ import {
   TransactionStatus,
 } from '../../../../shared/constants/transaction';
 import { captureSingleException } from '../../../store/actions';
-import { AvatarIcon, IconName } from '../../component-library';
+import { AvatarIcon, AvatarIconSize, IconName } from '../../component-library';
 import {
   BackgroundColor,
   IconColor,
-  Size,
 } from '../../../helpers/constants/design-system';
 
 const ICON_MAP = {
@@ -62,7 +61,7 @@ export default function TransactionIcon({ status, category }) {
     return (
       <AvatarIcon
         backgroundColor={BackgroundColor.backgroundAlternative}
-        size={Size.MD}
+        size={AvatarIconSize.Md}
       />
     );
   }
@@ -71,7 +70,7 @@ export default function TransactionIcon({ status, category }) {
     <AvatarIcon
       backgroundColor={backgroundColor}
       iconName={Icon}
-      size={Size.MD}
+      size={AvatarIconSize.Md}
       color={color}
     />
   );

ui/helpers/utils/permission.js

@@ -16,6 +16,7 @@ import {
 import Tooltip from '../../components/ui/tooltip';
 import {
   AvatarIcon,
+  AvatarIconSize,
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
   Icon,
   Text,
@@ -44,7 +45,7 @@ function getLeftIcon(iconName) {
   return (
     <AvatarIcon
       iconName={iconName}
-      size={IconSize.Sm}
+      size={AvatarIconSize.Sm}
       iconProps={{
         size: IconSize.Xs,
       }}

ui/pages/permissions-connect/snaps/snap-result/snap-result.js

@@ -6,22 +6,20 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import Box from '../../../../components/ui/box/box';
 import {
   AlignItems,
-  BLOCK_SIZES,
+  BlockSize,
   BorderStyle,
-  FLEX_DIRECTION,
+  FlexDirection,
-  FONT_WEIGHT,
+  FontWeight,
   JustifyContent,
   TextVariant,
   BackgroundColor,
   IconColor,
   TextAlign,
-  FontWeight,
 } from '../../../../helpers/constants/design-system';
 import {
   AvatarIcon,
+  AvatarIconSize,
   IconName,
-  IconSize,
-  ValidTag,
   Text,
 } from '../../../../components/component-library';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
@@ -64,25 +62,22 @@ export default function SnapResult({
 
     return (
       <Box
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
-        height={BLOCK_SIZES.FULL}
+        height={BlockSize.Full}
         paddingTop={2}
         paddingBottom={2}
       >
         <AvatarIcon
           className="snap-result__header__icon"
           iconName={IconName.Confirmation}
-          size={IconSize.Xl}
+          size={AvatarIconSize.Xl}
-          iconProps={{
-            size: IconSize.Xl,
-          }}
           color={IconColor.successDefault}
           backgroundColor={BackgroundColor.successMuted}
         />
         <Text
-          fontWeight={FONT_WEIGHT.BOLD}
+          fontWeight={FontWeight.Bold}
           variant={TextVariant.headingLg}
           paddingBottom={2}
           marginTop={4}
@@ -91,7 +86,7 @@ export default function SnapResult({
         </Text>
         <Text textAlign={TextAlign.Center}>
           {t('snapResultSuccessDescription', [
-            <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
+            <Text as="span" key="1" fontWeight={FontWeight.Medium}>
               {snapNameToRender}
             </Text>,
           ])}
@@ -108,7 +103,7 @@ export default function SnapResult({
       case 'wallet_installSnap':
         failedScreenTitle = t('snapInstallationErrorTitle');
         failedScreenDescription = t('snapInstallationErrorDescription', [
-          <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
+          <Text as="span" key="1" fontWeight={FontWeight.Medium}>
             {snapNameToRender}
           </Text>,
         ]);
@@ -116,7 +111,7 @@ export default function SnapResult({
       case 'wallet_updateSnap':
         failedScreenTitle = t('snapUpdateErrorTitle');
         failedScreenDescription = t('snapUpdateErrorDescription', [
-          <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Medium}>
+          <Text as="span" key="1" fontWeight={FontWeight.Medium}>
             {snapNameToRender}
           </Text>,
         ]);
@@ -139,9 +134,9 @@ export default function SnapResult({
     <Box
       className="page-container snap-result"
       justifyContent={JustifyContent.spaceBetween}
-      height={BLOCK_SIZES.FULL}
+      height={BlockSize.Full}
       borderStyle={BorderStyle.none}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      flexDirection={FlexDirection.Column}
     >
       <SnapAuthorshipHeader snapId={targetSubjectMetadata.origin} />
       <Box
@@ -149,7 +144,7 @@ export default function SnapResult({
         paddingLeft={4}
         paddingRight={4}
         alignItems={AlignItems.center}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
         style={{
           overflowY: 'auto',
         }}
@@ -157,7 +152,7 @@ export default function SnapResult({
         {isLoading && (
           <Box
             className="snap-result__content__loader-container"
-            flexDirection={FLEX_DIRECTION.COLUMN}
+            flexDirection={FlexDirection.Column}
             alignItems={AlignItems.center}
             justifyContent={JustifyContent.center}
           >
@@ -172,7 +167,7 @@ export default function SnapResult({
       <Box
         className="snap-result__footer"
         alignItems={AlignItems.center}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
         style={{
           boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
         }}