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

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,
+};

package/src/pages/ConfirmSwapPage.tsx

@@ -3,7 +3,6 @@ import type {
   ConfirmSwap,
   ConfirmSwapFetchResult,
 } from '../hooks/useConfirmSwap/useConfirmSwap.types';
-import type { WidgetConfig } from '../types';
 
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -19,7 +18,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
 
@@ -31,6 +30,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
@@ -44,7 +44,6 @@ const Container = styled('div', {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingBottom: '$10',
   },
   '& .icon': {
     width: '$24',
@@ -53,6 +52,9 @@ const Container = styled('div', {
     justifyContent: 'center',
     alignItems: 'center',
   },
+  '& .quote-update__alert': {
+    paddingTop: '$10',
+  },
 });
 
 const Buttons = styled('div', {
@@ -69,13 +71,8 @@ const Buttons = styled('div', {
   },
 });
 
-type PropTypes = {
-  config?: WidgetConfig;
-};
-
-export function ConfirmSwapPage(props: PropTypes) {
+export function ConfirmSwapPage() {
   //TODO: move component's logics to a custom hook
-  const { config } = props;
   const {
     quote,
     setInputAmount,
@@ -92,7 +89,8 @@ export function ConfirmSwapPage(props: PropTypes) {
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-
+  const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
+  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
   const {
     fetch: confirmSwap,
@@ -126,12 +124,11 @@ export function ConfirmSwapPage(props: PropTypes) {
           { id: confirmSwapResult.swap.requestId }
         );
         setSelectedSwap(confirmSwapResult.swap.requestId);
-        navigate(
-          '/' + navigationRoutes.swaps + `/${confirmSwapResult.swap.requestId}`,
-          {
-            replace: true,
-          }
-        );
+
+        const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
+        navigate(swap_url, {
+          replace: true,
+        });
         setTimeout(() => {
           setInputAmount('');
         }, 0);
@@ -159,13 +156,23 @@ export function ConfirmSwapPage(props: PropTypes) {
       swap: null,
       warnings: null,
     });
-    confirmSwap({ selectedWallets })
+    confirmSwap({ selectedWallets, customDestination })
       .then((res) => {
         setConfirmSwapResult(res);
       })
       .catch((error) => console.error(error));
   };
 
+  useEffect(() => {
+    const disabledLiquiditySourceReset =
+      !!prevDisabledLiquiditySources.current.length &&
+      !disabledLiquiditySources.length;
+    if (disabledLiquiditySourceReset) {
+      void onRefresh();
+    }
+    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+  }, [disabledLiquiditySources.length]);
+
   useEffect(() => {
     if (showWalletsOnInit) {
       cancelFetch();
@@ -245,12 +252,20 @@ export function ConfirmSwapPage(props: PropTypes) {
     connectedWallets.length,
   ]);
 
+  useLayoutEffect(() => {
+    if (!quote) {
+      navigate(`../`);
+    }
+  }, []);
+
   return (
     <Layout
       header={{
         title: i18n.t('Confirm Swap'),
-        onBack: () => navigate(-1),
-        hasConnectWallet: true,
+        onWallet: () => {
+          const wallets_url = `../${navigationRoutes.wallets}`;
+          navigate(wallets_url);
+        },
         suffix: (
           <Tooltip
             container={getContainer()}
@@ -259,7 +274,7 @@ export function ConfirmSwapPage(props: PropTypes) {
             <HeaderButton
               size="small"
               variant="ghost"
-              onClick={() => navigate('/' + navigationRoutes.settings)}>
+              onClick={() => navigate('../' + navigationRoutes.settings)}>
               <SettingsIcon size={18} color="black" />
             </HeaderButton>
           </Tooltip>
@@ -296,7 +311,6 @@ export function ConfirmSwapPage(props: PropTypes) {
           onCancel={cancelFetch}
           loading={fetchingConfirmationQuote}
           onCheckBalance={onConfirmSwap}
-          config={config}
         />
       )}
 
@@ -322,7 +336,7 @@ export function ConfirmSwapPage(props: PropTypes) {
           </>
         )}
         {confirmSwapResult.warnings?.quoteUpdate && (
-          <>
+          <div className="quote-update__alert">
             <Alert
               variant="alarm"
               type="warning"
@@ -333,13 +347,13 @@ export function ConfirmSwapPage(props: PropTypes) {
                 )
               }
             />
-            <Divider size={12} />
-          </>
+          </div>
         )}
         <QuoteInfo
           quote={quote}
           type="swap-preview"
           expanded={true}
+          alertPosition="top"
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}
@@ -351,6 +365,7 @@ export function ConfirmSwapPage(props: PropTypes) {
             setShowQuoteWarningModal(false);
             await addNewSwap();
           }}
+          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
         />
       </Container>
     </Layout>