@rango-dev/widget-embedded 0.1.10-next.80 → 0.1.10-next.82

package/src/store/bestRoute.ts

@@ -1,11 +1,14 @@
 import { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 import { Token } from 'rango-sdk/lib';
 import { create } from 'zustand';
-import { immer } from 'zustand/middleware/immer';
 import BigNumber from 'bignumber.js';
 import { ZERO } from '../constants/numbers';
 import { getBestRouteToTokenUsdPrice } from '../utils/routing';
 import createSelectors from './selectors';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { httpService } from '../services/httpService';
+import { useSettingsStore } from './settings';
+import { createBestRouteRequestBody } from '../utils/swap';
 
 const getUsdValue = (token: Token | null, amount: string) =>
   new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0);
@@ -19,6 +22,8 @@ interface RouteState {
   outputUsdValue: BigNumber;
   fromToken: Token | null;
   toToken: Token | null;
+  loading: boolean;
+  error: string;
   setFromChain: (chain: BlockchainMeta | null) => void;
   setToChain: (chian: BlockchainMeta | null) => void;
   setFromToken: (token: Token | null) => void;
@@ -30,7 +35,7 @@ interface RouteState {
 
 export const useBestRouteStore = createSelectors(
   create<RouteState>()(
-    immer((set) => ({
+    subscribeWithSelector((set) => ({
       fromChain: null,
       fromToken: null,
       inputAmount: '',
@@ -40,43 +45,157 @@ export const useBestRouteStore = createSelectors(
       toChain: null,
       toToken: null,
       bestRoute: null,
+      loading: false,
+      error: '',
       setBestRoute: (bestRoute) =>
         set((state) => {
-          state.bestRoute = bestRoute;
+          let outputAmount: BigNumber | null = null;
+          let outputUsdValue: BigNumber = ZERO;
           if (!!bestRoute) {
-            const outputAmount = !!bestRoute.result?.outputAmount
+            outputAmount = !!bestRoute.result?.outputAmount
               ? new BigNumber(bestRoute.result?.outputAmount)
               : null;
-            state.outputAmount = outputAmount;
-            state.outputUsdValue = new BigNumber(outputAmount || ZERO).multipliedBy(
-              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice || 0,
+            outputUsdValue = new BigNumber(outputAmount || ZERO).multipliedBy(
+              getBestRouteToTokenUsdPrice(bestRoute) ||
+                state.toToken?.usdPrice ||
+                0
             );
           }
+          return {
+            bestRoute,
+            ...(!!bestRoute && {
+              outputAmount,
+              outputUsdValue,
+            }),
+          };
         }),
       setFromChain: (chain) =>
-        set((state) => {
-          state.fromChain = chain;
-        }),
+        set(() => ({
+          fromChain: chain,
+        })),
       setFromToken: (token) =>
-        set((state) => {
-          state.fromToken = token;
-          if (!!state.inputAmount)
-            state.inputUsdValue = getUsdValue(state.fromToken!, state.inputAmount);
-        }),
+        set((state) => ({
+          fromToken: token,
+          ...(!!state.inputAmount && {
+            inputUsdValue: getUsdValue(token, state.inputAmount),
+          }),
+        })),
       setToChain: (chain) =>
-        set((state) => {
-          state.toChain = chain;
-        }),
+        set(() => ({
+          toChain: chain,
+        })),
       setToToken: (token) =>
-        set((state) => {
-          state.toToken = token;
-        }),
+        set(() => ({
+          toToken: token,
+        })),
       setInputAmount: (amount) =>
-        set((state) => {
-          state.inputAmount = amount;
-          if (!!state.fromToken)
-            state.inputUsdValue = getUsdValue(state.fromToken, state.inputAmount);
-        }),
-    })),
-  ),
+        set((state) => ({
+          inputAmount: amount,
+          ...(!!state.fromToken && {
+            inputUsdValue: getUsdValue(state.fromToken, amount),
+          }),
+        })),
+    }))
+  )
+);
+
+const bestRoute = (
+  bestRouteStore: typeof useBestRouteStore,
+  settingsStore: typeof useSettingsStore
+) => {
+  let abortController: AbortController | null = null;
+  const fetchBestRoute = () => {
+    const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
+    const { slippage, customSlippage, disabledLiquiditySources } =
+      settingsStore.getState();
+    if (!fromToken || !toToken || !inputAmount) return;
+    abortController?.abort();
+    abortController = new AbortController();
+    const userSlippage = customSlippage | slippage;
+    const requestBody = createBestRouteRequestBody(
+      fromToken,
+      toToken,
+      inputAmount,
+      [],
+      [],
+      disabledLiquiditySources,
+      userSlippage,
+      false
+    );
+    bestRouteStore.setState({ loading: true, bestRoute: null });
+    httpService
+      .getBestRoute(requestBody, {
+        signal: abortController.signal,
+      })
+      .then((res) => {
+        const { setBestRoute } = bestRouteStore.getState();
+        setBestRoute(res);
+        bestRouteStore.setState({ loading: false });
+        abortController = null;
+      })
+      .catch((error) => {
+        if (error.code === 'ERR_CANCELED') return;
+        bestRouteStore.setState({
+          error: error.message,
+          loading: false,
+        });
+      });
+  };
+
+  useBestRouteStore.subscribe(
+    (state) => ({
+      fromChain: state.fromChain,
+      fromToken: state.fromToken,
+      toChain: state.toChain,
+      toToken: state.toToken,
+      inputAmount: state.inputAmount,
+    }),
+
+    fetchBestRoute.bind(null),
+    {
+      equalityFn: (prevState, state) => {
+        if (
+          prevState.fromChain?.name !== state.fromChain?.name ||
+          prevState.toChain?.name !== state.toChain?.name ||
+          prevState.fromToken?.symbol !== state.fromToken?.symbol ||
+          prevState.toToken?.symbol !== state.toToken?.symbol ||
+          prevState.fromToken?.blockchain !== state.fromToken?.blockchain ||
+          prevState.toToken?.blockchain !== state.toToken?.blockchain ||
+          prevState.fromToken?.address !== state.fromToken?.address ||
+          prevState.toToken?.address !== state.toToken?.address ||
+          prevState.inputAmount !== state.inputAmount
+        )
+          return false;
+        else return true;
+      },
+    }
+  );
+
+  useSettingsStore.subscribe(
+    (state) => ({
+      slippage: state.slippage,
+      customSlippage: state.customSlippage,
+      disabledLiquiditySources: state.disabledLiquiditySources,
+    }),
+    fetchBestRoute.bind(null),
+    {
+      equalityFn: (prevState, state) => {
+        if (
+          prevState.slippage !== state.slippage ||
+          prevState.customSlippage !== state.customSlippage ||
+          prevState.disabledLiquiditySources.length !==
+            state.disabledLiquiditySources.length
+        )
+          return false;
+        else return true;
+      },
+    }
+  );
+
+  return { fetchBestRoute };
+};
+
+export const { fetchBestRoute } = bestRoute(
+  useBestRouteStore,
+  useSettingsStore
 );

package/src/store/confirmSwap.ts

@@ -0,0 +1,327 @@
+import BigNumber from 'bignumber.js';
+import { create } from 'zustand';
+import { shallow } from 'zustand/shallow';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { httpService } from '../services/httpService';
+import { PendingSwapSettings } from '../types';
+import { numberToString } from '../utils/numbers';
+import {
+  isRouteChanged,
+  isNumberOfSwapsChanged,
+  isRouteSwappersUpdated,
+  isRouteInternalCoinsUpdated,
+} from '../utils/routing';
+import {
+  createBestRouteRequestBody,
+  getOutputRatio,
+  outputRatioHasWarning,
+  isOutputAmountChangedALot,
+  getRouteOutputAmount,
+  getPercentageChange,
+  getBalanceWarnings,
+  getMinRequiredSlippage,
+  hasProperSlippage,
+  calculatePendingSwap,
+  getWalletsForNewSwap,
+} from '../utils/swap';
+import { useBestRouteStore } from './bestRoute';
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
+import { useSettingsStore } from './settings';
+import { useWalletsStore } from './wallets';
+
+interface ConfirmSwapState {
+  loading: boolean;
+  errors: ConfirmSwapError[];
+  warnings: ConfirmSwapWarnings[];
+  proceedAnyway: boolean;
+}
+
+export const useConfirmSwapStore = createSelectors(
+  create<ConfirmSwapState>()(
+    subscribeWithSelector(() => ({
+      loading: false,
+      errors: [],
+      warnings: [],
+      proceedAnyway: false,
+    }))
+  )
+);
+
+export enum ConfirmSwapErrorTypes {
+  NO_ROUTE,
+  ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+  REQUEST_FAILED,
+  INSUFFICIENT_SLIPPAGE,
+}
+
+export type ConfirmSwapError =
+  | {
+      type: ConfirmSwapErrorTypes.REQUEST_FAILED;
+      status?: number;
+    }
+  | {
+      type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE;
+      minRequiredSlippage: number;
+    }
+  | {
+      type: Exclude<
+        ConfirmSwapErrorTypes,
+        | ConfirmSwapErrorTypes.REQUEST_FAILED
+        | ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
+      >;
+    };
+
+export type ConfirmSwapWarnings =
+  | {
+      type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | { type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE; messages: string[] }
+  | {
+      type: Exclude<
+        ConfirmSwapWarningTypes,
+        | ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+        | ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE
+      >;
+    };
+
+export enum ConfirmSwapWarningTypes {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+  INSUFFICIENT_BALANCE,
+}
+
+export const confirmSwap = () => {
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    bestRoute: initialRoute,
+    inputUsdValue,
+    setBestRoute,
+  } = useBestRouteStore.getState();
+  const { accounts, selectedWallets } = useWalletsStore.getState();
+  const { proceedAnyway } = useConfirmSwapStore.getState();
+  const { disabledLiquiditySources, slippage, customSlippage } =
+    useSettingsStore.getState();
+  const { meta } = useMetaStore.getState();
+
+  const userSlippage = customSlippage || slippage;
+
+  if (!fromToken || !toToken || !inputAmount || !initialRoute) return;
+
+  if (proceedAnyway!) {
+    const swapSettings: PendingSwapSettings = {
+      slippage: userSlippage.toString(),
+      disabledSwappersGroups: disabledLiquiditySources,
+    };
+
+    const newSwap = calculatePendingSwap(
+      inputAmount.toString(),
+      initialRoute,
+      getWalletsForNewSwap(selectedWallets),
+      swapSettings,
+      false,
+      meta
+    );
+
+    console.log('new swap:', newSwap);
+
+    return useConfirmSwapStore.setState({
+      errors: [],
+      warnings: [],
+      proceedAnyway: false,
+    });
+  }
+
+  let abortController: AbortController | null = new AbortController();
+
+  useConfirmSwapStore.setState({ loading: true });
+
+  const requestBody = createBestRouteRequestBody(
+    fromToken,
+    toToken,
+    inputAmount,
+    accounts,
+    selectedWallets,
+    disabledLiquiditySources,
+    userSlippage,
+    true
+  );
+  const unsubscribeFromBestRouteStore = useBestRouteStore.subscribe(
+    (state) => state.bestRoute,
+    () => {
+      abortController.abort();
+    },
+    { equalityFn: shallow }
+  );
+  const unsubscribeFromWalletsStore = useWalletsStore.subscribe(
+    (state) => state.selectedWallets,
+    () => {
+      abortController?.abort();
+    },
+    {
+      equalityFn: (prevState, state) => {
+        const selectedWalletsChanged = !state.every(
+          (wallet) =>
+            !!prevState.find(
+              (prevWallet) =>
+                wallet.address === prevWallet.address &&
+                wallet.chain === prevWallet.chain
+            )
+        );
+
+        if (selectedWalletsChanged) return false;
+        else return true;
+      },
+    }
+  );
+
+  httpService
+    .getBestRoute(requestBody, { signal: abortController.signal })
+    .then((confiremedRoute) => {
+      useConfirmSwapStore.setState({ loading: false });
+
+      if (
+        !confiremedRoute.result ||
+        !new BigNumber(confiremedRoute.requestAmount).isEqualTo(
+          new BigNumber(inputAmount || '-1')
+        )
+      )
+        return useConfirmSwapStore.setState((prevState) => ({
+          errors: prevState.errors.concat({
+            type: ConfirmSwapErrorTypes.NO_ROUTE,
+          }),
+        }));
+
+      const confirmSwap: Partial<ConfirmSwapState> = {
+        loading: false,
+        errors: [],
+        warnings: [],
+        proceedAnyway,
+      };
+
+      const routeChanged = isRouteChanged(initialRoute, confiremedRoute!);
+
+      if (routeChanged) {
+        setBestRoute(confiremedRoute);
+        const newRouteOutputUsdValue = new BigNumber(
+          confiremedRoute.result?.outputAmount || '0'
+        ).multipliedBy(toToken.usdPrice || 0);
+
+        const outputRatio = getOutputRatio(
+          inputUsdValue,
+          newRouteOutputUsdValue
+        );
+        const highValueLoss = outputRatioHasWarning(inputUsdValue, outputRatio);
+
+        if (isNumberOfSwapsChanged(initialRoute, confiremedRoute))
+          confirmSwap.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_UPDATED,
+          });
+        else if (isRouteSwappersUpdated(initialRoute, confiremedRoute))
+          confirmSwap.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_SWAPPERS_UPDATED,
+          });
+        else isRouteInternalCoinsUpdated(initialRoute, confiremedRoute);
+        confirmSwap.warnings.push({
+          type: ConfirmSwapWarningTypes.ROUTE_COINS_UPDATED,
+        });
+        if (highValueLoss)
+          confirmSwap.errors.push({
+            type: ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+          });
+        else if (isOutputAmountChangedALot(initialRoute, confiremedRoute))
+          confirmSwap.warnings.push({
+            type: ConfirmSwapWarningTypes.ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+            newOutputAmount: numberToString(
+              getRouteOutputAmount(confiremedRoute)
+            ),
+            percentageChange: numberToString(
+              getPercentageChange(
+                getRouteOutputAmount(initialRoute),
+                getRouteOutputAmount(confiremedRoute)
+              ),
+              null,
+              2
+            ),
+          });
+      }
+
+      const balanceWarnings = getBalanceWarnings(
+        confiremedRoute,
+        selectedWallets
+      );
+      const enoughBalance = balanceWarnings.length === 0;
+
+      if (!enoughBalance)
+        confirmSwap.warnings.push({
+          type: ConfirmSwapWarningTypes.INSUFFICIENT_BALANCE,
+          messages: balanceWarnings,
+        });
+
+      const minRequiredSlippage = getMinRequiredSlippage(initialRoute);
+
+      if (!hasProperSlippage(userSlippage.toString(), minRequiredSlippage))
+        confirmSwap.errors.push({
+          type: ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE,
+          minRequiredSlippage,
+        });
+
+      const noErrors = confirmSwap.errors.length === 0;
+      const noWarnings = confirmSwap.warnings.length === 0;
+
+      if (
+        (noErrors || (!noErrors && proceedAnyway)) &&
+        (noWarnings || (!noWarnings && proceedAnyway))
+      ) {
+        const swapSettings: PendingSwapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources,
+        };
+
+        const newSwap = calculatePendingSwap(
+          inputAmount.toString(),
+          initialRoute,
+          getWalletsForNewSwap(selectedWallets),
+          swapSettings,
+          false,
+          meta
+        );
+
+        console.log('new swap:', newSwap);
+      } else if (!proceedAnyway) confirmSwap.proceedAnyway = true;
+
+      abortController = null;
+      useConfirmSwapStore.setState(confirmSwap);
+      unsubscribeFromBestRouteStore();
+      unsubscribeFromWalletsStore();
+    })
+    .catch((error) => {
+      abortController = null;
+      if (error.code === 'ERR_CANCELED') {
+        useConfirmSwapStore.setState({
+          errors: [],
+          warnings: [],
+          loading: false,
+          proceedAnyway: false,
+        });
+        unsubscribeFromBestRouteStore();
+        unsubscribeFromWalletsStore();
+      }
+
+      const status = error.response?.status;
+
+      useConfirmSwapStore.setState((prevState) => ({
+        loading: false,
+        errors: prevState.errors.concat({
+          type: ConfirmSwapErrorTypes.REQUEST_FAILED,
+          status,
+        }),
+      }));
+    });
+};

