feat: move settings to drawer

packages/widget/src/App.tsx

@@ -1,12 +1,13 @@
 import { Container } from '@mui/material';
 import { styled, ThemeProvider } from '@mui/material/styles';
+import { useRef } from 'react';
 import { QueryClientProvider } from 'react-query';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { WidgetConfig } from '.';
 import { NavigationHeader } from './components/NavigationHeader';
+import { SettingsDrawerBase } from './components/SettingsDrawer';
 import { WalletHeader } from './components/WalletHeader';
 import { queryClient } from './config/queryClient';
-import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
 import { SwapFormProvider } from './providers/SwapFormProvider';
 import { WidgetProvider } from './providers/WidgetProvider';
@@ -26,20 +27,24 @@ interface AppProps {
 }
 
 export const App: React.FC<AppProps> = ({ config }) => {
+  const settingsRef = useRef<SettingsDrawerBase>(null);
   return (
     <ThemeProvider theme={theme}>
       <QueryClientProvider client={queryClient}>
         <MemoryRouter>
           <MainContainer maxWidth="sm" disableGutters>
-            <WalletHeader />
-            <NavigationHeader />
             <WidgetProvider config={config}>
               <SwapFormProvider>
+                <WalletHeader />
+                <NavigationHeader settingsRef={settingsRef} />
                 <Routes>
-                  <Route path={routes.home} element={<SwapPage />}>
+                  <Route
+                    path={routes.home}
+                    element={<SwapPage settingsRef={settingsRef} />}
+                  >
                     <Route path={routes.selectToken} element={null} />
+                    <Route path={routes.settings} element={null} />
                   </Route>
-                  <Route path={routes.settings} element={<SettingsPage />} />
                 </Routes>
               </SwapFormProvider>
             </WidgetProvider>

packages/widget/src/components/ContainerDrawer/ContainerDrawer.tsx

@@ -7,21 +7,25 @@ import {
   useState,
 } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
+import { ElementId } from '../../utils/elements';
 import { routes } from '../../utils/routes';
 import { ContainerDrawerBase, ContainerDrawerProps } from './types';
 
 export const ContainerDrawer = forwardRef<
   ContainerDrawerBase,
   ContainerDrawerProps
->(({ containerRef, elementRef, onOpen, route, children }, ref) => {
+>(({ elementRef, onOpen, route, children }, ref) => {
   const navigate = useNavigate();
   const homeMatch = useMatch(routes.home);
   const [open, setOpen] = useState(false);
+  const [containerElement, setContainerElement] = useState(() =>
+    document.getElementById(ElementId.SwapContent),
+  );
 
   const openDrawer = useCallback(
     (args) => {
       navigate(routes[route], { replace: true });
-      onOpen(args);
+      onOpen?.(args);
       setOpen(true);
     },
     [navigate, onOpen, route],
@@ -47,9 +51,15 @@ export const ContainerDrawer = forwardRef<
     }
   }, [homeMatch, open]);
 
+  useEffect(() => {
+    if (!containerElement) {
+      setContainerElement(document.getElementById(ElementId.SwapContent));
+    }
+  }, [containerElement]);
+
   return (
     <Drawer
-      container={containerRef.current}
+      container={containerElement}
       ref={elementRef}
       anchor="right"
       open={open}
@@ -72,7 +82,7 @@ export const ContainerDrawer = forwardRef<
           backdropFilter: 'blur(3px)',
         },
       }}
-      SlideProps={{ container: containerRef.current }}
+      SlideProps={{ container: containerElement }}
     >
       {children}
     </Drawer>

packages/widget/src/components/ContainerDrawer/types.ts

@@ -4,9 +4,8 @@ import { SwapFormDirection } from '../../providers/SwapFormProvider';
 import { routes } from '../../utils/routes';
 
 export type ContainerDrawerProps = DrawerProps & {
-  containerRef: RefObject<Element>;
-  elementRef: RefObject<HTMLDivElement>;
-  onOpen(args: any): void;
+  elementRef?: RefObject<HTMLDivElement>;
+  onOpen?(args: any): void;
   route: keyof typeof routes;
 };
 

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

@@ -5,18 +5,21 @@ import {
 import { Collapse, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { routes } from '../utils/routes';
-import { Header } from './Header';
+import { NavigationHeaderProps } from '.';
+import { routes } from '../../utils/routes';
+import { Header } from '../Header';
 
 const routesWithBack = [routes.settings, routes.selectToken];
 
-export const NavigationHeader: React.FC = () => {
+export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
+  settingsRef,
+}) => {
   const { t } = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
 
   const handleSettings = () => {
-    navigate(routes.settings, { replace: true });
+    settingsRef.current?.openDrawer();
   };
 
   const handleBack = () => {

packages/widget/src/components/NavigationHeader/index.ts

@@ -0,0 +1,2 @@
+export * from './NavigationHeader';
+export * from './types';

packages/widget/src/components/NavigationHeader/types.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+import { SettingsDrawerBase } from '../SettingsDrawer';
+
+export interface NavigationHeaderProps {
+  settingsRef: RefObject<SettingsDrawerBase>;
+}

packages/widget/src/components/SelectTokenDrawer/SelectTokenDrawer.tsx

@@ -1,4 +1,11 @@
-import { Box, Divider, FormControl, MenuItem, Typography } from '@mui/material';
+import {
+  Box,
+  Divider,
+  DrawerProps,
+  FormControl,
+  MenuItem,
+  Typography,
+} from '@mui/material';
 import { forwardRef, MutableRefObject, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -12,91 +19,92 @@ import { TokenList } from '../TokenList';
 import { ChainSelect } from './ChainSelect';
 import { SearchTokenInput } from './SearchTokenInput';
 import { TokenFilterSelect } from './SelectTokenDrawer.style';
-import {
-  SelectTokenDrawerBase,
-  SelectTokenDrawerProps,
-  TokenFilterType,
-} from './types';
+import { SelectTokenDrawerBase, TokenFilterType } from './types';
 
-export const SelectTokenDrawer = forwardRef<
-  SelectTokenDrawerBase,
-  SelectTokenDrawerProps
->(({ containerRef }, ref) => {
-  const { t } = useTranslation();
-  const [formType, setFormType] = useState<SwapFormDirection>('from');
-  const { register } = useFormContext();
+export const SelectTokenDrawer = forwardRef<SelectTokenDrawerBase, DrawerProps>(
+  (_, ref) => {
+    const { t } = useTranslation();
+    const [formType, setFormType] = useState<SwapFormDirection>('from');
+    const { register } = useFormContext();
 
-  const { height: drawerHeight, ref: drawerRef } =
-    useResizeDetector<HTMLDivElement | null>();
-  const { height: drawerHeaderHeight, ref: drawerHeaderRef } =
-    useResizeDetector<HTMLDivElement | null>();
+    const { height: drawerHeight, ref: drawerRef } =
+      useResizeDetector<HTMLDivElement | null>();
+    const { height: drawerHeaderHeight, ref: drawerHeaderRef } =
+      useResizeDetector<HTMLDivElement | null>();
 
-  const closeDrawer = (ref as MutableRefObject<SelectTokenDrawerBase | null>)
-    .current?.closeDrawer;
+    const closeDrawer = (ref as MutableRefObject<SelectTokenDrawerBase | null>)
+      .current?.closeDrawer;
 
-  return (
-    <ContainerDrawer
-      containerRef={containerRef}
-      elementRef={drawerRef}
-      ref={ref}
-      onOpen={setFormType}
-      route="selectToken"
-    >
-      <Box role="presentation">
-        <TokenList
-          height={drawerHeight ?? 0}
-          headerHeight={drawerHeaderHeight ?? 0}
-          onClick={closeDrawer}
-          formType={formType}
-        >
-          <Box ref={drawerHeaderRef}>
-            <Box p={3}>
-              <SearchTokenInput formType={formType} />
-            </Box>
-            <Divider light />
-            <Box mt={3} mx={3}>
-              <Typography
-                variant="subtitle1"
-                noWrap
-                sx={{ fontWeight: 500 }}
-                mb={1}
-              >
-                {t(`swap.selectChain`)}
-              </Typography>
-              <ChainSelect formType={formType} />
-              <Box
-                mt={3}
-                pb={1}
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                }}
-              >
-                <Typography variant="subtitle1" noWrap sx={{ fontWeight: 500 }}>
-                  {t(`swap.selectToken`)}
+    return (
+      <ContainerDrawer
+        elementRef={drawerRef}
+        ref={ref}
+        onOpen={setFormType}
+        route="selectToken"
+      >
+        <Box role="presentation">
+          <TokenList
+            height={drawerHeight ?? 0}
+            headerHeight={drawerHeaderHeight ?? 0}
+            onClick={closeDrawer}
+            formType={formType}
+          >
+            <Box ref={drawerHeaderRef}>
+              <Box p={3}>
+                <SearchTokenInput formType={formType} />
+              </Box>
+              <Divider light />
+              <Box mt={3} mx={3}>
+                <Typography
+                  variant="subtitle1"
+                  noWrap
+                  sx={{ fontWeight: 500 }}
+                  mb={1}
+                >
+                  {t(`swap.selectChain`)}
                 </Typography>
-                <FormControl>
-                  <TokenFilterSelect
-                    defaultValue={TokenFilterType.My}
-                    MenuProps={{ elevation: 2, MenuListProps: { dense: true } }}
-                    inputProps={{
-                      ...register(SwapFormKey.MyTokensFilter),
-                    }}
+                <ChainSelect formType={formType} />
+                <Box
+                  mt={3}
+                  pb={1}
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Typography
+                    variant="subtitle1"
+                    noWrap
+                    sx={{ fontWeight: 500 }}
                   >
-                    <MenuItem value={TokenFilterType.My}>
-                      {t(`swap.myTokens`)}
-                    </MenuItem>
-                    <MenuItem value={TokenFilterType.All}>
-                      {t(`swap.allTokens`)}
-                    </MenuItem>
-                  </TokenFilterSelect>
-                </FormControl>
+                    {t(`swap.selectToken`)}
+                  </Typography>
+                  <FormControl>
+                    <TokenFilterSelect
+                      defaultValue={TokenFilterType.My}
+                      MenuProps={{
+                        elevation: 2,
+                        MenuListProps: { dense: true },
+                      }}
+                      inputProps={{
+                        ...register(SwapFormKey.MyTokensFilter),
+                      }}
+                    >
+                      <MenuItem value={TokenFilterType.My}>
+                        {t(`swap.myTokens`)}
+                      </MenuItem>
+                      <MenuItem value={TokenFilterType.All}>
+                        {t(`swap.allTokens`)}
+                      </MenuItem>
+                    </TokenFilterSelect>
+                  </FormControl>
+                </Box>
               </Box>
             </Box>
-          </Box>
-        </TokenList>
-      </Box>
-    </ContainerDrawer>
-  );
-});
+          </TokenList>
+        </Box>
+      </ContainerDrawer>
+    );
+  },
+);

packages/widget/src/components/SelectTokenDrawer/types.ts

@@ -1,11 +1,5 @@
-import { DrawerProps } from '@mui/material';
-import { RefObject } from 'react';
 import { SwapFormDirection } from '../../providers/SwapFormProvider';
 
-export type SelectTokenDrawerProps = DrawerProps & {
-  containerRef: RefObject<Element>;
-};
-
 export interface SelectTokenDrawerBase {
   openDrawer(type: SwapFormDirection): void;
   closeDrawer(): void;

packages/widget/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -0,0 +1,19 @@
+import { Box, DrawerProps } from '@mui/material';
+import { forwardRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { ContainerDrawer } from '../ContainerDrawer';
+import { SettingsDrawerBase } from './types';
+
+export const SettingsDrawer = forwardRef<SettingsDrawerBase, DrawerProps>(
+  (_, ref) => {
+    const { t } = useTranslation();
+    const { register } = useFormContext();
+
+    return (
+      <ContainerDrawer ref={ref} route="settings">
+        <Box role="presentation">Settings</Box>
+      </ContainerDrawer>
+    );
+  },
+);

packages/widget/src/components/SettingsDrawer/index.ts

@@ -0,0 +1,2 @@
+export * from './SettingsDrawer';
+export * from './types';

packages/widget/src/components/SettingsDrawer/types.ts

@@ -0,0 +1,4 @@
+export interface SettingsDrawerBase {
+  openDrawer(): void;
+  closeDrawer(): void;
+}