@rango-dev/widget-embedded 0.36.1-next.7 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.36.1-next.7",
+  "version": "0.37.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,15 +25,15 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.40.1-next.2",
+    "@rango-dev/provider-all": "^0.41.0",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.40.1-next.2",
+    "@rango-dev/queue-manager-rango-preset": "^0.41.0",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.35.0",
-    "@rango-dev/ui": "^0.42.1-next.5",
-    "@rango-dev/wallets-core": "^0.40.1-next.2",
-    "@rango-dev/wallets-react": "^0.26.1-next.2",
-    "@rango-dev/wallets-shared": "^0.40.1-next.2",
+    "@rango-dev/ui": "^0.43.0",
+    "@rango-dev/wallets-core": "^0.40.0",
+    "@rango-dev/wallets-react": "^0.27.0",
+    "@rango-dev/wallets-shared": "^0.41.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",

package/src/QueueManager.tsx

@@ -15,6 +15,7 @@ import React, { useMemo } from 'react';
 import { eventEmitter } from './services/eventEmitter';
 import { useAppStore } from './store/AppStore';
 import { useUiStore } from './store/ui';
+import { useWalletsStore } from './store/wallets';
 import { getConfig } from './utils/configs';
 import { walletAndSupportedChainsNames } from './utils/wallets';
 
@@ -38,8 +39,8 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     });
   }, [props.apiKey]);
 
-  const { blockchains, connectedWallets } = useAppStore();
-  const blockchainsList = blockchains();
+  const blockchains = useAppStore().blockchains();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const wallets = {
     blockchains: connectedWallets.map((wallet) => ({
@@ -52,21 +53,14 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     if (!canSwitchNetworkTo(wallet, network)) {
       return undefined;
     }
-    const result = await connect(wallet, [
-      {
-        namespace: 'DISCOVER_MODE',
-        network,
-      },
-    ]);
-
-    return result;
+    return connect(wallet, network);
   };
 
   const isMobileWallet = (walletType: WalletType): boolean =>
     !!getWalletInfo(walletType).mobileWallet;
 
   // TODO: this code copy & pasted from rango, should be refactored.
-  const allBlockchains = blockchainsList
+  const allBlockchains = blockchains
     .filter((blockchain) => blockchain.enabled)
     .reduce(
       (blockchainsObj: any, blockchain) => (
@@ -74,7 +68,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       ),
       {}
     );
-  const evmBasedChains = blockchainsList.filter(isEvmBlockchain);
+  const evmBasedChains = blockchains.filter(isEvmBlockchain);
   const getSupportedChainNames = (type: WalletType) => {
     const { supportedChains } = getWalletInfo(type);
     return walletAndSupportedChainsNames(supportedChains);
@@ -94,6 +88,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     providers: allProviders,
     switchNetwork,
     canSwitchNetworkTo,
+    connect,
     state,
     isMobileWallet,
   };

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -1,5 +1,5 @@
 import type { PropTypes } from './ConfirmWalletsModal.types';
-import type { ConnectedWallet } from '../../store/slices/wallets';
+import type { ConnectedWallet } from '../../store/wallets';
 import type { ConfirmSwapWarnings, Wallet } from '../../types';
 
 import { i18n } from '@lingui/core';
@@ -20,6 +20,7 @@ import { getQuoteErrorMessage } from '../../constants/errors';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
+import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainShortNameFor } from '../../utils/meta';
 import { isConfirmSwapDisabled } from '../../utils/swap';
 import { getQuoteWallets } from '../../utils/wallets';
@@ -53,7 +54,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
     customDestination,
     setCustomDestination,
   } = useQuoteStore();
-  const { config, connectedWallets, setWalletsAsSelected } = useAppStore();
+  const { connectedWallets, selectWallets } = useWalletsStore();
+  const { config } = useAppStore();
 
   const [showMoreWalletFor, setShowMoreWalletFor] = useState('');
   const [balanceWarnings, setBalanceWarnings] = useState<string[]>([]);
@@ -215,7 +217,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
     const lastSelectedWallets = selectableWallets.filter(
       (wallet) => wallet.selected
     );
-    setWalletsAsSelected(lastSelectedWallets);
+    selectWallets(lastSelectedWallets);
     selectQuoteWallets(lastSelectedWallets);
     setQuoteWalletConfirmed(true);
     onClose();

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,6 +1,5 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet } from '../../types';
-import type { ExtendedModalWalletInfo } from '../../utils/wallets';
+import type { Wallet, WalletInfoWithExtra } from '../../types';
 
 import { i18n } from '@lingui/core';
 import { warn } from '@rango-dev/logging-core';
