@rango-dev/widget-embedded 0.17.1-next.2 → 0.17.1-next.21

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,6 +1,6 @@
 import type {
   PrepareListOptions,
-  PrepareListOutput,
+  UsePrepareList,
 } from './usePrepareBlockchainList.types';
 import type { BlockchainMeta } from 'rango-sdk';
 
@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 
 import { useSettingsStore } from '../../store/settings';
 
-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 {
+): UsePrepareList {
   const { preferredBlockchains, addPreferredBlockchain } = useSettingsStore();
 
   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 { useCallback, useEffect, useState } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { useSettingsStore } from '../store/settings';
+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 { 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, experimental } =
+    useAppStore().config;
+  const tokens = useAppStore().tokens();
   const {
     fromToken,
     toToken,
     inputAmount,
     inputUsdValue,
-    resetRoute,
-    setRoute,
-  } = useBestRouteStore();
+    resetQuote,
+    setQuote,
+  } = useQuoteStore();
   const {
     slippage,
     customSlippage,
@@ -40,8 +59,9 @@ export function useSwapInput(): UseSwapInput {
     affiliateWallets,
     disabledLiquiditySources,
   } = useSettingsStore();
-  const [error, setError] = useState('');
-  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
+  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 (experimental?.routing) {
+        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,13 @@
-import type { WidgetConfig } from '../types';
 import type { Asset } from 'rango-sdk';
 
 import { useEffect, useMemo, useRef } from 'react';
 
-import { useBestRouteStore } from '../store/bestRoute';
-import { useMetaStore } from '../store/meta';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
 import { useSettingsStore } from '../store/settings';
 import { tokensAreEqual } from '../utils/wallets';
 
-export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
+export function useSyncStoresWithConfig() {
   const {
     setInputAmount,
     setToToken,
@@ -19,12 +18,12 @@ 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();
@@ -55,7 +54,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   }, [config?.amount]);
 
   useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
       );
@@ -67,8 +66,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 +80,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 +100,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   useEffect(() => {
     if (toToken && toTokensConfig) {
       if (!toTokensConfig.some((token) => tokensAreEqual(token, toToken))) {
-        setToToken(null);
+        setToToken({ token: null });
       }
     }
 
@@ -111,7 +112,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
   }, [toTokensConfig, toBlockchainsConfig]);
 
   useEffect(() => {
-    if (loadingMetaStatus === 'success') {
+    if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain
       );
@@ -123,8 +124,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 +138,7 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     config?.to?.token?.address,
     config?.to?.token?.blockchain,
     config?.to?.blockchain,
-    loadingMetaStatus,
+    fetchMetaStatus,
   ]);
 
   useEffect(() => {

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);

package/src/index.ts

@@ -1,3 +1,5 @@
+import type { WidgetProps } from './containers/Widget';
+import type { ConnectedWallet } from './store/wallets';
 import type {
   BlockchainAndTokenConfig,
   WidgetColors,
@@ -5,7 +7,6 @@ import type {
   WidgetConfig,
   WidgetTheme,
 } from './types';
-import type { WidgetProps } from './Widget';
 import type {
   Route,
   RouteEvent,
@@ -39,8 +40,11 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-react';
 
-import { WidgetWallets } from './Wallets';
-import { Widget } from './Widget';
+import { WidgetWallets } from './containers/Wallets';
+import { Widget } from './containers/Widget';
+import { useWidget } from './containers/WidgetInfo';
+import { WidgetProvider } from './containers/WidgetProvider';
+import { customizedThemeTokens } from './utils/ui';
 
 export type {
   WidgetConfig,
@@ -67,12 +71,19 @@ export type {
   StepApprovalTxSucceededEvent,
   StepOutputRevealedEvent,
   HandleWalletsUpdate,
+  ConnectedWallet,
 };
 export {
   Widget,
+  /**
+   * @deprecated Use `WidgetProvider` instead. This component will be removed in future versions.
+   */
   WidgetWallets,
+  WidgetProvider,
+  useWidget,
   useWallets,
   useWidgetEvents,
+  customizedThemeTokens,
   MainEvents,
   RouteEventType,
   StepEventType,