From 821888effdf19aab2665f42e7995d4dd8117c04d Mon Sep 17 00:00:00 2001
From: Dhruv <79097544+dhruvv173@users.noreply.github.com>
Date: Wed, 19 Jul 2023 15:06:21 +0530
Subject: [PATCH] replacing deprecated constants and components (#20070)

---
 .../signature-request-original-warning.js     | 46 +++++++++----------
 ...nature-request-original-warning.stories.js | 31 +++++++++++++
 2 files changed, 52 insertions(+), 25 deletions(-)
 create mode 100644 ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.stories.js

diff --git a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
index 13ac14b76..c792ddb38 100644
--- a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
+++ b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
@@ -3,21 +3,18 @@ import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 import Popover from '../../../ui/popover';
-import Box from '../../../ui/box';
-import Button from '../../../ui/button';
-import Typography from '../../../ui/typography';
 import {
   IconColor,
-  DISPLAY,
-  FLEX_DIRECTION,
-  FONT_WEIGHT,
+  Display,
+  FlexDirection,
+  FontWeight,
   JustifyContent,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import Identicon from '../../../ui/identicon';
 import { shortenAddress } from '../../../../helpers/utils/util';
-import { Icon, IconName } from '../../../component-library';
+import { Icon, IconName, Box, Text, Button } from '../../../component-library';
 
 const SignatureRequestOriginalWarning = ({
   senderAddress,
@@ -30,8 +27,8 @@ const SignatureRequestOriginalWarning = ({
   return (
     <Popover className="signature-request-warning__content">
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         padding={4}
         className="signature-request-warning__content__header"
       >
@@ -40,37 +37,36 @@ const SignatureRequestOriginalWarning = ({
           color={IconColor.errorDefault}
           className="signature-request-warning__content__header__warning-icon"
         />
-        <Typography
-          variant={TypographyVariant.H4}
-          fontWeight={FONT_WEIGHT.BOLD}
-        >
+        <Text variant={TextVariant.headingSm} fontWeight={FontWeight.Bold}>
           {t('yourFundsMayBeAtRisk')}
-        </Typography>
+        </Text>
       </Box>
       <Box
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         padding={4}
         justifyContent={JustifyContent.spaceBetween}
         className="signature-request-warning__content__account"
       >
-        <Box display={DISPLAY.FLEX}>
+        <Box display={Display.Flex}>
           <Identicon address={senderAddress} diameter={32} />
-          <Typography
-            variant={TypographyVariant.H5}
+          <Text
+            variant={TextVariant.bodyMd}
+            as="h5"
             marginLeft={2}
             className="signature-request-warning__content__account-name"
           >
             <b>{name}</b> {` (${shortenAddress(senderAddress)})`}
-          </Typography>
+          </Text>
         </Box>
       </Box>
 
-      <Typography
+      <Text
         color={TextColor.textAlternative}
         margin={4}
         marginTop={4}
         marginBottom={4}
-        variant={TypographyVariant.H6}
+        variant={TextVariant.bodySm}
+        as="h6"
       >
         {t('signatureRequestWarning', [
           <a
@@ -84,11 +80,11 @@ const SignatureRequestOriginalWarning = ({
             {t('learnMoreUpperCase')}
           </a>,
         ])}
-      </Typography>
+      </Text>
 
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.spaceBetween}
         padding={4}
         className="signature-request-warning__footer"
diff --git a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.stories.js b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.stories.js
new file mode 100644
index 000000000..1650b4eda
--- /dev/null
+++ b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.stories.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import SignatureRequestOriginalWarning from './signature-request-original-warning';
+
+export default {
+  title: 'Components/App/SignatureRequestOriginalWarning',
+  component: SignatureRequestOriginalWarning,
+  argTypes: {
+    senderAddress: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+    onSubmit: {
+      action: 'onSubmit',
+    },
+    onCancel: {
+      action: 'onCancel',
+    },
+  },
+  args: {
+    senderAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+    name: 'John Doe',
+  },
+};
+
+export const DefaultStory = (args) => (
+  <SignatureRequestOriginalWarning {...args} />
+);
+
+DefaultStory.storyName = 'Default';