@rango-dev/widget-embedded 0.36.1-next.11 → 0.36.1-next.13

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -8,8 +8,6 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
-import { convertCommonNamespacesKeysToLegacyNamespace } from '../../utils/hub';
-
 import {
   isStateOnDerivationPathStep,
   isStateOnNamespace,
@@ -99,50 +97,48 @@ export function useStatefulConnect(): UseStatefulConnect {
           detachedInstances && wallet.state !== 'connected';
 
         if (needsNamespace) {
-          const availableNamespaces =
-            convertCommonNamespacesKeysToLegacyNamespace(
-              detachedInstances.value
-            );
-
           dispatch({
             type: 'needsNamespace',
             payload: {
-              providerType: wallet.type,
-              providerImage: wallet.image,
-              availableNamespaces,
-              singleNamespace: false,
+              targetWallet: wallet,
             },
           });
           return { status: ResultStatus.Namespace };
         }
       }
 
-      // Legacy
-      if (!wallet.namespaces) {
+      /*
+       * Legacy
+       *
+       * For legacy there are 3 states:
+       * 1. a wallet doesn't have any namespace defined, we call the connect.
+       * 2. a wallet has more than two namespaces, we should show namepsace modal, and in that place user will be checked to needs derivation path or not.
+       * 3. a wallet has exactly one namespacesape, in this case we check if that needs derivation or not, if it needs we will do it here by dispatching the action accordingly.
+       */
+      if (!wallet.needsNamespace) {
         return await runConnect(wallet.type, undefined, options);
       }
 
-      const needsNamespace = wallet.namespaces.length > 1;
+      const needsNamespace = wallet.needsNamespace.data.length > 1;
       const needsDerivationPath = wallet.needsDerivationPath;
 
       if (needsNamespace) {
         dispatch({
           type: 'needsNamespace',
           payload: {
-            providerType: wallet.type,
-            providerImage: wallet.image,
-            availableNamespaces: wallet.namespaces,
-            singleNamespace: wallet.singleNamespace,
+            targetWallet: wallet,
           },
         });
         return { status: ResultStatus.Namespace };
       } else if (needsDerivationPath) {
+        const namespace = wallet.needsNamespace.data[0];
+
         dispatch({
           type: 'needsDerivationPath',
           payload: {
             providerType: wallet.type,
             providerImage: wallet.image,
-            namespace: wallet.namespaces[0],
+            namespace: namespace.value,
           },
         });
         return { status: ResultStatus.DerivationPath };
@@ -150,7 +146,9 @@ export function useStatefulConnect(): UseStatefulConnect {
 
       return await runConnect(
         wallet.type,
-        wallet.namespaces.map((namespace) => ({ namespace })),
+        wallet.needsNamespace?.data.map((namespace) => ({
+          namespace: namespace.value,
+        })),
         options
       );
     }
@@ -167,7 +165,7 @@ export function useStatefulConnect(): UseStatefulConnect {
     wallet: WalletInfoWithExtra,
     selectedNamespaces: Namespace[]
   ): Promise<Result> => {
-    const isSingleNamespace = wallet.singleNamespace;
+    const isSingleNamespace = wallet.needsNamespace?.selection === 'single';
     const needsDerivationPath = wallet.needsDerivationPath;
     const firstSelectedNamespace = selectedNamespaces[0];
 
@@ -207,7 +205,7 @@ export function useStatefulConnect(): UseStatefulConnect {
       );
     }
 
-    const type = connectState.namespace.providerType;
+    const type = connectState.namespace.targetWallet.type;
     const namespaces = selectedNamespaces.map((namespace) => ({
       namespace,
     }));

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,3 +1,4 @@
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface HandleConnectOptions {
@@ -6,10 +7,7 @@ export interface HandleConnectOptions {
 }
 
 export interface NeedsNamespacesState {
-  providerType: string;
-  providerImage: string;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
+  targetWallet: ExtendedModalWalletInfo;
 }
 
 export interface NeedsDerivationPathState {

package/src/hooks/useSwapInput.ts

@@ -10,8 +10,6 @@ import { isPositiveNumber } from '../utils/numbers';
 import {
   generateQuoteWarnings,
   getDefaultQuote,
-  getQuoteFromTokenUsdPrice,
-  getQuoteToTokenUsdPrice,
   sortQuotesBy,
 } from '../utils/quote';
 import { isRoutingEnabled } from '../utils/settings';
@@ -156,15 +154,10 @@ export function useSwapInput({
             requestId: quote?.requestId || '',
             swaps: quote?.swaps,
           });
-          const outputUsdValue =
-            getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice;
-          const inputUsdValue =
-            getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice;
           const quoteWarning =
             quote &&
-            generateQuoteWarnings(quote, {
-              fromToken: { ...fromToken, usdPrice: inputUsdValue },
-              toToken: { ...toToken, usdPrice: outputUsdValue },
+            generateQuoteWarnings({
+              currentQuote: quote,
               userSlippage,
               findToken,
             });

package/src/pages/ConfirmSwapPage.tsx

@@ -24,12 +24,12 @@ import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
+import { isQuoteWarningConfirmationRequired } from '../utils/quote';
 import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
@@ -133,7 +133,12 @@ export function ConfirmSwapPage() {
   };
 
   const onStartConfirmSwap = async () => {
-    if (confirmSwapResult?.warnings?.quote && !quoteWarningsConfirmed) {
+    const shouldShowWarningModal =
+      confirmSwapResult.warnings?.quote &&
+      isQuoteWarningConfirmationRequired(confirmSwapResult.warnings.quote) &&
+      !quoteWarningsConfirmed;
+
+    if (shouldShowWarningModal) {
       setShowQuoteWarningModal(true);
     } else {
       await onConfirm();
@@ -196,19 +201,6 @@ export function ConfirmSwapPage() {
     alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
   }
 
-  if (confirmSwapResult.warnings?.quoteUpdate) {
-    alerts.push(
-      <Alert
-        variant="alarm"
-        type="warning"
-        title={
-          confirmSwapResult.warnings.quoteUpdate &&
-          getQuoteUpdateWarningMessage(confirmSwapResult.warnings.quoteUpdate)
-        }
-      />
-    );
-  }
-
   if (quoteWarning || quoteError) {
     const settings_url = `../${navigationRoutes.settings}`;
     alerts.push(

package/src/store/quote.ts

@@ -21,11 +21,7 @@ import {
   WidgetEvents,
 } from '../types';
 import { isPositiveNumber } from '../utils/numbers';
-import {
-  getQuoteFromTokenUsdPrice,
-  getQuoteToTokenUsdPrice,
-} from '../utils/quote';
-import { calcOutputUsdValue } from '../utils/swap';
+import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
 
 import createSelectors from './selectors';
 
@@ -137,14 +133,8 @@ export const useQuoteStore = createSelectors(
             outputAmount = !!quote?.outputAmount
               ? new BigNumber(quote?.outputAmount)
               : null;
-            inputUsdValue = calcOutputUsdValue(
-              state.inputAmount,
-              getQuoteFromTokenUsdPrice(quote) || state.fromToken?.usdPrice
-            );
-            outputUsdValue = calcOutputUsdValue(
-              quote.outputAmount,
-              getQuoteToTokenUsdPrice(quote) || state.toToken?.usdPrice
-            );
+            inputUsdValue = getUsdInputFrom(quote) ?? ZERO;
+            outputUsdValue = getUsdOutputFrom(quote) ?? ZERO;
           }
           return {
             selectedQuote: quote,

package/src/store/slices/wallets.ts

@@ -55,7 +55,12 @@ export interface WalletsSlice {
   setConnectedWalletAsRefetching: (walletType: string) => void;
   setConnectedWalletHasError: (walletType: string) => void;
   setConnectedWalletRetrievedData: (walletType: string) => void;
-  removeBalancesForWallet: (walletType: string) => void;
+  removeBalancesForWallet: (
+    walletType: string,
+    options?: {
+      chains?: string[];
+    }
+  ) => void;
   addConnectedWallet: (accounts: Wallet[]) => void;
   setWalletsAsSelected: (
     wallets: { walletType: string; chain: string }[]
@@ -254,7 +259,7 @@ export const createWalletsSlice: StateCreator<
 
     void get().fetchBalances(accounts);
   },
-  removeBalancesForWallet: (walletType) => {
+  removeBalancesForWallet: (walletType, options) => {
     let walletsNeedsToBeRemoved = get().connectedWallets.filter(
       (connectedWallet) => connectedWallet.walletType === walletType
     );
@@ -275,6 +280,12 @@ export const createWalletsSlice: StateCreator<
       }
     });
 
+    if (!!options?.chains && options.chains.length > 0) {
+      walletsNeedsToBeRemoved = walletsNeedsToBeRemoved.filter((wallet) => {
+        return options.chains?.includes(wallet.chain);
+      });
+    }
+
     const nextBalancesState: BalanceState = {};
     let nextAggregatedBalanceState: AggregatedBalanceState =
       get()._aggregatedBalances;

package/src/types/quote.ts

@@ -51,29 +51,9 @@ export enum QuoteWarningType {
   UNKNOWN_PRICE,
   INSUFFICIENT_SLIPPAGE,
   HIGH_SLIPPAGE,
+  EXCESSIVE_OUTPUT_AMOUNT_CHANGE,
 }
 
-export enum QuoteUpdateType {
-  QUOTE_UPDATED,
-  QUOTE_SWAPPERS_UPDATED,
-  QUOTE_COINS_UPDATED,
-  QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
-  QUOTE_UPDATED_WITH_HIGH_VALUE_LOSS,
-}
-
-export type QuoteUpdateWarning =
-  | {
-      type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED;
-      newOutputAmount: string;
-      percentageChange: string;
-    }
-  | {
-      type: Exclude<
-        QuoteUpdateType,
-        QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED
-      >;
-    };
-
 export type RecommendedSlippages = Map<number, string>;
 
 export type InsufficientSlippageWarning = {
@@ -100,15 +80,21 @@ export type UnknownPriceWarning = {
   type: QuoteWarningType.UNKNOWN_PRICE;
 };
 
+export type ExcessiveOutputAmountChange = {
+  type: QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE;
+  usdValueChange: string;
+  percentageChange: string;
+};
+
 export type QuoteWarning =
   | HighValueLossWarning
+  | ExcessiveOutputAmountChange
+  | UnknownPriceWarning
   | InsufficientSlippageWarning
-  | HighSlippageWarning
-  | UnknownPriceWarning;
+  | HighSlippageWarning;
 
 export type ConfirmSwapWarnings = {
   quote: QuoteWarning | null;
-  quoteUpdate: QuoteUpdateWarning | null;
   balance: { messages: string[] } | null;
 };
 

package/src/types/wallets.ts

@@ -1,5 +1,4 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
@@ -25,8 +24,4 @@ export type TokensBalance = {
   [key: TokenHash]: Balance;
 };
 
-export type WalletInfoWithExtra = WalletInfo & {
-  namespaces?: Namespace[];
-  singleNamespace?: boolean;
-  needsDerivationPath?: boolean;
-};
+export type WalletInfoWithExtra = WalletInfo;

package/src/utils/providers.ts

@@ -48,6 +48,10 @@ export function matchAndGenerateProviders(
   const all = allProviders(envs);
 
   if (providers) {
+    /*
+     * If `wallets`  is included in widget config,
+     * allProviders should be filtered based on wallets list
+     */
     const selectedProviders: VersionedProviders[] = [];
 
     providers.forEach((requestedProvider) => {
@@ -57,29 +61,36 @@ export function matchAndGenerateProviders(
        * The second way is passing a custom provider which implemented ProviderInterface.
        */
       if (typeof requestedProvider === 'string') {
-        const result: BothProvidersInterface | undefined =
-          pickVersionWithFallbackToLegacy(all, options).find((provider) => {
-            if (provider instanceof Provider) {
-              return provider.id === requestedProvider;
-            }
-            return provider.config.type === requestedProvider;
-          });
+        const result = all.find((provider) => {
+          /*
+           * To find a provider in allProviders,
+           * a version of each provider should be picked
+           * and validated based on that version scheme.
+           * If the corresponding provider to a wallet was found in allProvider,
+           * it will be add to selected providers.
+           */
+          const versionedProvider = pickProviderVersionWithFallbackToLegacy(
+            provider,
+            options
+          );
+          if (versionedProvider instanceof Provider) {
+            return versionedProvider.id === requestedProvider;
+          }
+          return versionedProvider.config.type === requestedProvider;
+        });
 
+        /*
+         * A provider may have multiple versions
+         * (e.g., 0.0, also known as legacy, and 1.0, also known as hub).
+         * We should ensure that all existing versions of a provider are added to selectedProviders.
+         */
         if (result) {
-          if (result instanceof Provider) {
-            selectedProviders.push(
-              defineVersions().version('1.0.0', result).build()
-            );
-          } else {
-            selectedProviders.push(
-              defineVersions().version('0.0.0', result).build()
-            );
-          }
-        } else {
-          console.warn(
-            `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
-          );
+          selectedProviders.push(result);
         }
+        console.warn(
+          // A provider name is included in config but was not found in allProviders
+          `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
+        );
       } else {
         // It's a custom provider so we directly push it to the list.
         if (requestedProvider instanceof Provider) {
@@ -100,31 +111,27 @@ export function matchAndGenerateProviders(
   return all;
 }
 
-// TODO: this is a duplication with what we do in core.
-function pickVersionWithFallbackToLegacy(
-  providers: VersionedProviders[],
+function pickProviderVersionWithFallbackToLegacy(
+  provider: VersionedProviders,
   options?: ProvidersOptions
-): BothProvidersInterface[] {
+): BothProvidersInterface {
   const { experimentalWallet = 'enabled' } = options || {};
+  const version = experimentalWallet == 'disabled' ? '0.0.0' : '1.0.0';
 
-  return providers.map((provider) => {
-    const version = experimentalWallet == 'disabled' ? '0.0.0' : '1.0.0';
-    try {
-      return pickVersion(provider, version)[1];
-    } catch {
-      // Fallback to legacy version, if target version doesn't exists.
-      return pickVersion(provider, '0.0.0')[1];
-    }
-  });
+  try {
+    return pickVersion(provider, version)[1];
+  } catch {
+    // Fallback to legacy version, if target version doesn't exists.
+    return pickVersion(provider, '0.0.0')[1];
+  }
 }
 
 export function configWalletsToWalletName(
   config: WidgetConfig['wallets'],
   options?: ProvidersOptions
 ): string[] {
-  const providers = pickVersionWithFallbackToLegacy(
-    matchAndGenerateProviders(config, options),
-    options
+  const providers = matchAndGenerateProviders(config, options).map((provider) =>
+    pickProviderVersionWithFallbackToLegacy(provider, options)
   );
   const names = providers.map((provider) => {
     if (provider instanceof Provider) {

package/src/utils/quote.ts

@@ -15,7 +15,6 @@ import type {
   MultiRouteSimulationResult,
   PreferenceType,
   RouteTag,
-  Token,
 } from 'rango-sdk';
 import type { PendingSwap } from 'rango-types';
 
@@ -29,30 +28,19 @@ import { QuoteWarningType } from '../types';
 
 import { areEqual } from './common';
 import { createTokenHash, findBlockchain } from './meta';
+import { numberToString } from './numbers';
 import {
-  calcOutputUsdValue,
   checkSlippageWarnings,
   getMinRequiredSlippage,
   getPercentageChange,
   getTotalFeeInUsd,
+  getUsdInputFrom,
+  getUsdOutputFrom,
   hasHighValueLoss,
   hasProperSlippage,
+  isOutputAmountChangedExcessively,
 } from './swap';
 
-export function getQuoteToTokenUsdPrice(
-  quote: SelectedQuote | null
-): number | null | undefined {
-  const swaps = quote?.swaps || [];
-  return swaps[swaps.length - 1].to.usdPrice;
-}
-
-export function getQuoteFromTokenUsdPrice(
-  quote: SelectedQuote | null
-): number | null | undefined {
-  const swaps = quote?.swaps || [];
-  return swaps[0].from.usdPrice;
-}
-
 export function isNumberOfSwapsChanged(
   quoteA: SelectedQuote,
   quoteB: SelectedQuote
@@ -195,56 +183,73 @@ export function createRetryQuote(
   };
 }
 
-export function generateQuoteWarnings(
-  quote: SelectedQuote,
-  params: {
-    fromToken: Token;
-    toToken: Token;
-    findToken: FindToken;
-    userSlippage: number;
-  }
-): QuoteWarning | null {
-  const { fromToken, toToken, findToken, userSlippage } = params;
-  const inputUsdValue = calcOutputUsdValue(
-    quote.requestAmount,
-    getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice
-  );
-  const outputUsdValue = calcOutputUsdValue(
-    quote.outputAmount,
-    getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice
-  );
-
-  if (!!quote && inputUsdValue && outputUsdValue) {
+export function generateQuoteWarnings(params: {
+  previousQuote?: SelectedQuote;
+  currentQuote: SelectedQuote;
+  findToken: FindToken;
+  userSlippage: number;
+}): QuoteWarning | null {
+  const { previousQuote, currentQuote, findToken, userSlippage } = params;
+  const usdInput = getUsdInputFrom(currentQuote);
+  const usdOutput = getUsdOutputFrom(currentQuote);
+
+  if (!!currentQuote && usdInput && usdOutput) {
     const priceImpact = getPriceImpact(
-      inputUsdValue.toString(),
-      outputUsdValue.toString()
+      usdInput.toString(),
+      usdOutput.toString()
     );
     const highValueLoss =
-      !!priceImpact && hasHighValueLoss(inputUsdValue, priceImpact);
+      !!priceImpact && hasHighValueLoss(usdInput, priceImpact);
 
     if (highValueLoss) {
-      const totalFee = getTotalFeeInUsd(quote?.swaps, findToken);
+      const totalFee = getTotalFeeInUsd(currentQuote?.swaps, findToken);
       const warningLevel = getPriceImpactLevel(priceImpact);
       return {
         type: QuoteWarningType.HIGH_VALUE_LOSS,
-        inputUsdValue,
-        outputUsdValue,
+        inputUsdValue: usdInput,
+        outputUsdValue: usdOutput,
         priceImpact,
         totalFee,
         warningLevel,
       };
     }
-  } else if (quote && (!inputUsdValue || !outputUsdValue)) {
+  }
+
+  if (
+    previousQuote &&
+    isOutputAmountChangedExcessively(previousQuote, currentQuote)
+  ) {
+    return {
+      type: QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE,
+      usdValueChange: numberToString(
+        getUsdOutputFrom(currentQuote)
+          ?.minus(getUsdOutputFrom(previousQuote) ?? 0)
+          .toString() ?? '0',
+        null,
+        2
+      ),
+      percentageChange: numberToString(
+        getPriceImpact(
+          getUsdOutputFrom(previousQuote) ?? '1',
+          getUsdOutputFrom(currentQuote) ?? '1'
+        ),
+        null,
+        2
+      ),
+    };
+  }
+
+  if (currentQuote && (!usdInput || !usdOutput)) {
     return { type: QuoteWarningType.UNKNOWN_PRICE };
   }
 
-  const minRequiredSlippage = getMinRequiredSlippage(quote.swaps);
+  const minRequiredSlippage = getMinRequiredSlippage(currentQuote.swaps);
   const highSlippage = userSlippage > HIGH_SLIPPAGE;
 
   if (!hasProperSlippage(params.userSlippage.toString(), minRequiredSlippage)) {
     return {
       type: QuoteWarningType.INSUFFICIENT_SLIPPAGE,
-      recommendedSlippages: checkSlippageWarnings(quote, userSlippage),
+      recommendedSlippages: checkSlippageWarnings(currentQuote, userSlippage),
       minRequiredSlippage: minRequiredSlippage,
     };
   } else if (
@@ -260,6 +265,13 @@ export function generateQuoteWarnings(
   return null;
 }
 
+export function isQuoteWarningConfirmationRequired(warning: QuoteWarning) {
+  const WARNINGS_NOT_REQUIRING_CONFIRMATION = [
+    QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE,
+  ];
+  return !WARNINGS_NOT_REQUIRING_CONFIRMATION.includes(warning.type);
+}
+
 export function getPriceImpact(
   inputUsdValue: BigNumber | string | null,
   outputUsdValue: BigNumber | string | null