@@ -21,6 +20,7 @@ import {
 import { useWalletList } from '../../hooks/useWalletList';
 import { useAppStore } from '../../store/AppStore';
 import { useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
   getAddress,
@@ -41,9 +41,10 @@ export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const isActiveTab = useUiStore.use.isActiveTab();
 
-  const { blockchains, connectedWallets } = useAppStore();
+  const connectedWallets = useWalletsStore.use.connectedWallets();
+  const { blockchains } = useAppStore();
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
-    useState<ExtendedModalWalletInfo>();
+    useState<WalletInfoWithExtra>();
   const [experimentalChainWallet, setExperimentalChainWallet] =
     useState<Wallet | null>(null);
   const [showExperimentalChainModal, setShowExperimentalChainModal] =
@@ -56,7 +57,7 @@ export function WalletList(props: PropTypes) {
     chain,
   });
 
-  const [sortedList, setSortedList] = useState<ExtendedModalWalletInfo[]>(list);
+  const [sortedList, setSortedList] = useState<WalletInfoWithExtra[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -147,13 +148,9 @@ export function WalletList(props: PropTypes) {
 
         const onSelectableWalletClick = async () => {
           const isDisconnected = wallet.state === WalletState.DISCONNECTED;
-          const isConnectedButDifferentThanTargetNamespace = wallet.isHub
-            ? !conciseAddress
-            : !!wallet.namespaces && !conciseAddress;
-
           if (isDisconnected) {
             setSelectedWalletToConnect(wallet);
-          } else if (isConnectedButDifferentThanTargetNamespace) {
+          } else if (!!wallet.namespaces && !conciseAddress) {
             // wallet is connected on a different namespace
             await handleDisconnect(wallet.type);
 

package/src/components/Layout/Layout.tsx

@@ -13,6 +13,7 @@ import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
 import { tabManager, useUiStore } from '../../store/ui';
+import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
 import { getPendingSwaps } from '../../utils/queue';
 import { isFeatureHidden } from '../../utils/settings';
@@ -27,8 +28,9 @@ import { Container, Content, Footer, LayoutContainer } from './Layout.styles';
 function Layout(props: PropsWithChildren<PropTypes>) {
   const { connectHeightObserver, disconnectHeightObserver } = useIframe();
   const { children, header, footer, height = 'fixed' } = props;
-  const { fetchStatus, connectedWallets } = useAppStore();
+  const { fetchStatus } = useAppStore();
   const [openRefreshModal, setOpenRefreshModal] = useState(false);
+  const connectedWallets = useWalletsStore.use.connectedWallets();
   const {
     config: { features, theme },
   } = useAppStore();

package/src/components/Quote/Quote.tsx

@@ -17,11 +17,7 @@ import {
 import BigNumber from 'bignumber.js';
 import React, { useRef, useState } from 'react';
 
-import {
-  GAS_FEE_MAX,
-  ROUTE_TIME_MAX,
-  SECONDS_IN_MINUTE,
-} from '../../constants/quote';
+import { GAS_FEE_MAX } from '../../constants/quote';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -315,8 +311,7 @@ export function Quote(props: QuoteProps) {
   const container = propContainer || getContainer();
   const sortedQuoteTags = sortTags(props.quote.tags || []);
   const showAllRoutesButton = !!onClickAllRoutes;
-  const totalDurationSeconds = totalArrivalTime(quote?.swaps);
-  const totalTime = roundedSecondsToString(totalDurationSeconds);
+  const totalTime = roundedSecondsToString(totalArrivalTime(quote?.swaps));
   const totalFee = getTotalFeeInUsd(quote?.swaps ?? [], findToken);
   const fee = numberToString(
     totalFee,
@@ -325,8 +320,6 @@ export function Quote(props: QuoteProps) {
   );
 
   const feeWarning = totalFee.gte(new BigNumber(GAS_FEE_MAX));
-  const timeWarning =
-    totalDurationSeconds / SECONDS_IN_MINUTE >= ROUTE_TIME_MAX;
 
   return fullExpandedMode ? (
     <FullExpandedQuote
@@ -336,18 +329,7 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
-      quoteCost={
-        <QuoteCostDetails
-          quote={quote}
-          fullExpandedMode
-          time={totalTime}
-          fee={fee}
-          feeWarning={feeWarning}
-          timeWarning={timeWarning}
-          showModalFee={showModalFee}
-          steps={numberOfSteps}
-        />
-      }
+      feeWarning={feeWarning}
       percentageChange={percentageChange}
       warningLevel={priceImpactWarningLevel}
       outputPrice={{
@@ -386,7 +368,6 @@ export function Quote(props: QuoteProps) {
             time={totalTime}
             fee={fee}
             feeWarning={feeWarning}
-            timeWarning={timeWarning}
             showModalFee={showModalFee}
             steps={numberOfSteps}
           />

package/src/components/Quote/Quote.types.ts

@@ -48,7 +48,5 @@ export type QuoteCostDetailsProps = {
   fee: string;
   time: string;
   feeWarning?: boolean;
-  timeWarning?: boolean;
   showModalFee: boolean;
-  fullExpandedMode?: boolean;
 };

package/src/components/Quote/QuoteCostDetails.styles.ts

@@ -28,6 +28,7 @@ export const ModalContainer = styled('div', {
 
 export const ModalHeader = styled('div', {
   padding: '$20 $20 $10',
+  textAlign: 'center',
   position: 'relative',
   '._icon-button': {
     position: 'absolute',

package/src/components/Quote/QuoteCostDetails.tsx

@@ -21,7 +21,7 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { getContainer, getExpanded } from '../../utils/common';
+import { getContainer } from '../../utils/common';
 import { numberToString } from '../../utils/numbers';
 import { getFeesGroup, getTotalFeesInUsd, getUsdFee } from '../../utils/swap';
 import { WatermarkedModal } from '../common/WatermarkedModal';
@@ -57,18 +57,9 @@ const NonPayableFee = (props: { fee: BigNumber; label: string }) => {
 export function QuoteCostDetails(props: QuoteCostDetailsProps) {
   const [open, setOpen] = useState<boolean>(false);
   const [openCollapse, setOpenCollapse] = useState<boolean>(false);
-  const {
-    steps,
-    quote,
-    fee,
-    time,
-    feeWarning,
-    timeWarning,
-    showModalFee,
-    fullExpandedMode = false,
-  } = props;
+  const { steps, quote, fee, time, feeWarning, showModalFee } = props;
   const swaps = quote?.swaps ?? [];
-  const container = fullExpandedMode ? getExpanded() : getContainer();
+  const container = getContainer();
 
   const feesGroup = getFeesGroup(swaps);
 
@@ -85,7 +76,6 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
         }
         fee={fee}
         feeWarning={feeWarning}
-        timeWarning={timeWarning}
         time={time}
         steps={steps}
         tooltipGas={showModalFee ? i18n.t('View more info') : undefined}
@@ -95,17 +85,8 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
       <WatermarkedModal
         container={container}
         open={open}
-        anchor={fullExpandedMode ? 'center' : 'bottom'}
-        styles={{
-          container: {
-            maxWidth: fullExpandedMode ? '484px' : 'unset',
-          },
-        }}
         header={
-          <ModalHeader
-            style={{
-              textAlign: fullExpandedMode ? 'left' : 'center',
-            }}>
+          <ModalHeader>
             <Typography variant="title" size="medium">
               {i18n.t('Gas & Fee Explanation')}
             </Typography>

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -1,6 +1,6 @@
 import type { Result } from '../../hooks/useStatefulConnect';
 import type { WalletInfoWithExtra } from '../../types';
-import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 import { Divider } from '@rango-dev/ui';
 import React, { useEffect, useRef, useState } from 'react';

package/src/components/SwapDetails/SwapDetails.tsx

@@ -160,12 +160,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
 
   const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, [
-        {
-          namespace: 'DISCOVER_MODE',
-          network: currentStepBlockchain,
-        },
-      ])
+    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
     : undefined;
 
   const stepMessage = getSwapMessages(swap, currentStep);

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -15,7 +15,7 @@ export interface SwapAlertsProps extends WaningAlertsProps {
 }
 
 export interface WaningAlertsProps extends FailedAlertsProps {
-  switchNetwork: (() => Promise<ConnectResult[]>) | undefined;
+  switchNetwork: (() => Promise<ConnectResult>) | undefined;
   showNetworkModal: PendingSwapNetworkStatus | null | undefined;
   setNetworkModal: (network: ModalState) => void;
 }

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 {

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

@@ -33,5 +33,3 @@ export const HIGH_PRIORITY_TAGS: TagValue[] = [
 ];
 
 export const GAS_FEE_MAX = 30;
-export const ROUTE_TIME_MAX = 15;
-export const SECONDS_IN_MINUTE = 60;

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/Wallets/Wallets.tsx

@@ -15,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,
@@ -38,7 +38,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
     fetchStatus,
   } = useAppStore();
   const blockchains = useAppStore().blockchains();
-  const { newWalletConnected, disconnectWallet } = useAppStore();
+  const { findToken } = useAppStore();
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
@@ -48,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>();
 
@@ -86,7 +86,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
           meta.isContractWallet
         );
         if (data.length) {
-          void newWalletConnected(data);
+          connectWallet(data, findToken);
         }
       } else {
         disconnectWallet(type);
@@ -99,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?`
+          );
+        }
       }
     }
 
@@ -147,13 +147,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={onUpdateState}
-        autoConnect={!!isActiveTab}
-        configs={{
-          isExperimentalEnabled: isFeatureEnabled(
-            'experimentalWallet',
-            config.features
-          ),
-        }}>
+        autoConnect={!!isActiveTab}>
         {props.children}
       </Provider>
     </WidgetContext.Provider>