@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/store/bestRoute.ts

@@ -1,28 +1,20 @@
-import { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
-import { Token } from 'rango-sdk';
-import { create } from 'zustand';
+import type { TokenWithBalance } from '../components/TokenList';
+import type { Wallet } from '../types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
+import type { BestRouteResponse, BlockchainMeta, Token } from 'rango-sdk';
+
 import BigNumber from 'bignumber.js';
-import { ZERO } from '../constants/numbers';
-import {
-  getBestRouteToTokenUsdPrice,
-  isRouteParametersChanged,
-} from '../utils/routing';
-import createSelectors from './selectors';
+import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
-import { httpService } from '../services/httpService';
-import { useSettingsStore } from './settings';
-import { calcOutputUsdValue, createBestRouteRequestBody } from '../utils/swap';
-import { useMetaStore } from './meta';
-import {
-  getDefaultToken,
-  getSortedTokens,
-  tokensAreEqual,
-} from '../utils/wallets';
-import { useWalletsStore } from './wallets';
-import { TokenWithBalance } from '../pages/SelectTokenPage';
-import { PendingSwap } from '@rango-dev/queue-manager-rango-preset/dist/shared';
-import { debounce } from '../utils/common';
+
+import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
+import { getBestRouteToTokenUsdPrice } from '../utils/routing';
+import { calcOutputUsdValue } from '../utils/swap';
+import { tokensAreEqual } from '../utils/wallets';
+
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
 
 const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
   token?.usdPrice
@@ -30,54 +22,58 @@ const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
     : null;
 
 export interface RouteState {
-  fromChain: BlockchainMeta | null;
-  toChain: BlockchainMeta | null;
+  fromBlockchain: BlockchainMeta | null;
+  toBlockchain: BlockchainMeta | null;
   inputAmount: string;
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
   fromToken: TokenWithBalance | null;
   toToken: TokenWithBalance | null;
-  loading: boolean;
-  error: string;
-  sourceTokens: Token[];
-  destinationTokens: Token[];
+  routeWalletsConfirmed: boolean;
+  selectedWallets: Wallet[];
   resetRoute: () => void;
-  setFromChain: (
-    chain: BlockchainMeta | null,
-    setDefaultToken?: boolean
-  ) => void;
-  setToChain: (chian: BlockchainMeta | null, setDefaultToken?: boolean) => void;
+  resetToBlockchain: () => void;
+  resetFromBlockchain: () => void;
+  setFromBlockchain: (chain: BlockchainMeta | null) => void;
+  setToBlockchain: (chian: BlockchainMeta | null) => void;
+
   setFromToken: (token: Token | null) => void;
   setToToken: (token: Token | null) => void;
   setInputAmount: (amount: string) => void;
   bestRoute: BestRouteResponse | null;
-  setBestRoute: (bestRoute: BestRouteResponse | null) => void;
+  setRoute: (bestRoute: BestRouteResponse | null) => void;
   retry: (pendingSwap: PendingSwap) => void;
   switchFromAndTo: () => void;
+  setRouteWalletConfirmed: (flag: boolean) => void;
+  setSelectedWallets: (wallets: Wallet[]) => void;
+  customDestination: string;
+  setCustomDestination: (address: string) => void;
+  resetRouteWallets: () => void;
 }
 
 export const useBestRouteStore = createSelectors(
   create<RouteState>()(
     subscribeWithSelector((set) => ({
-      fromChain: null,
+      fromBlockchain: null,
       fromToken: null,
       inputAmount: '',
       outputAmount: null,
       inputUsdValue: new BigNumber(0),
       outputUsdValue: new BigNumber(0),
-      toChain: null,
+      toBlockchain: null,
       toToken: null,
       bestRoute: null,
-      loading: false,
-      error: '',
-      sourceTokens: [],
-      destinationTokens: [],
-      setBestRoute: (bestRoute) =>
+      routeWalletsConfirmed: false,
+      selectedWallets: [],
+      customDestination: '',
+      setRoute: (bestRoute) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
-          if (!isPositiveNumber(state.inputAmount)) return {};
+          if (!isPositiveNumber(state.inputAmount)) {
+            return {};
+          }
           if (!!bestRoute) {
             outputAmount = !!bestRoute.result?.outputAmount
               ? new BigNumber(bestRoute.result?.outputAmount)
@@ -97,68 +93,69 @@ export const useBestRouteStore = createSelectors(
         }),
       resetRoute: () =>
         set(() => ({
-          loading: true,
-          error: '',
           bestRoute: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
         })),
-      setFromChain: (chain, setDefaultToken) => {
+      setFromBlockchain: (chain) => {
         set((state) => {
-          if (state.fromChain?.name === chain?.name) return {};
-          const tokens = useMetaStore.getState().meta.tokens;
-          const connectedWallets = useWalletsStore.getState().connectedWallets;
-          const sortedTokens = getSortedTokens(
-            chain,
-            tokens,
-            connectedWallets,
-            state.destinationTokens
-          );
-          const fromToken = getDefaultToken(sortedTokens, state.toToken);
+          if (state.fromBlockchain?.name === chain?.name) {
+            return {};
+          }
+
           return {
-            fromChain: chain,
-            sourceTokens: sortedTokens,
-            ...(setDefaultToken && {
-              fromToken,
-            }),
-            ...(!!state.inputAmount && {
-              inputUsdValue: getUsdValue(fromToken, state.inputAmount),
+            fromBlockchain: chain,
+            ...(state.fromToken && {
+              bestRoute: null,
+              fromToken: null,
+              outputAmount: null,
+              outputUsdValue: null,
             }),
           };
         });
       },
-      setFromToken: (token) =>
-        set((state) => ({
+      setFromToken: (token) => {
+        const { blockchains } = useMetaStore.getState().meta;
+        const fromBlockchain =
+          blockchains.find(
+            (blockchain) => blockchain.name === token?.blockchain
+          ) ?? null;
+        return set((state) => ({
           fromToken: token,
+          fromBlockchain,
           ...(!!state.inputAmount && {
             inputUsdValue: getUsdValue(token, state.inputAmount),
           }),
-        })),
-      setToChain: (chain, setDefaultToken) => {
+        }));
+      },
+      setToBlockchain: (chain) => {
         set((state) => {
-          if (state.toChain?.name === chain?.name) return {};
-          const tokens = useMetaStore.getState().meta.tokens;
-          const connectedWallets = useWalletsStore.getState().connectedWallets;
-          const sortedTokens = getSortedTokens(
-            chain,
-            tokens,
-            connectedWallets,
-            state.destinationTokens
-          );
+          if (state.toBlockchain?.name === chain?.name) {
+            return {};
+          }
 
           return {
-            toChain: chain,
-            destinationTokens: sortedTokens,
-            ...(setDefaultToken && {
-              toToken: getDefaultToken(sortedTokens, state.fromToken),
+            toBlockchain: chain,
+            ...(state.toToken && {
+              bestRoute: null,
+              toToken: null,
+              outputAmount: null,
+              outputUsdValue: null,
             }),
           };
         });
       },
-      setToToken: (token) =>
-        set(() => ({
+      setToToken: (token) => {
+        const { blockchains } = useMetaStore.getState().meta;
+        const toBlockchain =
+          blockchains.find(
+            (blockchain) => blockchain.name === token?.blockchain
+          ) ?? null;
+        return set(() => ({
           toToken: token,
-        })),
+          toBlockchain,
+        }));
+      },
       setInputAmount: (amount) => {
         set((state) => ({
           inputAmount: amount,
@@ -166,7 +163,6 @@ export const useBestRouteStore = createSelectors(
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
             bestRoute: null,
-            error: '',
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
@@ -175,21 +171,22 @@ export const useBestRouteStore = createSelectors(
       },
       retry: (pendingSwap) => {
         const { tokens, blockchains } = useMetaStore.getState().meta;
-        const connectedWallets = useWalletsStore.getState().connectedWallets;
         const failedIndex =
           pendingSwap.status === 'failed'
             ? pendingSwap.steps.findIndex((s) => s.status === 'failed')
             : null;
 
-        if (failedIndex === null || failedIndex < 0) return;
+        if (failedIndex === null || failedIndex < 0) {
+          return;
+        }
 
         const firstStep = pendingSwap.steps[0];
         const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
-        const fromChain =
+        const fromBlockchain =
           blockchains.find(
             (blockchain) => blockchain.name === firstStep.fromBlockchain
           ) || null;
-        const toChain =
+        const toBlockchain =
           blockchains.find(
             (blockchain) => blockchain.name === lastStep.toBlockchain
           ) || null;
@@ -209,179 +206,61 @@ export const useBestRouteStore = createSelectors(
             address: lastStep.toSymbolAddress,
           })
         );
-        const sortedSourceTokens = getSortedTokens(
-          fromChain,
-          tokens,
-          connectedWallets,
-          []
-        );
-        const sortedDestinationTokens = getSortedTokens(
-          toChain,
-          tokens,
-          connectedWallets,
-          []
-        );
+
         const inputAmount = pendingSwap.inputAmount;
         set({
-          fromChain,
+          fromBlockchain,
           fromToken,
           inputAmount,
           outputAmount: null,
           inputUsdValue: getUsdValue(fromToken || null, inputAmount),
           outputUsdValue: new BigNumber(0),
-          toChain,
+          toBlockchain,
           toToken,
           bestRoute: null,
-          loading: false,
-          error: '',
-          sourceTokens: sortedSourceTokens,
-          destinationTokens: sortedDestinationTokens,
         });
       },
       switchFromAndTo: () =>
         set((state) => ({
-          fromChain: state.toChain,
+          fromBlockchain: state.toBlockchain,
           fromToken: state.toToken,
-          toChain: state.fromChain,
+          toBlockchain: state.fromBlockchain,
           toToken: state.fromToken,
-          sourceTokens: state.destinationTokens,
-          destinationTokens: state.sourceTokens,
           inputAmount: state.outputAmount?.toString() || '',
           inputUsdValue: getUsdValue(
             state.toToken,
             state.outputAmount?.toString() || ''
           ),
         })),
+
+      resetFromBlockchain: () =>
+        set(() => ({
+          fromToken: null,
+          fromBlockchain: null,
+          outputAmount: null,
+          outputUsdValue: null,
+          bestRoute: null,
+        })),
+      resetToBlockchain: () =>
+        set(() => ({
+          toToken: null,
+          toBlockchain: null,
+          outputAmount: null,
+          outputUsdValue: null,
+          bestRoute: null,
+        })),
+      setRouteWalletConfirmed: (flag) =>
+        set({
+          routeWalletsConfirmed: flag,
+        }),
+      setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
+      setCustomDestination: (address) => set({ customDestination: address }),
+      resetRouteWallets: () =>
+        set({
+          routeWalletsConfirmed: false,
+          selectedWallets: [],
+          customDestination: '',
+        }),
     }))
   )
 );
-
-const bestRoute = (
-  bestRouteStore: typeof useBestRouteStore,
-  settingsStore: typeof useSettingsStore
-) => {
-  let abortController: AbortController | null = null;
-  const fetchBestRoute = () => {
-    const { fromToken, toToken, inputAmount, resetRoute } =
-      bestRouteStore.getState();
-    const {
-      slippage,
-      customSlippage,
-      disabledLiquiditySources,
-      affiliateRef,
-      affiliatePercent,
-      affiliateWallets,
-    } = settingsStore.getState();
-    if (!fromToken || !toToken || !isPositiveNumber(inputAmount)) return;
-    abortController?.abort();
-    abortController = new AbortController();
-    const userSlippage = !!customSlippage ? customSlippage : slippage;
-    const requestBody = createBestRouteRequestBody(
-      fromToken,
-      toToken,
-      inputAmount,
-      [],
-      [],
-      disabledLiquiditySources,
-      userSlippage,
-      affiliateRef,
-      affiliatePercent,
-      affiliateWallets
-    );
-
-    if (!bestRouteStore.getState().loading) {
-      resetRoute();
-    }
-    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,
-        });
-      });
-  };
-
-  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
-
-  const bestRouteParamsListener = () => {
-    const { fromToken, toToken, inputAmount, inputUsdValue, resetRoute } =
-      useBestRouteStore.getState();
-    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0))
-      return bestRouteStore.setState({ loading: false });
-
-    if (tokensAreEqual(fromToken, toToken))
-      return bestRouteStore.setState({
-        loading: false,
-        bestRoute: null,
-        outputAmount: new BigNumber(inputAmount),
-        outputUsdValue: inputUsdValue,
-      });
-
-    if (!bestRouteStore.getState().loading) resetRoute();
-    debouncedFetchBestRoute();
-  };
-
-  useBestRouteStore.subscribe(
-    (state) => ({
-      fromChain: state.fromChain,
-      fromToken: state.fromToken,
-      toChain: state.toChain,
-      toToken: state.toToken,
-      inputAmount: state.inputAmount,
-    }),
-    bestRouteParamsListener,
-    {
-      equalityFn: (prevState, currentState) => {
-        if (
-          isRouteParametersChanged({
-            store: 'bestRoute',
-            prevState,
-            currentState,
-          })
-        )
-          return false;
-        else return true;
-      },
-    }
-  );
-
-  useSettingsStore.subscribe(
-    (state) => ({
-      slippage: state.slippage,
-      customSlippage: state.customSlippage,
-      disabledLiquiditySources: state.disabledLiquiditySources,
-      infiniteApprove: state.infiniteApprove,
-    }),
-    bestRouteParamsListener,
-    {
-      equalityFn: (prevState, currentState) => {
-        if (
-          isRouteParametersChanged({
-            store: 'settings',
-            prevState,
-            currentState,
-          })
-        )
-          return false;
-        else return true;
-      },
-    }
-  );
-
-  return { fetchBestRoute };
-};
-
-export const { fetchBestRoute } = bestRoute(
-  useBestRouteStore,
-  useSettingsStore
-);

package/src/store/meta.ts

@@ -1,13 +1,15 @@
+import type { TokenWithBalance } from '../components/TokenList';
+import type { MetaResponse } from 'rango-sdk';
+
 import { create } from 'zustand';
-import { MetaResponse } from 'rango-sdk';
-import { httpService } from '../services/httpService';
+
+import { useAppStore } from './app';
 import createSelectors from './selectors';
-import { removeDuplicateFrom } from '../utils/common';
 
 export type LoadingStatus = 'loading' | 'success' | 'failed';
 
 export interface MetaState {
-  meta: MetaResponse;
+  meta: MetaResponse & { tokens: TokenWithBalance[] };
   loadingStatus: LoadingStatus;
   fetchMeta: () => Promise<void>;
 }
@@ -18,16 +20,16 @@ export const useMetaStore = createSelectors(
     loadingStatus: 'loading',
     fetchMeta: async () => {
       try {
-        const response = await httpService().getAllMetadata();
-        const chainThatHasTokenInMetaResponse = removeDuplicateFrom(
-          response.tokens.map((t) => t.blockchain)
-        );
-        const enabledChains = response.blockchains.filter(
-          (chain) =>
-            chain.enabled &&
-            chainThatHasTokenInMetaResponse.includes(chain.name)
-        );
-        response.blockchains = enabledChains.sort((a, b) => a.sort - b.sort);
+        await useAppStore.getState().fetch();
+
+        const state = useAppStore.getState();
+        const response: MetaResponse = {
+          blockchains: state.blockchains(),
+          tokens: state.tokens(),
+          popularTokens: state._popularTokens,
+          swappers: state._swappers,
+        };
+
         set({ meta: response, loadingStatus: 'success' });
       } catch (error) {
         set({ loadingStatus: 'failed' });

package/src/store/notification.ts

@@ -0,0 +1,77 @@
+import type { Notification } from '../types/notification';
+import type {
+  Route,
+  RouteEvent,
+  StepEvent,
+} from '@rango-dev/queue-manager-rango-preset';
+
+import { create } from 'zustand';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+
+import createSelectors from './selectors';
+
+export interface NotificationState {
+  notifications: Notification[];
+  setNotification: (event: RouteEvent | StepEvent, route: Route) => void;
+  setAsRead: (requestId: Notification['requestId']) => void;
+  getUnreadNotifications: () => Notification[];
+}
+
+export const useNotificationStore = createSelectors(
+  create<NotificationState>()(
+    persist(
+      subscribeWithSelector((set, get) => ({
+        notifications: [],
+        setNotification: (event, route) => {
+          const fromStep = route.steps[0];
+          const toStep = route.steps[route.steps.length - 1];
+
+          const notification: Notification = {
+            event,
+            creationTime: Date.now(),
+            read: false,
+            requestId: route.requestId,
+            route: {
+              from: {
+                blockchain: fromStep.fromBlockchain,
+                tokenAddress: fromStep.fromSymbolAddress,
+                tokenSymbol: fromStep.fromSymbol,
+              },
+              to: {
+                blockchain: toStep.toBlockchain,
+                tokenSymbol: toStep.toSymbol,
+                tokenAddress: toStep.toSymbolAddress,
+              },
+            },
+          };
+
+          const excludedList = get().notifications.filter(
+            (notificationItem) => notificationItem.requestId !== route.requestId
+          );
+
+          set(() => ({
+            notifications: [...excludedList, notification],
+          }));
+        },
+        setAsRead: (requestId) => {
+          set((state) => ({
+            notifications: state.notifications.map((notificationItem) =>
+              notificationItem.requestId === requestId
+                ? { ...notificationItem, read: true }
+                : notificationItem
+            ),
+          }));
+        },
+        getUnreadNotifications: () => {
+          return get().notifications.filter(
+            (notificationItem) => !notificationItem.read
+          );
+        },
+      })),
+      {
+        name: 'notification',
+        skipHydration: true,
+      }
+    )
+  )
+);

package/src/store/settings.ts

@@ -1,7 +1,9 @@
 import { create } from 'zustand';
 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';
 
@@ -21,7 +23,7 @@ export interface SettingsState {
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: Theme) => void;
-  toggleAllLiquiditySources: () => void;
+  toggleAllLiquiditySources: (shouldReset?: boolean) => void;
   setAffiliateRef: (affiliateRef: string | null) => void;
   setAffiliatePercent: (affiliatePercent: number | null) => void;
   setAffiliateWallets: (
@@ -62,20 +64,25 @@ export const useSettingsStore = createSelectors(
           set(() => ({
             affiliateWallets,
           })),
-        toggleAllLiquiditySources: () =>
+        toggleAllLiquiditySources: (shouldReset?: boolean) =>
           set((state) => {
+            if (shouldReset) {
+              return { disabledLiquiditySources: [] };
+            }
             const { swappers } = useMetaStore.getState().meta;
             const swappersGroup = removeDuplicateFrom(
               swappers.map((swapper) => swapper.swapperGroup)
             );
 
-            if (swappersGroup.length === state.disabledLiquiditySources.length)
+            if (
+              swappersGroup.length === state.disabledLiquiditySources.length
+            ) {
               return { disabledLiquiditySources: [] };
-            else {
-              return {
-                disabledLiquiditySources: swappersGroup,
-              };
             }
+
+            return {
+              disabledLiquiditySources: swappersGroup,
+            };
           }),
         toggleInfiniteApprove: () =>
           set((state) => ({
@@ -83,17 +90,17 @@ export const useSettingsStore = createSelectors(
           })),
         toggleLiquiditySource: (name) =>
           set((state) => {
-            if (state.disabledLiquiditySources.includes(name))
+            if (state.disabledLiquiditySources.includes(name)) {
               return {
                 disabledLiquiditySources: state.disabledLiquiditySources.filter(
                   (liquiditySource) => liquiditySource != name
                 ),
               };
-            else
-              return {
-                disabledLiquiditySources:
-                  state.disabledLiquiditySources.concat(name),
-              };
+            }
+            return {
+              disabledLiquiditySources:
+                state.disabledLiquiditySources.concat(name),
+            };
           }),
         setTheme: (theme) =>
           set(() => ({