fix: set correct header name for token selection

lifinance · Feb 21, 2022 · 68d20e9 · 68d20e9
1 parent 6996495
commit 68d20e9
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 13 deletions.
diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -42,7 +42,8 @@ export const App: React.FC<AppProps> = ({ config }) => {
                     path={routes.home}
                     element={<SwapPage settingsRef={settingsRef} />}
                   >
-                    <Route path={routes.selectToken} element={null} />
+                    <Route path={routes.fromToken} element={null} />
+                    <Route path={routes.toToken} element={null} />
                     <Route path={routes.settings} element={null} />
                   </Route>
                 </Routes>

diff --git a/packages/widget/src/components/ContainerDrawer/ContainerDrawer.tsx b/packages/widget/src/components/ContainerDrawer/ContainerDrawer.tsx
@@ -7,8 +7,9 @@ import {
   useState,
 } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
+import { SwapFormDirection } from '../../providers/SwapFormProvider';
 import { ElementId } from '../../utils/elements';
-import { routes } from '../../utils/routes';
+import { routes, RouteType } from '../../utils/routes';
 import { ContainerDrawerBase, ContainerDrawerProps } from './types';
 
 export const ContainerDrawer = forwardRef<
@@ -23,9 +24,12 @@ export const ContainerDrawer = forwardRef<
   );
 
   const openDrawer = useCallback(
-    (args) => {
-      navigate(routes[route], { replace: true });
-      onOpen?.(args);
+    (formType?: SwapFormDirection, routeKey?: RouteType) => {
+      const to = routeKey ? routes[routeKey] : route ? routes[route] : null;
+      if (to) {
+        navigate(to, { replace: true });
+      }
+      onOpen?.(formType);
       setOpen(true);
     },
     [navigate, onOpen, route],

diff --git a/packages/widget/src/components/ContainerDrawer/types.ts b/packages/widget/src/components/ContainerDrawer/types.ts
@@ -1,15 +1,15 @@
 import { DrawerProps } from '@mui/material';
 import { RefObject } from 'react';
 import { SwapFormDirection } from '../../providers/SwapFormProvider';
-import { routes } from '../../utils/routes';
+import { RouteType } from '../../utils/routes';
 
 export type ContainerDrawerProps = DrawerProps & {
   elementRef?: RefObject<HTMLDivElement>;
   onOpen?(args: any): void;
-  route: keyof typeof routes;
+  route?: RouteType;
 };
 
 export interface ContainerDrawerBase {
-  openDrawer(formType: SwapFormDirection): void;
+  openDrawer(formType?: SwapFormDirection, route?: RouteType): void;
   closeDrawer(): void;
 }
diff --git a/packages/widget/src/components/NavigationHeader/NavigationHeader.tsx b/packages/widget/src/components/NavigationHeader/NavigationHeader.tsx
@@ -9,7 +9,7 @@ import { NavigationHeaderProps } from '.';
 import { routes } from '../../utils/routes';
 import { Header } from '../Header';
 
-const routesWithBack = [routes.settings, routes.selectToken];
+const routesWithBack = [routes.settings, routes.fromToken, routes.toToken];
 
 export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   settingsRef,
@@ -30,8 +30,10 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
     switch (location.pathname) {
       case routes.settings:
         return t(`header.settings`);
-      case routes.selectToken:
-        return t(`header.wouldLikeToSwap`);
+      case routes.fromToken:
+        return t(`swap.from`);
+      case routes.toToken:
+        return t(`swap.to`);
       default:
         return t(`header.swap`);
     }

diff --git a/packages/widget/src/components/SelectTokenDrawer/types.ts b/packages/widget/src/components/SelectTokenDrawer/types.ts
@@ -1,7 +1,8 @@
 import { SwapFormDirection } from '../../providers/SwapFormProvider';
+import { RouteType } from '../../utils/routes';
 
 export interface SelectTokenDrawerBase {
-  openDrawer(formType: SwapFormDirection): void;
+  openDrawer(formType: SwapFormDirection, route: RouteType): void;
   closeDrawer(): void;
 }
 

diff --git a/packages/widget/src/utils/routes.ts b/packages/widget/src/utils/routes.ts
@@ -1,5 +1,8 @@
 export const routes = {
   home: '/',
   settings: '/settings',
-  selectToken: '/select-token',
+  fromToken: '/select-from-token',
+  toToken: '/select-to-token',
 };
+
+export type RouteType = keyof typeof routes;