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

package/src/components/TokenList/TokenList.tsx

@@ -15,11 +15,9 @@ import {
   Typography,
   VirtualizedList,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import { useObserveBalanceChanges } from '../../hooks/useObserveBalanceChanges';
 import { useAppStore } from '../../store/AppStore';
-import { useWalletsStore } from '../../store/wallets';
 import { createTintsAndShades } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
@@ -93,7 +91,7 @@ const renderDesc = (props: RenderDescProps) => {
 
 export function TokenList(props: PropTypes) {
   const {
-    list,
+    list: tokens,
     searchedFor = '',
     onChange,
     selectedBlockchain,
@@ -101,29 +99,10 @@ export function TokenList(props: PropTypes) {
     action,
   } = props;
 
-  const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
-  const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
+  const { getBalanceFor, fetchingWallets: loadingWallet } = useAppStore();
   const { isTokenPinned } = useAppStore();
-  /**
-   * We can create the key by hashing the list of tokens,
-   * but if the list is large, the memory usage and cost of comparisons may be high.
-   */
-  const { balanceKey } = useObserveBalanceChanges(selectedBlockchain);
-
-  const loadNextPage = () => {
-    setTokens(list.slice(0, tokens.length + PAGE_SIZE));
-  };
-
-  useEffect(() => {
-    setHasNextPage(list.length > tokens.length);
-  }, [tokens.length]);
-
-  useEffect(() => {
-    setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length, selectedBlockchain, balanceKey]);
 
   const endRenderer = (token: Token) => {
     const tokenBalance = formatBalance(getBalanceFor(token));
@@ -160,11 +139,9 @@ export function TokenList(props: PropTypes) {
       )
     );
   };
-
   const renderList = () => {
     return (
       <VirtualizedList
-        endReached={hasNextPage ? loadNextPage : undefined}
         itemContent={(index) => {
           const token = tokens[index];
           const address = token.address || '';
@@ -258,7 +235,7 @@ export function TokenList(props: PropTypes) {
           );
         }}
         totalCount={tokens.length}
-        key={`${selectedBlockchain}-${searchedFor}-${balanceKey}`}
+        key={`${selectedBlockchain}-${searchedFor}`}
       />
     );
   };

package/src/components/WalletStatefulConnect/DerivationPath.helpers.ts

@@ -1,4 +1,5 @@
-import type { DerivationPath, Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { DerivationPath } from '@rango-dev/wallets-shared';
 
 import { namespaces } from '@rango-dev/wallets-shared';
 

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './Namespaces.types';
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 import { i18n } from '@lingui/core';
 import {
@@ -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/components/WalletStatefulConnect/Namespaces.types.tsx

@@ -1,5 +1,5 @@
 import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
-import type { Namespace } from '@rango-dev/wallets-shared';
+import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;

package/src/constants/quote.ts

@@ -32,4 +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/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -4,6 +4,7 @@ export const Container = styled('div', {
   transition: 'width 0.2s, opacity 0.2s, margin-left 0.2s',
   height: '700px',
   width: '390px',
+  position: 'relative',
   opacity: 1,
   marginLeft: '$16',
   backgroundColor: '$neutral100',

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -64,7 +64,7 @@ export function ExpandedQuotes(props: PropTypes) {
       />
       <Content>
         <Quotes
-          showModalFee={false}
+          showModalFee={true}
           fetch={fetch}
           hasSort={false}
           loading={loading}

package/src/containers/Inputs/Inputs.tsx

@@ -2,10 +2,12 @@ import type { PropTypes } from './Inputs.types';
 
 import { i18n } from '@lingui/core';
 import { SwapInput } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import { SwitchFromAndToButton } from '../../components/SwitchFromAndTo';
 import { errorMessages } from '../../constants/errors';
+import { ZERO } from '../../constants/numbers';
 import {
   PERCENTAGE_CHANGE_MAX_DECIMALS,
   PERCENTAGE_CHANGE_MIN_DECIMALS,
@@ -14,8 +16,8 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
+import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
-import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
 import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
@@ -38,15 +40,16 @@ export function Inputs(props: PropTypes) {
     outputUsdValue,
     selectedQuote,
   } = useQuoteStore();
-  const { connectedWallets, getBalanceFor } = useWalletsStore();
+  const { connectedWallets, getBalanceFor } = useAppStore();
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
   const fromTokenFormattedBalance =
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
-  const tokenBalanceReal =
-    !!fromBlockchain && !!fromToken
-      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
-      : '0';
+  const fromBalanceAmount = fromTokenBalance
+    ? new BigNumber(fromTokenBalance.amount).shiftedBy(
+        -fromTokenBalance.decimals
+      )
+    : ZERO;
 
   const fetchingBalance =
     !!fromBlockchain &&
@@ -107,7 +110,17 @@ export function Inputs(props: PropTypes) {
           loadingBalance={fetchingBalance}
           tooltipContainer={getContainer()}
           onSelectMaxBalance={() => {
-            setInputAmount(tokenBalanceReal.split(',').join(''));
+            const tokenBalanceReal = numberToString(
+              fromBalanceAmount,
+              fromTokenBalance?.decimals
+            );
+
+            // if a token hasn't any value, we will reset the input by setting an empty string.
+            const nextInputAmount = !!fromTokenBalance?.amount
+              ? tokenBalanceReal
+              : '';
+
+            setInputAmount(nextInputAmount);
           }}
           anyWalletConnected={connectedWallets.length > 0}
         />

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';
@@ -15,7 +19,7 @@ import React, { createContext, useEffect, useMemo, useRef } from 'react';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
-import { useWalletsStore } from '../../store/wallets';
+import { isFeatureEnabled } from '../../utils/settings';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
@@ -36,9 +40,11 @@ function Main(props: PropsWithChildren<PropTypes>) {
     updateSettings,
     fetch: fetchMeta,
     fetchStatus,
+    removeBalancesForWallet,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { findToken } = useAppStore();
+  const { newWalletConnected, disconnectWallet, connectedWallets } =
+    useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -48,9 +54,9 @@ function Main(props: PropsWithChildren<PropTypes>) {
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,
+    experimentalWallet: props.config.features?.experimentalWallet,
   };
   const { providers } = useWalletProviders(config.wallets, walletOptions);
-  const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
   const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();
 
@@ -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,
@@ -86,7 +145,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           meta.isContractWallet
         );
         if (data.length) {
-          connectWallet(data, findToken);
+          void newWalletConnected(data);
         }
       } else {
         disconnectWallet(type);
@@ -99,17 +158,17 @@ function Main(props: PropsWithChildren<PropTypes>) {
         }
       }
     }
-    if (event === Events.ACCOUNTS && state.connected) {
+    if (
+      (event === Events.ACCOUNTS && state.connected) ||
+      // Hub works differently, and this check should be enough.
+      (event === Events.ACCOUNTS && meta.isHub)
+    ) {
       const key = `${type}-${state.network}-${value}`;
 
-      if (state.connected) {
-        if (!!onConnectWalletHandler.current) {
-          onConnectWalletHandler.current(key);
-        } else {
-          console.warn(
-            `onConnectWallet handler hasn't been set. Are you sure?`
-          );
-        }
+      if (!!onConnectWalletHandler.current) {
+        onConnectWalletHandler.current(key);
+      } else {
+        console.warn(`onConnectWallet handler hasn't been set. Are you sure?`);
       }
     }
 
@@ -147,7 +206,14 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={onUpdateState}
-        autoConnect={!!isActiveTab}>
+        autoConnect={!!isActiveTab}
+        configs={{
+          wallets: config.wallets,
+          isExperimentalEnabled: isFeatureEnabled(
+            'experimentalWallet',
+            config.features
+          ),
+        }}>
         {props.children}
       </Provider>
     </WidgetContext.Provider>

package/src/containers/WidgetInfo/WidgetInfo.helpers.ts

@@ -5,7 +5,7 @@ import type { PendingSwap } from 'rango-types/lib';
 
 import {
   cancelSwap,
-  getCurrentBlockchainOfOrNull,
+  getCurrentNamespaceOfOrNull,
   getCurrentStep,
   getRelatedWalletOrNull,
 } from '@rango-dev/queue-manager-rango-preset';
@@ -66,7 +66,7 @@ export class WidgetHistory {
       step: currentStep,
       wallet: currentStep ? getRelatedWalletOrNull(swap, currentStep) : null,
       network: currentStep
-        ? getCurrentBlockchainOfOrNull(swap, currentStep)
+        ? getCurrentNamespaceOfOrNull(swap, currentStep)?.network
         : null,
     };
   }

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -9,7 +9,6 @@ import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
 import { tabManager, useUiStore } from '../../store/ui';
-import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
 import { WidgetHistory } from './WidgetInfo.helpers';
@@ -22,13 +21,16 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
   const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
-  const { findToken } = useAppStore();
+  const {
+    findToken,
+    getBalances,
+    getConnectedWalletsDetails,
+    fetchBalances: refetch,
+  } = useAppStore();
 
   const history = new WidgetHistory(manager, { retrySwap, findToken });
-  const details = useWalletsStore.use.connectedWallets();
-  const isLoading = useWalletsStore.use.loading();
-  const totalBalance = calculateWalletUsdValue(details);
-  const refetch = useWalletsStore.use.getWalletsDetails();
+  const { fetchingWallets: isLoading } = useAppStore();
+  const totalBalance = calculateWalletUsdValue(getBalances());
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
@@ -47,9 +49,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
     history,
     wallets: {
       isLoading,
-      details,
+      details: getConnectedWalletsDetails(),
       totalBalance,
-      refetch: (accounts) => refetch(accounts, findToken),
+      refetch: async (accounts) => refetch(accounts),
     },
     meta: {
       blockchains,

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,6 +1,6 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus, FindToken } from '../../store/slices/data';
-import type { ConnectedWallet } from '../../store/wallets';
+import type { DeprecatedWalletDetail } from '../../store/slices/wallets';
 import type { QuoteInputs, UpdateQuoteInputs, Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
@@ -10,10 +10,10 @@ export interface WidgetInfoContextInterface {
   setCurrentTabAsActive: () => void;
   history: WidgetHistory;
   wallets: {
-    details: ConnectedWallet[];
+    details: DeprecatedWalletDetail[];
     totalBalance: string;
     isLoading: boolean;
-    refetch: (accounts: Wallet[], tokens: Token[]) => void;
+    refetch: (accounts: Wallet[]) => void;
   };
   meta: {
     blockchains: BlockchainMeta[];