@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/hooks/useSwapInput.ts

@@ -0,0 +1,289 @@
+import type { Token } from 'rango-sdk';
+
+import { warn } from '@rango-dev/logging-core';
+import { useCallback, useEffect, useRef, 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 {
+  generateQuoteWarnings,
+  getDefaultQuote,
+  sortQuotesBy,
+} from '../utils/quote';
+import { isRoutingEnabled } from '../utils/settings';
+import { createQuoteRequestBody } from '../utils/swap';
+import { areTokensEqual } from '../utils/wallets';
+
+import {
+  handleQuoteErrors,
+  throwErrorIfResponseIsNotValid,
+} from './useConfirmSwap/useConfirmSwap.helpers';
+import { useFetchAllQuotes } from './useFetchAllQuotes';
+import { useSwapMode } from './useSwapMode';
+
+const DEBOUNCE_DELAY = 600;
+
+type FetchQuoteParams = Omit<
+  Parameters<typeof createQuoteRequestBody>[0],
+  'fromToken' | 'toToken'
+> & { fromToken: Token | null; toToken: Token | null };
+
+type UseSwapInput = {
+  fetch: (shouldChangeSelectedQuote?: boolean) => void;
+  loading: boolean;
+};
+type UseSwapInputProps = {
+  refetchQuote: boolean;
+};
+/**
+ * a hook for fetching quote based on from and to input values
+ * we use this hook in home page
+ */
+export function useSwapInput({
+  refetchQuote,
+}: UseSwapInputProps): UseSwapInput {
+  const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
+  const { excludeLiquiditySources: configExcludeLiquiditySources, routing } =
+    useAppStore().config;
+  const { connectedWallets } = useAppStore();
+  const anyContractWalletConnected = connectedWallets.some(
+    (wallet) => wallet.isContractWallet
+  );
+  const contractCall = anyContractWalletConnected;
+
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    inputUsdValue,
+    selectedQuote,
+    sortStrategy,
+    resetQuote,
+    error,
+    warning,
+    setSelectedQuote,
+    updateQuotePartialState,
+  } = useQuoteStore()();
+  const {
+    slippage,
+    customSlippage,
+    affiliatePercent,
+    affiliateRef,
+    affiliateWallets,
+    fetchStatus,
+  } = useAppStore();
+  const liquiditySources = useAppStore().getLiquiditySources();
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const excludeLiquiditySources = useAppStore().excludeLiquiditySources();
+  const { findToken } = useAppStore();
+  const { swapMode } = useSwapMode();
+
+  const [loading, setLoading] = useState(true);
+  const prevInputAmount = useRef(inputAmount);
+  const userSlippage = customSlippage ?? slippage;
+  const tokensValueInvalid = !fromToken || !toToken;
+  const shouldSkipRequest =
+    tokensValueInvalid ||
+    areTokensEqual(fromToken, toToken) ||
+    !isPositiveNumber(inputAmount);
+
+  const resetState = (loading: boolean) => {
+    setLoading(loading);
+  };
+
+  const fetch = (params: FetchQuoteParams) => {
+    const {
+      fromToken,
+      toToken,
+      inputAmount,
+      liquiditySources,
+      excludeLiquiditySources,
+      disabledLiquiditySources,
+      slippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+    } = params;
+
+    if (!loading) {
+      resetState(true);
+    }
+    if (!shouldSkipRequest && fromToken && toToken) {
+      resetQuote();
+      const requestBody = createQuoteRequestBody({
+        fromToken,
+        toToken,
+        inputAmount,
+        liquiditySources: liquiditySources,
+        excludeLiquiditySources,
+        disabledLiquiditySources,
+        wallets: connectedWallets,
+        slippage,
+        affiliateRef,
+        affiliatePercent,
+        affiliateWallets,
+        contractCall,
+      });
+      if (isRoutingEnabled('experimental', routing)) {
+        requestBody.experimental = true;
+      }
+
+      if (isRoutingEnabled('avoidNativeFee', routing)) {
+        requestBody.avoidNativeFee = true;
+      }
+
+      if (isRoutingEnabled('enableCentralizedSwappers', routing)) {
+        requestBody.enableCentralizedSwappers = true;
+      }
+
+      if (routing?.maxLength) {
+        requestBody.maxLength = routing.maxLength;
+      }
+
+      if (swapMode === 'refuel') {
+        requestBody.maxLength = 1;
+      }
+
+      fetchQuote(requestBody)
+        .then((res) => {
+          const sortQuotes = sortQuotesBy(sortStrategy, res.results);
+          const quote = getDefaultQuote(
+            selectedQuote,
+            sortQuotes,
+            res.requestAmount
+          );
+
+          setLoading(false);
+          updateQuotePartialState('quotes', res);
+          setSelectedQuote(quote);
+
+          throwErrorIfResponseIsNotValid({
+            diagnosisMessages: res.diagnosisMessages,
+            requestId: quote?.requestId || '',
+            swaps: quote?.swaps,
+          });
+          const quoteWarning =
+            quote &&
+            generateQuoteWarnings({
+              currentQuote: quote,
+              userSlippage,
+              findToken,
+            });
+          updateQuotePartialState('warning', quoteWarning);
+        })
+        .catch((error) => {
+          const quoteError = handleQuoteErrors(error);
+          if (
+            quoteError.type === QuoteErrorType.NO_RESULT ||
+            quoteError.type === QuoteErrorType.REQUEST_FAILED
+          ) {
+            resetQuote();
+          }
+
+          if (quoteError.type !== QuoteErrorType.REQUEST_CANCELED) {
+            updateQuotePartialState('error', quoteError);
+            setLoading(false);
+            warn(new Error('quote error'), {
+              tags: {
+                ...quoteError,
+                type: QuoteErrorType[quoteError.type],
+                requestBody,
+              },
+            });
+          }
+        });
+    }
+  };
+
+  const debouncedFetch = useCallback(
+    debounce((params: FetchQuoteParams) => {
+      fetch(params);
+    }, DEBOUNCE_DELAY),
+    [shouldSkipRequest]
+  );
+
+  useEffect(() => {
+    if (!refetchQuote) {
+      setLoading(false);
+      return;
+    }
+    if (fetchStatus !== 'success') {
+      return;
+    }
+    if (shouldSkipRequest) {
+      setLoading(false);
+      if (selectedQuote || error || warning) {
+        resetQuote();
+      }
+      return;
+    }
+    if (!isPositiveNumber(inputAmount) && inputUsdValue?.eq(0)) {
+      resetState(false);
+      cancelFetch();
+      return;
+    }
+
+    resetQuote();
+    resetState(true);
+
+    let fetchQuotes = fetch;
+    if (prevInputAmount.current && prevInputAmount.current != inputAmount) {
+      fetchQuotes = debouncedFetch;
+    }
+    prevInputAmount.current = inputAmount;
+
+    fetchQuotes({
+      inputAmount,
+      fromToken,
+      toToken,
+      liquiditySources,
+      excludeLiquiditySources,
+      disabledLiquiditySources,
+      slippage: userSlippage,
+      affiliateRef,
+      affiliatePercent,
+      affiliateWallets,
+      contractCall,
+    });
+    return cancelFetch;
+  }, [
+    fetchStatus,
+    inputAmount,
+    fromToken?.symbol,
+    fromToken?.address,
+    fromToken?.blockchain,
+    toToken?.symbol,
+    toToken?.address,
+    toToken?.blockchain,
+    shouldSkipRequest,
+    liquiditySources?.length,
+    configExcludeLiquiditySources,
+    disabledLiquiditySources.length,
+    userSlippage,
+    affiliateRef,
+    affiliatePercent,
+    contractCall,
+    JSON.stringify(affiliateWallets),
+  ]);
+
+  return {
+    fetch: () =>
+      fetch({
+        inputAmount,
+        fromToken,
+        toToken,
+        liquiditySources,
+        excludeLiquiditySources,
+        disabledLiquiditySources,
+        slippage: userSlippage,
+        affiliateRef,
+        affiliatePercent,
+        affiliateWallets,
+        contractCall,
+      }),
+    loading,
+  };
+}

