feat: add sticky header

packages/widget/src/components/Header/Header.style.ts

@@ -0,0 +1,23 @@
+import { AppBar, Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const HeaderAppBar = styled(AppBar, {
+  shouldForwardProp: (prop) => prop !== 'pt',
+})<{ pt?: number }>(({ theme, pt }) => ({
+  backgroundColor: 'transparent',
+  color: theme.palette.common.black,
+  flexDirection: 'row',
+  alignItems: 'center',
+  position: 'relative',
+  minHeight: 48,
+  padding: theme.spacing(pt ?? 0, 3, 0, 3),
+}));
+
+export const Container = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'sticky',
+})<{ sticky?: boolean }>(({ theme, sticky }) => ({
+  backgroundColor: sticky ? theme.palette.common.white : 'transparent',
+  position: sticky ? 'sticky' : 'relative',
+  top: 0,
+  zIndex: 1200,
+}));

packages/widget/src/components/Header/Header.tsx

@@ -1,12 +1,32 @@
-import { Box } from '@mui/material';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
+import { useLocation } from 'react-router-dom';
 import { ElementId } from '../../utils/elements';
+import { routes } from '../../utils/routes';
+import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
 
+const stickyHeaderRoutes = [
+  routes.selectWallet,
+  routes.settings,
+  routes.swapRoutes,
+];
+
+const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const { pathname } = useLocation();
+  return (
+    <Container
+      id={ElementId.Header}
+      sticky={stickyHeaderRoutes.includes(pathname)}
+    >
+      {children}
+    </Container>
+  );
+};
+
 export const Header: FC = () => (
-  <Box id={ElementId.Header}>
+  <HeaderContainer>
     <WalletHeader />
     <NavigationHeader />
-  </Box>
+  </HeaderContainer>
 );

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -6,13 +6,14 @@ import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routes } from '../../utils/routes';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderAppBar } from './Header.style';
 
-const routesWithBack = [
+const backButtonRoutes = [
+  routes.selectWallet,
   routes.settings,
   routes.fromToken,
   routes.toToken,
-  routes.selectWallet,
+  routes.swapRoutes,
   routes.transaction,
 ];
 
@@ -31,14 +32,16 @@ export const NavigationHeader: React.FC = () => {
 
   const handleHeaderTitle = () => {
     switch (pathname) {
+      case routes.selectWallet:
+        return t(`header.selectWallet`);
       case routes.settings:
         return t(`header.settings`);
       case routes.fromToken:
         return t(`header.from`);
       case routes.toToken:
         return t(`header.to`);
-      case routes.selectWallet:
-        return t(`header.selectWallet`);
+      case routes.swapRoutes:
+        return t(`swap.routes`);
       case routes.transaction:
         return t(`header.processIsOn`);
       default:
@@ -47,13 +50,13 @@ export const NavigationHeader: React.FC = () => {
   };
 
   return (
-    <HeaderContainer>
+    <HeaderAppBar elevation={0}>
       {/* <Collapse
         collapsedSize={0}
         orientation="horizontal"
         in={routesWithBack.includes(pathname)}
       > */}
-      {routesWithBack.includes(pathname) ? (
+      {backButtonRoutes.includes(pathname) ? (
         <IconButton
           size="large"
           aria-label="settings"
@@ -88,6 +91,6 @@ export const NavigationHeader: React.FC = () => {
       ) : (
         <Box width={36} height={48} />
       )}
-    </HeaderContainer>
+    </HeaderAppBar>
   );
 };

packages/widget/src/components/Header/WalletHeader.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useWallet } from '../../providers/WalletProvider';
 import { routes } from '../../utils/routes';
-import { HeaderContainer } from './HeaderContainer';
+import { HeaderAppBar } from './Header.style';
 
 export const WalletHeader: React.FC = () => {
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ export const WalletHeader: React.FC = () => {
     : null;
 
   return (
-    <HeaderContainer pt={1.5}>
+    <HeaderAppBar elevation={0} pt={1.5}>
       {walletAddress ? (
         <>
           <Box
@@ -67,7 +67,7 @@ export const WalletHeader: React.FC = () => {
           <ConnectButton />
         </>
       )}
-    </HeaderContainer>
+    </HeaderAppBar>
   );
 };
 

packages/widget/src/components/MainContainer.tsx

@@ -5,7 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { ElementId } from '../utils/elements';
 
 const Container = styled(MuiContainer)(({ theme }) => ({
-  height: '100%',
+  // height: '100%',
   display: 'flex',
   flexDirection: 'column',
   overflowX: 'clip',