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

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -7,6 +7,7 @@ import { useLanguage } from '../../hooks/useLanguage';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
+import { setCurrentTabAsActive, useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { calculateWalletUsdValue } from '../../utils/wallets';
 
@@ -18,6 +19,7 @@ export const WidgetInfoContext = createContext<
 
 export function WidgetInfo(props: React.PropsWithChildren) {
   const { manager } = useManager();
+  const isActiveTab = useUiStore.use.isActiveTab();
   const retrySwap = useQuoteStore.use.retry();
   const history = new WidgetHistory(manager, { retrySwap });
   const details = useWalletsStore.use.connectedWallets();
@@ -32,7 +34,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const notifications = useNotificationStore().getUnreadNotifications();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  const value = {
+  const value: WidgetInfoContextInterface = {
+    isActiveTab,
+    setCurrentTabAsActive,
     history,
     wallets: {
       isLoading,

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

@@ -6,6 +6,8 @@ import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
 export interface WidgetInfoContextInterface {
+  isActiveTab: boolean;
+  setCurrentTabAsActive: () => void;
   history: WidgetHistory;
   wallets: {
     details: ConnectedWallet[];

package/src/libs/tabManager/index.ts

@@ -0,0 +1,2 @@
+export { TabManager } from './tabManager';
+export type { TabManagerInterface } from './tabManager.types';

package/src/libs/tabManager/tabManager.constants.ts

@@ -0,0 +1,3 @@
+export const TIMEOUT = 300;
+export const MAXIMUM_TAB_ID = 100_000;
+export const CHANNEL_NAME = 'rango-widget';

package/src/libs/tabManager/tabManager.ts

@@ -0,0 +1,222 @@
+import type {
+  Events,
+  ID,
+  Message,
+  TabManagerInterface,
+} from './tabManager.types';
+
+import { CHANNEL_NAME, MAXIMUM_TAB_ID, TIMEOUT } from './tabManager.constants';
+
+export class TabManager implements TabManagerInterface {
+  private tabId: ID;
+  private state: 'not-initiated' | 'not-claimed' | 'claimed' = 'not-initiated';
+  private lastTryClaim: number | undefined;
+  private events: Events = {};
+  private channel: BroadcastChannel;
+
+  constructor(events: Events) {
+    this.channel = new BroadcastChannel(CHANNEL_NAME);
+    this.tabId = Math.trunc(Math.random() * MAXIMUM_TAB_ID);
+    this.events = events;
+    this.initEvents();
+    void this.tryClaim();
+  }
+
+  /**
+   * This is applicable when a user in an inactive tab seeks to activate that tab.
+   */
+  forceClaim = () => {
+    if (!this.isClaimed()) {
+      const message: Message = { name: 'force-claim', candidateId: this.tabId };
+      this.channel.postMessage(message);
+      setTimeout(() => {
+        if (!this.isClaimed()) {
+          this.claim();
+        }
+      }, TIMEOUT);
+    }
+  };
+
+  isClaimed = () => {
+    return this.state === 'claimed';
+  };
+
+  /**
+   * remove event listeners
+   */
+  destroy = () => {
+    this.channel.removeEventListener('message', this.handleMessageEvent);
+    document.removeEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange
+    );
+    document.removeEventListener('resume', this.handleResume);
+  };
+
+  /**
+   * Reacting to messages and window events to claim.
+   */
+  private initEvents() {
+    this.channel.addEventListener('message', this.handleMessageEvent);
+
+    document.addEventListener('visibilitychange', this.handleVisibilityChange);
+
+    /**
+     * The "resume" event is currently supported only in certain browsers.
+     * It is triggered when a previously frozen tab is unfrozen and resumes execution.
+     * To avoid having multiple active tabs,
+     * if the current tab is active after the "resume" event,
+     * we send a signal to other tabs to verify if any of them currently claim to be active.
+     * If this is the case, we deactivate the current tab.
+     * https://developer.chrome.com/docs/web-platform/page-lifecycle-api
+     */
+    document.addEventListener('resume', this.handleResume);
+  }
+
+  /**
+   * 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(pingAt: number) {
+    const isPingSentBefore = this.lastTryClaim && this.lastTryClaim < pingAt;
+
+    if (this.isClaimed() || isPingSentBefore) {
+      const message: Message = {
+        name: 'pong',
+      };
+      this.channel.postMessage(message);
+      return;
+    }
+  }
+
+  private handleMessageEvent = (event: MessageEvent<Message>) => {
+    const name = event.data.name;
+
+    switch (name) {
+      case 'ping':
+        this.claimedByCurrentTab(event.data.pingAt);
+        break;
+
+      case 'pong':
+        this.alreadyClaimedByAnotherTab();
+        break;
+
+      case 'force-claim':
+        this.forceRelease(event.data.candidateId);
+        break;
+
+      case 'force-release':
+        if (this.tabId === event.data.candidateId) {
+          this.claim();
+        }
+        break;
+
+      default:
+        throw new Error(`${name} is not supported.`);
+    }
+  };
+
+  private handleVisibilityChange = async () => {
+    if (document.visibilityState === 'visible') {
+      await this.tryClaim();
+    }
+  };
+
+  private handleResume = async () => {
+    if (this.isClaimed()) {
+      await this.tryClaim();
+      if (!this.isClaimed()) {
+        this.events.onRelease?.();
+      }
+    }
+  };
+  /**
+   * Runs after receiving `pong` message, which means one of tabs already claimed the tabs.
+   */
+  private alreadyClaimedByAnotherTab() {
+    this.resetLastCheck();
+  }
+
+  /**
+   * 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 async tryClaim() {
+    /**
+     * Try to ask from possible other running tabs.
+     */
+    this.setLastCheck();
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        this.check();
+        resolve();
+      }, TIMEOUT);
+    });
+  }
+
+  /**
+   * 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() {
+    if (this.state === 'not-initiated') {
+      this.events.onInit?.();
+    }
+    /**
+     *it means we didn't get any response from other tabs, this tab can claim.
+     */
+    if (this.lastTryClaim) {
+      this.claim();
+      this.resetLastCheck();
+    } else {
+      this.state = 'not-claimed';
+    }
+  }
+
+  private claim() {
+    this.state = 'claimed';
+    this.events.onClaim?.();
+  }
+
+  /**
+   * Setting current time as `lastCheck` and broadcast a `ping` message event.
+   */
+  private setLastCheck() {
+    this.lastTryClaim = Date.now();
+    const message: Message = {
+      name: 'ping',
+      pingAt: this.lastTryClaim,
+    };
+    this.channel.postMessage(message);
+  }
+
+  private resetLastCheck() {
+    this.lastTryClaim = undefined;
+  }
+
+  /**
+   * 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(nextActiveTab: ID) {
+    if (this.isClaimed()) {
+      this.state = 'not-claimed';
+
+      this.events.onRelease?.();
+
+      const message: Message = {
+        name: 'force-release',
+        candidateId: nextActiveTab,
+      };
+
+      this.channel.postMessage(message);
+    }
+  }
+}

package/src/libs/tabManager/tabManager.types.ts

@@ -0,0 +1,28 @@
+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 = {
+  // Initially attempt to verify if the tab can be activated.
+  onInit?: () => void;
+  onClaim?: () => void;
+  onRelease?: () => void;
+};
+
+export interface TabManagerInterface {
+  forceClaim: () => void;
+  isClaimed: () => boolean;
+  destroy: () => void;
+}

package/src/pages/ConfirmSwapPage.tsx

@@ -34,6 +34,7 @@ import { QuoteInfo } from '../containers/QuoteInfo';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
 import { getContainer } from '../utils/common';
@@ -86,6 +87,7 @@ export function ConfirmSwapPage() {
   const { connectedWallets } = useWalletsStore();
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
+  const { isActiveTab } = useUiStore();
   const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
@@ -282,6 +284,7 @@ export function ConfirmSwapPage() {
         loading={fetchingConfirmationQuote}
         refetchQuote={onRefresh}
         showWarningModal={showQuoteWarningModal}
+        confirmationDisabled={!isActiveTab}
         onOpenWarningModal={() => setShowQuoteWarningModal(true)}
         onCloseWarningModal={() => setShowQuoteWarningModal(false)}
         onConfirmWarningModal={async () => {
@@ -324,7 +327,7 @@ export function ConfirmSwapPage() {
               size="large"
               fullWidth
               loading={fetchingConfirmationQuote}
-              disabled={!!confirmSwapResult.error}
+              disabled={!!confirmSwapResult.error || !isActiveTab}
               onClick={onStartConfirmSwap}>
               {i18n.t('Start Swap')}
             </Button>

package/src/pages/Home.tsx

@@ -21,6 +21,7 @@ import { QuoteInfo } from '../containers/QuoteInfo';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
+import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { getContainer } from '../utils/common';
 import { formatTooltipNumbers, numberToString } from '../utils/numbers';
@@ -64,6 +65,7 @@ export function Home() {
   const fetchMetaStatus = useAppStore().fetchStatus;
 
   const { connectedWallets, getBalanceFor } = useWalletsStore();
+  const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
   const fetchingBalance =
     !!fromBlockchain &&
@@ -128,7 +130,7 @@ export function Home() {
         <Button
           type="primary"
           size="large"
-          disabled={swapButtonState.disabled}
+          disabled={swapButtonState.disabled || !isActiveTab}
           prefix={
             swapButtonState.action === 'confirm-warning' && <WarningIcon />
           }
@@ -271,6 +273,7 @@ export function Home() {
               loading={fetchingQuote}
               refetchQuote={fetchQuote}
               showWarningModal={showQuoteWarningModal}
+              confirmationDisabled={!isActiveTab}
               onOpenWarningModal={() => setShowQuoteWarningModal(true)}
               onCloseWarningModal={() => setShowQuoteWarningModal(false)}
               onConfirmWarningModal={() => {

package/src/pages/WalletsPage.tsx

@@ -8,6 +8,7 @@ import { Layout, PageContainer } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
+import { useUiStore } from '../store/ui';
 import { getContainer } from '../utils/common';
 
 const ListContainer = styled('div', {
@@ -32,6 +33,7 @@ export function WalletsPage() {
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
+  const isActiveTab = useUiStore.use.isActiveTab();
 
   const { list, handleClick, error } = useWalletList({
     config,
@@ -79,6 +81,7 @@ export function WalletsPage() {
                   void handleClick(type);
                 }}
                 isLoading={fetchMetaStatus === 'loading'}
+                disabled={!isActiveTab}
               />
             );
           })}

package/src/store/ui.ts

@@ -0,0 +1,49 @@
+import type { TabManagerInterface } from '../libs/tabManager';
+
+import { create } from 'zustand';
+
+import { TabManager } from '../libs/tabManager';
+
+import createSelectors from './selectors';
+
+interface UiState {
+  isActiveTab: boolean;
+  tabManagerInitiated: boolean;
+  showActivateTabModal: boolean;
+  activateCurrentTab: (
+    setCurrentTabAsActive: () => void,
+    hasRunningSwaps: boolean
+  ) => void;
+  setShowActivateTabModal: (flag: boolean) => void;
+}
+
+export const useUiStore = createSelectors(
+  create<UiState>()((set, get) => ({
+    isActiveTab: false,
+    tabManagerInitiated: false,
+    showActivateTabModal: false,
+    activateCurrentTab: (setCurrentTabAsActive, hasRunningSwaps) => {
+      const { showActivateTabModal } = get();
+
+      if (!showActivateTabModal && hasRunningSwaps) {
+        set({ showActivateTabModal: true });
+      } else if (showActivateTabModal || !hasRunningSwaps) {
+        setCurrentTabAsActive();
+      }
+    },
+    setShowActivateTabModal: (flag) => {
+      set({ showActivateTabModal: flag });
+    },
+  }))
+);
+
+const tabManager: TabManagerInterface = new TabManager({
+  onInit: () => useUiStore.setState({ tabManagerInitiated: true }),
+  onClaim: () =>
+    useUiStore.setState({ isActiveTab: true, showActivateTabModal: false }),
+  onRelease: () => useUiStore.setState({ isActiveTab: false }),
+});
+
+export const setCurrentTabAsActive = tabManager.forceClaim;
+
+export const destroyTabManager = tabManager.destroy;