Fix/18884 migrate avatar network

ui/components/app/add-network/add-network.js

@@ -14,7 +14,6 @@ import {
   BackgroundColor,
   TextColor,
   IconColor,
-  Size,
 } from '../../../helpers/constants/design-system';
 import Button from '../../ui/button';
 import Tooltip from '../../ui/tooltip';
@@ -40,6 +39,7 @@ import {
   IconName,
   IconSize,
   AvatarNetwork,
+  AvatarNetworkSize,
   Text,
 } from '../../component-library';
 import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics';
@@ -199,7 +199,7 @@ const AddNetwork = () => {
               >
                 <Box display={Display.Flex} alignItems={AlignItems.center}>
                   <AvatarNetwork
-                    size={Size.SM}
+                    size={AvatarNetworkSize.Sm}
                     src={item.rpcPrefs?.imageUrl}
                     name={item.nickname}
                   />

ui/components/app/transaction-list-item/smart-transaction-list-item.component.js

@@ -18,14 +18,14 @@ import TransactionListItemDetails from '../transaction-list-item-details';
 import { ActivityListItem } from '../../multichain';
 import {
   AvatarNetwork,
+  AvatarNetworkSize,
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
   Box,
 } from '../../component-library';
 import {
   BackgroundColor,
   Display,
-  Size,
 } from '../../../helpers/constants/design-system';
 import { getCurrentNetwork } from '../../../selectors';
 
@@ -77,7 +77,7 @@ export default function SmartTransactionListItem({
               <AvatarNetwork
                 className="activity-tx__network-badge"
                 data-testid="activity-tx-network-badge"
-                size={Size.XS}
+                size={AvatarNetworkSize.Xs}
                 name={currentChain?.nickname}
                 src={currentChain?.rpcPrefs?.imageUrl}
                 borderWidth={1}

ui/components/app/transaction-list-item/transaction-list-item.component.js

@@ -18,12 +18,12 @@ import {
   Color,
   Display,
   FontWeight,
-  Size,
   TextAlign,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
+  AvatarNetworkSize,
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
   Box,
@@ -273,7 +273,7 @@ function TransactionListItemInner({
                 <AvatarNetwork
                   className="activity-tx__network-badge"
                   data-testid="activity-tx-network-badge"
-                  size={Size.XS}
+                  size={AvatarNetworkSize.Xs}
                   name={currentChain?.nickname}
                   src={currentChain?.rpcPrefs?.imageUrl}
                   borderWidth={1}

ui/components/component-library/avatar-base/avatar-base.tsx

@@ -15,7 +15,7 @@ import {
 
 import type { PolymorphicRef } from '../box';
 import { Text } from '../text';
-
+import type { TextProps } from '../text';
 import {
   AvatarBaseComponent,
   AvatarBaseProps,
@@ -60,7 +60,7 @@ export const AvatarBase: AvatarBaseComponent = React.forwardRef(
         variant={fallbackTextVariant}
         textTransform={TextTransform.Uppercase}
         {...{ backgroundColor, borderColor, color }}
-        {...props} // TODO: There is a typing issue with spreading props to the Box component. It still works but TypeScript complains.
+        {...(props as TextProps<C>)}
       >
         {children}
       </Text>

ui/components/component-library/avatar-base/avatar-base.types.ts

@@ -14,7 +14,7 @@ export enum AvatarBaseSize {
   Xl = 'xl',
 }
 
-export interface Props extends TextStyleUtilityProps {
+export interface AvatarBaseStyleUtilityProps extends TextStyleUtilityProps {
   /**
    * The size of the AvatarBase.
    * Possible values could be 'AvatarBaseSize.Xs'(16px), 'AvatarBaseSize.Sm'(24px),
@@ -48,7 +48,7 @@ export interface Props extends TextStyleUtilityProps {
 }
 
 export type AvatarBaseProps<C extends React.ElementType> =
-  PolymorphicComponentPropWithRef<C, Props>;
+  PolymorphicComponentPropWithRef<C, AvatarBaseStyleUtilityProps>;
 
 export type AvatarBaseComponent = <C extends React.ElementType = 'span'>(
   props: AvatarBaseProps<C>,

ui/components/component-library/avatar-network/README.mdx

@@ -12,7 +12,7 @@ The `AvatarNetwork` is a component responsible for display of the image of a giv
 
 ## Props
 
-The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
+The `AvatarNetwork` accepts all props below as well as all [Box](/docs/components-componentlibrary-box--docs#props) component props
 
 <ArgsTable of={AvatarNetwork} />
 
@@ -37,13 +37,13 @@ The fallback display of the `AvatarNetwork` is a circle with the initial letter
 </Canvas>
 
 ```jsx
-import { Size } from '../../../helpers/constants/design-system';
-import { AvatarNetwork } from '../../component-library';
-<AvatarNetwork size={Size.XS} />
-<AvatarNetwork size={Size.SM} />
-<AvatarNetwork size={Size.MD} />
-<AvatarNetwork size={Size.LG} />
-<AvatarNetwork size={Size.XL} />
+import { AvatarNetwork, AvatarNetworkSize } from '../../component-library';
+
+<AvatarNetwork size={AvatarNetworkSize.Xs} />
+<AvatarNetwork size={AvatarNetworkSize.Sm} />
+<AvatarNetwork size={AvatarNetworkSize.Md} />
+<AvatarNetwork size={AvatarNetworkSize.Lg} />
+<AvatarNetwork size={AvatarNetworkSize.Xl} />
 ```
 
 ### Name

ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap → ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap

@@ -6,7 +6,11 @@ exports[`AvatarNetwork should render correctly 1`] = `
     class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network 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 mm-box--border-color-transparent box--border-style-solid box--border-width-1"
     data-testid="avatar-network"
   >
-    ?
+    <img
+      alt="ethereum logo"
+      class="mm-avatar-network__network-image"
+      src="./images/eth_logo.png"
+    />
   </div>
 </div>
 `;