widget v2: invert swap logic

skip-mev · Sep 2, 2024 · 67249e8 · 67249e8
1 parent a81fb70
commit 67249e8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 25 deletions.
diff --git a/packages/widget-v2/src/components/MainButton.tsx b/packages/widget-v2/src/components/MainButton.tsx
@@ -107,7 +107,7 @@ export const LoadingButton = ({
 
 const StyledMainButton = styled(Row).attrs({
   as: "button",
-})<{ backgroundColor?: string; disabled?: boolean; loading?: boolean }>`
+}) <{ backgroundColor?: string; disabled?: boolean; loading?: boolean }>`
   position: relative;
   border: none;
   background-color: ${({ theme, backgroundColor }) =>
@@ -168,7 +168,7 @@ const StyledTimeRemaining = styled(Row)`
   border-radius: 10px;
 `;
 
-const StyledOverlay = styled(Row)<{ backgroundColor?: string }>`
+const StyledOverlay = styled(Row) <{ backgroundColor?: string }>`
   position: absolute;
   height: 66px;
   width: 476px;

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx
@@ -30,10 +30,10 @@ export const SwapPage = () => {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
   const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+  const setSwapDirection = useSetAtom(swapDirectionAtom)
   const [{ data: assets }] = useAtom(skipAssetsAtom);
-  const [{ data: chains }] = useAtom(skipChainsAtom);
-  const setSwapDirection = useSetAtom(swapDirectionAtom);
-  const { isLoading: isRouteLoading } = useAtomValue(skipRouteAtom);
+  const [{ data: chains }] = useAtom(skipChainsAtom);;
+  const { isLoading: isRouteLoading, isError: isRouteError, error: routeError } = useAtomValue(skipRouteAtom);
   const swapFlowSettings = useModal(SwapPageSettings);
   const tokenAndChainSelectorFlow = useModal(TokenAndChainSelectorModal);
 
@@ -168,9 +168,9 @@ export const SwapPage = () => {
             }}
           />
         </Column>
-        {!isRouteLoading && <MainButton label="Connect Wallet" icon={ICONS.plus} />}
+        {!isRouteLoading && !isRouteError && <MainButton label="Connect Wallet" icon={ICONS.plus} />}
         {isRouteLoading && <MainButton label="Finding Best Route..." loading={true} />}
-
+        {isRouteError && !isRouteLoading && <MainButton label={routeError.message} disabled={true} />}
         <SwapPageFooter
           showRouteInfo
           onClick={() =>

diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPageBridge.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPageBridge.tsx
@@ -1,11 +1,22 @@
 import { useTheme, styled } from "styled-components";
 import { BridgeArrowIcon } from "@/icons/BridgeArrowIcon";
 import { BridgeIcon } from "@/icons/BridgeIcon";
+import { destinationAssetAtom, sourceAssetAtom, swapDirectionAtom } from "@/state/swapPage";
+import { useAtom, useSetAtom } from "jotai";
 
 export const SwapPageBridge = () => {
   const theme = useTheme();
+  const [sourceAsset, setSourceAsset] = useAtom(sourceAssetAtom);
+  const [destinationAsset, setDestinationAsset] = useAtom(destinationAssetAtom);
+  const setSwapDirection = useSetAtom(swapDirectionAtom)
+  const onInvertSwap = () => {
+    setSwapDirection("swap-out");
+    setSourceAsset(destinationAsset);
+    setDestinationAsset(sourceAsset);
+  }
+
   return (
-    <div style={{ position: "relative" }}>
+    <div style={{ position: "relative", cursor: "pointer" }} onClick={onInvertSwap}>
       <BridgeIcon color={theme.primary.background.normal} />
       <StyledBridgeArrow color={theme.primary.text.normal} />
     </div>

diff --git a/packages/widget-v2/src/pages/SwapPage/swapPageState.ts b/packages/widget-v2/src/pages/SwapPage/swapPageState.ts
diff --git a/packages/widget-v2/src/state/skipClient.ts b/packages/widget-v2/src/state/skipClient.ts
@@ -137,8 +137,9 @@ export const skipRouteAtom = atomWithQuery((get) => {
         allowUnsafe: true,
       });
     },
-    enabled: !!params,
-    refetchInterval: 1000 * 10,
+    retry: 1,
+    enabled: !!params && ((Number(params.amountIn) > 0) || (Number(params.amountOut) > 0)),
+    refetchInterval: 1000 * 30,
   };
 });