Add disabling SwapPageFooter when route is error

skip-mev · Sep 19, 2024 · 8e6a249 · 8e6a249
1 parent cb3e003
commit 8e6a249
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -353,6 +353,7 @@ export const SwapPage = () => {
         {swapButton}
         <SwapPageFooter
           showRouteInfo
+          disabled={isRouteError}
           onClick={() =>
             swapDetailsModal.show({
               drawer: true,

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPageFooter.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPageFooter.tsx
@@ -19,17 +19,33 @@ export const SwapPageFooterItems = ({
   showRouteInfo,
 }: SwapPageFooterItemsProps) => {
   const { data: route, isLoading } = useAtomValue(skipRouteAtom);
-  const estimatedTime = convertSecondsToMinutesOrHours(route?.estimatedRouteDurationSeconds);
+  const estimatedTime = convertSecondsToMinutesOrHours(
+    route?.estimatedRouteDurationSeconds
+  );
 
   const renderRightContent = useMemo(() => {
     if (showRouteInfo && route) {
       return (
         <Row align="center" gap={8}>
           <Row gap={4} align="center">
-            {isLoading ? <SkeletonElement width={40} height={16} /> : <><SignatureIcon />{route?.txsRequired} tx required</>}
+            {isLoading ? (
+              <SkeletonElement width={40} height={16} />
+            ) : (
+              <>
+                <SignatureIcon />
+                {route?.txsRequired} tx required
+              </>
+            )}
           </Row>
           <Row gap={4} align="center">
-            {isLoading ? <SkeletonElement width={80} height={16} /> : estimatedTime ? <><SpeedometerIcon />{estimatedTime}</> : null}
+            {isLoading ? (
+              <SkeletonElement width={80} height={16} />
+            ) : estimatedTime ? (
+              <>
+                <SpeedometerIcon />
+                {estimatedTime}
+              </>
+            ) : null}
           </Row>
         </Row>
       );
@@ -49,18 +65,24 @@ export const SwapPageFooterItems = ({
 
 export const SwapPageFooter = ({
   onClick,
+  rightContent,
+  showRouteInfo,
   ...props
 }: {
   onClick?: () => void;
-} & SwapPageFooterItemsProps) => {
+} & SwapPageFooterItemsProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   return (
     <GhostButton
       gap={5}
       align="center"
       justify="space-between"
       onClick={onClick}
+      {...props}
     >
-      <SwapPageFooterItems {...props} />
+      <SwapPageFooterItems
+        rightContent={rightContent}
+        showRouteInfo={showRouteInfo}
+      />
     </GhostButton>
   );
 };
diff --git a/packages/widget-v2/src/pages/SwapPage/useSetMaxAmount.ts b/packages/widget-v2/src/pages/SwapPage/useSetMaxAmount.ts
@@ -50,4 +50,4 @@ export const useSetMaxAmount = () => {
       setSourceAssetAmount(maxAmountMinusGasFees);
     }
   };
-};
+};
diff --git a/packages/widget-v2/src/pages/SwapPage/useSourceBalance.ts b/packages/widget-v2/src/pages/SwapPage/useSourceBalance.ts
@@ -13,4 +13,4 @@ export const useSourceBalance = () => {
   if (!denom || !chainID) return;
 
   return skipBalances?.chains?.[chainID]?.denoms?.[denom];
-};
+};