From 6706043723c3d5662aca825ffeaa14e9956f2a15 Mon Sep 17 00:00:00 2001
From: Tom Jeatt <hello@tomjeatt.com>
Date: Wed, 26 Feb 2025 08:57:05 +0000
Subject: [PATCH] wip: alert banner

---
 src/components/AppAlert/AppAlert.styles.tsx |  0
 src/components/AppAlert/AppAlert.tsx        | 24 +++++++++++++++++++++
 src/components/AppAlert/index.tsx           |  1 +
 src/components/Layout/Layout.tsx            | 16 ++++++++------
 src/hooks/use-local-storage.ts              |  4 +++-
 5 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 src/components/AppAlert/AppAlert.styles.tsx
 create mode 100644 src/components/AppAlert/AppAlert.tsx
 create mode 100644 src/components/AppAlert/index.tsx

diff --git a/src/components/AppAlert/AppAlert.styles.tsx b/src/components/AppAlert/AppAlert.styles.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/AppAlert/AppAlert.tsx b/src/components/AppAlert/AppAlert.tsx
new file mode 100644
index 0000000000..511af0e5c2
--- /dev/null
+++ b/src/components/AppAlert/AppAlert.tsx
@@ -0,0 +1,24 @@
+import { Alert, Flex, P } from "@/component-library";
+import { StyledCloseCTA } from "@/component-library/Dialog/Dialog.style";
+import { LocalStorageKey,useLocalStorage } from "@/hooks/use-local-storage";
+import { StyledXMark } from "@/pages/Wallet/WalletOverview/components/WelcomeBanner/WelcomeBanner.styles";
+
+const AppAlert = (): JSX.Element => {
+  const [isAlertOpen, setIsAlertOpen] = useLocalStorage(LocalStorageKey.APP_ALERT_BANNER, true);
+
+  return (
+    <>
+      {isAlertOpen && (
+        <Flex>
+          <Alert style={{ borderLeft: 0, borderRight: 0, borderTop: 0, borderRadius: 0, width: '100%' }} status='info'>
+            <P size='s'>Ledger is not supported on Interlay. Please don&apos;t use Ledger to store your tokens.</P>
+          </Alert>
+          <StyledCloseCTA size='small' variant='text' aria-label='dimiss ledger alert banner' onPress={() => setIsAlertOpen(false)}>
+            <StyledXMark />
+          </StyledCloseCTA>
+        </Flex>
+      )}
+    </>
+  );};
+
+export { AppAlert };
diff --git a/src/components/AppAlert/index.tsx b/src/components/AppAlert/index.tsx
new file mode 100644
index 0000000000..3d4f29c994
--- /dev/null
+++ b/src/components/AppAlert/index.tsx
@@ -0,0 +1 @@
+export { AppAlert } from './AppAlert';
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index dc82b1cdb6..14c3ddaef1 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,5 +1,6 @@
 import Sidebar from '../../legacy-components/Sidebar';
 import Topbar from '../../legacy-components/Topbar';
+import { AppAlert } from '../AppAlert';
 import { StyledWrapper } from './Layout.styles';
 
 interface Props {
@@ -8,12 +9,15 @@ interface Props {
 }
 
 const Layout = ({ className, children }: Props): JSX.Element => (
-  <Sidebar className={className}>
-    <StyledWrapper>
-      <Topbar />
-      <main>{children}</main>
-    </StyledWrapper>
-  </Sidebar>
+  <>
+    <AppAlert />
+    <Sidebar className={className}>
+      <StyledWrapper>
+        <Topbar />
+        <main>{children}</main>
+      </StyledWrapper>
+    </Sidebar>
+  </>
 );
 
 export { Layout };
diff --git a/src/hooks/use-local-storage.ts b/src/hooks/use-local-storage.ts
index 512bff8496..36bd83acc0 100644
--- a/src/hooks/use-local-storage.ts
+++ b/src/hooks/use-local-storage.ts
@@ -2,12 +2,14 @@ import { useLocalStorage as useLibLocalStorage } from 'react-use';
 
 enum LocalStorageKey {
   TC_SIGNATURES = 'TC_SIGNATURES',
-  WALLET_WELCOME_BANNER = 'WALLET_WELCOME_BANNER'
+  WALLET_WELCOME_BANNER = 'WALLET_WELCOME_BANNER',
+  APP_ALERT_BANNER = 'APP_ALERT_BANNER'
 }
 
 type LocalStorageValueTypes = {
   [LocalStorageKey.TC_SIGNATURES]: { [account: string]: { version: string; isSigned: boolean } | boolean };
   [LocalStorageKey.WALLET_WELCOME_BANNER]: boolean;
+  [LocalStorageKey.APP_ALERT_BANNER]: boolean;
 };
 
 type Options<T = unknown> =