From 8b93092e0e3a089c8ee955af09efeed885c133f6 Mon Sep 17 00:00:00 2001
From: Subhajit Ghosh <99127578+subhajit20@users.noreply.github.com>
Date: Wed, 30 Aug 2023 22:17:12 +0530
Subject: [PATCH] Declared <IconWithFallback/> as deprecated (#20656)

* Add the deprecation JSDoc format below to the deprecated code and added deprecation notice to the icon-with-fallback.stories.js

* Declared <IconWithFallback/> as deprecated
---
 .../icon-with-fallback.component.js           |  9 ++++++
 .../icon-with-fallback.stories.js             | 32 +++++++++++++++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js b/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
index 62be33e94..93ade0dcb 100644
--- a/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
+++ b/ui/components/ui/icon-with-fallback/icon-with-fallback.component.js
@@ -2,6 +2,15 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
+/**
+ * @deprecated The `<IconWithFallback />` component has been deprecated in favor of the new `<AvatarNetwork />` or `<AvatarFavicon />` component from the component-library.
+ * Please update your code to use the new `<AvatarNetwork />` or `<AvatarFavicon />` component instead, which can be found at ui/components/component-library.
+ * You can find documentation for the new `AvatarNetwork` or `AvatarFavicon` component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatarnetwork--docs}
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-avatarfavicon--docs}
+ * If you would like to help with the replacement of the old `IconWithFallback` component, please submit a pull request
+ */
+
 const IconWithFallback = ({
   name = '',
   icon = null,
diff --git a/ui/components/ui/icon-with-fallback/icon-with-fallback.stories.js b/ui/components/ui/icon-with-fallback/icon-with-fallback.stories.js
index c81a3479a..6659e2557 100644
--- a/ui/components/ui/icon-with-fallback/icon-with-fallback.stories.js
+++ b/ui/components/ui/icon-with-fallback/icon-with-fallback.stories.js
@@ -1,8 +1,26 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
+import { BannerAlert } from '../../component-library';
+import { Severity } from '../../../helpers/constants/design-system';
 import README from './README.mdx';
 import IconWithFallback from '.';
 
+const Deprecated = ({ children }) => (
+  <>
+    <BannerAlert
+      severity={Severity.Warning}
+      title="Deprecated"
+      description="<IconWithFallback/> has been deprecated in favor of <AvatarNetwork/>"
+      marginBottom={4}
+    />
+    {children}
+  </>
+);
+
+Deprecated.propTypes = {
+  children: PropTypes.node,
+};
+
 export default {
   title: 'Components/UI/IconWithFallback',
 
@@ -31,7 +49,11 @@ export default {
   },
 };
 
-export const DefaultStory = (args) => <IconWithFallback {...args} />;
+export const DefaultStory = (args) => (
+  <Deprecated>
+    <IconWithFallback {...args} />
+  </Deprecated>
+);
 
 DefaultStory.storyName = 'Default';
 
@@ -41,7 +63,11 @@ DefaultStory.args = {
   size: 24,
 };
 
-export const Fallback = (args) => <IconWithFallback {...args} />;
+export const Fallback = (args) => (
+  <Deprecated>
+    <IconWithFallback {...args} />
+  </Deprecated>
+);
 
 Fallback.args = {
   name: 'ast',