From b6ad074b9a0384490fdaa848d9655ca6b7de77c5 Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Tue, 29 Aug 2023 04:36:56 +0530
Subject: [PATCH] deprecating NetworkDisplay in favour of PickerNetwork
 (#20619)

---
 .../app/network-display/network-display.js    |  9 ++++++
 .../network-display.stories.js                | 30 ++++++++++++++-----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js
index e3d8392bb..d4b81ec38 100644
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@@ -22,6 +22,15 @@ import { Icon, IconName, IconSize } from '../../component-library';
 import { getProviderConfig } from '../../../ducks/metamask/metamask';
 import { getNetworkLabelKey } from '../../../helpers/utils/i18n-helper';
 
+/**
+ * @deprecated The `<NetworkDisplay />` component has been deprecated in favor of the new `<PickerNetwork>` component from the component-library.
+ * Please update your code to use the new `<PickerNetwork>` component instead, which can be found at ui/components/component-library/picker-network/picker-network.tsx.
+ * You can find documentation for the new `PickerNetwork` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-pickernetwork--docs}
+ * If you would like to help with the replacement of the old `NetworkDisplay` component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20485}
+ */
+
 export default function NetworkDisplay({
   indicatorSize,
   disabled,
diff --git a/ui/components/app/network-display/network-display.stories.js b/ui/components/app/network-display/network-display.stories.js
index dea51b761..5a67dc676 100644
--- a/ui/components/app/network-display/network-display.stories.js
+++ b/ui/components/app/network-display/network-display.stories.js
@@ -4,8 +4,9 @@ import {
   BUILT_IN_NETWORKS,
   NETWORK_TYPES,
 } from '../../../../shared/constants/network';
-import { Size } from '../../../helpers/constants/design-system';
+import { Severity, Size } from '../../../helpers/constants/design-system';
 
+import { BannerAlert } from '../../component-library/banner-alert';
 import NetworkDisplay from '.';
 
 export default {
@@ -38,13 +39,26 @@ export default {
 };
 
 export const DefaultStory = (args) => (
-  <NetworkDisplay
-    {...args}
-    targetNetwork={{
-      type: args.targetNetwork,
-      nickname: args.targetNetwork,
-    }}
-  />
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="The <NetworkDisplay> component has been deprecated in favor of the new <PickerNetwork> component from the component-library.
+        Please update your code to use the new <PickerNetwork> component instead, which can be found at ui/components/component-library/picker-network/picker-network.tsx."
+      actionButtonLabel="See details"
+      actionButtonProps={{
+        href: 'https://github.com/MetaMask/metamask-extension/issues/20485',
+      }}
+      marginBottom={4}
+    />
+    <NetworkDisplay
+      {...args}
+      targetNetwork={{
+        type: args.targetNetwork,
+        nickname: args.targetNetwork,
+      }}
+    />
+  </>
 );
 
 DefaultStory.storyName = 'Default';