@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/store/{quote.ts → bestRoute.ts}

@@ -1,11 +1,7 @@
+import type { TokenWithBalance } from '../components/TokenList';
 import type { Wallet } from '../types';
-import type {
-  BestRouteResponse,
-  BlockchainMeta,
-  MetaResponse,
-  Token,
-} from 'rango-sdk';
-import type { PendingSwap } from 'rango-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 { create } from 'zustand';
@@ -13,58 +9,53 @@ import { subscribeWithSelector } from 'zustand/middleware';
 
 import { ZERO } from '../constants/numbers';
 import { isPositiveNumber } from '../utils/numbers';
-import { createRetryQuote, getQuoteToTokenUsdPrice } from '../utils/quote';
+import {
+  createRetryRoute,
+  getBestRouteToTokenUsdPrice,
+} from '../utils/routing';
 import { calcOutputUsdValue } from '../utils/swap';
 
+import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
-export const getUsdValue = (
-  token: Token | null,
-  amount: string
-): BigNumber | null =>
+const getUsdValue = (token: Token | null, amount: string): BigNumber | null =>
   token?.usdPrice
     ? new BigNumber(amount || ZERO).multipliedBy(token?.usdPrice || 0)
     : null;
 
-export type Meta = Pick<MetaResponse, 'blockchains' | 'tokens'>;
-
-export type SetTokenParams = { token: Token; meta: Meta } | { token: null };
-
-export interface QuoteState {
+export interface RouteState {
   fromBlockchain: BlockchainMeta | null;
   toBlockchain: BlockchainMeta | null;
   inputAmount: string;
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
-  fromToken: Token | null;
-  toToken: Token | null;
-  quoteWalletsConfirmed: boolean;
+  fromToken: TokenWithBalance | null;
+  toToken: TokenWithBalance | null;
+  routeWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
-  quoteWarningsConfirmed: boolean;
-  resetQuote: () => void;
+  resetRoute: () => void;
   resetToBlockchain: () => void;
   resetFromBlockchain: () => void;
   setFromBlockchain: (chain: BlockchainMeta | null) => void;
   setToBlockchain: (chian: BlockchainMeta | null) => void;
 
-  setFromToken: (params: SetTokenParams) => void;
-  setToToken: (params: SetTokenParams) => void;
+  setFromToken: (token: Token | null) => void;
+  setToToken: (token: Token | null) => void;
   setInputAmount: (amount: string) => void;
-  quote: BestRouteResponse | null;
-  setQuote: (quote: BestRouteResponse | null) => void;
-  retry: (pendingSwap: PendingSwap, meta: Meta) => void;
+  bestRoute: BestRouteResponse | null;
+  setRoute: (bestRoute: BestRouteResponse | null) => void;
+  retry: (pendingSwap: PendingSwap) => void;
   switchFromAndTo: () => void;
-  setQuoteWalletConfirmed: (flag: boolean) => void;
+  setRouteWalletConfirmed: (flag: boolean) => void;
   setSelectedWallets: (wallets: Wallet[]) => void;
   customDestination: string;
   setCustomDestination: (address: string) => void;
-  resetQuoteWallets: () => void;
-  setQuoteWarningsConfirmed: (flag: boolean) => void;
+  resetRouteWallets: () => void;
 }
 
-export const useQuoteStore = createSelectors(
-  create<QuoteState>()(
+export const useBestRouteStore = createSelectors(
+  create<RouteState>()(
     subscribeWithSelector((set) => ({
       fromBlockchain: null,
       fromToken: null,
@@ -74,38 +65,37 @@ export const useQuoteStore = createSelectors(
       outputUsdValue: new BigNumber(0),
       toBlockchain: null,
       toToken: null,
-      quote: null,
-      quoteWalletsConfirmed: false,
+      bestRoute: null,
+      routeWalletsConfirmed: false,
       selectedWallets: [],
       customDestination: '',
-      quoteWarningsConfirmed: false,
-      setQuote: (quote) =>
+      setRoute: (bestRoute) =>
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
           if (!isPositiveNumber(state.inputAmount)) {
             return {};
           }
-          if (!!quote) {
-            outputAmount = !!quote.result?.outputAmount
-              ? new BigNumber(quote.result?.outputAmount)
+          if (!!bestRoute) {
+            outputAmount = !!bestRoute.result?.outputAmount
+              ? new BigNumber(bestRoute.result?.outputAmount)
               : null;
             outputUsdValue = calcOutputUsdValue(
-              quote.result?.outputAmount,
-              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
+              bestRoute.result?.outputAmount,
+              getBestRouteToTokenUsdPrice(bestRoute) || state.toToken?.usdPrice
             );
           }
           return {
-            quote: quote,
-            ...(!!quote && {
+            bestRoute,
+            ...(!!bestRoute && {
               outputAmount,
               outputUsdValue,
             }),
           };
         }),
-      resetQuote: () =>
+      resetRoute: () =>
         set(() => ({
-          quote: null,
+          bestRoute: null,
           outputAmount: null,
           outputUsdValue: new BigNumber(0),
         })),
@@ -118,7 +108,7 @@ export const useQuoteStore = createSelectors(
           return {
             fromBlockchain: chain,
             ...(state.fromToken && {
-              quote: null,
+              bestRoute: null,
               fromToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -126,17 +116,18 @@ export const useQuoteStore = createSelectors(
           };
         });
       },
-      setFromToken: (params) => {
+      setFromToken: (token) => {
+        const { blockchains } = useMetaStore.getState().meta;
         return set((state) => ({
-          fromToken: params.token,
-          ...(params.token && {
+          fromToken: token,
+          ...(token && {
             fromBlockchain:
-              params.meta.blockchains.find(
-                (blockchain) => blockchain.name === params.token.blockchain
+              blockchains.find(
+                (blockchain) => blockchain.name === token.blockchain
               ) ?? null,
           }),
           ...(!!state.inputAmount && {
-            inputUsdValue: getUsdValue(params.token, state.inputAmount),
+            inputUsdValue: getUsdValue(token, state.inputAmount),
           }),
         }));
       },
@@ -149,7 +140,7 @@ export const useQuoteStore = createSelectors(
           return {
             toBlockchain: chain,
             ...(state.toToken && {
-              quote: null,
+              bestRoute: null,
               toToken: null,
               outputAmount: null,
               outputUsdValue: null,
@@ -157,13 +148,14 @@ export const useQuoteStore = createSelectors(
           };
         });
       },
-      setToToken: (params) => {
+      setToToken: (token) => {
+        const { blockchains } = useMetaStore.getState().meta;
         return set(() => ({
-          toToken: params.token,
-          ...(params.token && {
+          toToken: token,
+          ...(token && {
             toBlockchain:
-              params.meta.blockchains.find(
-                (blockchain) => blockchain.name === params.token.blockchain
+              blockchains.find(
+                (blockchain) => blockchain.name === token.blockchain
               ) ?? null,
           }),
         }));
@@ -174,22 +166,24 @@ export const useQuoteStore = createSelectors(
           ...(!amount && {
             outputAmount: new BigNumber(0),
             outputUsdValue: new BigNumber(0),
-            quote: null,
+            bestRoute: null,
           }),
           ...(!!state.fromToken && {
             inputUsdValue: getUsdValue(state.fromToken, amount),
           }),
         }));
       },
-      retry: (pendingSwap, meta) => {
-        const { tokens, blockchains } = meta;
+      retry: (pendingSwap) => {
+        const { tokens, blockchains } = useMetaStore.getState().meta;
+
         const {
           fromBlockchain,
           fromToken,
           toBlockchain,
           toToken,
           inputAmount,
-        } = createRetryQuote(pendingSwap, blockchains, tokens);
+        } = createRetryRoute(pendingSwap, blockchains, tokens);
+
         set({
           fromBlockchain,
           fromToken,
@@ -199,7 +193,7 @@ export const useQuoteStore = createSelectors(
           outputUsdValue: new BigNumber(0),
           toBlockchain,
           toToken,
-          quote: null,
+          bestRoute: null,
         });
       },
       switchFromAndTo: () =>
@@ -214,13 +208,14 @@ export const useQuoteStore = createSelectors(
             state.outputAmount?.toString() || ''
           ),
         })),
+
       resetFromBlockchain: () =>
         set(() => ({
           fromToken: null,
           fromBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          quote: null,
+          bestRoute: null,
         })),
       resetToBlockchain: () =>
         set(() => ({
@@ -228,22 +223,20 @@ export const useQuoteStore = createSelectors(
           toBlockchain: null,
           outputAmount: null,
           outputUsdValue: null,
-          quote: null,
+          bestRoute: null,
         })),
-      setQuoteWalletConfirmed: (flag) =>
+      setRouteWalletConfirmed: (flag) =>
         set({
-          quoteWalletsConfirmed: flag,
+          routeWalletsConfirmed: flag,
         }),
       setSelectedWallets: (wallets) => set({ selectedWallets: wallets }),
       setCustomDestination: (address) => set({ customDestination: address }),
-      resetQuoteWallets: () =>
+      resetRouteWallets: () =>
         set({
-          quoteWalletsConfirmed: false,
+          routeWalletsConfirmed: false,
           selectedWallets: [],
           customDestination: '',
         }),
-      setQuoteWarningsConfirmed: (flag) =>
-        set({ quoteWarningsConfirmed: flag }),
     }))
   )
 );

package/src/store/meta.ts

@@ -0,0 +1,39 @@
+import type { TokenWithBalance } from '../components/TokenList';
+import type { MetaResponse } from 'rango-sdk';
+
+import { create } from 'zustand';
+
+import { useAppStore } from './app';
+import createSelectors from './selectors';
+
+export type LoadingStatus = 'loading' | 'success' | 'failed';
+
+export interface MetaState {
+  meta: MetaResponse & { tokens: TokenWithBalance[] };
+  loadingStatus: LoadingStatus;
+  fetchMeta: () => Promise<void>;
+}
+
+export const useMetaStore = createSelectors(
+  create<MetaState>()((set) => ({
+    meta: { blockchains: [], popularTokens: [], swappers: [], tokens: [] },
+    loadingStatus: 'loading',
+    fetchMeta: async () => {
+      try {
+        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/settings.ts

@@ -0,0 +1,158 @@
+import { type Language } from '@rango-dev/ui';
+import { create } from 'zustand';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+
+import { BLOCKCHAIN_LIST_SIZE } from '../constants/configs';
+import { DEFAULT_LANGUAGE } from '../constants/languages';
+import { DEFAULT_SLIPPAGE } from '../constants/swapSettings';
+import { removeDuplicateFrom } from '../utils/common';
+
+import { useMetaStore } from './meta';
+import createSelectors from './selectors';
+
+export type ThemeMode = 'auto' | 'dark' | 'light';
+
+export interface SettingsState {
+  /** Keeping a history of blockchains that user has selected (in Swap process) */
+  preferredBlockchains: string[];
+  slippage: number;
+  customSlippage: number | null;
+  infiniteApprove: boolean;
+  disabledLiquiditySources: string[];
+  theme: ThemeMode;
+  language: Language;
+  affiliateRef: string | null;
+  affiliatePercent: number | null;
+  affiliateWallets: { [key: string]: string } | null;
+
+  setSlippage: (slippage: number) => void;
+  setCustomSlippage: (customSlippage: number | null) => void;
+  toggleInfiniteApprove: () => void;
+  toggleLiquiditySource: (name: string) => void;
+  setTheme: (theme: ThemeMode) => void;
+  setLanguage: (language: Language) => void;
+  toggleAllLiquiditySources: (shouldReset?: boolean) => void;
+  setAffiliateRef: (affiliateRef: string | null) => void;
+  setAffiliatePercent: (affiliatePercent: number | null) => void;
+  setAffiliateWallets: (
+    affiliateWallets: { [key: string]: string } | null
+  ) => void;
+  addPreferredBlockchain: (blockchain: string) => void;
+}
+
+export const useSettingsStore = createSelectors(
+  create<SettingsState>()(
+    persist(
+      subscribeWithSelector((set, get) => ({
+        preferredBlockchains: [],
+        slippage: DEFAULT_SLIPPAGE,
+        customSlippage: null,
+        infiniteApprove: false,
+        affiliateRef: null,
+        affiliatePercent: null,
+        affiliateWallets: null,
+        disabledLiquiditySources: [],
+        theme: 'auto',
+        language: DEFAULT_LANGUAGE,
+        addPreferredBlockchain: (blockchain) => {
+          const currentPreferredBlockchains = get().preferredBlockchains;
+
+          const noNeedToDoAnything = currentPreferredBlockchains.find(
+            (preferredBlockchain, index) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+              const isInVisibleList = index <= BLOCKCHAIN_LIST_SIZE - 1;
+
+              return isSameBlockchain && isInVisibleList;
+            }
+          );
+
+          if (noNeedToDoAnything) {
+            return;
+          }
+
+          const nextPreferredBlockchains: string[] =
+            currentPreferredBlockchains.filter((preferredBlockchain) => {
+              const isSameBlockchain = preferredBlockchain === blockchain;
+
+              return !isSameBlockchain;
+            });
+
+          set(() => ({
+            preferredBlockchains: [blockchain, ...nextPreferredBlockchains],
+          }));
+        },
+        setSlippage: (slippage) =>
+          set(() => ({
+            slippage: slippage,
+          })),
+        setCustomSlippage: (customSlippage) =>
+          set(() => ({
+            customSlippage: customSlippage,
+          })),
+        setAffiliateRef: (affiliateRef) =>
+          set(() => ({
+            affiliateRef,
+          })),
+        setAffiliatePercent: (affiliatePercent) =>
+          set(() => ({
+            affiliatePercent,
+          })),
+
+        setAffiliateWallets: (affiliateWallets) =>
+          set(() => ({
+            affiliateWallets,
+          })),
+        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
+            ) {
+              return { disabledLiquiditySources: [] };
+            }
+
+            return {
+              disabledLiquiditySources: swappersGroup,
+            };
+          }),
+        toggleInfiniteApprove: () =>
+          set((state) => ({
+            infiniteApprove: !state.infiniteApprove,
+          })),
+        toggleLiquiditySource: (name) =>
+          set((state) => {
+            if (state.disabledLiquiditySources.includes(name)) {
+              return {
+                disabledLiquiditySources: state.disabledLiquiditySources.filter(
+                  (liquiditySource) => liquiditySource != name
+                ),
+              };
+            }
+            return {
+              disabledLiquiditySources:
+                state.disabledLiquiditySources.concat(name),
+            };
+          }),
+        setTheme: (theme) =>
+          set(() => ({
+            theme,
+          })),
+        setLanguage: (language) =>
+          set(() => ({
+            language,
+          })),
+      })),
+      {
+        name: 'user-settings',
+        skipHydration: true,
+      }
+    )
+  )
+);

package/src/store/slices/config.ts

@@ -1,12 +1,7 @@
 import type { WidgetConfig } from '../../types';
-import type { StateCreatorWithInitialData } from '../app';
+import type { StateCreator } from 'zustand';
 
-export const DEFAULT_CONFIG: WidgetConfig = {
-  apiKey: '',
-  multiWallets: true,
-  enableNewLiquiditySources: true,
-  customDestination: true,
-};
+const initConfig: WidgetConfig = { apiKey: '' };
 
 export type ConfigSlice = {
   config: WidgetConfig;
@@ -14,24 +9,18 @@ export type ConfigSlice = {
   updateConfig: (config: WidgetConfig) => void;
 };
 
-export const createConfigSlice: StateCreatorWithInitialData<
-  WidgetConfig,
-  ConfigSlice,
-  ConfigSlice
-> = (initialData, set, get) => {
-  return {
-    config: { ...DEFAULT_CONFIG, ...initialData },
+export const createConfigSlice: StateCreator<ConfigSlice> = (set, get) => ({
+  config: initConfig,
 
-    // Actions
-    updateConfig: (nextConfig: WidgetConfig) => {
-      const currentConfig = get().config;
+  // Actions
+  updateConfig: (nextConfig: WidgetConfig) => {
+    const currentConfig = get().config;
 
-      set({
-        config: {
-          ...currentConfig,
-          ...nextConfig,
-        },
-      });
-    },
-  };
-};
+    set({
+      config: {
+        ...currentConfig,
+        ...nextConfig,
+      },
+    });
+  },
+});