feat: banner to choose force cairo version option

Consensys · Jan 22, 2025 · 6f52df3 · 6f52df3
1 parent b1c400a
commit 6f52df3
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 17 deletions.
diff --git a/packages/starknet-snap/src/config.ts b/packages/starknet-snap/src/config.ts
@@ -65,7 +65,7 @@ export const Config: SnapConfig = {
   },
 
   account: {
-    maxAccountToCreate: 2,
+    maxAccountToCreate: 1,
   },
 
   // eslint-disable-next-line no-restricted-globals

diff --git a/packages/wallet-ui/src/components/ui/Framework/Framework.style.ts b/packages/wallet-ui/src/components/ui/Framework/Framework.style.ts
@@ -14,7 +14,7 @@ export const Wrapper = styled.div`
 export const ColMiddle = styled.div`
   width: 1040px;
   margin: auto;
-
+  margin-top: 40px;
   @media (max-width: 1024px) {
     width: 896px;
   }
@@ -34,14 +34,16 @@ export const Content = styled.div`
 export const Banner = styled.div`
   position: fixed;
   left: 0px;
-  bottom: 0px;
+  top: 0px;
   width: 100%;
-  background-color: ${(props) => props.theme.palette.primary.main};
+  background-color: red;
+  margin-bottom: 24px;
   color: ${(props) => props.theme.palette.grey.grey3};
   display: flex;
   align-items: center;
-  padding: 13px 24px;
-  justify-content: space-between;
+  padding: 10px 24px;
+  justify-content: space-around;
+  z-index: 2;
 `;
 
 export const CloseIcon = styled(FontAwesomeIcon)`

diff --git a/packages/wallet-ui/src/components/ui/Framework/Framework.view.tsx b/packages/wallet-ui/src/components/ui/Framework/Framework.view.tsx
@@ -1,8 +1,8 @@
-import { ReactNode, useState } from 'react';
+import { ReactNode } from 'react';
 import { Footer } from 'components/ui/organism/Footer';
+import { Button, Stack, Typography } from '@mui/material'; // Importing MUI components
 import {
   Banner,
-  CloseIcon,
   ColMiddle,
   Content,
   MenuStyled,
@@ -15,20 +15,66 @@ interface Props {
 }
 
 export const FrameworkView = ({ connected, children }: Props) => {
-  const [bannerOpen, setBannerOpen] = useState(true);
+  // Get the current `accountDiscovery` value from the URL
+  const urlParams = new URLSearchParams(window.location.search);
+  const accountDiscovery = urlParams.get('accountDiscovery');
+
+  const bannerMessage =
+    accountDiscovery === 'FORCE_CAIRO_1'
+      ? 'This is a special version for recovering funds on a Cairo 1 account.'
+      : accountDiscovery === 'FORCE_CAIRO_0'
+      ? 'This is a special version for recovering funds on a Cairo 0 account.'
+      : 'This is a special version of the dapp for account recovery purposes.';
+
+  const handleAccountChange = (version: string) => {
+    // Update the URL without reloading the page
+    const newParams = new URLSearchParams(window.location.search);
+    newParams.set('accountDiscovery', version);
+    window.history.replaceState(
+      {},
+      '',
+      `${window.location.pathname}?${newParams.toString()}`,
+    );
+    window.location.reload(); // Reload to apply the updated query parameter
+  };
+
   return (
     <Wrapper>
       <ColMiddle>
         <MenuStyled connected={connected} />
         <Content>{children}</Content>
         <Footer />
       </ColMiddle>
-      {bannerOpen && (
-        <Banner>
-          This is the Open Beta version of the dapp, updates are made regularly{' '}
-          <CloseIcon icon={'close'} onClick={() => setBannerOpen(false)} />
-        </Banner>
-      )}
+      <Banner>
+        <Typography variant="body1" sx={{ mb: 2 }}>
+          {bannerMessage}
+        </Typography>
+        <Stack
+          direction="row"
+          spacing={2}
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Button
+            variant={
+              accountDiscovery === 'FORCE_CAIRO_1' ? 'contained' : 'outlined'
+            }
+            color="warning"
+            onClick={() => handleAccountChange('FORCE_CAIRO_1')}
+          >
+            Force Cairo 1
+          </Button>
+          <Button
+            variant={
+              accountDiscovery === 'FORCE_CAIRO_0' ? 'contained' : 'outlined'
+            }
+            color="warning"
+            onClick={() => handleAccountChange('FORCE_CAIRO_0')}
+          >
+            Force Cairo 0
+          </Button>
+        </Stack>
+      </Banner>
     </Wrapper>
   );
 };
diff --git a/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx b/packages/wallet-ui/src/components/ui/molecule/AccountSwitchModal/AccountSwitchModal.view.tsx
@@ -40,8 +40,8 @@ export const AccountSwitchModalView = ({
 
   return (
     <Menu as="div" style={{ display: 'inline-block', position: 'relative' }}>
-      <Menu.Button style={{ background: 'none', border: 'none' }}>
-        <Wrapper backgroundTransparent iconRight="angle-down">
+      <Menu.Button style={{ background: 'none', border: 'none' }} disabled>
+        <Wrapper backgroundTransparent>
           {full
             ? starkName ?? currentAddress
             : starkName