diff --git a/shared/constants/network.ts b/shared/constants/network.ts
index cf41cc06f9e3..9e15cffd201f 100644
--- a/shared/constants/network.ts
+++ b/shared/constants/network.ts
@@ -3,14 +3,14 @@ import { capitalize, pick } from 'lodash';
  * A type representing any valid value for 'type' for setProviderType and other
  * methods that add or manipulate networks in MetaMask state.
  */
-export type NetworkType = typeof NETWORK_TYPES[keyof typeof NETWORK_TYPES];
+export type NetworkType = (typeof NETWORK_TYPES)[keyof typeof NETWORK_TYPES];
 
 /**
  * A union type of all possible hard-coded chain ids. This type is not
  * exhaustive and cannot be used for typing chainId in areas where the user or
  * dapp may specify any chainId.
  */
-export type ChainId = typeof CHAIN_IDS[keyof typeof CHAIN_IDS];
+export type ChainId = (typeof CHAIN_IDS)[keyof typeof CHAIN_IDS];
 
 /**
  * A type that is a union type of all possible hardcoded currency symbols.
@@ -18,13 +18,13 @@ export type ChainId = typeof CHAIN_IDS[keyof typeof CHAIN_IDS];
  * or dapp may supply their own symbol.
  */
 export type CurrencySymbol =
-  typeof CURRENCY_SYMBOLS[keyof typeof CURRENCY_SYMBOLS];
+  (typeof CURRENCY_SYMBOLS)[keyof typeof CURRENCY_SYMBOLS];
 /**
  * Test networks have special symbols that combine the network name and 'ETH'
  * so that they are distinct from mainnet and other networks that use 'ETH'.
  */
 export type TestNetworkCurrencySymbol =
-  typeof TEST_NETWORK_TICKER_MAP[keyof typeof TEST_NETWORK_TICKER_MAP];
+  (typeof TEST_NETWORK_TICKER_MAP)[keyof typeof TEST_NETWORK_TICKER_MAP];
 
 /**
  * An object containing preferences for an RPC definition
diff --git a/ui/components/component-library/avatar-network/avatar-network.stories.tsx b/ui/components/component-library/avatar-network/avatar-network.stories.tsx
index d5947c2a981a..36b5eee12d28 100644
--- a/ui/components/component-library/avatar-network/avatar-network.stories.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import {
-  DISPLAY,
+  Display,
   TextColor,
   BackgroundColor,
   BorderColor,
@@ -56,19 +56,19 @@ export default {
     size: AvatarNetworkSize.Md,
     showHalo: false,
   },
-} as ComponentMeta<typeof AvatarNetwork>;
+} as Meta<typeof AvatarNetwork>;
 
-const Template: ComponentStory<typeof AvatarNetwork> = (args) => {
+const Template: StoryFn<typeof AvatarNetwork> = (args) => {
   return <AvatarNetwork {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
-export const SizeStory: ComponentStory<typeof AvatarNetwork> = (args) => (
+export const SizeStory: StoryFn<typeof AvatarNetwork> = (args) => (
   <>
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.flexEnd}
       gap={1}
       marginBottom={4}
@@ -79,7 +79,7 @@ export const SizeStory: ComponentStory<typeof AvatarNetwork> = (args) => (
       <AvatarNetwork {...args} size={AvatarNetworkSize.Lg} />
       <AvatarNetwork {...args} size={AvatarNetworkSize.Xl} />
     </Box>
-    <Box display={DISPLAY.FLEX} alignItems={AlignItems.flexEnd} gap={1}>
+    <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} />
@@ -95,8 +95,8 @@ Name.args = {
   src: '',
 };
 
-export const Src: ComponentStory<typeof AvatarNetwork> = (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" />
@@ -114,10 +114,10 @@ ShowHalo.args = {
   showHalo: true,
 };
 
-export const ColorBackgroundColorAndBorderColor: ComponentStory<
+export const ColorBackgroundColorAndBorderColor: StoryFn<
   typeof AvatarNetwork
 > = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarNetwork
       {...args}
       backgroundColor={BackgroundColor.goerli}
diff --git a/ui/components/component-library/avatar-network/avatar-network.tsx b/ui/components/component-library/avatar-network/avatar-network.tsx
index 912b79a8e4ed..3ef25abfb4e9 100644
--- a/ui/components/component-library/avatar-network/avatar-network.tsx
+++ b/ui/components/component-library/avatar-network/avatar-network.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, Ref } from 'react';
 import classnames from 'classnames';
 import {
-  DISPLAY,
+  Display,
   AlignItems,
   JustifyContent,
   TextColor,
@@ -43,7 +43,7 @@ export const AvatarNetwork = React.forwardRef(
       <AvatarBase
         ref={ref}
         size={size}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
         className={classnames(
diff --git a/ui/components/ui/box/box.d.ts b/ui/components/ui/box/box.d.ts
index 8e8530f7e228..763127fd841e 100644
--- a/ui/components/ui/box/box.d.ts
+++ b/ui/components/ui/box/box.d.ts
@@ -407,4 +407,4 @@ export interface BoxProps extends React.HTMLAttributes<HTMLElement> {
  * {@link https://github.com/MetaMask/metamask-extension/issues/19526}
  */
 declare const Box: React.FC<BoxProps>;
-export default Box;
\ No newline at end of file
+export default Box;