package/src/hooks/useSwapMode.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+type SwapModeContextType = {
+  swapMode: 'swap' | 'refuel';
+  isMultiMode: boolean;
+};
+
+export const SwapModeContext = createContext<SwapModeContextType>({
+  swapMode: 'swap',
+  isMultiMode: false,
+});
+
+export function useSwapMode(): {
+  swapMode: 'swap' | 'refuel';
+  isMultiMode: boolean;
+} {
+  const { swapMode, isMultiMode } = useContext(SwapModeContext);
+
+  return { swapMode: swapMode, isMultiMode: isMultiMode };
+}

package/src/hooks/useSyncNotifications/index.ts

@@ -0,0 +1 @@
+export { useSyncNotifications } from './useSyncNotifications';

package/src/hooks/useSyncNotifications/useSyncNotifications.ts

@@ -0,0 +1,25 @@
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useEffect } from 'react';
+
+import { useNotificationStore } from '../../store/notification';
+import { getPendingSwaps } from '../../utils/queue';
+
+export function useSyncNotifications() {
+  const { isSynced, syncNotifications } = useNotificationStore();
+  const { manager, state } = useManager();
+
+  useEffect(() => {
+    const shouldSyncNotifications =
+      useNotificationStore.persist.hasHydrated() &&
+      state.loadedFromPersistor &&
+      !isSynced;
+
+    if (shouldSyncNotifications) {
+      syncNotifications(getPendingSwaps(manager));
+    }
+  }, [
+    useNotificationStore.persist.hasHydrated(),
+    state.loadedFromPersistor,
+    isSynced,
+  ]);
+}

