diff --git a/ui/components/ui/account-mismatch-warning/account-mismatch-warning.component.js b/ui/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
index b69f5d854538..d5070a6e9398 100644
--- a/ui/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
+++ b/ui/components/ui/account-mismatch-warning/account-mismatch-warning.component.js
@@ -5,7 +5,7 @@ import Tooltip from '../tooltip';
import { getSelectedAccount } from '../../../selectors';
import InfoIcon from '../icon/info-icon.component';
import { useI18nContext } from '../../../hooks/useI18nContext';
-import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { Severity } from '../../../helpers/constants/design-system';
export default function AccountMismatchWarning({ address }) {
const selectedAccount = useSelector(getSelectedAccount);
@@ -25,7 +25,7 @@ export default function AccountMismatchWarning({ address }) {
className="account-mismatch-warning__tooltip-container-icon"
data-testid="account-mismatch-warning-tooltip"
>
-
+
);
diff --git a/ui/components/ui/account-mismatch-warning/account-mismatch-warning.stories.js b/ui/components/ui/account-mismatch-warning/account-mismatch-warning.stories.js
new file mode 100644
index 000000000000..2614951257ca
--- /dev/null
+++ b/ui/components/ui/account-mismatch-warning/account-mismatch-warning.stories.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import AccountMismatchWarning from './account-mismatch-warning.component';
+
+export default {
+ title: 'Components/UI/AccountMismatchWarning',
+ component: AccountMismatchWarning,
+ argTypes: {
+ address: {
+ control: 'text',
+ },
+ },
+};
+
+export const DefaultStory = (args) => ;
+
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+ address: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
+};