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

package/src/hooks/useSwapInput.ts

@@ -1,14 +1,15 @@
 import type { QuoteError, QuoteWarning } from '../types';
+import type { Token } from 'rango-sdk';
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-import { useMetaStore } from '../store/meta';
+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 { generateQuoteWarnings } from '../utils/quote';
+import { isFeatureEnabled } from '../utils/settings';
 import { createQuoteRequestBody } from '../utils/swap';
 import { tokensAreEqual } from '../utils/wallets';
 
@@ -19,6 +20,12 @@ import {
 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;
@@ -33,6 +40,9 @@ type UseSwapInput = {
  */
 export function useSwapInput(): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchQuote();
+  const { liquiditySources, enableNewLiquiditySources, features } =
+    useAppStore().config;
+  const tokens = useAppStore().tokens();
   const {
     fromToken,
     toToken,
@@ -41,9 +51,6 @@ export function useSwapInput(): UseSwapInput {
     resetQuote,
     setQuote,
   } = useQuoteStore();
-  const {
-    meta: { tokens },
-  } = useMetaStore();
   const {
     slippage,
     customSlippage,
@@ -51,11 +58,10 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
-  } = useSettingsStore();
+  } = useAppStore();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
-  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const userSlippage = customSlippage ?? slippage;
   const hasTokensValue = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -69,22 +75,39 @@ export function useSwapInput(): UseSwapInput {
     setWarning(null);
   };
 
-  const fetch: UseSwapInput['fetch'] = () => {
+  const fetch = (params: FetchQuoteParams) => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      liquiditySources,
+      excludeLiquiditySources,
+      disabledLiquiditySources,
+      slippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    } = params;
     if (!loading) {
       resetState(true);
     }
-    if (!shouldSkipRequest) {
+    if (!shouldSkipRequest && fromToken && toToken) {
       resetQuote();
       const requestBody = createQuoteRequestBody({
         fromToken,
         toToken,
         inputAmount,
+        liquiditySources,
+        excludeLiquiditySources,
         disabledLiquiditySources,
-        slippage: userSlippage,
+        slippage,
         affiliateRef,
         affiliatePercent,
         affiliateWallets,
       });
+      if (isFeatureEnabled('experimentalRoute', features)) {
+        requestBody.experimental = true;
+      }
       fetchQuote(requestBody)
         .then((res) => {
           setLoading(false);
@@ -114,11 +137,14 @@ export function useSwapInput(): UseSwapInput {
     }
   };
 
-  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)) {
@@ -131,20 +157,53 @@ export function useSwapInput(): UseSwapInput {
     }
     resetQuote();
     resetState(true);
-    debouncedFetch();
-    return cancelFetch;
-  }, [inputAmount, shouldSkipRequest]);
-
-  useEffect(() => {
-    const disabledLiquiditySourceReset =
-      !!prevDisabledLiquiditySources.current.length &&
-      !disabledLiquiditySources.length;
-    if (!shouldSkipRequest && disabledLiquiditySourceReset) {
-      fetch();
-    }
-    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+    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, warning };
+  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 { 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,
@@ -21,13 +19,13 @@ export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
     toBlockchain,
   } = 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);

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,10 +7,12 @@ import type {
   WidgetConfig,
   WidgetTheme,
 } from './types';
-import type { WidgetProps } from './Widget';
 import type {
+  EventSeverity,
+  PendingSwapWithQueueID,
   Route,
   RouteEvent,
+  RouteExecutionEvents,
   RouteFailedEvent,
   RouteStartedEvent,
   RouteSucceededEvent,
@@ -27,7 +31,16 @@ import type {
   EventHandler as HandleWalletsUpdate,
   ProviderInterface,
 } from '@rango-dev/wallets-react';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type {
+  WalletInfo,
+  WalletState,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import type {
+  PendingSwap,
+  PendingSwapNetworkStatus,
+  PendingSwapStep,
+} from 'rango-types';
 
 import {
   MainEvents,
@@ -37,10 +50,18 @@ import {
   StepExecutionEventStatus,
   useEvents as useWidgetEvents,
 } from '@rango-dev/queue-manager-rango-preset';
-import { useWallets } from '@rango-dev/wallets-react';
+import {
+  readAccountAddress,
+  useWallets,
+  Events as WalletEvents,
+} from '@rango-dev/wallets-react';
+import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 
-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,15 +88,42 @@ 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,
   StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
 };
+
+// Internal type exports for Rango
+export type {
+  WalletState,
+  WalletInfo,
+  PendingSwap,
+  PendingSwapWithQueueID,
+  PendingSwapStep,
+  RouteExecutionEvents,
+  EventSeverity,
+};
+
+// Internal function and enum exports for Rango
+export {
+  readAccountAddress,
+  Networks,
+  WalletEvents,
+  WalletTypes,
+  PendingSwapNetworkStatus,
+};