fix: show more than one route on the main page

lifinance · Jul 22, 2022 · bd7c8dd · bd7c8dd
1 parent 66fc7d9
commit bd7c8dd
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 39 deletions.
diff --git a/packages/widget/src/components/SwapButton/SwapButton.tsx b/packages/widget/src/components/SwapButton/SwapButton.tsx
@@ -46,8 +46,6 @@ export const SwapButton: React.FC<SwapButtonProps> = ({
     }
   };
 
-  console.log(insufficientFunds, insufficientGas);
-
   const getButtonText = () => {
     if (account.isActive) {
       if (!isCurrentChainMatch) {

diff --git a/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx b/packages/widget/src/components/SwapRouteCard/SwapRouteCardSkeleton.tsx
@@ -4,24 +4,15 @@ import { SwapRouteCardSkeletonProps } from './types';
 
 export const SwapRouteCardSkeleton: React.FC<
   SwapRouteCardSkeletonProps & BoxProps
-> = ({ active, dense, ...other }) => {
+> = ({ dense, ...other }) => {
   return (
     <Card dense={dense} {...other}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <Skeleton
-          variant="rectangular"
-          width={120}
-          height={24}
-          sx={{ borderRadius: 0.5 }}
-        />
-        {active ? <Skeleton variant="circular" width={24} height={24} /> : null}
-      </Box>
+      <Skeleton
+        variant="rectangular"
+        width={120}
+        height={24}
+        sx={{ borderRadius: 0.5 }}
+      />
       <Box my={2}>
         <Box
           sx={{

diff --git a/packages/widget/src/components/SwapRouteCard/types.ts b/packages/widget/src/components/SwapRouteCard/types.ts
@@ -9,6 +9,5 @@ export interface SwapRouteCardProps {
 
 export interface SwapRouteCardSkeletonProps {
   dense?: boolean;
-  active?: boolean;
   blur?: boolean;
 }
diff --git a/packages/widget/src/pages/MainPage/SwapRoutes.style.ts b/packages/widget/src/pages/MainPage/SwapRoutes.style.ts
@@ -7,4 +7,6 @@ export const Stack = styled(MuiStack)(({ theme }) => ({
   flex: 1,
   flexWrap: 'nowrap',
   overflow: 'hidden',
+  borderRight: `solid ${theme.palette.grey[300]}`,
+  width: 'calc(100% - 48px)',
 }));
diff --git a/packages/widget/src/pages/MainPage/SwapRoutes.tsx b/packages/widget/src/pages/MainPage/SwapRoutes.tsx
@@ -58,32 +58,51 @@ export const SwapRoutes: React.FC<BoxProps> = (props) => {
             }}
           />
         ) : null}
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Stack direction="row" py={2} pl={2} pr={routeNotFound ? 2 : 1}>
+        <Box sx={{ display: 'flex' }}>
+          <Stack
+            direction="row"
+            spacing={2}
+            my={2}
+            ml={2}
+            mr={routeNotFound ? 2 : 1}
+            sx={{
+              borderWidth: isFetching || (routes && routes.length > 1) ? 1 : 0,
+            }}
+          >
             {routeNotFound ? (
               <SwapRouteNotFoundCard minWidth="100%" dense />
             ) : isLoading || isFetching || !currentRoute ? (
-              <SwapRouteCardSkeleton minWidth="100%" active dense />
+              <>
+                <SwapRouteCardSkeleton minWidth="75%" dense />
+                <SwapRouteCardSkeleton minWidth="75%" dense />
+              </>
             ) : (
-              <SwapRouteCard
-                minWidth="100%"
-                route={currentRoute}
-                active
-                dense
-              />
+              <>
+                <SwapRouteCard
+                  minWidth={routes.length > 1 ? '75%' : '100%'}
+                  route={currentRoute}
+                  active
+                  dense
+                />
+                {routes.length > 1 ? (
+                  <SwapRouteCard minWidth="75%" route={routes[1]} dense />
+                ) : null}
+              </>
             )}
           </Stack>
-          {!routeNotFound ? (
-            <Box py={1} pr={1}>
-              <IconButton
-                onClick={handleCardClick}
-                size="medium"
-                aria-label="swap-routes"
-              >
-                <KeyboardArrowRightIcon />
-              </IconButton>
-            </Box>
-          ) : null}
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            {!routeNotFound ? (
+              <Box py={1} pr={1}>
+                <IconButton
+                  onClick={handleCardClick}
+                  size="medium"
+                  aria-label="swap-routes"
+                >
+                  <KeyboardArrowRightIcon />
+                </IconButton>
+              </Box>
+            ) : null}
+          </Box>
         </Box>
       </CardContainer>
       {!isFetching ? (