a

orbs-network · Apr 10, 2024 · 2aaf540 · 2aaf540
1 parent ea3281e
commit 2aaf540
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 34 deletions.
diff --git a/packages/dapp-example/src/PancakeSwap.tsx b/packages/dapp-example/src/PancakeSwap.tsx
@@ -182,8 +182,8 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
     <StyledPancakeTwap isDarkTheme={isDarkTheme ? 1 : 0}>
       <TWAP
         account={account}
-        srcToken={config.wToken.address}
-        dstToken="0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d"
+        srcToken="CAKE"
+        dstToken={config.wToken.address}
         dappTokens={dappTokens}
         isDarkTheme={isDarkTheme}
         limit={limit}

diff --git a/packages/lib/src/context.tsx b/packages/lib/src/context.tsx
@@ -10,7 +10,7 @@ import { TwapErrorWrapper } from "./ErrorHandling";
 import { Wizard } from "./components";
 import { getQueryParam } from "./utils";
 import { QUERY_PARAMS } from "./consts";
-
+import BN from "bignumber.js";
 analytics.onModuleLoad();
 
 export interface TWAPContextProps extends TwapLibProps {
@@ -44,13 +44,15 @@ const useLimitPriceUpdater = () => {
 };
 
 const Listener = (props: TwapLibProps) => {
-  const { srcToken, dstToken, srcAmount, setOutAmount, setLimitPriceUi, dstAmount } = useTwapStore((s) => ({
+  const { srcToken, dstToken, srcAmount, setOutAmount, setLimitPriceUi, dstAmount, srcUsd, dstUsd } = useTwapStore((s) => ({
     srcToken: s.srcToken,
     dstToken: s.dstToken,
     srcAmount: s.getSrcAmount().toString(),
     setOutAmount: s.setOutAmount,
     setLimitPriceUi: s.setLimitPriceUi,
     dstAmount: s.dstAmount,
+    srcUsd: s.srcUsd,
+    dstUsd: s.dstUsd,
   }));
 
   useEffect(() => {
@@ -69,7 +71,7 @@ const Listener = (props: TwapLibProps) => {
     const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE);
     const custom = props.enableQueryParams && !!limitPriceQueryParam;
     !result?.isLoading && setOutAmount(result?.outAmount, result?.isLoading, custom);
-  }, [result?.isLoading, result?.outAmount, setOutAmount, props.enableQueryParams]);
+  }, [result?.isLoading, result?.outAmount, setOutAmount, props.enableQueryParams, dstUsd]);
 
   useEffect(() => {
     updateStoreOveride(props.storeOverride);

diff --git a/packages/lib/src/hooks.ts b/packages/lib/src/hooks.ts
@@ -22,6 +22,7 @@ import {
   parseEvents,
   sendAndWaitForConfirmations,
   networks,
+  maxUint256,
 } from "@defi.org/web3-candies";
 import { useOrdersStore, useTwapStore, useWizardStore, WizardAction, WizardActionStatus } from "./store";
 import { QUERY_PARAMS, REFETCH_BALANCE, REFETCH_GAS_PRICE, REFETCH_ORDER_HISTORY, REFETCH_USD, STALE_ALLOWANCE } from "./consts";
@@ -156,7 +157,7 @@ export const useApproveToken = (disableWizard?: boolean) => {
       }
 
       analytics.onApproveClick(srcAmount);
-      await lib?.approve(srcToken!, srcAmount, priorityFeePerGas, maxFeePerGas);
+      await lib?.approve(srcToken!, maxUint256, priorityFeePerGas, maxFeePerGas);
       await refetch();
     },
     {
@@ -650,7 +651,7 @@ export const useOrdersHistoryQuery = () => {
           if (progress === 100) return Status.Completed;
           if (lib?.config.chainId === networks.bsc.id) {
             // Temporary fix to show open order until the graph is synced.
-            if (o.status === 2 && progress < 100 && o.status > Date.now() / 1000) return Status.Open;
+            if ((o.status === 2 && progress < 100) || o.status > Date.now() / 1000) return Status.Open;
           }
           return lib!.status(o);
         };

diff --git a/packages/lib/src/store.ts b/packages/lib/src/store.ts
@@ -75,7 +75,7 @@ export const useTwapStore = create(
     setLimitOrderPriceUi: () => {
       setQueryParam(QUERY_PARAMS.LIMIT_PRICE, undefined);
       let price = (get() as any).getMarketPrice(false).marketPrice;
-      price = BN(price).times(0.95).toFixed(4);
+      price = BN(price).times(0.95).toString();
       set({ limitPriceUi: { priceUi: price, inverted: false, custom: false } });
     },
     setLimitOrder: (isLimitOrder?: boolean) => {

diff --git a/packages/pancake/src/index.tsx b/packages/pancake/src/index.tsx
@@ -41,7 +41,7 @@ import {
   StyledSwapModalContent,
   StyledModalHeaderTitle,
 } from "./styles";
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   StyledBalance,
   StyledEmptyUSD,
@@ -64,7 +64,6 @@ import BN from "bignumber.js";
 import { MdArrowDropDown } from "@react-icons/all-files/md/MdArrowDropDown";
 import { AiOutlineArrowDown } from "@react-icons/all-files/ai/AiOutlineArrowDown";
 import { GrPowerReset } from "@react-icons/all-files/gr/GrPowerReset";
-import { BsQuestionCircle } from "@react-icons/all-files/bs/BsQuestionCircle";
 import PancakeOrders from "./PancakeOrders";
 import { getTokenFromTokensList } from "@orbs-network/twap-ui";
 import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
@@ -231,7 +230,7 @@ const SrcTokenPercentSelector = () => {
           ? false
           : Math.round(percent * 100) === p.value * 100 || (p.value === 1 && BN(getMaxSrcInputAmount || 0).isEqualTo(srcAmount));
         return (
-          <StyledButton selected={selected ? 1 : 0} key={p.text} onClick={() => onClick(p.value)}>
+          <StyledButton selected={selected ? 1 : 0} key={p.text} onClick={() => (selected ? () => {} : onClick(p.value))}>
             {p.text}
           </StyledButton>
         );
@@ -519,7 +518,7 @@ interface Store {
   setSwapState: (value: SwapState) => void;
 }
 
-export const useOrdersStore = create<Store>((set) => ({
+export const useOrdersStore = create<Store>((set, get) => ({
   swapState: SwapState.REVIEW,
   setSwapState: (swapState) => set({ swapState }),
 }));
@@ -545,9 +544,13 @@ const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => {
   const inputCurrency = useMemo(() => getTokenFromTokensList(dappTokens, fromToken?.address), [dappTokens, fromToken]);
   const [error, setError] = useState("");
   const { data: hasNativeBalance } = hooks.useHasMinNativeTokenBalance("0.0035");
+  const id = useRef(1);
 
   const onSubmit = useCallback(async () => {
+    let _id = id.current;
     try {
+      console.log("start", _id);
+
       if (!hasNativeBalance) {
         setError(`Insufficient BNB balance, you need at least 0.0035BNB to cover the transaction fees.`);
         setSwapState(SwapState.ERROR);
@@ -557,14 +560,22 @@ const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => {
         setSwapState(SwapState.APPROVE);
         await approveCallback();
       }
-      setSwapState(SwapState.ATTEMTPING_TX);
+      if (id.current === _id) {
+        setSwapState(SwapState.ATTEMTPING_TX);
+      }
       await createOrder();
-      setSwapState(SwapState.COMPLETED);
+      console.log("id", id.current, _id);
+
+      if (id.current === _id) {
+        setSwapState(SwapState.COMPLETED);
+      }
     } catch (error) {
-      setSwapState(SwapState.ERROR);
-      setError(parseError(error) || "An error occurred");
+      if (id.current === _id) {
+        setSwapState(SwapState.ERROR);
+        setError(parseError(error) || "An error occurred");
+      }
     }
-  }, [allowance, approveCallback, createOrder, setSwapState, setError, hasNativeBalance]);
+  }, [allowance, approveCallback, createOrder, setSwapState, setError, hasNativeBalance, id]);
 
   const wrongNetwork = store.useTwapStore((store) => store.wrongNetwork);
   let content = null;
@@ -577,17 +588,14 @@ const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => {
   };
 
   const onClose = () => {
+    id.current = id.current + 1;
     setShowConfirmation(false);
+    resetPoupupState();
     if (txHash) {
       reset({ waitingForOrdersUpdate: true });
-      resetPoupupState();
     }
     if (swapState === SwapState.COMPLETED) {
       reset();
-      resetPoupupState();
-    }
-    if (swapState === SwapState.ERROR) {
-      resetPoupupState();
     }
   };
 
@@ -671,22 +679,32 @@ const ModalHeader = ({ title, onClose }: { title?: string; onClose: () => void }
 
 export const useShowSwapModalButton = () => {
   const translations = useTwapContext()?.translations;
-  const { shouldWrap, shouldUnwrap, wrongNetwork, setShowConfirmation, warning, createOrderLoading, srcUsd, srcAmount } = store.useTwapStore((store) => ({
-    maker: store.lib?.maker,
-    shouldWrap: store.shouldWrap(),
-    shouldUnwrap: store.shouldUnwrap(),
-    wrongNetwork: store.wrongNetwork,
-    setShowConfirmation: store.setShowConfirmation,
-    warning: store.getFillWarning(translations),
-    createOrderLoading: store.loading,
-    srcUsd: store.srcUsd,
-    srcAmount: store.srcAmountUi,
-  }));
+  const { shouldWrap, shouldUnwrap, wrongNetwork, setShowConfirmation, warning, createOrderLoading, srcUsd, srcAmount, dstAmount, dstAmountLoading, dstUsd } = store.useTwapStore(
+    (store) => ({
+      maker: store.lib?.maker,
+      shouldWrap: store.shouldWrap(),
+      shouldUnwrap: store.shouldUnwrap(),
+      wrongNetwork: store.wrongNetwork,
+      setShowConfirmation: store.setShowConfirmation,
+      warning: store.getFillWarning(translations),
+      createOrderLoading: store.loading,
+      srcUsd: store.srcUsd,
+      srcAmount: store.srcAmountUi,
+      dstAmount: store.dstAmount,
+      dstAmountLoading: store.dstAmountLoading,
+      dstUsd: store.dstUsd,
+    })
+  );
   const outAmountLoading = useOutAmountLoading();
   const { mutate: unwrap, isLoading: unwrapLoading } = hooks.useUnwrapToken(true);
   const { mutate: wrap, isLoading: wrapLoading } = hooks.useWrapToken(true);
   const { loading: changeNetworkLoading, changeNetwork } = hooks.useChangeNetwork();
 
+  const noLiquidity = useMemo(() => {
+    if (!srcAmount || BN(srcAmount).isZero() || dstAmountLoading) return false;
+    return !dstAmount || BN(dstAmount).isZero();
+  }, [dstAmount, dstAmountLoading, srcAmount]);
+
   if (wrongNetwork)
     return {
       text: translations.switchNetwork,
@@ -706,7 +724,15 @@ export const useShowSwapModalButton = () => {
     };
   }
 
-  if (!srcUsd || srcUsd.isZero()) {
+  if (noLiquidity) {
+    return {
+      text: "Insufficient liquidity for this trade.",
+      disabled: true,
+      loading: false,
+    };
+  }
+
+  if (!srcUsd || srcUsd.isZero() || !dstUsd || dstUsd.isZero()) {
     return {
       text: "Searching for the best price",
       disabled: true,