@rango-dev/widget-embedded 0.19.0 → 0.19.1-next.0

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts

@@ -2,7 +2,7 @@ import type { BlockchainMeta } from 'rango-sdk';
 
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+import { MOST_USED_BLOCKCHAINS } from './usePrepareBlockchainList.constants';
 import {
   generateSortByPreferredBlockchainsFor,
   prepare,
@@ -20,8 +20,8 @@ describe('usePrepareBlockchainList', () => {
   it('should sort blockchains by most used ones.', () => {
     const sortedBlockchainsList = sample.sort(sortByMostUsedBlockchains);
 
-    const mostUsedCount = MOST_USED_BLOCKChAINS.length;
-    const expected = MOST_USED_BLOCKChAINS;
+    const mostUsedCount = MOST_USED_BLOCKCHAINS.length;
+    const expected = MOST_USED_BLOCKCHAINS;
     const received = sortedBlockchainsList
       .map((blockchain) => blockchain.name)
       .slice(0, mostUsedCount);
@@ -270,4 +270,79 @@ describe('usePrepareBlockchainList', () => {
       ...received.more.map((blockchain) => blockchain.name),
     ]);
   });
+
+  it.only('Last item of the main list should be moved to front if it selected again.', () => {
+    const listLimit = 10;
+    const preferredBlockchains = ['AVAX_CCHAIN', 'BTC'];
+    const expected = [
+      'AVAX_CCHAIN',
+      'BTC',
+      'ETH',
+      'COSMOS',
+      'OSMOSIS',
+      'BSC',
+      'ARBITRUM',
+      'POLYGON',
+      'ZKSYNC',
+      'STARKNET',
+      'OPTIMISM',
+      'POLYGONZK',
+      'LINEA',
+      'TRON',
+      'NEUTRON',
+      'NOBLE',
+      'SOLANA',
+      'CRONOS',
+      'BNB',
+      'AURORA',
+      'MAYA',
+      'THOR',
+      'BOBA',
+      'MOONBEAM',
+      'MOONRIVER',
+      'OKC',
+      'BOBA_AVALANCHE',
+      'LTC',
+      'BCH',
+      'HECO',
+      'STARGAZE',
+      'CRYPTO_ORG',
+      'CHIHUAHUA',
+      'BANDCHAIN',
+      'COMDEX',
+      'REGEN',
+      'IRIS',
+      'EMONEY',
+      'JUNO',
+      'STRIDE',
+      'MARS',
+      'TERRA',
+      'BITSONG',
+      'AKASH',
+      'KI',
+      'PERSISTENCE',
+      'MEDIBLOC',
+      'KUJIRA',
+      'SENTINEL',
+      'INJECTIVE',
+      'SECRET',
+      'KONSTELLATION',
+      'STARNAME',
+      'BITCANNA',
+      'UMEE',
+      'DESMOS',
+      'LUMNETWORK',
+    ];
+
+    const output = prepare(sample, preferredBlockchains, {
+      limit: listLimit,
+    });
+
+    const received = [
+      ...output.list.map((blockchain) => blockchain.name),
+      ...output.more.map((blockchain) => blockchain.name),
+    ];
+
+    expect(expected).toEqual(received);
+  });
 });

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.ts

@@ -1,14 +1,14 @@
 import type {
   PrepareListOptions,
-  PrepareListOutput,
+  UsePrepareList,
 } from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { useEffect } from 'react';
 
-import { useSettingsStore } from '../../store/settings';
+import { useAppStore } from '../../store/AppStore';
 
-import { prepare } from './usePrepareBlockchainList.helpers';
+import { isInVisibleList, prepare } from './usePrepareBlockchainList.helpers';
 
 /**
  *
@@ -19,12 +19,21 @@ import { prepare } from './usePrepareBlockchainList.helpers';
 export function usePrepareBlockchainList(
   blockchains: BlockchainMeta[],
   options?: PrepareListOptions
-): PrepareListOutput {
-  const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
+): UsePrepareList {
+  const { preferredBlockchains, addPreferredBlockchain } = useAppStore();
 
   useEffect(() => {
     if (options?.selected) {
-      addPreferredBlockchain(options?.selected);
+      const output = prepare(blockchains, preferredBlockchains, options);
+
+      /**
+       * We only add a new blockchain to preferred when it's not in the main list
+       * In this way we can guarantee we will be able to regenerate the same list always.
+       * And also it helps us to avoid jumping for the last item of the main list (e.g. tenth item of our list).
+       */
+      if (!isInVisibleList(options.selected, output)) {
+        addPreferredBlockchain(options?.selected);
+      }
     }
   }, [options?.selected]);
 

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.types.ts

