@imtbl/checkout-widgets 2.4.13 → 2.4.14-alpha.0

package/src/lib/squid/hooks/useRoutes.ts

@@ -3,7 +3,6 @@ import { RouteResponse, ActionType } from '@0xsquid/squid-types';
 import { Squid } from '@0xsquid/sdk';
 import { useRef } from 'react';
 import { formatUnits } from 'ethers';
-import { WrappedBrowserProvider } from '@imtbl/checkout-sdk';
 import { delay } from '../../../functions/delay';
 import { sortRoutesByFastestTime } from '../functions/sortRoutesByFastestTime';
 import { retry } from '../../retry';
@@ -14,12 +13,13 @@ import {
 } from '../types';
 import { SquidPostHook } from '../../primary-sales';
 import { SQUID_NATIVE_TOKEN } from '../config';
-import { findToken } from '../functions/findToken';
 import { isRouteToAmountGreaterThanToAmount } from '../functions/isRouteToAmountGreaterThanToAmount';
-import { useRouteCalculation } from './useRouteCalculation';
 import { RouteError } from '../RouteError';
-
-const INSUFFICIENT_GAS_THRESHOLD = 0.1;
+import {
+  calculateFromAmountFromRoute,
+  convertToFormattedFromAmount,
+  getSufficientFromAmounts,
+} from '../functions/routeCalculation';
 
 export const useRoutes = () => {
   const latestRequestIdRef = useRef<number>(0);
@@ -30,71 +30,6 @@ export const useRoutes = () => {
     },
   } = useProvidersContext();
 
-  const { calculateFromAmount, calculateFromAmountFromRoute, convertToFormattedFromAmount } = useRouteCalculation();
-
-  const getFromAmountData = (
-    tokens: Token[],
-    balance: TokenBalance,
-    toAmount: string,
-    toChainId: string,
-    toTokenAddress: string,
-    additionalBuffer: number = 0,
-  ): FromAmountData | undefined => {
-    const fromToken = findToken(
-      tokens,
-      balance.address,
-      balance.chainId.toString(),
-    );
-    const toToken = findToken(tokens, toTokenAddress, toChainId);
-
-    if (!fromToken || !toToken) {
-      return undefined;
-    }
-
-    return {
-      fromToken,
-      fromAmount: calculateFromAmount(
-        fromToken,
-        toToken,
-        toAmount,
-        additionalBuffer,
-      ),
-      toToken,
-      toAmount,
-      balance,
-      additionalBuffer,
-    };
-  };
-
-  const getSufficientFromAmounts = (
-    tokens: Token[],
-    balances: TokenBalance[],
-    toChainId: string,
-    toTokenAddress: string,
-    toAmount: string,
-  ): FromAmountData[] => {
-    const filteredBalances = balances.filter(
-      (balance) => !(
-        balance.address.toLowerCase() === toTokenAddress.toLowerCase()
-          && balance.chainId === toChainId
-      ),
-    );
-
-    const fromAmountDataArray: FromAmountData[] = filteredBalances
-      .map((balance) => getFromAmountData(tokens, balance, toAmount, toChainId, toTokenAddress))
-      .filter((value) => value !== undefined);
-
-    return fromAmountDataArray.filter((data: FromAmountData) => {
-      const formattedBalance = formatUnits(
-        data.balance.balance,
-        data.balance.decimals,
-      );
-      return (
-        parseFloat(formattedBalance.toString()) > parseFloat(data.fromAmount)
-      );
-    });
-  };
-
   const getRouteWithRetry = async (
     squid: Squid,
     fromToken: Token,
@@ -357,53 +292,8 @@ export const useRoutes = () => {
     }
   };
 
