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

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/src/widgets/swap/SwapWidget.tsx

@@ -9,7 +9,6 @@ import {
 import {
   TokenFilterTypes, IMTBLWidgetEvents, SwapWidgetParams,
   SwapDirection,
-  fetchRiskAssessment,
   WalletProviderName,
 } from '@imtbl/checkout-sdk';
 import { useTranslation } from 'react-i18next';
@@ -193,28 +192,6 @@ export default function SwapWidget({
     })();
   }, [checkout, provider]);
 
-  useEffect(() => {
-    if (!checkout || swapState.riskAssessment) {
-      return;
-    }
-
-    (async () => {
-      const address = await (await provider?.getSigner())?.getAddress();
-
-      if (!address) {
-        return;
-      }
-
-      const assessment = await fetchRiskAssessment([address], checkout.config);
-      swapDispatch({
-        payload: {
-          type: SwapActions.SET_RISK_ASSESSMENT,
-          riskAssessment: assessment,
-        },
-      });
-    })();
-  }, [checkout, provider]);
-
   useEffect(() => {
     swapDispatch({
       payload: {

package/src/widgets/swap/components/SwapForm.tsx

@@ -5,8 +5,12 @@ import {
 import {
   Box, ButtCon, Heading, Icon, OptionKey, Tooltip, Body,
 } from '@biom3/react';
-import { isAddressSanctioned, TokenInfo, WidgetTheme } from '@imtbl/checkout-sdk';
-
+import {
+  fetchRiskAssessmentV2,
+  isSingleAddressSanctioned,
+  TokenInfo,
+  WidgetTheme,
+} from '@imtbl/checkout-sdk';
 import { TransactionResponse } from '@imtbl/dex-sdk';
 import { useTranslation } from 'react-i18next';
 import { Environment } from '@imtbl/config';
@@ -92,7 +96,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
       tokenBalances,
       network,
       autoProceed,
-      riskAssessment,
     },
   } = useContext(SwapContext);
 
@@ -815,18 +818,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
 
   const sendTransaction = async () => {
     if (!quote) return;
-    if (riskAssessment && isAddressSanctioned(riskAssessment)) {
-      viewDispatch({
-        payload: {
-          type: ViewActions.UPDATE_VIEW,
-          view: {
-            type: SwapWidgetViews.SERVICE_UNAVAILABLE,
-          },
-        },
-      });
 
-      return;
-    }
     const transaction = quote;
     const isValid = SwapFormValidator();
     // Tracking swap from data here and is valid or not to understand behaviour
@@ -836,12 +828,12 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
       control: 'Swap',
       controlType: 'Button',
       extras: {
-        swapFromAddress: data?.fromTokenAddress,
-        swapFromAmount: data?.fromAmount,
-        swapFromTokenSymbol: data?.fromTokenSymbol,
-        swapToAddress: data?.toTokenAddress,
-        swapToAmount: data?.toAmount,
-        swapToTokenSymbol: data?.toTokenSymbol,
+        swapFromAddress: fromToken?.address,
+        swapFromAmount: fromAmount,
+        swapFromTokenSymbol: fromToken?.symbol,
+        swapToAddress: toToken?.address,
+        swapToAmount: toAmount,
+        swapToTokenSymbol: toToken?.symbol,
         isSwapFormValid: isValid,
         hasFundsForGas: !insufficientFundsForGas,
         autoProceed,
@@ -855,6 +847,38 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
       return;
     }
 
+    // Perform sanctions check once we have valid asset and amount data
+    const address = await (await provider?.getSigner())?.getAddress();
+
+    if (!address) {
+      return;
+    }
+
+    if (!fromToken?.address || !fromAmount) {
+      throw new Error('Invalid form data: fromToken.Address or fromAmount is missing');
+    }
+
+    const riskAssessmentData = [{
+      address,
+      tokenAddr: fromToken.address,
+      amount: parseUnits(fromAmount, fromToken.decimals),
+    }];
+
+    const riskAssessment = await fetchRiskAssessmentV2(riskAssessmentData, checkout.config);
+
+    if (riskAssessment && isSingleAddressSanctioned(riskAssessment, address)) {
+      viewDispatch({
+        payload: {
+          type: ViewActions.UPDATE_VIEW,
+          view: {
+            type: SwapWidgetViews.SERVICE_UNAVAILABLE,
+          },
+        },
+      });
+
+      return;
+    }
+
     try {
     // check for switch network here
       const currentChainId = await (provider.provider as any).send('eth_chainId', []);
@@ -959,7 +983,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
               testInputMode="decimal"
               textInputValue={fromAmount}
               textInputPlaceholder={t('views.SWAP.swapForm.from.inputPlaceholder')}
-              textInputSubtext={`${t('views.SWAP.content.fiatPricePrefix')} 
+              textInputSubtext={`${t('views.SWAP.content.fiatPricePrefix')}
               $${formatZeroAmount(
                 fromFiatValue,
                 true,

package/src/widgets/swap/context/SwapContext.ts

@@ -4,7 +4,6 @@ import {
   NetworkInfo,
   TokenInfo,
   SwapDirection,
-  AssessmentResult,
 } from '@imtbl/checkout-sdk';
 import { Exchange } from '@imtbl/dex-sdk';
 import { createContext } from 'react';
@@ -17,7 +16,6 @@ export interface SwapState {
   supportedTopUps: TopUpFeature | null;
   allowedTokens: TokenInfo[];
   autoProceed: boolean;
-  riskAssessment: AssessmentResult | undefined;
 }
 
 export interface TopUpFeature {
@@ -34,7 +32,6 @@ export const initialSwapState: SwapState = {
   supportedTopUps: null,
   allowedTokens: [],
   autoProceed: false,
-  riskAssessment: undefined,
 };
 
 export interface SwapContextState {
@@ -53,8 +50,7 @@ type ActionPayload =
   | SetSupportedTopUpPayload
   | SetTokenBalancesPayload
   | SetAllowedTokensPayload
-  | SetAutoProceedPayload
-  | SetRiskAssessmentPayload;
+  | SetAutoProceedPayload;
 
 export enum SwapActions {
   SET_EXCHANGE = 'SET_EXCHANGE',
@@ -64,7 +60,6 @@ export enum SwapActions {
   SET_TOKEN_BALANCES = 'SET_TOKEN_BALANCES',
   SET_ALLOWED_TOKENS = 'SET_ALLOWED_TOKENS',
   SET_AUTO_PROCEED = 'SET_AUTO_PROCEED',
-  SET_RISK_ASSESSMENT = 'SET_RISK_ASSESSMENT',
 }
 
 export interface SetExchangePayload {
@@ -103,11 +98,6 @@ export interface SetAutoProceedPayload {
   direction: SwapDirection;
 }
 
-export interface SetRiskAssessmentPayload {
-  type: SwapActions.SET_RISK_ASSESSMENT;
-  riskAssessment: AssessmentResult;
-}
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const SwapContext = createContext<SwapContextState>({
   swapState: initialSwapState,
@@ -165,11 +155,6 @@ export const swapReducer: Reducer<SwapState, SwapAction> = (
         autoProceed: action.payload.autoProceed,
         direction: action.payload.direction,
       };
-    case SwapActions.SET_RISK_ASSESSMENT:
-      return {
-        ...state,
-        riskAssessment: action.payload.riskAssessment,
-      };
     default:
       return state;
   }

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,
-  }), []);
-};