package/src/store/settings.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
+import { removeDuplicateFrom } from '../utils/common';
 import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
@@ -9,12 +10,12 @@ type Theme = 'auto' | 'dark' | 'light';
 interface Settings {
   slippage: number;
   customSlippage: number | null;
-  infinitApprove: boolean;
+  infiniteApprove: boolean;
   disabledLiquiditySources: string[];
   theme: Theme;
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
-  toggleInfinitApprove: () => void;
+  toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: Theme) => void;
   toggleAllLiquiditySources: () => void;
@@ -23,50 +24,61 @@ interface Settings {
 export const useSettingsStore = createSelectors(
   create<Settings>()(
     persist(
-      immer((set) => ({
-        slippage: 1,
+      subscribeWithSelector((set) => ({
+        slippage: DEFAULT_SLIPPAGE,
         customSlippage: null,
-        infinitApprove: false,
+        infiniteApprove: false,
         disabledLiquiditySources: [],
         theme: 'auto',
         setSlippage: (slippage) =>
-          set((state) => {
-            state.slippage = slippage;
-          }),
-        setCustomSlippage: (customSlippage) => {
-          return set((state) => {
-            state.customSlippage = customSlippage;
-          });
-        },
+          set(() => ({
+            slippage: slippage,
+          })),
+        setCustomSlippage: (customSlippage) =>
+          set(() => ({
+            customSlippage: customSlippage,
+          })),
         toggleAllLiquiditySources: () =>
           set((state) => {
             const { swappers } = useMetaStore.getState().meta;
+            const swappersGroup = removeDuplicateFrom(
+              swappers.map((swapper) => swapper.swapperGroup)
+            );
 
-            if (swappers.length - state.disabledLiquiditySources.length === 0)
-              state.disabledLiquiditySources = [];
+            if (swappersGroup.length === state.disabledLiquiditySources.length)
+              return { disabledLiquiditySources: [] };
             else {
-              const allSwappers = swappers.map((swapper) => swapper.swapperGroup);
-              state.disabledLiquiditySources = allSwappers;
+              return {
+                disabledLiquiditySources: swappersGroup,
+              };
             }
           }),
-        toggleInfinitApprove: () =>
-          set((state) => {
-            state.infinitApprove = !state.infinitApprove;
-          }),
+        toggleInfiniteApprove: () =>
+          set((state) => ({
+            infiniteApprove: !state.infiniteApprove,
+          })),
         toggleLiquiditySource: (name) =>
           set((state) => {
-            state.disabledLiquiditySources = state.disabledLiquiditySources.includes(name)
-              ? state.disabledLiquiditySources.filter((liquiditySource) => liquiditySource != name)
-              : state.disabledLiquiditySources.concat(name);
+            if (state.disabledLiquiditySources.includes(name))
+              return {
+                disabledLiquiditySources: state.disabledLiquiditySources.filter(
+                  (liquiditySource) => liquiditySource != name
+                ),
+              };
+            else
+              return {
+                disabledLiquiditySources:
+                  state.disabledLiquiditySources.concat(name),
+              };
           }),
         setTheme: (theme) =>
-          set((state) => {
-            state.theme = theme;
-          }),
+          set(() => ({
+            theme,
+          })),
       })),
       {
         name: 'user-settings',
-      },
-    ),
-  ),
+      }
+    )
+  )
 );

package/src/store/ui.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+import createSelectors from './selectors';
+
+interface UiState {
+  connectWalletsButtonDisabled: boolean;
+  toggleConnectWalletsButton: () => void;
+}
+
+export const useUiStore = createSelectors(
+  create<UiState>()((set) => ({
+    connectWalletsButtonDisabled: false,
+    toggleConnectWalletsButton: () =>
+      set((state) => ({ connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled })),
+  })),
+);