-  const hasSufficientBalance = (
-    balances: TokenBalance[],
-    toTokenAddress: string,
-    toChainId: string,
-    toAmount: string,
-  ): boolean => {
-    const matchingTokens = balances.filter(
-      (balance) => balance.address.toLowerCase() === toTokenAddress.toLowerCase()
-        && balance.chainId.toString() === toChainId.toString(),
-    );
-
-    if (matchingTokens.length > 0) {
-      return matchingTokens.some((balance) => {
-        const tokenAmount = parseFloat(formatUnits(balance.balance, balance.decimals));
-        return tokenAmount >= parseFloat(toAmount);
-      });
-    }
-
-    return false;
-  };
-
-  const hasSufficientGas = (
-    balances: TokenBalance[],
-    selectedChainId: string | number,
-    provider: WrappedBrowserProvider | undefined,
-  ): boolean => {
-    if (!provider) return false;
-    if (isPassportProvider(provider)) return true;
-
-    const nativeCurrencyBalance = balances.find(
-      (balance) => balance.address.toLowerCase() === SQUID_NATIVE_TOKEN.toLowerCase()
-        && balance.chainId.toString() === selectedChainId.toString(),
-    );
-    if (!nativeCurrencyBalance) return false;
-
-    const nativeCurrencyBalanceAmount = parseFloat(
-      formatUnits(nativeCurrencyBalance.balance, nativeCurrencyBalance.decimals),
-    );
-    if (nativeCurrencyBalanceAmount < INSUFFICIENT_GAS_THRESHOLD) return false;
-    return true;
-  };
-
   return {
-    hasSufficientBalance,
-    hasSufficientGas,
     fetchRoutes,
-    getFromAmountData,
     getRoute,
   };
 };

package/src/widgets/add-tokens/views/Review.tsx

@@ -66,6 +66,7 @@ import {
 } from '../AddTokensWidgetEvents';
 import { useErrorHandler } from '../hooks/useErrorHandler';
 import { AddTokensHandoverStep, useHandoverConfig } from '../hooks/useHandoverConfig';
