@rango-dev/widget-embedded 0.17.1-next.9 → 0.19.0

package/src/store/wallets.ts

@@ -1,6 +1,5 @@
 import type { Wallet } from '../types';
 import type { WalletType } from '@rango-dev/wallets-shared';
-import type { Token } from 'rango-sdk';
 
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
@@ -12,6 +11,7 @@ import {
   resetConnectedWalletState,
 } from '../utils/wallets';
 
+import { useMetaStore } from './meta';
 import createSelectors from './selectors';
 
 export type TokenBalance = {
@@ -38,15 +38,11 @@ interface WalletsStore {
   connectedWallets: ConnectedWallet[];
   customDestination: string;
   loading: boolean;
-  connectWallet: (accounts: Wallet[], tokens: Token[]) => void;
+  connectWallet: (accounts: Wallet[]) => void;
   disconnectWallet: (walletType: WalletType) => void;
   selectWallets: (wallets: { walletType: string; chain: string }[]) => void;
   clearConnectedWallet: () => void;
-  getWalletsDetails: (
-    accounts: Wallet[],
-    tokens: Token[],
-    shouldRetry?: boolean
-  ) => void;
+  getWalletsDetails: (accounts: Wallet[], shouldRetry?: boolean) => void;
 }
 
 export const useWalletsStore = createSelectors(
@@ -55,7 +51,7 @@ export const useWalletsStore = createSelectors(
       connectedWallets: [],
       customDestination: '',
       loading: false,
-      connectWallet: (accounts, tokens) => {
+      connectWallet: (accounts) => {
         const getWalletsDetails = get().getWalletsDetails;
         set((state) => ({
           loading: true,
@@ -81,7 +77,7 @@ export const useWalletsStore = createSelectors(
               })
             ),
         }));
-        getWalletsDetails(accounts, tokens);
+        getWalletsDetails(accounts);
       },
       disconnectWallet: (walletType) => {
         set((state) => {
@@ -139,8 +135,9 @@ export const useWalletsStore = createSelectors(
           connectedWallets: [],
           selectedWallets: [],
         })),
-      getWalletsDetails: async (accounts, tokens, shouldRetry = true) => {
+      getWalletsDetails: async (accounts, shouldRetry = true) => {
         const getWalletsDetails = get().getWalletsDetails;
+        const { tokens } = useMetaStore.getState().meta;
         set((state) => ({
           loading: true,
           connectedWallets: state.connectedWallets.map((wallet) => {
@@ -176,7 +173,7 @@ export const useWalletsStore = createSelectors(
                     matchedAccount &&
                     shouldRetry
                   ) {
-                    getWalletsDetails([matchedAccount], tokens, false);
+                    getWalletsDetails([matchedAccount], false);
                   }
                   return matchedAccount && retrievedBalanceAccount
                     ? {

package/src/types/config.ts

@@ -61,7 +61,7 @@ export type WidgetTheme = {
  * @property {{ [key: string]: string }} wallets - If you want to change the default affiliate wallet
  *  addresses, you can provide new values here. (Map of route blockchains to affiliate address)
  */
-export type WidgetAffiliate = {
+export type WidgeAffiliate = {
   ref?: string;
   percent?: number;
   wallets?: { [key: string]: string };
@@ -91,7 +91,7 @@ export type BlockchainAndTokenConfig = {
  * and theme.
  *
  * @property {string} apiKey - The API key used to communicate with Rango API
- * @property {WidgetAffiliate} affiliate - If you want to charge users fee per transaction, you should
+ * @property {WidgeAffiliate} affiliate - If you want to charge users fee per transaction, you should
  * pass `WidgetAffiliate` including affiliateRef, affiliatePercent, and affiliateWallets.
  * @property {number} amount - The default input amount.
  * @property {BlockchainAndTokenConfig} from - The `from` property is an optional property of type
@@ -121,13 +121,13 @@ export type BlockchainAndTokenConfig = {
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
  * @property {Asset} pinnedTokens - The `pinnedTokens` property is an optional array of `Asset` objects that
  * you could use to pin tokens of your choice to the top of the token list.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
+ * @property {boolean} includeNewLiquiditySources - The `includeNewLiquiditySources` property is a boolean value that when you
  * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
  */
 export type WidgetConfig = {
   apiKey: string;
   walletConnectProjectId?: string;
-  affiliate?: WidgetAffiliate;
+  affiliate?: WidgeAffiliate;
   amount?: number;
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
@@ -139,5 +139,5 @@ export type WidgetConfig = {
   theme?: WidgetTheme;
   externalWallets?: boolean;
   pinnedTokens?: Asset[];
-  enableNewLiquiditySources?: boolean;
+  includeNewLiquiditySources?: boolean;
 };

package/src/types/index.ts

@@ -1,4 +1,4 @@
 export * from './swap';
 export * from './config';
-export * from './quote';
+export * from './routing';
 export * from './wallets';

package/src/types/routing.ts

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/prefer-enum-initializers */
+import type { RouteState } from '../store/bestRoute';
+import type { SettingsState } from '../store/settings';
+
+interface BestRouteStoreParams {
+  fromBlockchain?: RouteState['fromBlockchain'];
+  toBlockchain?: RouteState['toBlockchain'];
+  fromToken?: RouteState['fromToken'];
+  toToken?: RouteState['toToken'];
+  inputAmount?: RouteState['inputAmount'];
+}
+
+interface SettingsStoreParams {
+  slippage?: SettingsState['slippage'];
+  customSlippage?: SettingsState['customSlippage'];
+  disabledLiquiditySources?: SettingsState['disabledLiquiditySources'];
+  infiniteApprove?: SettingsState['infiniteApprove'];
+}
+
+export type BestRouteEqualityParams =
+  | {
+      store: 'bestRoute';
+      prevState: BestRouteStoreParams;
+      currentState: BestRouteStoreParams;
+    }
+  | {
+      store: 'settings';
+      prevState: SettingsStoreParams;
+      currentState: SettingsStoreParams;
+    };
+
+export enum ConfirmSwapErrorTypes {
+  NO_ROUTE,
+  ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS,
+  REQUEST_FAILED,
+  REQUEST_CANCELED,
+}
+
+export type ConfirmSwapError =
+  | {
+      type: ConfirmSwapErrorTypes.NO_ROUTE;
+      diagnosisMessage?: string;
+    }
+  | {
+      type: Exclude<ConfirmSwapErrorTypes, ConfirmSwapErrorTypes.NO_ROUTE>;
+    };
+
+export enum RouteWarningType {
+  ROUTE_UPDATED,
+  ROUTE_SWAPPERS_UPDATED,
+  ROUTE_COINS_UPDATED,
+  ROUTE_AND_OUTPUT_AMOUNT_UPDATED,
+}
+
+export type RouteWarning =
+  | {
+      type: RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED;
+      newOutputAmount: string;
+      percentageChange: string;
+    }
+  | {
+      type: Exclude<
+        RouteWarningType,
+        RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED
+      >;
+    };
+
+export enum SlippageWarningType {
+  INSUFFICIENT_SLIPPAGE,
+  HIGH_SLIPPAGE,
+}
+
+export type ConfirmSwapWarnings = {
+  route: RouteWarning | null;
+  balance: { messages: string[] } | null;
+  slippage: { type: SlippageWarningType; slippage: string | null } | null;
+};

package/src/utils/numbers.ts

@@ -16,7 +16,7 @@ export const secondsToString = (s: number): string => {
 };
 
 export const numberToString = (
-  number: BigNumber | string | number | null | undefined,
+  number: BigNumber | string | null | undefined,
   minDecimals: number | null = null,
   maxDecimals: number | null = null
 ): string => {

package/src/utils/routing.ts

@@ -0,0 +1,321 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { BestRouteEqualityParams, Wallet } from '../types';
+import type { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type {
+  SimulationAssetAndAmount,
+  SimulationValidationStatus,
+} from '@rango-dev/ui/dist/widget/ui/src/types/swaps';
+import type {
+  Asset,
+  BestRouteResponse,
+  BlockchainMeta,
+  Token,
+} from 'rango-sdk';
+
+import { getLastSuccessfulStep } from '@rango-dev/queue-manager-rango-preset';
+import BigNumber from 'bignumber.js';
+
+import {
+  GAS_FEE_MAX_DECIMALS,
+  GAS_FEE_MIN_DECIMALS,
+  HIGHT_PRICE_IMPACT,
+  LOW_PRICE_IMPACT,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../constants/routing';
+
+import { areEqual } from './common';
+import { findBlockchain, findToken } from './meta';
+import { numberToString } from './numbers';
+
+export function searchParamsToToken(
+  tokens: Token[],
+  searchParams: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) {
+    return null;
+  }
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParams?.split('--');
+      if (symbolAndAddress?.length === 1) {
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      }
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function getBestRouteToTokenUsdPrice(
+  bestRoute: BestRouteResponse | null
+): number | null | undefined {
+  return bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1].to
+    .usdPrice;
+}
+
+export function isNumberOfSwapsChanged(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+) {
+  const route1Swaps = route1.result?.swaps || [];
+  const route2Swaps = route2.result?.swaps || [];
+  return route1Swaps.length !== route2Swaps.length;
+}
+
+export function isRouteSwappersUpdated(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+) {
+  const route1Swappers =
+    route1.result?.swaps.map((swap) => swap.swapperId) || [];
+  const route2Swappers =
+    route2.result?.swaps.map((swap) => swap.swapperId) || [];
+  return !areEqual(route1Swappers, route2Swappers);
+}
+
+export function isRouteInternalCoinsUpdated(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+) {
+  const route1InternalCoins =
+    route1.result?.swaps.map((swap) => swap.to.symbol) || [];
+  const route2InternalCoins =
+    route2.result?.swaps.map((swap) => swap.to.symbol) || [];
+  return !areEqual(route1InternalCoins, route2InternalCoins);
+}
+
+export function isRouteChanged(
+  route1: BestRouteResponse,
+  route2: BestRouteResponse
+): boolean {
+  return (
+    isNumberOfSwapsChanged(route1, route2) ||
+    isRouteSwappersUpdated(route1, route2) ||
+    isRouteInternalCoinsUpdated(route1, route2)
+  );
+}
+
+export function outToRatioHasWarning(
+  fromUsdValue: BigNumber | null,
+  outToInRatio: BigNumber | 0
+) {
+  return (
+    (parseInt(outToInRatio?.toFixed(2) || '0') <= -10 &&
+      (fromUsdValue === null || fromUsdValue.gte(new BigNumber(200)))) ||
+    (parseInt(outToInRatio?.toFixed(2) || '0') <= -5 &&
+      (fromUsdValue === null || fromUsdValue.gte(new BigNumber(1000))))
+  );
+}
+
+export function getRequiredBalanceOfWallet(
+  selectedWallet: Wallet,
+  fee: SimulationValidationStatus[] | null
+): SimulationAssetAndAmount[] | null {
+  if (fee === null) {
+    return null;
+  }
+  const relatedFeeStatus = fee
+    ?.find((item) => item.blockchain === selectedWallet.chain)
+    ?.wallets.find(
+      (wallet) =>
+        wallet.address?.toLowerCase() === selectedWallet.address.toLowerCase()
+    );
+  if (!relatedFeeStatus) {
+    return null;
+  }
+  return relatedFeeStatus.requiredAssets;
+}
+
+export function isRouteParametersChanged(params: BestRouteEqualityParams) {
+  if (params.store === 'bestRoute') {
+    const { prevState, currentState } = params;
+    return (
+      !!currentState.fromToken &&
+      !!currentState.toToken &&
+      (prevState.fromBlockchain?.name !== currentState.fromBlockchain?.name ||
+        prevState.toBlockchain?.name !== currentState.toBlockchain?.name ||
+        prevState.fromToken?.symbol !== currentState.fromToken?.symbol ||
+        prevState.toToken?.symbol !== currentState.toToken?.symbol ||
+        prevState.fromToken?.blockchain !== prevState.fromToken?.blockchain ||
+        prevState.toToken?.blockchain !== currentState.toToken?.blockchain ||
+        prevState.fromToken?.address !== currentState.fromToken?.address ||
+        prevState.toToken?.address !== currentState.toToken?.address ||
+        prevState.inputAmount !== currentState.inputAmount)
+    );
+  } else if (params.store === 'settings') {
+    const { prevState, currentState } = params;
+    return (
+      prevState.slippage !== currentState.slippage ||
+      prevState.customSlippage !== currentState.customSlippage ||
+      prevState.disabledLiquiditySources?.length !==
+        currentState.disabledLiquiditySources?.length ||
+      prevState.infiniteApprove ||
+      currentState.infiniteApprove
+    );
+  }
+  return false;
+}
+
+export function getFormattedBestRoute(
+  bestRoute: BestRouteResponse | null
+): BestRouteResponse | null {
+  if (!bestRoute) {
+    return null;
+  }
+
+  const formattedSwaps = (bestRoute.result?.swaps || []).map((swap) => ({
+    ...swap,
+    fromAmount: numberToString(
+      swap.fromAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    toAmount: numberToString(
+      swap.toAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+  }));
+
+  return {
+    ...bestRoute,
+    ...(bestRoute.result && {
+      result: { ...bestRoute.result, swaps: formattedSwaps },
+    }),
+  };
+}
+
+export function getFormattedPendingSwap(pendingSwap: PendingSwap): PendingSwap {
+  const formattedSteps = pendingSwap.steps.map((step) => ({
+    ...step,
+    feeInUsd: numberToString(
+      step.feeInUsd,
+      GAS_FEE_MIN_DECIMALS,
+      GAS_FEE_MAX_DECIMALS
+    ),
+    outputAmount: numberToString(
+      step.outputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    expectedOutputAmountHumanReadable: numberToString(
+      step.expectedOutputAmountHumanReadable,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+  }));
+
+  return {
+    ...pendingSwap,
+    inputAmount: numberToString(
+      pendingSwap.inputAmount,
+      TOKEN_AMOUNT_MIN_DECIMALS,
+      TOKEN_AMOUNT_MAX_DECIMALS
+    ),
+    steps: formattedSteps,
+  };
+}
+
+//todo: refactor bestRoute store and add loadingStatus
+export const getBestRouteStatus = (loading: boolean, error: boolean) => {
+  if (loading) {
+    return 'loading';
+  }
+  if (error) {
+    return 'failed';
+  }
+  return 'success';
+};
+
+export function getPriceImpactLevel(
+  priceImpact: number
+): PriceImpactWarningLevel {
+  let warningLevel: PriceImpactWarningLevel = undefined;
+  if (priceImpact <= LOW_PRICE_IMPACT && priceImpact > HIGHT_PRICE_IMPACT) {
+    warningLevel = 'low';
+  } else if (priceImpact <= HIGHT_PRICE_IMPACT) {
+    warningLevel = 'high';
+  }
+
+  return warningLevel;
+}
+
+export function findCommonTokens<T extends Asset[], R extends Asset[]>(
+  listA: T,
+  listB: R
+) {
+  const tokenToString = (token: Asset): string =>
+    `${token.symbol}-${token.blockchain}-${token.address ?? ''}`;
+
+  const set = new Set();
+
+  listA.forEach((token) => set.add(tokenToString(token)));
+
+  return listB.filter((token) => set.has(tokenToString(token))) as R;
+}
+
+export function createRetryRoute(
+  pendingSwap: PendingSwap,
+  blockchains: BlockchainMeta[],
+  tokens: Token[]
+): {
+  fromBlockchain: BlockchainMeta | null;
+  fromToken: Token | null;
+  toBlockchain: BlockchainMeta | null;
+  toToken: Token | null;
+  inputAmount: string;
+} {
+  const firstStep = pendingSwap.steps[0];
+  const lastStep = pendingSwap.steps[pendingSwap.steps.length - 1];
+  const lastSuccessfulStep = getLastSuccessfulStep(pendingSwap.steps);
+
+  const toToken = {
+    blockchain: lastStep.toBlockchain,
+    symbol: lastStep.toSymbol,
+    address: lastStep.toSymbolAddress,
+  };
+
+  const fromBlockchainMeta = findBlockchain(
+    lastSuccessfulStep
+      ? lastSuccessfulStep.toBlockchain
+      : firstStep.fromBlockchain,
+    blockchains
+  );
+  const toBlockchainMeta = findBlockchain(lastStep.toBlockchain, blockchains);
+  const fromTokenMeta = findToken(
+    lastSuccessfulStep
+      ? {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: lastSuccessfulStep.toSymbol,
+          address: lastSuccessfulStep.toSymbolAddress,
+        }
+      : {
+          blockchain: fromBlockchainMeta?.name ?? '',
+          symbol: firstStep.fromSymbol,
+          address: firstStep.fromSymbolAddress,
+        },
+    tokens
+  );
+  const toTokenMeta = findToken(toToken, tokens);
+  const inputAmount = lastSuccessfulStep
+    ? lastSuccessfulStep.outputAmount ?? ''
+    : pendingSwap.inputAmount;
+
+  return {
+    fromBlockchain: fromBlockchainMeta,
+    fromToken: fromTokenMeta,
+    toBlockchain: toBlockchainMeta,
+    toToken: toTokenMeta,
+    inputAmount,
+  };
+}

package/src/utils/settings.ts

@@ -1,5 +1,4 @@
-import type { SwapperMeta } from 'rango-sdk';
-
+import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 
 import { removeDuplicateFrom } from './common';
@@ -15,11 +14,11 @@ export type UniqueSwappersGroupType = {
 };
 
 export function getUniqueSwappersGroups(
-  swappers: SwapperMeta[]
+  supportedSwappers?: string[]
 ): UniqueSwappersGroupType[] {
+  const swappers = useMetaStore.use.meta().swappers;
   const disabledLiquiditySources =
     useSettingsStore.use.disabledLiquiditySources();
-  const supportedSwappers = swappers.map((swapper) => swapper.swapperGroup);
 
   const uniqueSupportedSwappersGroups: Array<UniqueSwappersGroupType> = [];
 
@@ -58,14 +57,14 @@ export function getUniqueSwappersGroups(
 }
 
 export function sortLiquiditySourcesByGroupTitle(
-  a: SwapperMeta,
-  b: SwapperMeta
+  a: UniqueSwappersGroupType,
+  b: UniqueSwappersGroupType
 ) {
-  if (a.swapperGroup < b.swapperGroup) {
+  if (a.groupTitle < b.groupTitle) {
     return -1;
   }
 
-  if (a.swapperGroup > b.swapperGroup) {
+  if (a.groupTitle > b.groupTitle) {
     return 1;
   }