@@ -5,8 +5,13 @@ export interface PrepareListOptions {
   selected?: string;
 }
 
-export interface PrepareListOutput {
+export interface PrepareOutput {
   list: BlockchainMeta[];
   more: BlockchainMeta[];
+}
+
+export interface UsePrepareList {
+  list: PrepareOutput['list'];
+  more: PrepareOutput['more'];
   history: string[];
 }

package/src/hooks/useSwapInput.ts

@@ -1,37 +1,56 @@
-import { useEffect, useRef, useState } from 'react';
+import type { QuoteError, QuoteWarning } from '../types';
+import type { Token } from 'rango-sdk';
 
-import { useBestRouteStore } from '../store/bestRoute';
-import { useSettingsStore } from '../store/settings';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import { QuoteErrorType } from '../types';
 import { debounce } from '../utils/common';
 import { isPositiveNumber } from '../utils/numbers';
-import { createBestRouteRequestBody } from '../utils/swap';
+import { generateQuoteWarnings } from '../utils/quote';
+import { isFeatureEnabled } from '../utils/settings';
+import { createQuoteRequestBody } from '../utils/swap';
 import { tokensAreEqual } from '../utils/wallets';
 
-import { useFetchBestRoute } from './useFetchBestRoute';
+import {
+  handleQuoteErrors,
+  throwErrorIfResponseIsNotValid,
+} from './useConfirmSwap/useConfirmSwap.helpers';
+import { useFetchQuote } from './useFetchQuote';
 
 const DEBOUNCE_DELAY = 600;
+const FIRST_INDEX = 0;
+
+type FetchQuoteParams = Omit<
+  Parameters<typeof createQuoteRequestBody>[typeof FIRST_INDEX],
+  'fromToken' | 'toToken'
+> & { fromToken: Token | null; toToken: Token | null };
 
 type UseSwapInput = {
   fetch: () => void;
   loading: boolean;
-  error: string;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
 };
 
 /**
- * a hook for fetching best route based on from and to input values
+ * a hook for fetching quote based on from and to input values
  * we use this hook in home page
  */
 export function useSwapInput(): UseSwapInput {
-  const { fetch: fetchBestRoute, cancelFetch } = useFetchBestRoute();
-  const [loading, setLoading] = useState(false);
+  const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
+  const { liquiditySources, enableNewLiquiditySources, features } =
+    useAppStore().config;
+  const tokens = useAppStore().tokens();
   const {
     fromToken,
     toToken,
     inputAmount,
     inputUsdValue,
-    resetRoute,
-    setRoute,
-  } = useBestRouteStore();
+    resetQuote,
+    setQuote,
+  } = useQuoteStore();
   const {
     slippage,
     customSlippage,
@@ -39,9 +58,10 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
-  } = useSettingsStore();
-  const [error, setError] = useState('');
-  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
+  } = useAppStore();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<QuoteError | null>(null);
+  const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
   const hasTokensValue = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -49,68 +69,141 @@ export function useSwapInput(): UseSwapInput {
     tokensAreEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
-  const fetch: UseSwapInput['fetch'] = () => {
+  const resetState = (loading: boolean) => {
+    setLoading(loading);
+    setError(null);
+    setWarning(null);
+  };
+
+  const fetch = (params: FetchQuoteParams) => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      liquiditySources,
+      excludeLiquiditySources,
+      disabledLiquiditySources,
+      slippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    } = params;
     if (!loading) {
-      setLoading(true);
+      resetState(true);
     }
-    if (!shouldSkipRequest) {
-      resetRoute();
-      const requestBody = createBestRouteRequestBody({
+    if (!shouldSkipRequest && fromToken && toToken) {
+      resetQuote();
+      const requestBody = createQuoteRequestBody({
         fromToken,
         toToken,
         inputAmount,
+        liquiditySources,
+        excludeLiquiditySources,
         disabledLiquiditySources,
-        slippage: userSlippage,
+        slippage,
         affiliateRef,
         affiliatePercent,
         affiliateWallets,
       });
-      fetchBestRoute(requestBody)
+      if (isFeatureEnabled('experimentalRoute', features)) {
+        requestBody.experimental = true;
+      }
+      fetchQuote(requestBody)
         .then((res) => {
           setLoading(false);
-          setRoute(res);
+          setQuote(res);
+          throwErrorIfResponseIsNotValid(res);
+          const quoteWarning = generateQuoteWarnings(res, {
+            fromToken,
+            toToken,
+            userSlippage,
+            tokens,
+          });
+          setWarning(quoteWarning);
         })
         .catch((error) => {
-          resetRoute();
-          if (error?.code !== 'ERR_CANCELED') {
-            setError(error.message);
+          const { error: quoteError } = handleQuoteErrors(error);
+          if (
+            quoteError?.type === QuoteErrorType.NO_RESULT ||
+            quoteError?.type === QuoteErrorType.REQUEST_FAILED
+          ) {
+            resetQuote();
+          }
+          if (quoteError?.type !== QuoteErrorType.REQUEST_CANCELED) {
+            setError(quoteError);
             setLoading(false);
           }
         });
     }
   };
 
-  const debouncedFetch = debounce(() => {
-    if (!shouldSkipRequest) {
-      fetch();
-    }
-  }, DEBOUNCE_DELAY);
+  const debouncedFetch = useCallback(
+    debounce((params: FetchQuoteParams) => {
+      if (!shouldSkipRequest) {
+        fetch(params);
+      }
+    }, DEBOUNCE_DELAY),
+    [shouldSkipRequest]
+  );
 
   useEffect(() => {
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
-      setLoading(false);
+      resetState(false);
       cancelFetch();
       return;
     }
     if (shouldSkipRequest) {
       return;
     }
-    resetRoute();
-    setLoading(true);
-    debouncedFetch();
-    return cancelFetch;
-  }, [inputAmount, shouldSkipRequest]);
-
-  useEffect(() => {
-    const disabledLiquiditySourceReset =
-      !!prevDisabledLiquiditySources.current.length &&
-      !disabledLiquiditySources.length;
-    if (!shouldSkipRequest && disabledLiquiditySourceReset) {
-      fetch();
-    }
-    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+    resetQuote();
+    resetState(true);
+    debouncedFetch({
+      inputAmount,
+      fromToken,
+      toToken,
+      liquiditySources,
+      excludeLiquiditySources: enableNewLiquiditySources,
+      disabledLiquiditySources,
+      slippage: userSlippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    });
     return cancelFetch;
-  }, [disabledLiquiditySources.length]);
+  }, [
+    inputAmount,
+    fromToken?.symbol,
+    fromToken?.address,
+    fromToken?.blockchain,
+    toToken?.symbol,
+    toToken?.address,
+    toToken?.blockchain,
+    shouldSkipRequest,
+    liquiditySources?.length,
+    enableNewLiquiditySources,
+    disabledLiquiditySources.length,
+    userSlippage,
+    affiliateRef,
+    affiliatePercent,
+    JSON.stringify(affiliateWallets),
+  ]);
 
-  return { fetch, loading, error };
+  return {
+    fetch: () =>
+      fetch({
+        inputAmount,
+        fromToken,
+        toToken,
+        liquiditySources,
+        excludeLiquiditySources: enableNewLiquiditySources,
+        disabledLiquiditySources,
+        slippage: userSlippage,
+        affiliateRef,
+        affiliatePercent,
+        affiliateWallets,
+      }),
+    loading,
+    error,
+    warning,
+  };
 }

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,14 +1,12 @@
-import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { tokensAreEqual } from '../utils/wallets';
 