+import { getFromAmountData } from '../../../lib/squid/functions/routeCalculation';
 
 interface ReviewProps {
   data: AddTokensReviewData;
@@ -116,7 +117,7 @@ export function Review({
   const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
   const [showSecuringQuote, setShowSecuringQuote] = useState(false);
   const [showAddressMissmatchDrawer, setShowAddressMissmatchDrawer] = useState(false);
-  const { getFromAmountData, getRoute } = useRoutes();
+  const { getRoute } = useRoutes();
   const { showHandover } = useHandoverConfig(checkout.config.environment);
 
   const { onTransactionError } = useErrorHandler();

package/src/widgets/purchase/views/Purchase.tsx

@@ -46,6 +46,12 @@ import {
 } from '../types';
 import { ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
 import { PurchaseWidgetViews } from '../../../context/view-context/PurchaseViewContextTypes';
+import {
+  getFromAmountData,
+  hasSufficientBalance,
+  hasSufficientGas,
+} from '../../../lib/squid/functions/routeCalculation';
+import { waitForReceipt } from '../../../lib/squid/functions/execute';
 
 interface PurchaseProps {
   checkout: Checkout;
@@ -109,12 +115,12 @@ export function Purchase({
   } = useProvidersContext();
 
   const {
-    fetchRoutes, getRoute, getFromAmountData, hasSufficientBalance, hasSufficientGas,
+    fetchRoutes, getRoute,
   } = useRoutes();
   const { providers } = useInjectedProviders({ checkout });
 
   const {
-    getAllowance, approve, execute, getStatus, waitForReceipt,
+    getAllowance, approve, execute, getStatus,
   } = useExecute(UserJourney.PURCHASE, (err) => {
     // eslint-disable-next-line no-console
     console.log('useExecute err', err);

package/dist/types/lib/squid/hooks/useRouteCalculation.d.ts

@@ -1,9 +0,0 @@
-import { Token } from '../types';
-/**
- * Hook to handle route amount calculations.
- */
-export declare const useRouteCalculation: () => {
-    calculateFromAmount: (fromToken: Token, toToken: Token, toAmount: string, additionalBuffer?: number) => string;
-    calculateFromAmountFromRoute: (exchangeRate: string, toAmount: string, toAmountUSD?: string) => string;
-    convertToFormattedFromAmount: (amount: string, decimals: number) => string;
-};

package/dist/types/lib/squid/hooks/useSlippage.d.ts

@@ -1,7 +0,0 @@
-/**
- * Hook to calculate slippage based on thresholds
- */
-export declare const useSlippage: () => {
-    getSlippageTier: (usdAmount: number) => number;
-    calculateAdjustedAmount: (baseAmount: number, usdAmount: number, additionalBuffer?: number) => number;
-};

package/src/lib/squid/hooks/useRouteCalculation.ts

@@ -1,60 +0,0 @@
-import { useMemo } from 'react';
-import { parseUnits } from 'ethers';
-import { useSlippage } from './useSlippage';
-import { Token } from '../types';
-
-/**
- * Hook to handle route amount calculations.
- */
-export const useRouteCalculation = () => {
-  const { calculateAdjustedAmount } = useSlippage();
-
-  /**
-     * Calculate the fromAmount based on USD prices and slippage.
-     */
-  const calculateFromAmount = (
-    fromToken: Token,
-    toToken: Token,
-    toAmount: string,
-    additionalBuffer: number = 0,
-  ) => {
-    const toAmountNumber = parseFloat(toAmount);
-    // Calculate the USD value of the toAmount
-    const toAmountInUsd = toAmountNumber * toToken.usdPrice;
-    // Calculate the amount of fromToken needed to match this USD value
-    const baseFromAmount = toAmountInUsd / fromToken.usdPrice;
-    // Add a buffer for price fluctuations and fees
-    const fromAmountWithBuffer = calculateAdjustedAmount(baseFromAmount, toAmountInUsd, additionalBuffer);
-
-    return fromAmountWithBuffer.toString();
-  };
-
-  /**
-     * Calculate the fromAmount using exchange rate returned from the route.
-     */
-  const calculateFromAmountFromRoute = (
-    exchangeRate: string,
-    toAmount: string,
-    toAmountUSD?: string,
-  ) => {
-    const toAmountUSDNumber = toAmountUSD ? parseFloat(toAmountUSD) : 0;
-    const fromAmount = parseFloat(toAmount) / parseFloat(exchangeRate);
-    const fromAmountWithBuffer = calculateAdjustedAmount(fromAmount, toAmountUSDNumber);
-    return fromAmountWithBuffer.toString();
-  };
-
-  /**
-     * Convert a string amount to a formatted amount with the specified number of decimals.
-     */
-  const convertToFormattedFromAmount = (amount: string, decimals: number) => {
-    const parsedFromAmount = parseFloat(amount).toFixed(decimals);
-    const formattedFromAmount = parseUnits(parsedFromAmount, decimals);
-    return formattedFromAmount.toString();
-  };
-
-  return useMemo(() => ({
-    calculateFromAmount,
-    calculateFromAmountFromRoute,
-    convertToFormattedFromAmount,
-  }), []);
-};

package/src/lib/squid/hooks/useSlippage.ts

@@ -1,45 +0,0 @@
-import { useMemo } from 'react';
-
-const BASE_SLIPPAGE_HIGH_TIER = 0.005;
-const BASE_SLIPPAGE_MEDIUM_TIER = 0.01;
-const BASE_SLIPPAGE_LOW_TIER = 0.015;
-
-const SLIPPAGE_TIERS = {
-  high: {
-    threshold: 999,
-    value: BASE_SLIPPAGE_HIGH_TIER,
-  },
-  medium: {
-    threshold: 99,
-    value: BASE_SLIPPAGE_MEDIUM_TIER,
-  },
-  low: {
-    threshold: 0,
-    value: BASE_SLIPPAGE_LOW_TIER,
-  },
-} as const;
-
-/**
- * Hook to calculate slippage based on thresholds
- */
-export const useSlippage = () => {
-  const getSlippageTier = (usdAmount: number): number => {
-    if (usdAmount >= SLIPPAGE_TIERS.high.threshold) return SLIPPAGE_TIERS.high.value;
-    if (usdAmount >= SLIPPAGE_TIERS.medium.threshold) return SLIPPAGE_TIERS.medium.value;
-    return SLIPPAGE_TIERS.low.value;
-  };
-
-  const calculateAdjustedAmount = (
-    baseAmount: number,
-    usdAmount: number,
-    additionalBuffer: number = 0,
-  ): number => {
-    const slippage = getSlippageTier(usdAmount);
-    return baseAmount * (1 + slippage + additionalBuffer);
-  };
-
-  return useMemo(() => ({
-    getSlippageTier,
-    calculateAdjustedAmount,
-  }), []);
-};