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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.11",
+  "version": "0.36.1-next.13",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.5",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.1-next.0",
-    "@rango-dev/ui": "^0.42.1-next.8",
+    "@rango-dev/ui": "^0.42.1-next.10",
     "@rango-dev/wallets-core": "^0.40.1-next.5",
     "@rango-dev/wallets-react": "^0.26.1-next.6",
     "@rango-dev/wallets-shared": "^0.40.1-next.5",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,6 +1,6 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
 import type { ConnectedWallet } from '../../store/slices/wallets';
-import type { ConfirmSwapWarnings, Wallet } from '../../types';
+import type { Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
 import {
@@ -17,7 +17,6 @@ import { useNavigate } from 'react-router-dom';
 
 import { WIDGET_UI_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
-import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
 import { getBlockchainShortNameFor } from '../../utils/meta';
@@ -58,9 +57,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
   const [error, setError] = useState('');
-  const [quoteWarning, setQuoteWarning] = useState<
-    ConfirmSwapWarnings['quoteUpdate'] | null
-  >(null);
 
   const [isCustomDestinationOpen, setCustomDestinationOpen] = useState(
     !!customDestination
@@ -224,7 +220,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const onConfirmWallets = async () => {
     setBalanceWarnings([]);
     setError('');
-    setQuoteWarning(null);
 
     const result = await onCheckBalance?.({
       selectedWallets: selectableWallets.filter((wallet) => wallet.selected),
@@ -234,9 +229,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     if (warnings?.balance?.messages) {
       setBalanceWarnings(warnings.balance.messages);
     }
-    if (warnings?.quoteUpdate) {
-      setQuoteWarning(warnings.quoteUpdate);
-    }
+
     if (result.error) {
       setError(getQuoteErrorMessage(result.error));
     }
@@ -416,16 +409,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
               <Divider size={12} />
             </>
           )}
-          {quoteWarning && (
-            <>
-              <Alert
-                variant="alarm"
-                type="warning"
-                title={getQuoteUpdateWarningMessage(quoteWarning)}
-              />
-              <Divider size={12} />
-            </>
-          )}
           <Wallets>
             {quoteWallets.map((requiredWallet, index) => {
               const blockchain = blockchains.find(

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -149,7 +149,7 @@ export function WalletList(props: PropTypes) {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
           const isConnectedButDifferentThanTargetNamespace = wallet.isHub
             ? !conciseAddress
-            : !!wallet.namespaces && !conciseAddress;
+            : !!wallet.needsNamespace && !conciseAddress;
 
           if (isDisconnected) {
             setSelectedWalletToConnect(wallet);

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.helpers.ts

@@ -44,30 +44,50 @@ export function makeAlerts(
     return alertInfo;
   }
   if (warning) {
-    if (warning.type === QuoteWarningType.HIGH_VALUE_LOSS) {
-      const warningLevel = getPriceImpactLevel(warning.priceImpact);
-      if (warningLevel === 'high') {
-        alertInfo.alertType = 'error';
+    switch (warning.type) {
+      case QuoteWarningType.HIGH_VALUE_LOSS: {
+        const warningLevel = getPriceImpactLevel(warning.priceImpact);
+        if (warningLevel === 'high') {
+          alertInfo.alertType = 'error';
+        }
+        alertInfo.action = 'show-info';
+        alertInfo.title = errorMessages().highValueLossError.title;
+        break;
       }
-      alertInfo.action = 'show-info';
-      alertInfo.title = errorMessages().highValueLossError.title;
-    }
-    if (warning.type === QuoteWarningType.UNKNOWN_PRICE) {
-      alertInfo.title = errorMessages().unknownPriceError.title;
-    }
-    if (warning.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE) {
-      alertInfo.title = i18n.t({
-        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-        values: {
-          minRequiredSlippage: warning.minRequiredSlippage,
-        },
-      });
-      alertInfo.action = 'change-settings';
-    }
-    if (warning.type === QuoteWarningType.HIGH_SLIPPAGE) {
-      alertInfo.title = i18n.t('Caution, your slippage is high.');
-      alertInfo.action = 'change-settings';
+      case QuoteWarningType.EXCESSIVE_OUTPUT_AMOUNT_CHANGE: {
+        alertInfo.title = i18n.t({
+          id: 'Output amount changed by {percentageChange}% (${usdValueChange}).',
+          values: {
+            percentageChange: warning.percentageChange,
+            usdValueChange: warning.usdValueChange,
+          },
+        });
+        break;
+      }
+      case QuoteWarningType.UNKNOWN_PRICE: {
+        alertInfo.title = errorMessages().unknownPriceError.title;
+        break;
+      }
+      case QuoteWarningType.INSUFFICIENT_SLIPPAGE: {
+        alertInfo.title = i18n.t({
+          id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+          values: {
+            minRequiredSlippage: warning.minRequiredSlippage,
+          },
+        });
+        alertInfo.action = 'change-settings';
+        break;
+      }
+      case QuoteWarningType.HIGH_SLIPPAGE: {
+        alertInfo.title = i18n.t('Caution, your slippage is high.');
+        alertInfo.action = 'change-settings';
+        break;
+      }
+
+      default:
+        break;
     }
+
     return alertInfo;
   }
   return null;

package/src/components/Quotes/Quotes.tsx

@@ -53,9 +53,8 @@ export function Quotes(props: PropTypes) {
       ...quote,
     };
 
-    return generateQuoteWarnings(mergedQuote, {
-      fromToken,
-      toToken,
+    return generateQuoteWarnings({
+      currentQuote: mergedQuote,
       userSlippage,
       findToken,
     });

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -12,8 +12,7 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { namespaces } from '@rango-dev/wallets-shared';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -23,25 +22,14 @@ import { getBlockchainLogo } from './Namespaces.helpers';
 import { NamespaceList } from './Namespaces.styles';
 
 export function Namespaces(props: PropTypes) {
-  const { singleNamespace, availableNamespaces, providerImage } = props.value;
+  const { targetWallet } = props.value;
+  const singleNamespace = targetWallet.needsNamespace?.selection === 'single';
+  const providerImage = targetWallet.image;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
   const blockchains = useAppStore().blockchains();
 
-  const namespacesInfo = useMemo(
-    () =>
-      availableNamespaces?.map((namespace) => ({
-        name: namespace,
-        logo: getBlockchainLogo(
-          blockchains,
-          namespaces[namespace].mainBlockchain
-        ),
-        title: namespaces[namespace].title,
-      })),
-    [availableNamespaces]
-  );
-
   const onSelect = (namespace: Namespace) => {
     if (singleNamespace) {
       setSelectedNamespaces([namespace]);
@@ -83,28 +71,33 @@ export function Namespaces(props: PropTypes) {
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {namespacesInfo?.map((namespaceInfoItem) => (
-              <ListItemButton
-                key={namespaceInfoItem.name}
-                id={namespaceInfoItem.name}
-                title={namespaceInfoItem.title}
-                hasDivider
-                style={{ height: 60 }}
-                onClick={() => onSelect(namespaceInfoItem.name)}
-                start={<Image src={namespaceInfoItem.logo} size={22} />}
-                end={
-                  singleNamespace ? (
-                    <Radio value={namespaceInfoItem.name} />
-                  ) : (
-                    <Checkbox
-                      checked={selectedNamespaces.includes(
-                        namespaceInfoItem.name
-                      )}
+            {targetWallet.needsNamespace?.data.map((ns) => {
+              return (
+                <ListItemButton
+                  key={ns.id}
+                  id={ns.id}
+                  title={ns.label}
+                  hasDivider
+                  style={{ height: 60 }}
+                  onClick={() => onSelect(ns.value)}
+                  start={
+                    <Image
+                      src={getBlockchainLogo(blockchains, ns.id)}
+                      size={22}
                     />
-                  )
-                }
-              />
-            ))}
+                  }
+                  end={
+                    singleNamespace ? (
+                      <Radio value={ns.value} />
+                    ) : (
+                      <Checkbox
+                        checked={selectedNamespaces.includes(ns.value)}
+                      />
+                    )
+                  }
+                />
+              );
+            })}
           </>
         )}
       </NamespaceList>

package/src/constants/quote.ts

@@ -32,6 +32,29 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
   'HIGH_IMPACT',
 ];
 
+export type Criteria = {
+  threshold: number;
+  minInput: number;
+};
+
+export const PERCENT_MULTIPLIER = 100;
 export const GAS_FEE_MAX = 30;
 export const ROUTE_TIME_MAX = 15;
 export const SECONDS_IN_MINUTE = 60;
+export const HIGH_FEE_THRESHOLD_USD = 30;
+
+export const HIGH_VALUE_LOSS_CRITERIA: Criteria[] = [
+  { threshold: -10, minInput: 400 },
+  { threshold: -5, minInput: 1000 },
+];
+
+export const OUTPUT_CHANGE_WARNING_CRITERIA: Criteria[] = [
+  {
+    threshold: -1,
+    minInput: 1000,
+  },
+  {
+    threshold: -2,
+    minInput: 500,
+  },
+];

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -7,8 +7,7 @@ import { Quote } from '../../components/Quote';
 import { QuoteSkeleton } from '../../components/QuoteSkeleton';
 import { useQuoteStore } from '../../store/quote';
 import { QuoteErrorType } from '../../types';
-import { getQuoteToTokenUsdPrice } from '../../utils/quote';
-import { calcOutputUsdValue } from '../../utils/swap';
+import { getUsdOutputFrom } from '../../utils/swap';
 
 import { QuoteContainer } from './QuoteInfo.styles';
 
@@ -28,17 +27,12 @@ export function QuoteInfo(props: PropTypes) {
     fullExpandedMode = false,
     container,
   } = props;
-  const { inputAmount, inputUsdValue, toToken } = useQuoteStore();
+  const { inputAmount, inputUsdValue } = useQuoteStore();
 
   const outputAmount = !!quote?.outputAmount
     ? new BigNumber(quote?.outputAmount)
     : null;
-  const outputUsdValue = !!quote?.outputAmount
-    ? calcOutputUsdValue(
-        quote?.outputAmount,
-        getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice
-      )
-    : null;
+  const outputUsdValue = quote ? getUsdOutputFrom(quote) : null;
 
   const noResult =
     error &&

package/src/containers/Wallets/Wallets.tsx

@@ -7,6 +7,10 @@ import type { ProvidersOptions } from '../../utils/providers';
 import type { LegacyEventHandler as EventHandler } from '@rango-dev/wallets-core/legacy';
 import type { PropsWithChildren } from 'react';
 
+import {
+  legacyFormatAddressWithNetwork as formatAddressWithNetwork,
+  legacyReadAccountAddress as readAccountAddress,
+} from '@rango-dev/wallets-core/legacy';
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { type Network } from '@rango-dev/wallets-shared';
 import { isEvmBlockchain } from 'rango-sdk';
@@ -36,9 +40,11 @@ function Main(props: PropsWithChildren<PropTypes>) {
     updateSettings,
     fetch: fetchMeta,
     fetchStatus,
+    removeBalancesForWallet,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { newWalletConnected, disconnectWallet } = useAppStore();
+  const { newWalletConnected, disconnectWallet, connectedWallets } =
+    useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -75,9 +81,62 @@ function Main(props: PropsWithChildren<PropTypes>) {
 
   const onUpdateState: EventHandler = (type, event, value, state, meta) => {
     if (event === Events.ACCOUNTS) {
+      const supportedChainNames: Network[] | null =
+        walletAndSupportedChainsNames(meta.supportedBlockchains);
+
+      /*
+       * When a wallet is connecting to an evm account, we will consider it as the account exists on other evm-compatible blockchains
+       * To get their balances.
+       *
+       * The logic here is for handling switching account functionality in wallets. when a wallet is switching to another account
+       * we need to clean the balances for old accounts.
+       */
+      const evmAccounts: string[] = [];
+      const nonEvmAccounts: string[] = [];
+
+      value?.forEach((account: string) => {
+        const { network } = readAccountAddress(account);
+        if (evmBasedChainNames.includes(network)) {
+          evmAccounts.push(account);
+        } else {
+          nonEvmAccounts.push(account);
+        }
+      });
+
+      const previousAccounts = connectedWallets
+        .filter((wallet) => wallet.walletType === type)
+        .map((wallet) =>
+          formatAddressWithNetwork(wallet.address, wallet.chain)
+        );
+
+      if (previousAccounts.length > 0) {
+        if (evmAccounts.length > 0) {
+          // We use same logic for removing as we use for adding.
+          const data = prepareAccountsForWalletStore(
+            type,
+            evmAccounts,
+            evmBasedChainNames,
+            supportedChainNames,
+            meta.isContractWallet
+          );
+
+          removeBalancesForWallet(type, {
+            chains: data.map((account) => account.chain),
+          });
+        }
+
+        if (nonEvmAccounts.length > 0) {
+          removeBalancesForWallet(type, {
+            chains: nonEvmAccounts.map((account) => {
+              const { network } = readAccountAddress(account);
+              return network;
+            }),
+          });
+        }
+      }
+
+      // After cleaning up balances, it's time to add new accounts.
       if (value) {
-        const supportedChainNames: Network[] | null =
-          walletAndSupportedChainsNames(meta.supportedBlockchains);
         const data = prepareAccountsForWalletStore(
           type,
           value,
@@ -149,6 +208,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         onUpdateState={onUpdateState}
         autoConnect={!!isActiveTab}
         configs={{
+          wallets: config.wallets,
           isExperimentalEnabled: isFeatureEnabled(
             'experimentalWallet',
             config.features

package/src/hooks/useConfirmSwap/useConfirmSwap.helpers.ts

@@ -7,27 +7,18 @@ import type {
   SelectedQuote,
   Wallet,
 } from '../../types';
-import type { BlockchainMeta, SwapResult, Token } from 'rango-sdk';
+import type BigNumber from 'bignumber.js';
+import type { BlockchainMeta, SwapResult } from 'rango-sdk';
 
 import { errorMessages } from '../../constants/errors';
-import { QuoteErrorType, QuoteUpdateType } from '../../types';
-import { numberToString } from '../../utils/numbers';
-import {
-  generateQuoteWarnings,
-  getPriceImpact,
-  isNumberOfSwapsChanged,
-  isQuoteChanged,
-  isQuoteInternalCoinsUpdated,
-  isQuoteSwappersUpdated,
-} from '../../utils/quote';
+import { QuoteErrorType } from '../../types';
+import { generateQuoteWarnings } from '../../utils/quote';
 import {
   checkSlippageErrors,
   generateBalanceWarnings,
   getLimitErrorMessage,
   getMinRequiredSlippage,
-  getQuoteOutputAmount,
   hasLimitError,
-  isOutputAmountChangedALot,
 } from '../../utils/swap';
 
 /**
@@ -82,72 +73,44 @@ export function getQuoteError(swaps: SwapResult[]): QuoteErrorResponse | null {
   return null;
 }
 
-export function generateWarnings(
-  previousQuote: SelectedQuote | undefined,
-  currentQuote: SelectedQuote,
-  params: {
-    fromToken: Token;
-    toToken: Token;
-    meta: { blockchains: BlockchainMeta[] };
-    selectedWallets: Wallet[];
-    userSlippage: number;
-    findToken: FindToken;
-  }
-): ConfirmSwapWarnings {
-  let quoteChanged = false;
-  if (previousQuote) {
-    quoteChanged = isQuoteChanged(previousQuote, currentQuote);
-  }
+export function generateWarnings(params: {
+  currentQuote: SelectedQuote;
+  previousQuote?: SelectedQuote;
+  meta: { blockchains: BlockchainMeta[] };
+  selectedWallets: Wallet[];
+  userSlippage: number;
+  inputUsdValue: BigNumber | null;
+  findToken: FindToken;
+}): ConfirmSwapWarnings {
+  const {
+    currentQuote,
+    previousQuote,
+    meta,
+    selectedWallets,
+    userSlippage,
+    findToken,
+  } = params;
+
   const output: ConfirmSwapWarnings = {
     quote: null,
-    quoteUpdate: null,
     balance: null,
   };
 
-  const quoteWarning = generateQuoteWarnings(currentQuote, {
-    fromToken: params.fromToken,
-    toToken: params.toToken,
-    findToken: params.findToken,
-    userSlippage: params.userSlippage,
+  const quoteWarning = generateQuoteWarnings({
+    previousQuote,
+    currentQuote,
+    findToken,
+    userSlippage,
   });
 
   if (quoteWarning) {
     output.quote = quoteWarning;
   }
 
-  if (previousQuote && quoteChanged) {
-    if (isOutputAmountChangedALot(previousQuote, currentQuote)) {
-      output.quoteUpdate = {
-        type: QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED,
-        newOutputAmount: numberToString(getQuoteOutputAmount(currentQuote)),
-        percentageChange: numberToString(
-          getPriceImpact(
-            getQuoteOutputAmount(previousQuote) ?? '',
-            getQuoteOutputAmount(currentQuote) ?? ''
-          ),
-          null,
-          2
-        ),
-      };
-    } else if (isNumberOfSwapsChanged(previousQuote, currentQuote)) {
-      output.quoteUpdate = {
-        type: QuoteUpdateType.QUOTE_UPDATED,
-      };
-    } else if (isQuoteSwappersUpdated(previousQuote, currentQuote)) {
-      output.quoteUpdate = {
-        type: QuoteUpdateType.QUOTE_SWAPPERS_UPDATED,
-      };
-    } else if (isQuoteInternalCoinsUpdated(previousQuote, currentQuote)) {
-      output.quoteUpdate = {
-        type: QuoteUpdateType.QUOTE_COINS_UPDATED,
-      };
-    }
-  }
-
   const balanceWarnings = generateBalanceWarnings(
     currentQuote,
-    params.selectedWallets,
-    params.meta.blockchains
+    selectedWallets,
+    meta.blockchains
   );
 
   const enoughBalance = balanceWarnings.length === 0;

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -21,10 +21,10 @@ export function useConfirmSwap(): ConfirmSwap {
     fromToken,
     toToken,
     inputAmount,
+    inputUsdValue,
     setSelectedQuote,
     selectedQuote: initialQuote,
     customDestination: customDestinationFromStore,
-    setQuoteWarningsConfirmed,
     resetAlerts,
   } = useQuoteStore();
 
@@ -95,21 +95,16 @@ export function useConfirmSwap(): ConfirmSwap {
           disabledSwappersGroups: disabledLiquiditySources,
         };
 
-        const confirmSwapWarnings = generateWarnings(
-          initialQuote ?? undefined,
+        const confirmSwapWarnings = generateWarnings({
+          previousQuote: initialQuote ?? undefined,
           currentQuote,
-          {
-            fromToken,
-            toToken,
-            meta: { blockchains },
-            findToken,
-            selectedWallets,
-            userSlippage,
-          }
-        );
-        if (confirmSwapWarnings.quoteUpdate) {
-          setQuoteWarningsConfirmed(false);
-        }
+          meta: { blockchains },
+          selectedWallets,
+          userSlippage,
+          inputUsdValue,
+          findToken,
+        });
+
         resetAlerts();
 
         const proceedAnyway = !!confirmSwapWarnings.balance;