diff --git a/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap b/ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
similarity index 100%
rename from ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.js.snap
rename to ui/components/component-library/avatar-network/__snapshots__/avatar-network.test.tsx.snap
diff --git a/ui/components/component-library/avatar-network/avatar-network.constants.js b/ui/components/component-library/avatar-network/avatar-network.constants.js
deleted file mode 100644
index 50c261eab9c7..000000000000
--- a/ui/components/component-library/avatar-network/avatar-network.constants.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Size } from '../../../helpers/constants/design-system';
-
-export const AVATAR_NETWORK_SIZES = {
-  XS: Size.XS,
-  SM: Size.SM,
-  MD: Size.MD,
-  LG: Size.LG,
-  XL: Size.XL,
-};
diff --git a/ui/components/component-library/avatar-network/avatar-network.js b/ui/components/component-library/avatar-network/avatar-network.js
deleted file mode 100644
index cdc18025df1c..000000000000
--- a/ui/components/component-library/avatar-network/avatar-network.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { AvatarBase } from '../avatar-base';
-import Box from '../../ui/box/box';
-import {
-  Size,
-  DISPLAY,
-  AlignItems,
-  JustifyContent,
-  TextColor,
-  BackgroundColor,
-  BorderColor,
-} from '../../../helpers/constants/design-system';
-import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
-
-export const AvatarNetwork = React.forwardRef(
-  (
-    {
-      size = Size.MD,
-      name,
-      src,
-      showHalo,
-      color = TextColor.textDefault,
-      backgroundColor = BackgroundColor.backgroundAlternative,
-      borderColor = BorderColor.transparent,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [showFallback, setShowFallback] = useState(false);
-
-    useEffect(() => {
-      setShowFallback(!src);
-    }, [src]);
-
-    const fallbackString = name && name[0] ? name[0] : '?';
-
-    const handleOnError = () => {
-      setShowFallback(true);
-    };
-
-    return (
-      <AvatarBase
-        ref={ref}
-        size={size}
-        display={DISPLAY.FLEX}
-        alignItems={AlignItems.center}
-        justifyContent={JustifyContent.center}
-        className={classnames(
-          'mm-avatar-network',
-          showHalo && 'mm-avatar-network--with-halo',
-          className,
-        )}
-        {...{ backgroundColor, borderColor, color, ...props }}
-      >
-        {showFallback ? (
-          fallbackString
-        ) : (
-          <>
-            {showHalo && (
-              <img
-                src={src}
-                className={
-                  showHalo ? 'mm-avatar-network__network-image--blurred' : ''
-                }
-                aria-hidden="true"
-              />
-            )}
-            <img
-              className={
-                showHalo
-                  ? 'mm-avatar-network__network-image--size-reduced'
-                  : 'mm-avatar-network__network-image'
-              }
-              onError={handleOnError}
-              src={src}
-              alt={`${name} logo` || 'network logo'}
-            />
-          </>
-        )}
-      </AvatarBase>
-    );
-  },
-);
-
-AvatarNetwork.propTypes = {
-  /**
-   * The name accepts the string to render the first alphabet of the Avatar Name
-   */
-  name: PropTypes.string,
-  /**
-   * The src accepts the string of the image to be rendered
-   */
-  src: PropTypes.string,
-  /**
-   * The showHalo accepts a boolean prop to render the image with halo effect
-   */
-  showHalo: PropTypes.bool,
-  /**
-   * The size of the AvatarNetwork
-   * Possible values could be Size.XS(16px), Size.SM(24px), Size.MD(32px), Size.LG(40px), Size.XL(48px)
-   * Defaults to Size.MD
-   */
-  size: PropTypes.oneOf(Object.values(AVATAR_NETWORK_SIZES)),
-  /**
-   * The background color of the AvatarNetwork
-   * Defaults to BackgroundColor.backgroundAlternative
-   */
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
-  /**
-   * The background color of the AvatarNetwork
-   * Defaults to BorderColor.borderDefault
-   */
-  borderColor: PropTypes.oneOf(Object.values(BorderColor)),
-  /**
-   * The color of the text inside the AvatarNetwork
-   * Defaults to TextColor.textDefault
-   */
-  color: PropTypes.oneOf(Object.values(TextColor)),
-  /**
-   * Additional classNames to be added to the AvatarNetwork
-   */
-  className: PropTypes.string,
-  /**
-   * AvatarNetwork also accepts all Box props including but not limited to
-   * className, as(change root element of HTML element) and margin props
-   */
-  ...Box.propTypes,
-};
-
-AvatarNetwork.displayName = 'AvatarNetwork';
diff --git a/ui/components/component-library/avatar-network/avatar-network.stories.js b/ui/components/component-library/avatar-network/avatar-network.stories.tsx
similarity index 62%
rename from ui/components/component-library/avatar-network/avatar-network.stories.js
rename to ui/components/component-library/avatar-network/avatar-network.stories.tsx
index 811864f69bb2..36b5eee12d28 100644
--- a/ui/components/component-library/avatar-network/avatar-network.stories.js
+++ b/ui/components/component-library/avatar-network/avatar-network.stories.tsx
@@ -1,20 +1,19 @@
 import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  Size,
-  DISPLAY,
+  Display,
   TextColor,
   BackgroundColor,
   BorderColor,
-  Color,
   AlignItems,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box/box';
 
+import { AvatarNetworkSize } from './avatar-network.types';
 import README from './README.mdx';
 
 import { AvatarNetwork } from './avatar-network';
-import { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
 
 export default {
   title: 'Components/ComponentLibrary/AvatarNetwork',
@@ -27,7 +26,7 @@ export default {
   argTypes: {
     size: {
       control: 'select',
-      options: Object.values(AVATAR_NETWORK_SIZES),
+      options: Object.values(AvatarNetworkSize),
     },
     color: {
       options: Object.values(TextColor),
@@ -54,38 +53,38 @@ export default {
   args: {
     name: 'Arbitrum One',
     src: './images/arbitrum.svg',
-    size: Size.MD,
+    size: AvatarNetworkSize.Md,
     showHalo: false,
   },
-};
+} as Meta<typeof AvatarNetwork>;
 
-const Template = (args) => {
+const Template: StoryFn<typeof AvatarNetwork> = (args) => {
   return <AvatarNetwork {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory = (args) => (
+export const SizeStory: StoryFn<typeof AvatarNetwork> = (args) => (
   <>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={1}
       marginBottom={4}
     >
-      <AvatarNetwork {...args} size={Size.XS} />
-      <AvatarNetwork {...args} size={Size.SM} />
-      <AvatarNetwork {...args} size={Size.MD} />
-      <AvatarNetwork {...args} size={Size.LG} />
-      <AvatarNetwork {...args} size={Size.XL} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Xs} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Sm} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Md} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Lg} />
+      <AvatarNetwork {...args} size={AvatarNetworkSize.Xl} />
     </Box>
-    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={1}>
-      <AvatarNetwork {...args} src="" size={Size.XS} />
-      <AvatarNetwork {...args} src="" size={Size.SM} />
-      <AvatarNetwork {...args} src="" size={Size.MD} />
-      <AvatarNetwork {...args} src="" size={Size.LG} />
-      <AvatarNetwork {...args} src="" size={Size.XL} />
+    <Box display={Display.Flex} alignItems={AlignItems.flexEnd} gap={1}>
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Xs} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Sm} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Md} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Lg} />
+      <AvatarNetwork {...args} src="" size={AvatarNetworkSize.Xl} />
     </Box>
   </>
 );
@@ -96,8 +95,8 @@ Name.args = {
   src: '',
 };
 
-export const Src = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const Src: StoryFn<typeof AvatarNetwork> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarNetwork {...args} src="./images/matic-token.png" />
     <AvatarNetwork {...args} src="./images/arbitrum.svg" />
     <AvatarNetwork {...args} src="./images/optimism.svg" />
@@ -115,21 +114,23 @@ ShowHalo.args = {
   showHalo: true,
 };
 
-export const ColorBackgroundColorAndBorderColor = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+export const ColorBackgroundColorAndBorderColor: StoryFn<
+  typeof AvatarNetwork
+> = (args) => (
+  <Box display={Display.Flex} gap={1}>
     <AvatarNetwork
       {...args}
       backgroundColor={BackgroundColor.goerli}
       borderColor={BorderColor.goerli}
       name="G"
-      color={Color.goerliInverse}
+      color={TextColor.goerliInverse}
     />
     <AvatarNetwork
       {...args}
       backgroundColor={BackgroundColor.sepolia}
       borderColor={BorderColor.sepolia}
       name="S"
-      color={Color.goerliInverse}
+      color={TextColor.goerliInverse}
     />
   </Box>
 );
diff --git a/ui/components/component-library/avatar-network/avatar-network.test.js b/ui/components/component-library/avatar-network/avatar-network.test.tsx
similarity index 89%
rename from ui/components/component-library/avatar-network/avatar-network.test.js
rename to ui/components/component-library/avatar-network/avatar-network.test.tsx
index 4eb5ed202424..d458fcf12606 100644
--- a/ui/components/component-library/avatar-network/avatar-network.test.js
+++ b/ui/components/component-library/avatar-network/avatar-network.test.tsx
@@ -19,7 +19,7 @@ describe('AvatarNetwork', () => {
 
   it('should render correctly', () => {
     const { getByTestId, container } = render(
-      <AvatarNetwork data-testid="avatar-network" />,
+      <AvatarNetwork {...args} data-testid="avatar-network" />,
     );
     expect(getByTestId('avatar-network')).toBeDefined();
     expect(container).toMatchSnapshot();
@@ -56,7 +56,11 @@ describe('AvatarNetwork', () => {
   // className
   it('should render with custom className', () => {
     const { getByTestId } = render(
-      <AvatarNetwork data-testid="avatar-network" className="test-class" />,
+      <AvatarNetwork
+        {...args}
+        data-testid="avatar-network"
+        className="test-class"
+      />,
     );
     expect(getByTestId('avatar-network')).toHaveClass('test-class');
   });
@@ -65,10 +69,12 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           color={TextColor.successDefault}
           data-testid={TextColor.successDefault}
         />
         <AvatarNetwork
+          {...args}
           color={TextColor.errorDefault}
           data-testid={TextColor.errorDefault}
         />
@@ -86,10 +92,12 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           backgroundColor={BackgroundColor.successDefault}
           data-testid={BackgroundColor.successDefault}
         />
         <AvatarNetwork
+          {...args}
           backgroundColor={BackgroundColor.errorDefault}
           data-testid={BackgroundColor.errorDefault}
         />
@@ -107,10 +115,12 @@ describe('AvatarNetwork', () => {
     const { getByTestId } = render(
       <>
         <AvatarNetwork
+          {...args}
           borderColor={BorderColor.successDefault}
           data-testid={BorderColor.successDefault}
         />
         <AvatarNetwork
+          {...args}
           borderColor={BorderColor.errorDefault}
           data-testid={BorderColor.errorDefault}
         />
@@ -124,9 +134,11 @@ describe('AvatarNetwork', () => {
     );
   });
   it('should forward a ref to the root html element', () => {
-    const ref = React.createRef();
-    render(<AvatarNetwork ref={ref} />);
+    const ref = React.createRef<HTMLDivElement>();
+    render(<AvatarNetwork {...args} ref={ref} />);
     expect(ref.current).not.toBeNull();
-    expect(ref.current.nodeName).toBe('DIV');
+    if (ref.current) {
+      expect(ref.current.nodeName).toBe('DIV');
+    }
   });
 });
diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
new file mode 100644
index 000000000000..3ef25abfb4e9
--- /dev/null
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -0,0 +1,86 @@
+import React, { useState, useEffect, Ref } from 'react';
+import classnames from 'classnames';
+import {
+  Display,
+  AlignItems,
+  JustifyContent,
+  TextColor,
+  BackgroundColor,
+  BorderColor,
+} from '../../../helpers/constants/design-system';
+import { AvatarBase } from '../avatar-base';
+
+import { AvatarNetworkProps, AvatarNetworkSize } from './avatar-network.types';
+
+export const AvatarNetwork = React.forwardRef(
+  (
+    {
+      size = AvatarNetworkSize.Md,
+      name,
+      src,
+      showHalo,
+      color = TextColor.textDefault,
+      backgroundColor = BackgroundColor.backgroundAlternative,
+      borderColor = BorderColor.transparent,
+      className = '',
+      ...props
+    }: AvatarNetworkProps,
+    ref: Ref<HTMLElement>,
+  ) => {
+    const [showFallback, setShowFallback] = useState(false);
+
+    useEffect(() => {
+      setShowFallback(!src);
+    }, [src]);
+
+    const fallbackString = name?.[0] ?? '?';
+
+    const handleOnError = () => {
+      setShowFallback(true);
+    };
+
+    return (
+      <AvatarBase
+        ref={ref}
+        size={size}
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        className={classnames(
+          'mm-avatar-network',
+          showHalo ? 'mm-avatar-network--with-halo' : '',
+          className,
+        )}
+        {...{ backgroundColor, borderColor, color, ...props }}
+      >
+        {showFallback ? (
+          fallbackString
+        ) : (
+          <>
+            {showHalo && (
+              <img
+                src={src}
+                className={
+                  showHalo ? 'mm-avatar-network__network-image--blurred' : ''
+                }
+                aria-hidden="true"
+              />
+            )}
+            <img
+              className={
+                showHalo
+                  ? 'mm-avatar-network__network-image--size-reduced'
+                  : 'mm-avatar-network__network-image'
+              }
+              onError={handleOnError}
+              src={src}
+              alt={`${name} logo` || 'network logo'}
+            />
+          </>
+        )}
+      </AvatarBase>
+    );
+  },
+);
+
+AvatarNetwork.displayName = 'AvatarNetwork';
diff --git a/ui/components/component-library/avatar-network/avatar-network.types.ts b/ui/components/component-library/avatar-network/avatar-network.types.ts
new file mode 100644
index 000000000000..25b57d23eab1
--- /dev/null
+++ b/ui/components/component-library/avatar-network/avatar-network.types.ts
@@ -0,0 +1,33 @@
+import { AvatarBaseProps } from '../avatar-base/avatar-base.types';
+
+export enum AvatarNetworkSize {
+  Xs = 'xs',
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+  Xl = 'xl',
+}
+
+/**
+ * Props for the AvatarNetwork component
+ */
+export interface AvatarNetworkProps extends Omit<AvatarBaseProps, 'children'> {
+  /**
+   * The name accepts the string to render the first alphabet of the Avatar Name
+   */
+  name: string;
+  /**
+   * The src accepts the string of the image to be rendered
+   */
+  src?: string;
+  /**
+   * The showHalo accepts a boolean prop to render the image with halo effect
+   */
+  showHalo?: boolean;
+  /**
+   * The size of the AvatarNetwork
+   * Possible values could be AvatarNetworkSize.Xs(16px), AvatarNetworkSize.Sm(24px), AvatarNetworkSize.Md(32px), AvatarNetworkSize.Lg(40px), AvatarNetworkSize.Xl(48px)
+   * Defaults to AvatarNetworkSize.Md
+   */
+  size?: AvatarNetworkSize;
+}
diff --git a/ui/components/component-library/avatar-network/index.js b/ui/components/component-library/avatar-network/index.js
deleted file mode 100644
index 538d367582fc..000000000000
--- a/ui/components/component-library/avatar-network/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { AvatarNetwork } from './avatar-network';
-export { AVATAR_NETWORK_SIZES } from './avatar-network.constants';
diff --git a/ui/components/component-library/avatar-network/index.ts b/ui/components/component-library/avatar-network/index.ts
new file mode 100644
index 000000000000..93d20bceb659
--- /dev/null
+++ b/ui/components/component-library/avatar-network/index.ts
@@ -0,0 +1,3 @@
+export { AvatarNetwork } from './avatar-network';
+export type { AvatarNetworkProps } from './avatar-network.types';
+export { AvatarNetworkSize } from './avatar-network.types';
diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js
index 564643063982..e6427dd481a5 100644
--- a/ui/components/component-library/index.js
+++ b/ui/components/component-library/index.js
@@ -6,7 +6,7 @@ export {
 } from './avatar-account';
 export { AvatarFavicon, AVATAR_FAVICON_SIZES } from './avatar-favicon';
 export { AvatarIcon, AVATAR_ICON_SIZES } from './avatar-icon';
-export { AvatarNetwork, AVATAR_NETWORK_SIZES } from './avatar-network';
+export { AvatarNetwork, AvatarNetworkSize } from './avatar-network';
 export { AvatarToken } from './avatar-token';
 export { AvatarBase } from './avatar-base';
 export {