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

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -0,0 +1,155 @@
+import type { ConfirmSwapFetchResult } from './useConfirmSwap.types';
+import type { FindToken } from '../../store/slices/data';
+import type {
+  ConfirmSwapWarnings,
+  QuoteErrorResponse,
+  QuoteResponse,
+  SelectedQuote,
+  Wallet,
+} from '../../types';
+import type BigNumber from 'bignumber.js';
+import type { BlockchainMeta, SwapResult } from 'rango-sdk';
+
+import { errorMessages } from '../../constants/errors';
+import { QuoteErrorType } from '../../types';
+import { generateQuoteWarnings } from '../../utils/quote';
+import {
+  checkSlippageErrors,
+  generateBalanceWarnings,
+  getLimitErrorMessage,
+  getMinRequiredSlippage,
+  hasLimitError,
+} from '../../utils/swap';
+
+/**
+ * A request can be successful but in body of the response, it can be some case which is considered as failed.
+ */
+export function throwErrorIfResponseIsNotValid(response: QuoteResponse) {
+  if (!response.swaps) {
+    throw new Error(errorMessages().noResultError.title, {
+      cause: {
+        type: QuoteErrorType.NO_RESULT,
+        diagnosisMessage: response.diagnosisMessages?.[0],
+      },
+    });
+  }
+  const quoteError = getQuoteError(response.swaps);
+  if (quoteError) {
+    throw new Error(quoteError.message, {
+      cause: quoteError.options,
+    });
+  }
+}
+
+export function getQuoteError(swaps: SwapResult[]): QuoteErrorResponse | null {
+  const limitError = hasLimitError(swaps);
+  if (limitError) {
+    const { swap, fromAmountRangeError, recommendation } =
+      getLimitErrorMessage(swaps);
+    if (!swap) {
+      return null;
+    }
+    return {
+      message: 'bridge limit error',
+      options: {
+        type: QuoteErrorType.BRIDGE_LIMIT,
+        swap,
+        recommendation,
+        fromAmountRangeError,
+      },
+    };
+  }
+
+  const recommendedSlippages = checkSlippageErrors(swaps);
+
+  if (recommendedSlippages) {
+    const minRequiredSlippage = getMinRequiredSlippage(swaps);
+    return {
+      message: '',
+      options: {
+        type: QuoteErrorType.INSUFFICIENT_SLIPPAGE,
+        recommendedSlippages,
+        minRequiredSlippage,
+      },
+    };
+  }
+  return null;
+}
+
+export function generateWarnings(params: {
+  currentQuote: SelectedQuote;
+  previousQuote?: SelectedQuote;
+  meta: { blockchains: BlockchainMeta[] };
+  selectedWallets: Wallet[];
+  userSlippage: number;
+  inputUsdValue: BigNumber | null;
+  findToken: FindToken;
+}): ConfirmSwapWarnings {
+  const {
+    currentQuote,
+    previousQuote,
+    meta,
+    selectedWallets,
+    userSlippage,
+    findToken,
+  } = params;
+
+  const output: ConfirmSwapWarnings = {
+    quote: null,
+    balance: null,
+  };
+
+  const quoteWarning = generateQuoteWarnings({
+    previousQuote,
+    currentQuote,
+    findToken,
+    userSlippage,
+  });
+
+  if (quoteWarning) {
+    output.quote = quoteWarning;
+  }
+
+  const balanceWarnings = generateBalanceWarnings(
+    currentQuote,
+    selectedWallets,
+    meta.blockchains
+  );
+
+  const enoughBalance = balanceWarnings.length === 0;
+
+  if (!enoughBalance) {
+    output.balance = {
+      messages: balanceWarnings,
+    };
+  }
+
+  return output;
+}
+
+export function handleQuoteErrors(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error: any
+): NonNullable<ConfirmSwapFetchResult['error']> {
+  if (error?.code === 'ERR_CANCELED') {
+    return {
+      type: QuoteErrorType.REQUEST_CANCELED,
+    };
+  }
+
+  if (error.cause) {
+    return error.cause;
+  }
+
+  if (error?.code === 'ERR_BAD_REQUEST') {
+    return {
+      type: QuoteErrorType.NO_RESULT,
+      diagnosisMessage: error.response.data.error,
+    };
+  }
+
+  return {
+    type: QuoteErrorType.REQUEST_FAILED,
+    diagnosisMessage: error.message,
+  };
+}

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -0,0 +1,157 @@
+import type { ConfirmSwap } from './useConfirmSwap.types';
+import type { ConfirmRouteRequest } from 'rango-sdk';
+
+import { warn } from '@rango-dev/logging-core';
+import { calculatePendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import { useEffect } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import {
+  type PendingSwapSettings,
+  QuoteErrorType,
+  type SelectedQuote,
+} from '../../types';
+import { getWalletsForNewSwap } from '../../utils/swap';
+import { useFetchConfirmQuote } from '../useFetchConfirmQuote';
+import { useSwapMode } from '../useSwapMode';
+
+import {
+  generateWarnings,
+  handleQuoteErrors,
+  throwErrorIfResponseIsNotValid,
+} from './useConfirmSwap.helpers';
+
+export function useConfirmSwap(): ConfirmSwap {
+  const {
+    fromToken,
+    toToken,
+    inputAmount,
+    inputUsdValue,
+    setSelectedQuote,
+    selectedQuote: initialQuote,
+    customDestination: customDestinationFromStore,
+    resetAlerts,
+  } = useQuoteStore()();
+
+  const { slippage, customSlippage } = useAppStore();
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const { findToken } = useAppStore();
+  const { swapMode } = useSwapMode();
+
+  const userSlippage = customSlippage || slippage;
+
+  const { fetch: fetchQuote, cancelFetch, loading } = useFetchConfirmQuote();
+
+  useEffect(() => cancelFetch, []);
+
+  const fetch: ConfirmSwap['fetch'] = async (params) => {
+    const selectedWallets = params.selectedWallets;
+    const customDestination =
+      params?.customDestination ?? customDestinationFromStore;
+
+    if (!fromToken || !toToken || !inputAmount) {
+      return {
+        quote: null,
+        swap: null,
+        error: null,
+        warnings: null,
+      };
+    }
+
+    const wallets = selectedWallets.reduce(
+      (acc: Record<string, string>, item) => {
+        acc[item.chain] = item.address;
+        return acc;
+      },
+      {}
+    );
+    const requestBody: ConfirmRouteRequest = {
+      requestId: initialQuote?.requestId || '',
+      selectedWallets: wallets,
+      destination: customDestination || undefined,
+    };
+
+    try {
+      return await fetchQuote(requestBody, true).then((response) => {
+        const { result } = response;
+
+        if (!result) {
+          throw new Error(response.error ?? 'Error fetching updated quote');
+        }
+
+        throwErrorIfResponseIsNotValid({
+          diagnosisMessages: result.diagnosisMessages,
+          requestId: result.requestId,
+          swaps: result.result?.swaps,
+        });
+
+        const currentQuote: SelectedQuote = {
+          outputAmount: result.result?.outputAmount,
+          requestId: result.requestId,
+          resultType: result.result?.resultType,
+          swaps: result.result?.swaps || [],
+          validationStatus: result.validationStatus,
+          requestAmount: result.requestAmount,
+        };
+        setSelectedQuote(currentQuote);
+        const swapSettings: PendingSwapSettings = {
+          slippage: userSlippage.toString(),
+          disabledSwappersGroups: disabledLiquiditySources,
+        };
+
+        const confirmSwapWarnings = generateWarnings({
+          previousQuote: initialQuote ?? undefined,
+          currentQuote,
+          meta: { blockchains },
+          selectedWallets,
+          userSlippage,
+          inputUsdValue,
+          findToken,
+        });
+
+        resetAlerts();
+
+        const proceedAnyway = !!confirmSwapWarnings.balance;
+
+        const swap = calculatePendingSwap({
+          inputAmount: inputAmount.toString(),
+          bestRoute: result,
+          wallets: getWalletsForNewSwap(selectedWallets),
+          settings: swapSettings,
+          validateBalanceOrFee: proceedAnyway ? false : true,
+          meta: { blockchains, tokens },
+          swapMode,
+        });
+
+        return {
+          quote: currentQuote,
+          swap,
+          error: null,
+          warnings: confirmSwapWarnings,
+        };
+      });
+    } catch (error: unknown) {
+      const quoteError = handleQuoteErrors(error);
+      if (quoteError.type !== QuoteErrorType.REQUEST_CANCELED) {
+        warn(new Error('confirm swap error'), {
+          tags: {
+            ...quoteError,
+            type: QuoteErrorType[quoteError.type],
+            initialQuote,
+            requestBody,
+          },
+        });
+      }
+      return { swap: null, error: quoteError, warnings: null };
+    }
+  };
+
+  return {
+    loading,
+    fetch,
+    cancelFetch,
+  };
+}

package/src/hooks/useConfirmSwap/useConfirmSwap.types.ts

@@ -0,0 +1,19 @@
+import type { ConfirmSwapWarnings, QuoteError, Wallet } from '../../types';
+import type { PendingSwap } from 'rango-types';
+
+export type ConfirmSwapFetchResult = {
+  swap: PendingSwap | null;
+  error: QuoteError | null;
+  warnings: ConfirmSwapWarnings | null;
+};
+
+export type ConfirmSwap = {
+  loading: boolean;
+  fetch: (params: Params) => Promise<ConfirmSwapFetchResult>;
+  cancelFetch: () => void;
+};
+
+export type Params = {
+  selectedWallets: Wallet[];
+  customDestination: string | null;
+};

package/src/hooks/useFetch.ts

@@ -0,0 +1,59 @@
+import type { RequestOptions } from 'rango-sdk';
+
+import { useRef, useState } from 'react';
+
+type UseFetchOptions<TRequest, TResponse> = {
+  request: (
+    requestBody: TRequest,
+    options?: RequestOptions
+  ) => Promise<TResponse>;
+};
+export type UseFetchResult<TRequest, TResponse> = {
+  fetch: (requestBody: TRequest, retryOnFail?: boolean) => Promise<TResponse>;
+  cancelFetch: () => void;
+  loading: boolean;
+};
+
+const RETRY_DELAY = 2_000;
+
+export function useFetch<TRequest, TResponse>({
+  request,
+}: UseFetchOptions<TRequest, TResponse>): UseFetchResult<TRequest, TResponse> {
+  const [loading, setLoading] = useState(false);
+  const abortController = useRef<AbortController | null>(null);
+
+  const cancelFetch = () => abortController.current?.abort();
+
+  const retryFetch = async (requestBody: TRequest) => {
+    await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+    return await fetch(requestBody, false);
+  };
+
+  const fetch: UseFetchResult<TRequest, TResponse>['fetch'] = async (
+    requestBody,
+    retryOnFail = false
+  ) => {
+    cancelFetch();
+    abortController.current = new AbortController();
+
+    setLoading(true);
+    try {
+      const res = await request(requestBody, {
+        signal: abortController.current.signal,
+      });
+
+      abortController.current = null;
+      return res;
+      // eslint-disable-next-line no-useless-catch
+    } catch (error) {
+      if (retryOnFail) {
+        return await retryFetch(requestBody);
+      }
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { fetch, loading, cancelFetch };
+}

package/src/hooks/useFetchAllQuotes.ts

@@ -0,0 +1,21 @@
+import type { UseFetchResult } from './useFetch';
+import type { BestRouteRequest, MultiRouteResponse } from 'rango-sdk';
+
+import { httpService } from '../services/httpService';
+
+import { useFetch } from './useFetch';
+
+export function useFetchAllQuotes(): UseFetchResult<
+  BestRouteRequest,
+  MultiRouteResponse
+> {
+  const { fetch, loading, cancelFetch } = useFetch<
+    BestRouteRequest,
+    MultiRouteResponse
+  >({
+    request: async (requestBody, options) =>
+      await httpService().getAllRoutes(requestBody, options),
+  });
+
+  return { fetch, loading, cancelFetch };
+}

package/src/hooks/useFetchApiConfig.ts

@@ -0,0 +1,37 @@
+import { useUiStore } from '../store/ui';
+import { getConfig } from '../utils/configs';
+
+export type Watermark = 'NONE' | 'FULL';
+
+type ConfigResponse = {
+  config: {
+    watermark: Watermark;
+    banners: {
+      profile: boolean;
+    };
+  };
+};
+
+interface UseFetchApiConfig {
+  fetchApiConfig: () => Promise<void>;
+}
+
+export function useFetchApiConfig(): UseFetchApiConfig {
+  const { setWatermark, setShowProfileBanner } = useUiStore();
+
+  const fetchApiConfig: UseFetchApiConfig['fetchApiConfig'] = async () => {
+    const response = await fetch(
+      `${getConfig('BASE_URL')}/meta/dapp/config?apiKey=${getConfig('API_KEY')}`
+    );
+
+    if (!response.ok) {
+      throw new Error(`Request failed with status: ${response.status} `);
+    }
+
+    const data: ConfigResponse = await response.json();
+
+    setWatermark(data.config.watermark);
+    setShowProfileBanner(data.config.banners.profile);
+  };
+  return { fetchApiConfig };
+}

package/src/hooks/useFetchConfirmQuote.ts

@@ -0,0 +1,21 @@
+import type { UseFetchResult } from './useFetch';
+import type { ConfirmRouteRequest, ConfirmRouteResponse } from 'rango-sdk';
+
+import { httpService } from '../services/httpService';
+
+import { useFetch } from './useFetch';
+
+export function useFetchConfirmQuote(): UseFetchResult<
+  ConfirmRouteRequest,
+  ConfirmRouteResponse
+> {
+  const { fetch, loading, cancelFetch } = useFetch<
+    ConfirmRouteRequest,
+    ConfirmRouteResponse
+  >({
+    request: async (requestBody, options) =>
+      await httpService().confirmRoute(requestBody, options),
+  });
+
+  return { fetch, loading, cancelFetch };
+}

package/src/hooks/useFetchCustomToken.ts

@@ -0,0 +1,141 @@
+import type { TokenData } from '../components/TokenList/TokenList.types';
+import type { Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { useState } from 'react';
+
+import { httpService } from '../services/httpService';
+import { useAppStore } from '../store/AppStore';
+
+type ErrorType = 'duplicated' | 'not-found' | 'token-exist' | 'network-error';
+
+export type CustomTokenError = {
+  type: ErrorType;
+  title: string;
+  message: string;
+};
+
+export interface UseFetchCustomToken {
+  fetchCustomToken: ({
+    blockchain,
+    tokenAddress,
+  }: {
+    blockchain: string;
+    tokenAddress: string;
+  }) => Promise<void>;
+  token: Token | null;
+  loading: boolean;
+  error: CustomTokenError | null;
+  resetState: () => void;
+}
+
+export function useFetchCustomToken(): UseFetchCustomToken {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<CustomTokenError | null>(null);
+  const [token, setToken] = useState<TokenData | null>(null);
+  const { findToken } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+
+  const resetState = () => {
+    setToken(null);
+    setLoading(false);
+    setError(null);
+  };
+
+  function produceErrorMessage(
+    type: ErrorType,
+    blockchain?: string
+  ): CustomTokenError {
+    switch (type) {
+      case 'duplicated':
+        return {
+          type,
+          title: i18n.t('Duplicate Token'),
+          message: i18n.t(
+            'The address you entered is duplicate, please enter a new address.'
+          ),
+        };
+      case 'token-exist':
+        return {
+          type,
+          title: i18n.t('Token Already Exists'),
+          message: i18n.t(
+            `There's no need to add this token again because it already exists and is supported by us.`
+          ),
+        };
+      case 'not-found':
+        return {
+          type,
+          title: i18n.t('Token Not Found'),
+          message: i18n.t({
+            id: 'Sorry, no token was found on {blockchain} chain with the provided address. please make sure you have entered the right token address.',
+            values: {
+              blockchain,
+            },
+          }),
+        };
+      case 'network-error':
+        return {
+          type,
+          title: i18n.t('Network error'),
+          message: i18n.t('An error occurred while retrieving token data.'),
+        };
+    }
+  }
+
+  const fetchCustomToken: UseFetchCustomToken['fetchCustomToken'] = async ({
+    blockchain,
+    tokenAddress,
+  }) => {
+    setLoading(true);
+    try {
+      // Check for duplicate token in customTokens
+      const isDuplicate = customTokens.some(
+        (token) => token.address?.toLowerCase() === tokenAddress.toLowerCase()
+      );
+      if (isDuplicate) {
+        const errorMessage = produceErrorMessage('duplicated');
+        setError(errorMessage);
+        return;
+      }
+
+      const response = await httpService().getCustomToken({
+        blockchain,
+        address: tokenAddress,
+      });
+
+      if (!response || !response.token || response.error) {
+        const errorMessage = produceErrorMessage('not-found', blockchain);
+        setError(errorMessage);
+        return;
+      }
+
+      // Check if token is already in the system
+      const token = response.token;
+      const isTokenFound = findToken({
+        blockchain: token.blockchain,
+        address: token.address,
+        symbol: token.symbol,
+      });
+      if (isTokenFound) {
+        const errorMessage = produceErrorMessage('token-exist');
+        setError(errorMessage);
+        return;
+      }
+
+      return setToken({ ...token, warning: true });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      if (error.code === 'ERR_BAD_REQUEST') {
+        const errorMessage = produceErrorMessage('not-found', blockchain);
+        setError(errorMessage);
+        return;
+      }
+      setError(produceErrorMessage('network-error'));
+      return;
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { fetchCustomToken, token, loading, error, resetState };
+}

package/src/hooks/useFontLoader.ts

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { getFontUrlByName } from '../utils/common';
+/*
+ *TODO:
+ * Loading fonts from JS has a downside and it is the bundle needs to be downloaded and executed first which means after sometime font will be added to <head /> and it causes a layoutshift each time.
+ * We've added Roboto into <head /> since it's the default font. the downside here is it will load roboto anyway even dApp has set fontFamily other than Roboto which causes an unneccerary downloand (Roboto).
+ * We decided to go with the second one and it can be solved in future by split these types of configs into a separate js file and let it to be loaded with a more priority than the main bundle. it should be also cached which imrpove user experience after first load.
+ */
+const useFontLoader = () => {
+  const [fontLink, setFontLink] = useState<HTMLLinkElement | null>(null);
+
+  const loadFont = (fontUrl: string) => {
+    const link = document.createElement('link');
+    link.href = fontUrl;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+    return link;
+  };
+
+  const unloadFont = () => {
+    if (fontLink) {
+      document.head.removeChild(fontLink);
+      setFontLink(null);
+    }
+  };
+
+  const handleLoadCustomFont = (fontName: string) => {
+    unloadFont(); // Remove previous font
+    const fontUrl = getFontUrlByName(fontName);
+    if (fontUrl) {
+      const newFontLink = loadFont(fontUrl);
+      setFontLink(newFontLink);
+    }
+  };
+
+  return { handleLoadCustomFont };
+};
+
+export default useFontLoader;

package/src/hooks/useForceAutoConnect.ts

@@ -0,0 +1,27 @@
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef } from 'react';
+
+import { SearchParams } from '../constants/searchParams';
+import { useAppStore } from '../store/AppStore';
+
+export function useForceAutoConnect(): void {
+  const { connect, state } = useWallets();
+  const initiated = useRef<{ [key: string]: boolean }>({});
+  const { fetchStatus } = useAppStore();
+  const walletType =
+    new URLSearchParams(location.search).get(SearchParams.AUTO_CONNECT) || '';
+  const walletState = state(walletType);
+
+  useEffect(() => {
+    const shouldTryConnect =
+      fetchStatus === 'success' &&
+      walletType &&
+      walletState.installed &&
+      !walletState.connecting &&
+      !walletState.connected;
+    if (shouldTryConnect && !initiated.current[walletType]) {
+      initiated.current[walletType] = true;
+      void connect(walletType);
+    }
+  }, [walletState, fetchStatus]);
+}

package/src/hooks/useIframe/index.ts

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

package/src/hooks/useIframe/useIframe.helpers.ts

@@ -0,0 +1,3 @@
+export function isAppLoadedIntoIframe() {
+  return window.self !== window.top;
+}