feat: add wanrning banner

packages/site/src/App.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode, useContext } from 'react';
 import styled from 'styled-components';
-import { Footer, Header } from './components';
+import { Footer, Header, AlertBanner, AlertType } from './components';
 
 import { GlobalStyle } from './config/theme';
 import { ToggleThemeContext } from './Root';
@@ -13,6 +13,12 @@ const Wrapper = styled.div`
   max-width: 100vw;
 `;
 
+const BannerWrapper = styled.div`
+  padding-top: 25px;
+  padding-left: 5%;
+  padding-right: 5%;
+`;
+
 export type AppProps = {
   children: ReactNode;
 };
@@ -29,6 +35,14 @@ export const App: FunctionComponent<AppProps> = ({ children }) => {
       <GlobalStyle />
       <Wrapper>
         <Header handleToggleClick={toggleTheme} />
+        <BannerWrapper>
+          <AlertBanner
+            title={
+              `This software is in the early stages of development and may contain bugs, vulnerabilities and has not undergone a security audit. DO NOT use it to store real assets.`
+            }
+            alertType={AlertType.Failure}
+          />
+        </BannerWrapper>
         {children}
         <Footer />
       </Wrapper>

packages/site/src/components/AlertBanner.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  BsFillCheckCircleFill,
+  BsFillExclamationTriangleFill,
+} from 'react-icons/bs';
+import styled from 'styled-components';
+
+const StyledAlertContainer = styled.div`
+  background-color: ${({ error }: { error?: boolean }) =>
+    error ? '#f8ebed' : '#ebf6ed'};
+  width: 100%;
+  height: 40px;
+  margin: 10px 0px 10px 0px;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    height: 50px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    height: 145px;
+  }
+`;
+
+const Side = styled.div`
+  min-width: 5px;
+  max-width: 5px;
+  height: 100%;
+  background-color: ${({ error }: { error?: boolean }) =>
+    error ? '#d73847' : '#28a745'};
+  border-radius: 4px 0px 0px 4px;
+  flex: 1;
+`;
+
+const AlertIcon = styled(BsFillExclamationTriangleFill)`
+  margin: 13px 5px 13px 8px;
+  color: #d73847;
+`;
+
+const CheckIcon = styled(BsFillCheckCircleFill)`
+  margin: 13px 5px 13px 8px;
+  color: #28a745;
+`;
+
+const StyledTitle = styled.p`
+  margin: 10px 5px;
+  color: black;
+
+  /* Body-LG-Medium */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+`;
+
+export enum AlertType {
+  Success = 'success',
+  Failure = 'failure',
+}
+
+export const AlertBanner = ({
+  title,
+  alertType,
+}: {
+  title: string;
+  alertType: AlertType;
+}) => {
+  const icon = () => {
+    switch (alertType) {
+      case AlertType.Failure:
+        return <AlertIcon />;
+      case AlertType.Success:
+        return <CheckIcon />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <StyledAlertContainer error={alertType === AlertType.Failure}>
+      <Side error={alertType === AlertType.Failure} />
+      {icon()}
+      <StyledTitle>{title}</StyledTitle>
+    </StyledAlertContainer>
+  );
+};

packages/site/src/components/index.ts

@@ -15,3 +15,4 @@ export * from './Network';
 export * from './Faq';
 export * from './Transaction';
 export * from './ConnectToggle';
+export * from './AlertBanner';

packages/site/src/pages/index.tsx

@@ -410,8 +410,8 @@ const Index = () => {
               description: 'Features:',
               listItems: [
                 'Access and control smart accounts with MetaMask. Enjoy smart contract functionality with ease and convenience.',
-                'Manage ERC-4337 accounts(create, sign, send, transfer funds)',
-                'Manage stake and deposit with supported entrypoint contracts',
+                'Manage ERC-4337 accounts(create, delete, send funds)',
+                'Manage stake, withdraws and deposits with supported entrypoint contracts',
               ],
               button: <ConnectSnapButton onClick={handleReConnectSnapClick}/>
             }}