package/src/hooks/useSyncStoresWithConfig.ts

@@ -0,0 +1,138 @@
+import type { Asset } from 'rango-sdk';
+
+import { useEffect, useRef } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import {
+  isBlockchainExcludedInConfig,
+  isTokenExcludedInConfig,
+} from '../utils/configs';
+
+export function useSyncStoresWithConfig() {
+  const {
+    setInputAmount,
+    setToToken,
+    setToBlockchain,
+    setFromBlockchain,
+    resetQuote,
+    setFromToken,
+    fromToken,
+    toToken,
+    fromBlockchain,
+    toBlockchain,
+  } = useQuoteStore()();
+
+  const config = useAppStore().config;
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const { findToken } = useAppStore();
+
+  const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
+    useAppStore();
+
+  const fromTokensConfig = config?.from?.tokens;
+  const fromBlockchainsConfig = config?.from?.blockchains;
+  const toTokensConfig = config?.to?.tokens;
+  const toBlockchainsConfig = config?.to?.blockchains;
+  const prevConfigFromToken = useRef<Asset | undefined>(undefined);
+  const prevConfigToToken = useRef<Asset | undefined>(undefined);
+  const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
+  const prevConfigToBlockchain = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof config.amount !== 'undefined') {
+      setInputAmount(config.amount.toString());
+    }
+  }, [config?.amount]);
+
+  useEffect(() => {
+    if (fetchMetaStatus === 'success') {
+      resetQuote();
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.from?.blockchain
+      );
+      const fromToken = config?.from?.token;
+      const token = fromToken && findToken(fromToken);
+
+      if (chain || (!chain && prevConfigFromBlockchain.current)) {
+        setFromBlockchain(chain ?? null);
+      }
+
+      if (token) {
+        setFromToken({ token, meta: { blockchains } });
+      } else if (!token && prevConfigFromToken.current) {
+        setFromToken({ token: null });
+      }
+
+      prevConfigFromBlockchain.current = config?.from?.blockchain;
+      prevConfigFromToken.current = config?.from?.token;
+    }
+  }, [
+    config?.from?.token?.symbol,
+    config?.from?.token?.address,
+    config?.from?.token?.blockchain,
+    config?.from?.blockchain,
+    fetchMetaStatus,
+  ]);
+
+  useEffect(() => {
+    if (isTokenExcludedInConfig(fromToken, fromTokensConfig)) {
+      setFromToken({ token: null });
+    }
+
+    if (isBlockchainExcludedInConfig(fromBlockchain, fromBlockchainsConfig)) {
+      setFromBlockchain(null);
+    }
+  }, [fromTokensConfig, fromBlockchainsConfig]);
+
+  useEffect(() => {
+    if (isTokenExcludedInConfig(toToken, toTokensConfig)) {
+      setFromToken({ token: null });
+    }
+    if (isBlockchainExcludedInConfig(toBlockchain, toBlockchainsConfig)) {
+      setToBlockchain(null);
+    }
+  }, [toTokensConfig, toBlockchainsConfig]);
+
+  useEffect(() => {
+    if (fetchMetaStatus === 'success') {
+      resetQuote();
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.to?.blockchain
+      );
+
+      const toToken = config?.to?.token;
+      const token = toToken && findToken(toToken);
+
+      if (chain || (!chain && prevConfigToBlockchain.current)) {
+        setToBlockchain(chain ?? null);
+      }
+
+      if (token) {
+        setToToken({ token, meta: { blockchains } });
+      } else if (!token && prevConfigToToken.current) {
+        setToToken({ token: null });
+      }
+
+      prevConfigToBlockchain.current = config?.to?.blockchain;
+      prevConfigToToken.current = config?.to?.token;
+    }
+  }, [
+    config?.to?.token?.symbol,
+    config?.to?.token?.address,
+    config?.to?.token?.blockchain,
+    config?.to?.blockchain,
+    fetchMetaStatus,
+  ]);
+
+  useEffect(() => {
+    setAffiliateRef(config?.affiliate?.ref ?? null);
+    setAffiliatePercent(config?.affiliate?.percent ?? null);
+    setAffiliateWallets(config?.affiliate?.wallets ?? null);
+  }, [
+    config?.affiliate?.ref,
+    config?.affiliate?.percent,
+    config?.affiliate?.wallets,
+  ]);
+}

