Bean UI - L1 Transfer form (#1147)

BeanstalkFarms · Oct 12, 2024 · da9e639 · da9e639
2 parents b007508 + 9009e9e
commit da9e639
Show file tree

Hide file tree

Showing 3 changed files with 657 additions and 6 deletions.
diff --git a/projects/ui/src/components/App/index.tsx b/projects/ui/src/components/App/index.tsx
@@ -69,6 +69,7 @@ import L2Claim from '~/pages/l2claim';
 import L1Delegate from '~/pages/l1delegate';
 
 import MigrationPreview from '../../pages/preview';
+import L1Transfer from '~/pages/l1transfer';
 
 // import Snowflakes from './theme/winter/Snowflakes';
 
@@ -146,6 +147,7 @@ function MigrationGate() {
               <Route path="/l2claim" element={<L2Claim />} />
               <Route path="/l2" element={<L2Claim />} />
               <Route path="/arbitrum" element={<L2Claim />} />
+              <Route path="/l1transfer" element={<L1Transfer />} />
               <Route path="/404" element={<PageNotFound />} />
             </Routes>
           </Box>

diff --git a/projects/ui/src/components/Nav/NavBar.tsx b/projects/ui/src/components/Nav/NavBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppBar, Box } from '@mui/material';
+import { AppBar, Box, useMediaQuery, useTheme } from '@mui/material';
 import WalletButton from '~/components/Common/Connection/WalletButton';
 import NetworkButton from '~/components/Common/Connection/NetworkButton';
 import {
@@ -20,7 +20,7 @@ import HoverMenu from './HoverMenu';
 import { PAGE_BORDER_COLOR } from '../App/muiTheme';
 import BeanProgressIcon from '../Common/BeanProgressIcon';
 
-const L1NavBar = () => (
+const L1NavBar = ({ isMobile }: { isMobile: boolean }) => (
   <>
     <AppBar
       className="navbar"
@@ -34,22 +34,23 @@ const L1NavBar = () => (
       {/* Desktop: Right Side */}
       <Row
         justifyContent="space-between"
-        gap={1}
+        gap={isMobile ? 0 : 1}
         px={1}
         height={`${NAV_HEIGHT}px`}
       >
         <Box
-          px={2}
+          px={isMobile ? 1 : 2}
           height={`${NAV_HEIGHT}px`}
           sx={{
             display: 'flex',
             flexDirection: 'row',
-            gap: 2,
+            gap: isMobile ? 0 : 2,
             alignItems: 'center',
           }}
         >
           <BeanProgressIcon size={25} enabled={false} variant="indeterminate" />
           <LinkButton key="/" to="/" title="Migration" />
+          <LinkButton key="/l1transfer" to="/l1transfer" title="Transfer" />
         </Box>
         <Row gap={1}>
           <Box sx={{ display: { sm: 'block', xs: 'none' } }}>
@@ -65,9 +66,11 @@ const L1NavBar = () => (
 
 const NavBar: FC<{}> = ({ children }) => {
   const { isArbitrum, isArbMainnet } = useChainState();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   if (!isArbitrum) {
-    return <L1NavBar />;
+    return <L1NavBar isMobile={isMobile} />;
   }
 
   return (