-export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
+export function useSyncStoresWithConfig() {
   const {
     setInputAmount,
     setToToken,
@@ -19,15 +17,15 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     toToken,
     fromBlockchain,
     toBlockchain,
-  } = useBestRouteStore();
+  } = useQuoteStore();
 
-  const {
-    meta: { tokens, blockchains },
-    loadingStatus: loadingMetaStatus,
-  } = useMetaStore();
+  const config = useAppStore().config;
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
-    useSettingsStore();
+    useAppStore();
 
   const fromTokensConfig = useMemo(
     () => config?.from?.tokens,
@@ -54,8 +52,15 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
-  useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+  /*
+   * We update quote tokens in two scenarios.
+   * If default values exist in widget config or search parameters exist in URL.
+   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
+   * Using useLayoutEffect causes widget config values to apply first.
+   * We may consider replacing this with a better solution in the future.
+   */
+  useLayoutEffect(() => {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
@@ -67,8 +72,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
         setFromBlockchain(chain ?? null);
       }
 
-      if (token || (!token && prevConfigFromToken.current)) {
-        setFromToken(token ?? null);
+      if (token) {
+        setFromToken({ token, meta: { blockchains, tokens } });
+      } else if (!token && prevConfigFromToken.current) {
+        setFromToken({ token: null });
       }
 
       prevConfigFromBlockchain.current = config?.from?.blockchain;
@@ -79,13 +86,13 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.from?.token?.address,
     config?.from?.token?.blockchain,
     config?.from?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {
     if (fromToken && fromTokensConfig) {
       if (!fromTokensConfig.some((token) => tokensAreEqual(token, fromToken))) {
-        setFromToken(null);
+        setFromToken({ token: null });
       }
     }
 
@@ -99,7 +106,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   useEffect(() => {
     if (toToken && toTokensConfig) {
       if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken(null);
+        setToToken({ token: null });
       }
     }
 
@@ -110,8 +117,15 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 
-  useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+  /*
+   * We update quote tokens in two scenarios.
+   * If default values exist in widget config or search parameters exist in URL.
+   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
+   * Using useLayoutEffect causes widget config values to apply first.
+   * We may consider replacing this with a better solution in the future.
+   */
+  useLayoutEffect(() => {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );
@@ -123,8 +137,10 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
         setToBlockchain(chain ?? null);
       }
 
-      if (token || (!token && prevConfigToToken.current)) {
-        setToToken(token ?? null);
+      if (token) {
+        setToToken({ token, meta: { blockchains, tokens } });
+      } else if (!token && prevConfigToToken.current) {
+        setToToken({ token: null });
       }
 
       prevConfigToBlockchain.current = config?.to?.blockchain;
@@ -135,7 +151,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.to?.token?.address,
     config?.to?.token?.blockchain,
     config?.to?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {

package/src/hooks/useTheme.ts

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { WidgetTheme } from '../types';
-
 import {
   createTheme,
   darkTheme as defaultDarkTheme,
@@ -8,7 +6,8 @@ import {
 } from '@rango-dev/ui';
 import { useEffect, useState } from 'react';
 
-import { useSettingsStore } from '../store/settings';
+import { useAppStore } from '../store/AppStore';
+import { type WidgetTheme } from '../types';
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_PRIMARY_RADIUS,
@@ -26,8 +25,8 @@ export function useTheme(props: WidgetTheme) {
   } = props;
 
   const [OSTheme, setOSTheme] = useState('light');
-  const theme = useSettingsStore.use.theme();
-  const setTheme = useSettingsStore.use.setTheme();
+
+  const { setTheme, theme } = useAppStore();
 
   const { dark, light } = customizedThemeTokens(colors);
 

package/src/hooks/useWalletList.ts

@@ -10,7 +10,7 @@ import {
 } from '@rango-dev/wallets-shared';
 import { useEffect, useState } from 'react';
 
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
@@ -37,9 +37,7 @@ export function useWalletList(params: Params) {
   const { config, chain, onBeforeConnect, onConnect } = params;
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
-  const { blockchains } = useMetaStore().meta;
-  const multiWallets =
-    typeof config?.multiWallets === 'undefined' ? true : config.multiWallets;
+  const blockchains = useAppStore().blockchains();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
@@ -76,7 +74,7 @@ export function useWalletList(params: Params) {
         const atLeastOneWalletIsConnected = !!wallets.find(
           (w) => w.state === WalletState.CONNECTED
         );
-        if (!multiWallets && atLeastOneWalletIsConnected) {
+        if (!config?.multiWallets && atLeastOneWalletIsConnected) {
           return;
         }
         onBeforeConnect?.(type);