@rango-dev/widget-embedded 0.37.0 → 0.37.1-next.1

package/src/store/utils/wallets.ts

@@ -0,0 +1,111 @@
+import type { Balance } from '../../types';
+import type { AppStoreState } from '../app';
+import type {
+  AggregatedBalanceState,
+  AssetKey,
+  BalanceKey,
+  BalanceState,
+} from '../slices/wallets';
+import type { Asset, WalletDetail } from 'rango-types';
+
+import BigNumber from 'bignumber.js';
+
+import { ZERO } from '../../constants/numbers';
+
+/**
+ * Note: We need to use `symbol` as well since native coins and cosmos blockchains don't have `address`
+ * output format: BlockchainId-TokenAddress-TokenSymbol
+ */
+export function createAssetKey(asset: Asset): AssetKey {
+  return `${asset.blockchain}-${asset.address}-${asset.symbol}`;
+}
+
+/**
+ * output format: BlockchainId-TokenAddress-TokenSymbol-WalletAddress
+ */
+export function createBalanceKey(
+  accountAddress: string,
+  asset: Asset
+): BalanceKey {
+  const assetKey = createAssetKey(asset);
+  return `${assetKey}-${accountAddress}`;
+}
+
+export function extractAssetFromBalanceKey(key: BalanceKey): Asset {
+  const [assetChain, assetAddress, assetSymbol] = key.split('-');
+
+  // null will be serialized to 'null', we need to make it back to a null type
+  const address = assetAddress === 'null' ? null : assetAddress;
+  return {
+    address,
+    blockchain: assetChain,
+    symbol: assetSymbol,
+  };
+}
+
+export function createBalanceStateForNewAccount(
+  account: WalletDetail,
+  store: () => AppStoreState
+): BalanceState {
+  const state: BalanceState = {};
+
+  account.balances?.forEach((accountBalance) => {
+    const key = createBalanceKey(account.address, accountBalance.asset);
+    const amount = accountBalance.amount.amount;
+    const decimals = accountBalance.amount.decimals;
+
+    const usdPrice = store().findToken(accountBalance.asset)?.usdPrice;
+    const usdValue = usdPrice
+      ? new BigNumber(usdPrice ?? ZERO).multipliedBy(amount).toString()
+      : '';
+
+    const balance: Balance = {
+      amount,
+      decimals,
+      usdValue,
+    };
+
+    state[key] = balance;
+  });
+
+  return state;
+}
+
+export function updateAggregatedBalanceStateForNewAccount(
+  aggregatedBalances: AggregatedBalanceState,
+  balanceState: BalanceState
+) {
+  for (const balanceKey in balanceState) {
+    const asset = extractAssetFromBalanceKey(balanceKey as BalanceKey);
+    const assetKey = createAssetKey(asset);
+
+    if (!aggregatedBalances[assetKey]) {
+      aggregatedBalances[assetKey] = [];
+    }
+
+    if (!aggregatedBalances[assetKey].includes(balanceKey as BalanceKey)) {
+      aggregatedBalances[assetKey] = [
+        ...aggregatedBalances[assetKey],
+        balanceKey as BalanceKey,
+      ];
+    }
+  }
+
+  return aggregatedBalances;
+}
+
+export function removeBalanceFromAggregatedBalance(
+  aggregatedBalances: AggregatedBalanceState,
+  balanceKey: BalanceKey
+) {
+  const asset = extractAssetFromBalanceKey(balanceKey);
+  const assetKey = createAssetKey(asset);
+
+  if (aggregatedBalances[assetKey]) {
+    aggregatedBalances[assetKey] = aggregatedBalances[assetKey].filter(
+      (aggregatedBalance) => aggregatedBalance !== balanceKey
+    );
+  }
+
+  return aggregatedBalances;
+}

package/src/types/config.ts

@@ -1,5 +1,5 @@
 import type { Language, theme } from '@rango-dev/ui';
-import type { ProviderInterface } from '@rango-dev/wallets-react';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/dist/legacy/mod';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
 
