feat: add new route selection UI

lifinance · Sep 23, 2022 · beb780c · beb780c
1 parent 1701738
commit beb780c
Show file tree

Hide file tree

Showing 42 changed files with 776 additions and 458 deletions.
diff --git a/packages/widget-embedded/src/App.tsx b/packages/widget-embedded/src/App.tsx
@@ -49,7 +49,7 @@ export const App = () => {
   const [primary, setPrimaryColor] = useState('#3F49E1');
   const [secondary, setSecondaryColor] = useState('#F5B5FF');
 
-  const [expandableRoutesView, setExpandableRoutesView] = useState(false);
+  const [expandableRoutesView, setExpandableRoutesView] = useState(true);
   const [darkMode, setDarkMode] = useState(prefersDarkMode);
   const [systemColor, setSystemColor] = useState(true);
   const [theme, setTheme] = useState(() =>
@@ -103,7 +103,7 @@ export const App = () => {
           fontFamily,
         },
       },
-      expandableRoutesView,
+      variant: expandableRoutesView ? 'expandable' : 'default',
     }));
   }, [
     borderRadius,
@@ -338,15 +338,7 @@ export const App = () => {
             </Box>
           </Box>
         </Drawer>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            flex: 1,
-            margin: 'auto',
-          }}
-        >
+        <Box flex={1} margin="auto">
           {drawer ? (
             <LiFiWidgetDrawer config={config} open />
           ) : (

diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts
@@ -9,7 +9,7 @@ export const widgetDrawerConfig: WidgetConfig = {
   // fromAmount: '10',
   // disableColorSchemes: true,
   disableTelemetry: true,
-  // expandableRoutesView: true,
+  variant: 'expandable',
   integrator: 'li.fi-playground',
   disabledChains: [],
   chains: {

diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -1,22 +1,16 @@
-import { useRoutes } from 'react-router-dom';
 import type { AppProps } from './AppProvider';
 import { AppProvider } from './AppProvider';
-import { AppContainer, FlexContainer } from './components/AppContainer';
+import { AppRoutes } from './AppRoutes';
+import {
+  AppContainer,
+  AppExpandedContainer,
+  FlexContainer,
+} from './components/AppContainer';
 import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
-import { NotFound } from './components/NotFound';
 import { PoweredBy } from './components/PoweredBy';
-import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
-import { MainPage } from './pages/MainPage';
-import { SelectChainPage } from './pages/SelectChainPage';
-import { SelectTokenPage } from './pages/SelectTokenPage';
-import { SelectWalletPage } from './pages/SelectWalletPage';
-import { SettingsPage } from './pages/SettingsPage';
-import { SwapDetailsPage } from './pages/SwapDetailsPage';
-import { SwapHistoryPage } from './pages/SwapHistoryPage';
-import { SwapPage } from './pages/SwapPage';
-import { SwapRoutesPage } from './pages/SwapRoutesPage';
-import { navigationRoutes } from './utils';
+import { SwapRoutesExpanded } from './components/SwapRoutes';
+import { useWidgetConfig } from './providers';
 
 export const App: React.FC<AppProps> = ({ config }) => {
   return (
@@ -27,86 +21,19 @@ export const App: React.FC<AppProps> = ({ config }) => {
 };
 
 export const AppDefault = () => {
+  const { variant } = useWidgetConfig();
+
   return (
-    <AppContainer>
-      <Header />
-      <FlexContainer disableGutters>
-        <AppRoutes />
-      </FlexContainer>
-      <PoweredBy />
-      <Initializer />
-    </AppContainer>
+    <AppExpandedContainer>
+      <AppContainer>
+        <Header />
+        <FlexContainer disableGutters>
+          <AppRoutes />
+        </FlexContainer>
+        <PoweredBy />
+        <Initializer />
+      </AppContainer>
+      {variant === 'expandable' ? <SwapRoutesExpanded /> : null}
+    </AppExpandedContainer>
   );
 };
-
-const AppRoutes = () => {
-  const element = useRoutes([
-    {
-      path: '/',
-      element: <MainPage />,
-    },
-    {
-      path: navigationRoutes.settings,
-      element: <SettingsPage />,
-    },
-    {
-      path: navigationRoutes.fromToken,
-      element: <SelectTokenPage formType="from" />,
-    },
-    {
-      path: navigationRoutes.toToken,
-      element: <SelectTokenPage formType="to" />,
-    },
-    ...[
-      navigationRoutes.fromChain,
-      `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
-    ].map((path) => ({
-      path,
-      element: <SelectChainPage formType="from" />,
-    })),
-    ...[
-      navigationRoutes.toChain,
-      `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
-    ].map((path) => ({
-      path,
-      element: <SelectChainPage formType="to" />,
-    })),
-    {
-      path: navigationRoutes.swapRoutes,
-      element: <SwapRoutesPage />,
-    },
-    {
-      path: navigationRoutes.activeSwaps,
-      element: <ActiveSwapsPage />,
-    },
-    {
-      path: navigationRoutes.swapHistory,
-      element: <SwapHistoryPage />,
-    },
-    {
-      path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
-      element: <SwapDetailsPage />,
-    },
-    ...[
-      navigationRoutes.selectWallet,
-      `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
-    ].map((path) => ({
-      path,
-      element: <SelectWalletPage />,
-    })),
-    ...[
-      navigationRoutes.swapExecution,
-      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
-      `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
-    ].map((path) => ({
-      path,
-      element: <SwapPage />,
-    })),
-    {
-      path: '*',
-      element: <NotFound />,
-    },
-  ]);
-  return element;
-};
diff --git a/packages/widget/src/AppRoutes.tsx b/packages/widget/src/AppRoutes.tsx
@@ -0,0 +1,85 @@
+import { useRoutes } from 'react-router-dom';
+import { NotFound } from './components/NotFound';
+import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
+import { MainPage } from './pages/MainPage';
+import { SelectChainPage } from './pages/SelectChainPage';
+import { SelectTokenPage } from './pages/SelectTokenPage';
+import { SelectWalletPage } from './pages/SelectWalletPage';
+import { SettingsPage } from './pages/SettingsPage';
+import { SwapDetailsPage } from './pages/SwapDetailsPage';
+import { SwapHistoryPage } from './pages/SwapHistoryPage';
+import { SwapPage } from './pages/SwapPage';
+import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { navigationRoutes } from './utils';
+
+export const AppRoutes = () => {
+  const element = useRoutes([
+    {
+      path: '/',
+      element: <MainPage />,
+    },
+    {
+      path: navigationRoutes.settings,
+      element: <SettingsPage />,
+    },
+    {
+      path: navigationRoutes.fromToken,
+      element: <SelectTokenPage formType="from" />,
+    },
+    {
+      path: navigationRoutes.toToken,
+      element: <SelectTokenPage formType="to" />,
+    },
+    ...[
+      navigationRoutes.fromChain,
+      `${navigationRoutes.fromToken}/${navigationRoutes.fromChain}`,
+    ].map((path) => ({
+      path,
+      element: <SelectChainPage formType="from" />,
+    })),
+    ...[
+      navigationRoutes.toChain,
+      `${navigationRoutes.toToken}/${navigationRoutes.toChain}`,
+    ].map((path) => ({
+      path,
+      element: <SelectChainPage formType="to" />,
+    })),
+    {
+      path: navigationRoutes.swapRoutes,
+      element: <SwapRoutesPage />,
+    },
+    {
+      path: navigationRoutes.activeSwaps,
+      element: <ActiveSwapsPage />,
+    },
+    {
+      path: navigationRoutes.swapHistory,
+      element: <SwapHistoryPage />,
+    },
+    {
+      path: `${navigationRoutes.swapHistory}/${navigationRoutes.swapDetails}`,
+      element: <SwapDetailsPage />,
+    },
+    ...[
+      navigationRoutes.selectWallet,
+      `${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}/${navigationRoutes.selectWallet}`,
+    ].map((path) => ({
+      path,
+      element: <SelectWalletPage />,
+    })),
+    ...[
+      navigationRoutes.swapExecution,
+      `${navigationRoutes.swapRoutes}/${navigationRoutes.swapExecution}`,
+      `${navigationRoutes.activeSwaps}/${navigationRoutes.swapExecution}`,
+    ].map((path) => ({
+      path,
+      element: <SwapPage />,
+    })),
+    {
+      path: '*',
+      element: <NotFound />,
+    },
+  ]);
+  return element;
+};
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -1,19 +1,22 @@
 import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import type { PropsWithChildren, RefObject } from 'react';
-import { useLayoutEffect, useRef } from 'react';
+import { useLayoutEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../providers';
 import type { WidgetVariant } from '../types';
 import { ElementId } from '../utils';
 
-const maxHeight = 640;
+export const maxHeight = 680;
 
-const ExpandedContainer = styled(Box)(({ theme }) => ({
+const ExpandedContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: WidgetVariant }>(({ variant }) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'start',
   flex: 1,
+  height: variant === 'drawer' ? 'none' : maxHeight,
 }));
 
 const RelativeContainer = styled(Box, {
@@ -31,13 +34,6 @@ const RelativeContainer = styled(Box, {
   zIndex: 0,
 }));
 
-const ScrollableContainer = styled(Box)({
-  overflowY: 'auto',
-  height: '100%',
-  flex: 1,
-  display: 'flex',
-});
-
 const CssBaselineContainer = styled(ScopedCssBaseline, {
   shouldForwardProp: (prop) => prop !== 'variant',
 })<{ variant?: WidgetVariant }>(({ variant }) => ({
@@ -52,23 +48,24 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
 
 export const FlexContainer = styled(Container)({
   display: 'flex',
-  flexBasis: 'auto',
   flexDirection: 'column',
-  flexShrink: 0,
-  flexGrow: 1,
+  flex: 1,
 });
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
-  const ref = useRef<HTMLElement>(null);
+  // const ref = useRef<HTMLDivElement>(null);
   const { containerStyle, variant } = useWidgetConfig();
   return (
     <RelativeContainer sx={containerStyle} variant={variant}>
-      <ScrollableContainer id={ElementId.ScrollableContainer} ref={ref}>
-        <CssBaselineContainer variant={variant} enableColorScheme>
-          <FlexContainer disableGutters>{children}</FlexContainer>
-        </CssBaselineContainer>
-      </ScrollableContainer>
-      <ScrollToLocation elementRef={ref} />
+      <CssBaselineContainer
+        variant={variant}
+        id={ElementId.ScrollableContainer}
+        // ref={ref}
+        enableColorScheme
+      >
+        <FlexContainer disableGutters>{children}</FlexContainer>
+      </CssBaselineContainer>
+      {/* <ScrollToLocation elementRef={ref} /> */}
     </RelativeContainer>
   );
 };