@rango-dev/widget-embedded 0.37.1-next.2 → 0.38.0

package/src/components/TokenList/TokenList.tsx

@@ -15,9 +15,11 @@ import {
   Typography,
   VirtualizedList,
 } from '@rango-dev/ui';
-import React from 'react';
+import React, { useEffect, useState } 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';
 
@@ -91,7 +93,7 @@ const renderDesc = (props: RenderDescProps) => {
 
 export function TokenList(props: PropTypes) {
   const {
-    list: tokens,
+    list,
     searchedFor = '',
     onChange,
     selectedBlockchain,
@@ -99,10 +101,29 @@ export function TokenList(props: PropTypes) {
     action,
   } = props;
 
+  const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
-  const { getBalanceFor, fetchingWallets: loadingWallet } = useAppStore();
+  const [hasNextPage, setHasNextPage] = useState<boolean>(true);
+  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   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));
@@ -139,9 +160,11 @@ export function TokenList(props: PropTypes) {
       )
     );
   };
+
   const renderList = () => {
     return (
       <VirtualizedList
+        endReached={hasNextPage ? loadNextPage : undefined}
         itemContent={(index) => {
           const token = tokens[index];
           const address = token.address || '';
@@ -235,7 +258,7 @@ export function TokenList(props: PropTypes) {
           );
         }}
         totalCount={tokens.length}
-        key={`${selectedBlockchain}-${searchedFor}`}
+        key={`${selectedBlockchain}-${searchedFor}-${balanceKey}`}
       />
     );
   };

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

@@ -1,5 +1,4 @@
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { DerivationPath } from '@rango-dev/wallets-shared';
+import type { DerivationPath, Namespace } 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-core/namespaces/common';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import {
@@ -12,7 +12,8 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import { namespaces } from '@rango-dev/wallets-shared';
+import React, { useMemo, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -22,14 +23,25 @@ import { getBlockchainLogo } from './Namespaces.helpers';
 import { NamespaceList } from './Namespaces.styles';
 
 export function Namespaces(props: PropTypes) {
-  const { targetWallet } = props.value;
-  const singleNamespace = targetWallet.needsNamespace?.selection === 'single';
-  const providerImage = targetWallet.image;
+  const { singleNamespace, availableNamespaces, providerImage } = props.value;
 
   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]);
@@ -71,33 +83,28 @@ export function Namespaces(props: PropTypes) {
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {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}
+            {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
+                      )}
                     />
-                  }
-                  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-core/namespaces/common';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 export interface PropTypes {
   onConfirm: (namespaces: Namespace[]) => void;

package/src/constants/quote.ts

@@ -32,29 +32,4 @@ 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/constants/warnings.ts

@@ -0,0 +1,26 @@
+import type { QuoteUpdateWarning } from '../types';
+
+import { i18n } from '@lingui/core';
+
+import { QuoteUpdateType } from '../types';
+
+export function getQuoteUpdateWarningMessage(warning: QuoteUpdateWarning) {
+  switch (warning.type) {
+    case QuoteUpdateType.QUOTE_UPDATED:
+      return i18n.t('Route has been updated.');
+    case QuoteUpdateType.QUOTE_AND_OUTPUT_AMOUNT_UPDATED:
+      return i18n.t(
+        'Output amount changed to {newOutputAmount} ({percentageChange}% change).',
+        {
+          newOutputAmount: warning.newOutputAmount,
+          percentageChange: warning.percentageChange,
+        }
+      );
+    case QuoteUpdateType.QUOTE_SWAPPERS_UPDATED:
+      return i18n.t('Route swappers has been updated.');
+    case QuoteUpdateType.QUOTE_COINS_UPDATED:
+      return i18n.t('Route internal coins has been updated.');
+    default:
+      return '';
+  }
+}

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -4,7 +4,6 @@ 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={true}
+          showModalFee={false}
           fetch={fetch}
           hasSort={false}
           loading={loading}

package/src/containers/Inputs/Inputs.tsx

@@ -2,12 +2,10 @@ 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,
@@ -16,8 +14,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';
@@ -40,16 +38,15 @@ export function Inputs(props: PropTypes) {
     outputUsdValue,
     selectedQuote,
   } = useQuoteStore();
-  const { connectedWallets, getBalanceFor } = useAppStore();
+  const { connectedWallets, getBalanceFor } = useWalletsStore();
   const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
   const fromTokenFormattedBalance =
     formatBalance(fromTokenBalance)?.amount ?? '0';
 
-  const fromBalanceAmount = fromTokenBalance
-    ? new BigNumber(fromTokenBalance.amount).shiftedBy(
-        -fromTokenBalance.decimals
-      )
-    : ZERO;
+  const tokenBalanceReal =
+    !!fromBlockchain && !!fromToken
+      ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
+      : '0';
 
   const fetchingBalance =
     !!fromBlockchain &&
@@ -110,17 +107,7 @@ export function Inputs(props: PropTypes) {
           loadingBalance={fetchingBalance}
           tooltipContainer={getContainer()}
           onSelectMaxBalance={() => {
-            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);
+            setInputAmount(tokenBalanceReal.split(',').join(''));
           }}
           anyWalletConnected={connectedWallets.length > 0}
         />

package/src/containers/QuoteInfo/QuoteInfo.tsx

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

package/src/containers/Wallets/Wallets.tsx

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

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -9,6 +9,7 @@ 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';
@@ -21,16 +22,13 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
   const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
-  const {
-    findToken,
-    getBalances,
-    getConnectedWalletsDetails,
-    fetchBalances: refetch,
-  } = useAppStore();
+  const { findToken } = useAppStore();
 
   const history = new WidgetHistory(manager, { retrySwap, findToken });
-  const { fetchingWallets: isLoading } = useAppStore();
-  const totalBalance = calculateWalletUsdValue(getBalances());
+  const details = useWalletsStore.use.connectedWallets();
+  const isLoading = useWalletsStore.use.loading();
+  const totalBalance = calculateWalletUsdValue(details);
+  const refetch = useWalletsStore.use.getWalletsDetails();
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
@@ -49,9 +47,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
     history,
     wallets: {
       isLoading,
-      details: getConnectedWalletsDetails(),
+      details,
       totalBalance,
-      refetch: async (accounts) => refetch(accounts),
+      refetch: (accounts) => refetch(accounts, findToken),
     },
     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 { DeprecatedWalletDetail } from '../../store/slices/wallets';
+import type { ConnectedWallet } from '../../store/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: DeprecatedWalletDetail[];
+    details: ConnectedWallet[];
     totalBalance: string;
     isLoading: boolean;
-    refetch: (accounts: Wallet[]) => void;
+    refetch: (accounts: Wallet[], tokens: Token[]) => void;
   };
   meta: {
     blockchains: BlockchainMeta[];