@@ -129,6 +129,9 @@ export type SignersConfig = {
  *
  * @property {'visible' | 'hidden'} [liquiditySource]
  * - The visibility state for the liquiditySource feature. Optional property.
+ *
+ * @property {'disabled' | 'enabled'} [experimentalWallet]
+ * - Enable our experimental version of wallets. Default: disable on production, enabled on dev.
  */
 export type Features = Partial<
   Record<
@@ -140,7 +143,8 @@ export type Features = Partial<
     | 'customTokens',
     'visible' | 'hidden'
   >
->;
+> &
+  Partial<Record<'experimentalWallet', 'disabled' | 'enabled'>>;
 
 /**
  * `Routing`
@@ -253,7 +257,7 @@ export type WidgetConfig = {
   from?: BlockchainAndTokenConfig;
   to?: BlockchainAndTokenConfig;
   liquiditySources?: string[];
-  wallets?: (WalletType | ProviderInterface)[];
+  wallets?: (WalletType | LegacyProviderInterface)[];
   multiWallets?: boolean;
   customDestination?: boolean;
   defaultCustomDestinations?: { [blockchain: string]: string };

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,5 @@
 import type { WalletInfo } from '@rango-dev/ui';
-import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
+import type { WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;
@@ -10,7 +10,7 @@ export interface Wallet {
 export type Balance = {
   amount: string;
   decimals: number;
-  usdValue: string;
+  usdValue: string | null;
 };
 
 export type Blockchain = string;
@@ -24,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

@@ -1,7 +1,12 @@
 import type { WidgetConfig } from '../types';
-import type { ProviderInterface } from '@rango-dev/wallets-react';
+import type { LegacyProviderInterface } from '@rango-dev/wallets-core/legacy';
 
-import { allProviders } from '@rango-dev/provider-all';
+import {
+  defineVersions,
+  pickVersion,
+  Provider,
+  type VersionedProviders,
+} from '@rango-dev/wallets-core';
 
 export interface ProvidersOptions {
   walletConnectProjectId?: WidgetConfig['walletConnectProjectId'];
@@ -10,71 +15,118 @@ export interface ProvidersOptions {
   >['walletConnectListedDesktopWalletLink'];
   trezorManifest: WidgetConfig['trezorManifest'];
   tonConnect: WidgetConfig['tonConnect'];
+  experimentalWallet?: 'enabled' | 'disabled';
 }
 
 /**
  *
  * Generate a list of providers by passing a provider name (e.g. metamask) or a custom provider which implemented ProviderInterface.
- * @returns ProviderInterface[] a list of ProviderInterface
+ * @returns BothProvidersInterface[] a list of BothProvidersInterface
  *
  */
-export function matchAndGenerateProviders(
-  providers: WidgetConfig['wallets'],
-  options?: ProvidersOptions
-): ProviderInterface[] {
-  const all = allProviders({
-    walletconnect2: {
-      WC_PROJECT_ID: options?.walletConnectProjectId || '',
-      DISABLE_MODAL_AND_OPEN_LINK:
-        options?.walletConnectListedDesktopWalletLink,
-    },
-    selectedProviders: providers,
-    trezor: options?.trezorManifest
-      ? { manifest: options.trezorManifest }
-      : undefined,
-    tonConnect: options?.tonConnect?.manifestUrl
-      ? { manifestUrl: options?.tonConnect.manifestUrl }
-      : undefined,
-  });
-
-  if (providers) {
-    const selectedProviders: ProviderInterface[] = [];
+type BothProvidersInterface = LegacyProviderInterface | Provider;
+export function matchAndGenerateProviders({
+  allProviders,
+  configWallets,
+  options,
+}: {
+  allProviders: VersionedProviders[];
+  configWallets: WidgetConfig['wallets'];
+  options?: ProvidersOptions;
+}): VersionedProviders[] {
+  if (configWallets) {
+    /*
+     * If `wallets`  is included in widget config,
+     * allProviders should be filtered based on wallets list
+     */
+    const selectedProviders: VersionedProviders[] = [];
 
-    providers.forEach((requestedProvider) => {
+    configWallets.forEach((requestedWallet) => {
       /*
        * There are two types of provider we get, the first one is only passing the wallet name
        * then we will match the wallet name with our providers (@rango-dev/provider-*).
        * The second way is passing a custom provider which implemented ProviderInterface.
        */
-      if (typeof requestedProvider === 'string') {
-        const result: ProviderInterface | undefined = all.find((provider) => {
-          return provider.config.type === requestedProvider;
+      if (typeof requestedWallet === 'string') {
+        const result = allProviders.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 === requestedWallet;
+          }
+          return versionedProvider.config.type === requestedWallet;
         });
+
+        /*
+         * 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) {
           selectedProviders.push(result);
         } else {
           console.warn(
-            `Couldn't find ${requestedProvider} provider. Please make sure you are passing the correct name.`
+            // A provider name is included in config but was not found in allProviders
+            `Couldn't find ${requestedWallet} provider. Please make sure you are passing the correct name.`
           );
         }
       } else {
         // It's a custom provider so we directly push it to the list.
-        selectedProviders.push(requestedProvider);
+        if (requestedWallet instanceof Provider) {
+          selectedProviders.push(
+            defineVersions().version('1.0.0', requestedWallet).build()
+          );
+        } else {
+          selectedProviders.push(
+            defineVersions().version('0.0.0', requestedWallet).build()
+          );
+        }
       }
     });
+
     return selectedProviders;
   }
 
-  return all;
+  return allProviders;
+}
+
+function pickProviderVersionWithFallbackToLegacy(
+  provider: VersionedProviders,
+  options?: ProvidersOptions
+): BothProvidersInterface {
+  const { experimentalWallet = 'enabled' } = options || {};
+  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];
+  }
 }
 
 export function configWalletsToWalletName(
-  config: WidgetConfig['wallets'],
+  providers: VersionedProviders[],
   options?: ProvidersOptions
 ): string[] {
-  const providers = matchAndGenerateProviders(config, options);
-  const names = providers.map((provider) => {
-    return provider.config.type;
-  });
+  const names = providers
+    .map((provider) =>
+      pickProviderVersionWithFallbackToLegacy(provider, options)
+    )
+    .map((provider) => {
+      if (provider instanceof Provider) {
+        return provider.id;
+      }
+      return provider.config.type;
+    });
   return names;
 }

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

package/src/utils/settings.ts

@@ -72,6 +72,10 @@ export function isFeatureHidden(feature: keyof Features, features?: Features) {
   return features?.[feature] === 'hidden';
 }
 
+export function isFeatureEnabled(feature: keyof Features, features?: Features) {
+  return features?.[feature] === 'enabled';
+}
+
 export function isRoutingEnabled(item: keyof Routing, routing?: Routing) {
   return routing?.[item] === 'enabled';
 }