@rango-dev/widget-embedded 0.20.1-next.22 → 0.20.1-next.23

package/dist/libs/tabManager/index.d.ts

@@ -0,0 +1,3 @@
+export { TabManager } from './tabManager';
+export type { TabManagerInterface } from './tabManager.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/libs/tabManager/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/libs/tabManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/libs/tabManager/tabManager.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TIMEOUT = 300;
+export declare const MAXIMUM_TAB_ID = 100000;
+export declare const CHANNEL_NAME = "rango-widget";
+//# sourceMappingURL=tabManager.constants.d.ts.map

package/dist/libs/tabManager/tabManager.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabManager.constants.d.ts","sourceRoot":"","sources":["../../../src/libs/tabManager/tabManager.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,MAAM,CAAC;AAC3B,eAAO,MAAM,cAAc,SAAU,CAAC;AACtC,eAAO,MAAM,YAAY,iBAAiB,CAAC"}

package/dist/libs/tabManager/tabManager.d.ts

@@ -0,0 +1,63 @@
+import type { Events, TabManagerInterface } from './tabManager.types';
+export declare class TabManager implements TabManagerInterface {
+    private tabId;
+    private state;
+    private lastTryClaim;
+    private events;
+    private channel;
+    constructor(events: Events);
+    /**
+     * This is applicable when a user in an inactive tab seeks to activate that tab.
+     */
+    forceClaim: () => void;
+    isClaimed: () => boolean;
+    /**
+     * remove event listeners
+     */
+    destroy: () => void;
+    /**
+     * Reacting to messages and window events to claim.
+     */
+    private initEvents;
+    /**
+     * Runs after a `ping` message and checks if current tab is claimed the tabs,
+     *    if yes, it responds with `pong`, If not, it doesn't do anything.
+     *
+     * Note 1: If we receive a `ping` message,
+     *    it means a tab is trying to claim tabs directly, usually it's the active tab.
+     *
+     * Note 2: If multiple tabs are opening at once, all of them are broadcasting `ping`
+     *    and eventually all of them will `claim` the queue after the TIMEOUT.
+     *    For avoiding this, we will accepts the oldest broadcasted ping. (`isPingSentBefore`)
+     */
+    private claimedByCurrentTab;
+    private handleMessageEvent;
+    private handleVisibilityChange;
+    private handleResume;
+    /**
+     * Runs after receiving `pong` message, which means one of tabs already claimed the tabs.
+     */
+    private alreadyClaimedByAnotherTab;
+    /**
+     * Try to send a `ping` message to know if the tabs `claimed` or not.
+     * On constructing instance, or whenever page is active we will try.
+     */
+    private tryClaim;
+    /**
+     * If `lastCheck` is exist, it means there is no other tabs which `claimed` the tabs.
+     * And we mark the current tab as `claimed`
+     */
+    private check;
+    private claim;
+    /**
+     * Setting current time as `lastCheck` and broadcast a `ping` message event.
+     */
+    private setLastCheck;
+    private resetLastCheck;
+    /**
+     * Upon receipt of a "force-claim" message,
+     * the presently active tab is expected to deactivate itself and initiate any attached callback associated with this event.
+     */
+    private forceRelease;
+}
+//# sourceMappingURL=tabManager.d.ts.map

package/dist/libs/tabManager/tabManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabManager.d.ts","sourceRoot":"","sources":["../../../src/libs/tabManager/tabManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,MAAM,EAGN,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAI5B,qBAAa,UAAW,YAAW,mBAAmB;IACpD,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,KAAK,CAAgE;IAC7E,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,OAAO,CAAmB;gBAEtB,MAAM,EAAE,MAAM;IAQ1B;;OAEG;IACH,UAAU,aAUR;IAEF,SAAS,gBAEP;IAEF;;OAEG;IACH,OAAO,aAOL;IAEF;;OAEG;IACH,OAAO,CAAC,UAAU;IAiBlB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,kBAAkB,CAyBxB;IAEF,OAAO,CAAC,sBAAsB,CAI5B;IAEF,OAAO,CAAC,YAAY,CAOlB;IACF;;OAEG;IACH,OAAO,CAAC,0BAA0B;IAIlC;;;OAGG;YACW,QAAQ;IAatB;;;OAGG;IACH,OAAO,CAAC,KAAK;IAeb,OAAO,CAAC,KAAK;IAKb;;OAEG;IACH,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,cAAc;IAItB;;;OAGG;IACH,OAAO,CAAC,YAAY;CAcrB"}

package/dist/libs/tabManager/tabManager.types.d.ts

