wip: alert banner

interlay · Feb 26, 2025 · 6706043 · 6706043
1 parent 3d75d3d
commit 6706043
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/src/components/AppAlert/AppAlert.styles.tsx b/src/components/AppAlert/AppAlert.styles.tsx
diff --git a/src/components/AppAlert/AppAlert.tsx 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
@@ -0,0 +1 @@
+export { AppAlert } from './AppAlert';
diff --git 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
@@ -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> =