App alert banner

src/components/AppAlert/AppAlert.styles.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+import { CTA, theme } from "@/component-library";
+
+const StyledCloseCTA = styled(CTA)`
+  position: absolute;
+  right: ${theme.spacing.spacing2};
+  top: 0;
+`;
+
+export { StyledCloseCTA };

src/components/AppAlert/AppAlert.tsx

@@ -0,0 +1,29 @@
+import { XMark } from "@/assets/icons";
+import { Alert, Flex, P } from "@/component-library";
+import { LocalStorageKey,useLocalStorage } from "@/hooks/use-local-storage";
+
+import { StyledCloseCTA } from "./AppAlert.styles";
+
+type Props = {
+  alertText: string
+}
+
+const AppAlert = ({ alertText }: Props): 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'>{alertText}</P>
+          </Alert>
+          <StyledCloseCTA style={{ top: 0 }} size='small' variant='text' aria-label='dimiss ledger alert banner' onPress={() => setIsAlertOpen(false)}>
+            <XMark />
+          </StyledCloseCTA>
+        </Flex>
+      )}
+    </>
+  );};
+
+export { AppAlert };

src/components/AppAlert/index.tsx

@@ -0,0 +1 @@
+export { AppAlert } from './AppAlert';

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 alertText='Ledger is not supported on Interlay. Please don&apos;t use Ledger to store your tokens.'/>
+    <Sidebar className={className}>
+      <StyledWrapper>
+        <Topbar />
+        <main>{children}</main>
+      </StyledWrapper>
+    </Sidebar>
+  </>
 );
 
 export { Layout };

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> =