Feat/entrypoint deposit

packages/site/package.json

@@ -31,8 +31,10 @@
   },
   "dependencies": {
     "@account-abstraction/contracts": "^0.6.0",
+    "@ethereumjs/tx": "^4.1.2",
     "@metamask/keyring-api": "^1.0.0",
     "@metamask/providers": "^13.0.0",
+    "@metamask/utils": "^3.3.0",
     "ethers": "^5.7.0",
     "react": "^18.2.0",
     "react-blockies": "1.4.1",

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/Account.tsx

@@ -1,6 +1,6 @@
 import { MetaMaskContext, MetamaskActions, useAcount } from '../hooks';
 import styled from 'styled-components';
-import { connectSnap, convertToEth, filterPendingRequests, getMMProvider, getSignedTxs, getSnap, handleCopyToClipboard, storeTxHash, trimAccount } from '../utils';
+import { connectSnap, convertToEth, filterPendingRequests, getMMProvider, getSnap, handleCopyToClipboard, storeTxHash, trimAccount } from '../utils';
 import { FaCloudDownloadAlt, FaRegLightbulb } from 'react-icons/fa';
 import { InstallFlaskButton, ConnectSnapButton, SimpleButton } from './Buttons';
 import { AccountActivity, AccountActivityType, SupportedChainIdMap, UserOperation } from '../types';

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/ConnectToggle.tsx

@@ -0,0 +1,133 @@
+import { useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { MetaMaskContext, MetamaskActions } from '../hooks';
+
+type CheckedProps = {
+  readonly checked: boolean;
+};
+
+const ToggleWrapper = styled.div`
+  touch-action: pan-x;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  cursor: not-allowed; /* Use 'not-allowed' cursor to indicate it's disabled */
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  ${({ theme }) => theme.mediaQueries.small} {
+    margin-bottom: 2.4rem;
+  }
+`;
+
+const ToggleInput = styled.input`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;
+
+const IconContainer = styled.div`
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  top: 0;
+  bottom: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  line-height: 0;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  & > * {
+    align-items: center;
+    display: flex;
+    height: 20px;
+    justify-content: center;
+    position: relative;
+    width: 12px;
+  }
+`;
+
+const CheckedContainer = styled(IconContainer)<CheckedProps>`
+  opacity: ${({ checked }) => (checked ? 1 : 0)};
+  left: 10px;
+`;
+
+const UncheckedContainer = styled(IconContainer)<CheckedProps>`
+  opacity: ${({ checked }) => (checked ? 0 : 1)};
+  right: 10px;
+`;
+
+const ToggleContainer = styled.div<CheckedProps>`
+  width: 62px;
+  height: 26px;
+  padding: 0;
+  border-radius: 36px;
+  background-color: ${({ checked, theme }) => (checked ? 'green' : theme.colors.background.alternative)};
+  transition: all 0.2s ease;
+`;
+const ToggleCircle = styled.div<CheckedProps>`
+  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  position: absolute;
+  top: 4px;
+  left: ${({ checked }) => (checked ? '36px' : '4px')};
+  width: 18px;
+  height: 18px;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.14);
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  transition: all 0.25s ease;
+`;
+
+export const ConnectToggle = () => {
+  const [state, dispatch] = useContext(MetaMaskContext);
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    try {  
+
+      if (state.connectedAccounts.length === 0) {
+        setChecked(false);
+        return;
+      }
+
+      for (const account of state.connectedAccounts) {
+        if (account.toLowerCase() === state.selectedSnapKeyringAccount.address.toLowerCase()) {
+          setChecked(true);
+          dispatch({ type: MetamaskActions.SetIsSelectedSnapKeyringAccount, payload: true });
+          break;
+        }
+        setChecked(false);
+        dispatch({ type: MetamaskActions.SetIsSelectedSnapKeyringAccount, payload: false });
+      }
+
+    } catch (e) {
+      dispatch({ type: MetamaskActions.SetError, payload: e });
+    } 
+  }, [state.connectedAccounts, state.selectedSnapKeyringAccount]);
+
+  return (
+    <ToggleWrapper>
+      <ToggleContainer checked={checked} >
+        <CheckedContainer checked={checked} >
+          <span>✔</span>
+        </CheckedContainer>
+        <UncheckedContainer checked={checked}>
+        </UncheckedContainer>
+      </ToggleContainer>
+      <ToggleCircle checked={checked} />
+      <ToggleInput type="checkbox" aria-label="Toggle Button" />
+    </ToggleWrapper>
+  );
+};