@@ -0,0 +1,29 @@
+export type ID = number;
+type PingMessage = {
+    name: 'ping';
+    pingAt: number;
+};
+type PongMessage = {
+    name: 'pong';
+};
+type ForceClaimMessage = {
+    name: 'force-claim';
+    candidateId: ID;
+};
+type ForceReleaseMessage = {
+    name: 'force-release';
+    candidateId: ID;
+};
+export type Message = PingMessage | PongMessage | ForceClaimMessage | ForceReleaseMessage;
+export type Events = {
+    onInit?: () => void;
+    onClaim?: () => void;
+    onRelease?: () => void;
+};
+export interface TabManagerInterface {
+    forceClaim: () => void;
+    isClaimed: () => boolean;
+    destroy: () => void;
+}
+export {};
+//# sourceMappingURL=tabManager.types.d.ts.map

package/dist/libs/tabManager/tabManager.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabManager.types.d.ts","sourceRoot":"","sources":["../../../src/libs/tabManager/tabManager.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,EAAE,GAAG,MAAM,CAAC;AAExB,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AACpD,KAAK,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AACpC,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,EAAE,CAAC;CACjB,CAAC;AACF,KAAK,mBAAmB,GAAG;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,WAAW,EAAE,EAAE,CAAA;CAAE,CAAC;AAEtE,MAAM,MAAM,OAAO,GACf,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,mBAAmB,CAAC;AAExB,MAAM,MAAM,MAAM,GAAG;IAEnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAkD5E,wBAAgB,eAAe,sBA0T9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA4T9B"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAsCnD,wBAAgB,IAAI,sBAuPnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAuCnD,wBAAgB,IAAI,sBAyPnB"}

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAkE1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAoE1B"}

package/dist/store/ui.d.ts

@@ -0,0 +1,24 @@
+interface UiState {
+    isActiveTab: boolean;
+    tabManagerInitiated: boolean;
+    showActivateTabModal: boolean;
+    activateCurrentTab: (setCurrentTabAsActive: () => void, hasRunningSwaps: boolean) => void;
+    setShowActivateTabModal: (flag: boolean) => void;
+}
+export declare const useUiStore: {
+    (): UiState;
+    <U>(selector: (state: UiState) => U): U;
+    <U_1>(selector: (state: UiState) => U_1, equalityFn: (a: U_1, b: U_1) => boolean): U_1;
+} & import("zustand").StoreApi<UiState> & {
+    use: {
+        isActiveTab: () => boolean;
+        tabManagerInitiated: () => boolean;
+        showActivateTabModal: () => boolean;
+        activateCurrentTab: () => (setCurrentTabAsActive: () => void, hasRunningSwaps: boolean) => void;
+        setShowActivateTabModal: () => (flag: boolean) => void;
+    };
+};
+export declare const setCurrentTabAsActive: () => void;
+export declare const destroyTabManager: () => void;
+export {};
+//# sourceMappingURL=ui.d.ts.map

package/dist/store/ui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/store/ui.ts"],"names":[],"mappings":"AAQA,UAAU,OAAO;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,kBAAkB,EAAE,CAClB,qBAAqB,EAAE,MAAM,IAAI,EACjC,eAAe,EAAE,OAAO,KACrB,IAAI,CAAC;IACV,uBAAuB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,UAAU;;;;;;;;;0DANI,MAAM,IAAI,mBAChB,OAAO,KACrB,IAAI;8CACuB,OAAO,KAAK,IAAI;;CAqBjD,CAAC;AASF,eAAO,MAAM,qBAAqB,YAAwB,CAAC;AAE3D,eAAO,MAAM,iBAAiB,YAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.20.1-next.22",
+  "version": "0.20.1-next.23",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -23,9 +23,9 @@
     "@lingui/react": "4.2.1",
     "@rango-dev/provider-all": "^0.25.1-next.3",
     "@rango-dev/queue-manager-core": "^0.25.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.2",
-    "@rango-dev/queue-manager-react": "^0.24.0",
-    "@rango-dev/ui": "^0.26.1-next.12",
+    "@rango-dev/queue-manager-rango-preset": "^0.25.1-next.3",
+    "@rango-dev/queue-manager-react": "^0.24.1-next.0",
+    "@rango-dev/ui": "^0.26.1-next.13",
     "@rango-dev/wallets-react": "^0.11.1-next.1",
     "@rango-dev/wallets-shared": "^0.25.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/QueueManager.tsx

@@ -13,6 +13,7 @@ import { isEvmBlockchain } from 'rango-types';
 import React, { useMemo } from 'react';
 
 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';