package/src/hooks/useSyncUrlAndStore/index.ts

@@ -0,0 +1 @@
+export { useSyncUrlAndStore } from './useSyncUrlAndStore';

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.helpers.ts

@@ -0,0 +1,23 @@
+import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
+
+export function convertTokenSearchParamToAsset(
+  searchParam: string,
+  chain: BlockchainMeta
+): Asset | null {
+  const symbolAndAddress = searchParam.split('--');
+  if (!symbolAndAddress[0]) {
+    return null;
+  }
+  return {
+    blockchain: chain.name,
+    address: symbolAndAddress?.[1] || null,
+    symbol: symbolAndAddress[0],
+  };
+}
+
+export function tokenToSearchParam(token: Token | null): string | undefined {
+  if (token) {
+    return `${token.symbol}${token.address ? `--${token.address}` : ''}`;
+  }
+  return undefined;
+}

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -0,0 +1,185 @@
+import { useEffect, useRef } from 'react';
+import {
+  useInRouterContext,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
+
+import { SearchParams } from '../../constants/searchParams';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  convertTokenSearchParamToAsset,
+  tokenToSearchParam,
+} from './useSyncUrlAndStore.helpers';
+
+export function useSyncUrlAndStore() {
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    fromToken,
+    toToken,
+    inputAmount,
+    setFromBlockchain,
+    setToBlockchain,
+    setFromToken,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore()();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const isInRouterContext = useInRouterContext();
+  const { updateIframe, updateCampaignMode } = useAppStore();
+  const campaignMode = useAppStore().isInCampaignMode();
+  const liquiditySourcesParamsRef = useRef<string>();
+  const { findToken } = useAppStore();
+  const getUrlSearchParams = () => {
+    const utmQueryParams: Record<string, string> = {};
+
+    for (const [key, value] of searchParams.entries()) {
+      if (key.startsWith('utm_')) {
+        utmQueryParams[key] = value;
+      }
+    }
+    const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
+    const fromBlockchain = searchParams.get(SearchParams.FROM_BLOCKCHAIN);
+    const fromToken = searchParams.get(SearchParams.FROM_TOKEN);
+    const toBlockchain = searchParams.get(SearchParams.TO_BLOCKCHAIN);
+    const toToken = searchParams.get(SearchParams.TO_TOKEN);
+    const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
+    const clientUrl = searchParams.get(SearchParams.CLIENT_URL);
+    const liquiditySources = searchParams.get(SearchParams.LIQUIDITY_SOURCES);
+
+    const blockchain = searchParams.get(SearchParams.BLOCKCHAIN);
+
+    return {
+      fromAmount,
+      fromBlockchain,
+      fromToken,
+      toBlockchain,
+      toToken,
+      autoConnect,
+      clientUrl,
+      liquiditySources,
+      utmQueryParams,
+      blockchain,
+    };
+  };
+
+  const updateUrlSearchParams = (
+    searchParams: Record<string, string | undefined>
+  ) => {
+    for (const property in searchParams) {
+      if (!searchParams[property]) {
+        delete searchParams[property];
+      }
+    }
+    setSearchParams(searchParams as Record<string, string>, { replace: true });
+  };
+
+  useEffect(() => {
+    const { autoConnect, clientUrl, utmQueryParams, blockchain } =
+      getUrlSearchParams();
+
+    if (isInRouterContext && fetchMetaStatus === 'success') {
+      updateUrlSearchParams({
+        [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
+        [SearchParams.FROM_TOKEN]: tokenToSearchParam(fromToken),
+        [SearchParams.TO_BLOCKCHAIN]: toBlockchain?.name,
+        [SearchParams.TO_TOKEN]: tokenToSearchParam(toToken),
+        [SearchParams.FROM_AMOUNT]: inputAmount,
+        [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
+        [SearchParams.CLIENT_URL]: clientUrl ?? undefined,
+        [SearchParams.BLOCKCHAIN]: blockchain ?? undefined,
+        [SearchParams.LIQUIDITY_SOURCES]: campaignMode
+          ? liquiditySourcesParamsRef.current
+          : undefined,
+        ...utmQueryParams,
+      });
+    }
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+    campaignMode,
+    fetchMetaStatus,
+  ]);
+
+  useEffect(() => {
+    if (!isInRouterContext) {
+      return;
+    }
+
+    const searchParams = getUrlSearchParams();
+
+    if (!liquiditySourcesParamsRef.current && searchParams.liquiditySources) {
+      liquiditySourcesParamsRef.current = searchParams.liquiditySources;
+    }
+
+    if (searchParams.fromAmount) {
+      setInputAmount(searchParams.fromAmount);
+    }
+
+    if (fetchMetaStatus === 'success') {
+      const fromBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.fromBlockchain
+      );
+
+      const convertFromToken =
+        searchParams.fromToken &&
+        fromBlockchain &&
+        convertTokenSearchParamToAsset(searchParams.fromToken, fromBlockchain);
+      const fromToken = convertFromToken
+        ? findToken(convertFromToken)
+        : undefined;
+      const toBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.toBlockchain
+      );
+      const convertToToken =
+        searchParams.toToken &&
+        toBlockchain &&
+        convertTokenSearchParamToAsset(searchParams.toToken, toBlockchain);
+
+      const toToken = convertToToken ? findToken(convertToToken) : undefined;
+
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+            },
+          });
+        }
+      }
+
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains },
+          });
+        }
+      }
+    }
+  }, [fetchMetaStatus]);
+
+  useEffect(() => {
+    const { clientUrl, liquiditySources } = getUrlSearchParams();
+    // We run this only once, because if the app is embedded into an iframe, the data in url for iframe will not change.
+    updateIframe('clientUrl', clientUrl || undefined);
+
+    updateCampaignMode(
+      'liquiditySources',
+      liquiditySources?.split(',') ?? undefined
+    );
+  }, []);
+}