[TAS-234] feat: swap state

libs/oeth/swap/src/actions/swapCurve/index.ts

@@ -116,7 +116,7 @@ const allowance: Allowance = async ({ tokenIn, tokenOut, curve }) => {
     return 0n;
   }
 
-  if (isNilOrEmpty(tokenIn.address) || isNilOrEmpty(tokenOut.address)) {
+  if (isNilOrEmpty(tokenIn.address)) {
     return maxUint256;
   }
 

libs/oeth/swap/src/components/BestRoutes.tsx

@@ -1,33 +1,33 @@
-import { Box } from '@mui/material';
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
 import { useHandleSelectSwapRoute } from '../hooks';
 import { useSwapState } from '../state';
 import { routeEq } from '../utils';
 import { SwapRouteCard } from './SwapRouteCard';
 
-import type { BoxProps } from '@mui/material';
+import type { Grid2Props } from '@mui/material';
 
-export function BestRoutes(props: BoxProps) {
-  const [{ swapRoutes, selectedSwapRoute }] = useSwapState();
+export type BestRoutesProps = { isLoading: boolean } & Grid2Props;
+
+export function BestRoutes(props: Grid2Props) {
+  const [{ swapRoutes, selectedSwapRoute, isSwapRoutesLoading }] =
+    useSwapState();
   const handleSelectSwapRoute = useHandleSelectSwapRoute();
 
   return (
-    <Box
-      sx={{
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        gap: 1,
-        display: 'grid',
-      }}
-    >
+    <Grid2 spacing={1} {...props} container>
       {swapRoutes.slice(0, 2).map((route, index) => (
-        <SwapRouteCard
-          key={`bestRoute-${index}`}
-          isSelected={routeEq(selectedSwapRoute, route)}
-          isBest={index === 0}
-          onSelect={handleSelectSwapRoute}
-          route={route}
-        />
+        <Grid2 key={route.action} xs={6}>
+          <SwapRouteCard
+            key={`bestRoute-${index}`}
+            isSelected={routeEq(selectedSwapRoute, route)}
+            isBest={index === 0}
+            onSelect={handleSelectSwapRoute}
+            route={route}
+            isLoading={isSwapRoutesLoading}
+          />
+        </Grid2>
       ))}
-    </Box>
+    </Grid2>
   );
 }

libs/oeth/swap/src/components/SwapRoute.tsx

@@ -1,4 +1,4 @@
-import { Skeleton, Stack, Typography } from '@mui/material';
+import { Collapse, Skeleton, Stack, Typography } from '@mui/material';
 import { Card, cardStyles } from '@origin/shared/components';
 import { useIntl } from 'react-intl';
 
@@ -9,31 +9,6 @@ import { SwapRouteAccordion } from './SwapRouteAccordion';
 
 import type { CardProps } from '@mui/material';
 
-import type { EstimatedSwapRoute } from '../types';
-
-interface Swap {
-  type: 'swap';
-}
-export interface Redeem {
-  type: 'redeem';
-  tokenAbbreviation: string;
-  waitTime: string;
-}
-
-export type Route = {
-  name: string;
-  icon: string | string[];
-  quantity: number;
-  value: number;
-  rate: number;
-  transactionCost: number;
-} & (Swap | Redeem);
-
-export type SwapRouteProps = {
-  isLoading: boolean;
-  routes: EstimatedSwapRoute[];
-};
-
 export function SwapRoute(props: Omit<CardProps, 'children'>) {
   const intl = useIntl();
   const [{ swapRoutes, isSwapRoutesLoading }] = useSwapState();
@@ -52,27 +27,26 @@ export function SwapRoute(props: Omit<CardProps, 'children'>) {
       }}
       title={
         isSwapRoutesLoading ? (
-          <Typography
-            color="primary.contrastText"
-            sx={{
-              fontSize: (theme) => theme.typography.pxToRem(12),
-              display: 'flex',
-              alignItems: 'center',
-            }}
+          <Stack
+            direction="row"
+            alignItems="center"
+            gap={1}
+            sx={(theme) => ({ color: theme.palette.primary.contrastText })}
           >
             <Skeleton
               variant="circular"
               width="0.5rem"
               height="0.5rem"
               sx={{
-                mr: 1.5,
                 backgroundColor: (theme) => theme.palette.primary.contrastText,
               }}
             />
-            {intl.formatMessage({
-              defaultMessage: 'Finding the best route...',
-            })}
-          </Typography>
+            <Typography variant="body2">
+              {intl.formatMessage({
+                defaultMessage: 'Finding the best route...',
+              })}
+            </Typography>
+          </Stack>
         ) : (
           <Stack
             direction="row"
@@ -99,12 +73,10 @@ export function SwapRoute(props: Omit<CardProps, 'children'>) {
             }),
       }}
     >
-      {hasContent ? (
-        <>
-          <BestRoutes />
-          <SwapRouteAccordion sx={{ mt: 2 }} />
-        </>
-      ) : undefined}
+      <Collapse in={hasContent}>
+        <BestRoutes />
+        {swapRoutes.length > 2 && <SwapRouteAccordion sx={{ mt: 2 }} />}
+      </Collapse>
     </Card>
   );
 }