@@ -91,6 +92,8 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
     isMobileWallet,
   };
 
+  const isActiveTab = useUiStore.use.isActiveTab();
+
   return (
     <ManagerProvider
       queuesDefs={[swapQueueDef]}
@@ -98,7 +101,7 @@ function QueueManager(props: PropsWithChildren<{ apiKey?: string }>) {
       onPersistedDataLoaded={(manager) => {
         checkWaitingForNetworkChange(manager);
       }}
-      isPaused={false}>
+      isPaused={!isActiveTab}>
       {props.children}
     </ManagerProvider>
   );

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -25,6 +25,7 @@ import {
   TIME_TO_IGNORE_MODAL,
 } from '../../pages/WalletsPage';
 import { useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
 import {
@@ -44,6 +45,7 @@ import {
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
   const { config } = useAppStore();
+  const isActiveTab = useUiStore.use.isActiveTab();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const { blockchains } = useAppStore();
@@ -289,6 +291,7 @@ export function WalletList(props: PropTypes) {
               description={connectedWalletDescription}
               onClick={onClick}
               selected={isSelected(wallet.type, chain)}
+              disabled={!isActiveTab}
               {...wallet}
             />
           </>

package/src/components/Layout/Layout.tsx

@@ -1,6 +1,8 @@
 import type { PropTypes } from './Layout.types';
+import type { PendingSwap } from 'rango-types';
 import type { PropsWithChildren } from 'react';
 
+import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React, { useEffect, useRef } from 'react';
 
@@ -8,9 +10,13 @@ import { RANGO_SWAP_BOX_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
+import { setCurrentTabAsActive, useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
+import { getPendingSwaps } from '../../utils/queue';
 import { isFeatureHidden } from '../../utils/settings';
+import { ActivateTabAlert } from '../common/ActivateTabAlert';
+import { ActivateTabModal } from '../common/ActivateTabModal';
 import { BackButton, CancelButton, WalletButton } from '../HeaderButtons';
 
 import { onScrollContentAttachStatusToContainer } from './Layout.helpers';
@@ -29,7 +35,22 @@ function Layout(props: PropsWithChildren<PropTypes>) {
     features
   );
 
+  const {
+    isActiveTab,
+    tabManagerInitiated,
+    showActivateTabModal,
+    setShowActivateTabModal,
+    activateCurrentTab,
+  } = useUiStore();
   const navigateBack = useNavigateBack();
+  const { manager } = useManager();
+  const pendingSwaps: PendingSwap[] = getPendingSwaps(manager).map(
+    ({ swap }) => swap
+  );
+  const hasRunningSwap = pendingSwaps.some((swap) => swap.status === 'running');
+
+  const onActivateTab = () =>
+    activateCurrentTab(setCurrentTabAsActive, hasRunningSwap);
 
   const onConnectWallet = () => {
     header.onWallet?.();
@@ -74,12 +95,25 @@ function Layout(props: PropsWithChildren<PropTypes>) {
         }
       />
       <Content ref={scrollViewRef}>{children}</Content>
+      <ActivateTabModal
+        open={showActivateTabModal}
+        onClose={() => setShowActivateTabModal(false)}
+        onConfirm={onActivateTab}
+      />
       {(hasLogo || footer) && (
         <Footer>
-          <div className="footer__content">{footer}</div>
+          <div className="footer__content">
+            {footer}
+            {tabManagerInitiated && !isActiveTab && (
+              <>
+                <Divider size={12} />
+                <ActivateTabAlert onActivateTab={onActivateTab} />
+              </>
+            )}
+          </div>
+          <Divider size={12} />
           {hasLogo && (
             <div className="footer__logo">
-              <Divider size={12} />
               <BottomLogo />
             </div>
           )}

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -28,13 +28,14 @@ import { Flex } from './QuoteWarningsAndErrors.styles';
 
 type Props = {
   open: boolean;
+  confirmationDisabled: boolean;
   onClose: () => void;
   onConfirm: () => void;
   warning: HighValueLossWarning;
 };
 
 export function HighValueLossWarningModal(props: Props) {
-  const { open, onClose, onConfirm, warning } = props;
+  const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const type = warning.warningLevel === 'high' ? 'error' : 'warning';
   const highValueLossData = [
     {
@@ -99,6 +100,7 @@ export function HighValueLossWarningModal(props: Props) {
         size="large"
         prefix={<WarningIcon />}
         fullWidth
+        disabled={confirmationDisabled}
         onClick={onConfirm}>
         {errorMessages().highValueLossError.confirmMessage}
       </Button>

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -17,8 +17,9 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
   const {
     warning,
     error,
-    refetchQuote,
     showWarningModal,
+    confirmationDisabled,
+    refetchQuote,
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
@@ -26,6 +27,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
   } = props;
 
   const warningModalHandlers = {
+    confirmationDisabled,
     open: showWarningModal,
     onClose: onCloseWarningModal,
     onConfirm: onConfirmWarningModal,

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.types.ts

@@ -5,6 +5,7 @@ export interface PropTypes {
   error: QuoteError | null;
   warning: QuoteWarning | null;
   showWarningModal: boolean;
+  confirmationDisabled: boolean;
   refetchQuote: () => void;
   onOpenWarningModal: () => void;
   onCloseWarningModal: () => void;

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -15,6 +15,7 @@ import { getContainer } from '../../utils/common';
 
 type PropsTypes = {
   open: boolean;
+  confirmationDisabled: boolean;
   onClose: () => void;
   onConfirm: () => void;
   warning: InsufficientSlippageWarning | HighSlippageWarning;
@@ -22,7 +23,7 @@ type PropsTypes = {
 
 export function SlippageWarningModal(props: PropsTypes) {
   const { customSlippage, slippage } = useAppStore();
-  const { open, onClose, onConfirm, warning } = props;
+  const { open, onClose, onConfirm, warning, confirmationDisabled } = props;
   const navigate = useNavigate();
   const userSlippage = customSlippage ?? slippage;
   return (
@@ -68,6 +69,7 @@ export function SlippageWarningModal(props: PropsTypes) {
           type="primary"
           variant="contained"
           fullWidth
+          disabled={confirmationDisabled}
           onClick={onConfirm}>
           {i18n.t('Confirm anyway')}
         </Button>

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -8,13 +8,14 @@ import { getContainer } from '../../utils/common';
 
 type Props = {
   open: boolean;
+  confirmationDisabled: boolean;
   onClose: () => void;
   onConfirm: () => void;
   warning: UnknownPriceWarning;
 };
 
 export function UnknownPriceWarningModal(props: Props) {
-  const { open, onClose, onConfirm } = props;
+  const { open, onClose, onConfirm, confirmationDisabled } = props;
 
   return (
     <Modal open={open} onClose={onClose} container={getContainer()}>
@@ -30,6 +31,7 @@ export function UnknownPriceWarningModal(props: Props) {
         size="large"
         prefix={<WarningIcon />}
         fullWidth
+        disabled={confirmationDisabled}
         onClick={onConfirm}>
         {errorMessages().unknownPriceError.confirmMessage}
       </Button>

package/src/components/SwapDetails/SwapDetails.tsx

@@ -38,6 +38,7 @@ import {
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { useUiStore } from '../../store/ui';
 import { getContainer } from '../../utils/common';
 import {
   formatTooltipNumbers,
@@ -79,6 +80,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const swappers = useAppStore().swappers();
   const tokens = useAppStore().tokens();
   const retry = useQuoteStore.use.retry();
+  const isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
@@ -407,6 +409,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         onDelete={onDelete}
         message={stepMessage.detailedMessage.content}
         currentStepWallet={currentStepWallet}
+        walletButtonDisabled={!isActiveTab}
       />
       <SwapDetailsCompleteModal
         open={!!showCompletedModal}

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -10,7 +10,14 @@ import { mapStatusToWalletState } from '../../utils/wallets';
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
-  const { type, title, currentStepWallet, message, showWalletButton } = props;
+  const {
+    type,
+    title,
+    currentStepWallet,
+    message,
+    showWalletButton,
+    walletButtonDisabled,
+  } = props;
   const { connect, getWalletInfo, state } = useWallets();
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
@@ -31,6 +38,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             type={walletType}
             state={walletState}
             link={walletInfo.installLink}
+            disabled={walletButtonDisabled}
             onClick={async () => connect(walletType)}
           />
         </WalletContainer>

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -12,8 +12,15 @@ import { modalNetworkValues } from './SwapDetailsModal.helpers';
 import { WalletStateContent } from './SwapDetailsModal.WalletState';
 
 export function SwapDetailsModal(props: ModalPropTypes) {
-  const { state, onClose, onDelete, onCancel, currentStepWallet, message } =
-    props;
+  const {
+    state,
+    onClose,
+    onDelete,
+    onCancel,
+    currentStepWallet,
+    message,
+    walletButtonDisabled,
+  } = props;
 
   const showWalletStateContent =
     state === PendingSwapNetworkStatus.WaitingForNetworkChange ||
@@ -31,6 +38,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
           title={modalNetworkValues[state].title}
           currentStepWallet={currentStepWallet}
           message={message}
+          walletButtonDisabled={walletButtonDisabled}
           showWalletButton={
             state !== PendingSwapNetworkStatus.WaitingForNetworkChange
           }

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -17,6 +17,7 @@ export interface ModalPropTypes {
   state: ModalState;
   currentStepWallet: WalletTypeAndAddress | null;
   message: string;
+  walletButtonDisabled: boolean;
 }
 
 export interface CompleteModalPropTypes {
@@ -49,6 +50,7 @@ export interface WalletStateContentProps extends ModalNetworkValueTypes {
   currentStepWallet: WalletTypeAndAddress | null;
   message: string;
   showWalletButton: boolean;
+  walletButtonDisabled: boolean;
 }
 
 export type CancelContentProps = Pick<ModalPropTypes, 'onClose' | 'onCancel'>;

package/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx

@@ -0,0 +1,26 @@
+import type { PropTypes } from './ActivateTabAlert.types';
+
+import { i18n } from '@lingui/core';
+import { Alert, Button } from '@rango-dev/ui';
+import React from 'react';
+
+export function ActivateTabAlert(props: PropTypes) {
+  return (
+    <Alert
+      action={
+        <Button
+          onClick={props.onActivateTab}
+          variant="contained"
+          size="xxsmall"
+          type="warning">
+          {i18n.t('Activate')}
+        </Button>
+      }
+      type="warning"
+      variant="alarm"
+      title={i18n.t(
+        'Another tab is open and handles transactions. You can activate this tab.'
+      )}
+    />
+  );
+}

package/src/components/common/ActivateTabAlert/ActivateTabAlert.types.ts

@@ -0,0 +1,3 @@
+export type PropTypes = {
+  onActivateTab: () => void;
+};

package/src/components/common/ActivateTabAlert/index.ts

@@ -0,0 +1 @@
+export { ActivateTabAlert } from './ActivateTabAlert';

package/src/components/common/ActivateTabModal/ActivateTabModal.tsx

@@ -0,0 +1,31 @@
+import type { PropTypes } from './ActivateTabModal.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox, Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../../utils/common';
+
+export function ActivateTabModal(props: PropTypes) {
+  const { open, onClose, onConfirm } = props;
+  return (
+    <Modal open={open} dismissible onClose={onClose} container={getContainer()}>
+      <MessageBox
+        title={i18n.t('Activate current tab')}
+        type="warning"
+        description={i18n.t(
+          'Currently, some transactions are running and being handled by other browser tab. If you activate this tab, all transactions that are already in the transaction sign step will expire.'
+        )}>
+        <Divider size={20} />
+        <Button
+          variant="contained"
+          size="large"
+          type="primary"
+          fullWidth
+          onClick={onConfirm}>
+          {i18n.t('Confirm')}
+        </Button>
+      </MessageBox>
+    </Modal>
+  );
+}

package/src/components/common/ActivateTabModal/ActivateTabModal.types.ts

@@ -0,0 +1,5 @@
+export type PropTypes = {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+};

package/src/components/common/ActivateTabModal/index.ts

@@ -0,0 +1 @@
+export { ActivateTabModal } from './ActivateTabModal';

package/src/containers/Wallets/Wallets.tsx

@@ -15,6 +15,7 @@ import React, { createContext, useEffect, useRef, useState } from 'react';
 
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
@@ -99,6 +100,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
       props.onUpdateState(type, event, value, state, meta);
     }
   };
+  const isActiveTab = useUiStore.use.isActiveTab();
 
   useEffect(() => {
     if (accounts.length) {
@@ -118,7 +120,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         allBlockChains={blockchains}
         providers={providers}
         onUpdateState={onUpdateState}
-        autoConnect>
+        autoConnect={!!isActiveTab}>
         {props.children}
       </Provider>
     </WidgetContext.Provider>

package/src/containers/Widget/Widget.tsx

@@ -1,13 +1,18 @@
 import type { WidgetProps } from './Widget.types';
 import type { PropsWithChildren } from 'react';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { destroyTabManager } from '../../store/ui';
 import { Main } from '../App';
 import { WidgetProvider } from '../WidgetProvider';
 
 export function Widget(props: PropsWithChildren<WidgetProps>) {
+  useEffect(() => {
+    return destroyTabManager;
+  }, []);
+
   if (!props.config?.externalWallets) {
     return (
       <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>