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

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/constants/searchParams.ts

@@ -1,8 +1,8 @@
 export enum SearchParams {
-  'FROM_CHAIN' = 'fromBlockchain',
-  'FROM_TOKEN' = 'fromToken',
-  'TO_CHAIN' = 'toBlockchain',
-  'TO_TOKEN' = 'toToken',
-  'FROM_AMOUNT' = 'fromAmount',
-  'AUTO_CONNECT' = 'autoConnect',
+  FROM_BLOCKCHAIN = 'fromBlockchain',
+  FROM_TOKEN = 'fromToken',
+  TO_BLOCKCHAIN = 'toBlockchain',
+  TO_TOKEN = 'toToken',
+  FROM_AMOUNT = 'fromAmount',
+  AUTO_CONNECT = 'autoConnect',
 }

package/src/containers/Wallets/Wallets.tsx

@@ -13,9 +13,9 @@ import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
 import React, { createContext, useEffect, useRef, useState } from 'react';
 
-import { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
 import { useWalletProviders } from '../../hooks/useWalletProviders';
 import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
@@ -39,7 +39,6 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
-  useSyncStoresWithConfig();
 
   useEffect(() => {
     void fetchMeta().catch(console.log);
@@ -101,6 +100,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
       props.onUpdateState(type, event, value, state, meta);
     }
   };
+  const isActiveTab = useUiStore.use.isActiveTab();
 
   useEffect(() => {
     if (accounts.length) {
@@ -120,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}>

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/hooks/useSwapInput.ts

@@ -59,8 +59,9 @@ export function useSwapInput(): UseSwapInput {
     affiliateRef,
     affiliateWallets,
     disabledLiquiditySources,
+    fetchStatus,
   } = useAppStore();
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<QuoteError | null>(null);
   const [warning, setWarning] = useState<QuoteWarning | null>(null);
   const userSlippage = customSlippage ?? slippage;
@@ -148,6 +149,9 @@ export function useSwapInput(): UseSwapInput {
   );
 
   useEffect(() => {
+    if (fetchStatus !== 'success') {
+      return;
+    }
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       resetState(false);
       cancelFetch();
@@ -175,6 +179,7 @@ export function useSwapInput(): UseSwapInput {
     });
     return cancelFetch;
   }, [
+    fetchStatus,
     inputAmount,
     fromToken?.symbol,
     fromToken?.address,

package/src/hooks/useSyncStoresWithConfig.ts

@@ -1,6 +1,6 @@
 import type { Asset } from 'rango-sdk';
 
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
@@ -44,14 +44,7 @@ export function useSyncStoresWithConfig() {
     setInputAmount(config?.amount?.toString() || '');
   }, [config?.amount]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.from?.blockchain
@@ -100,14 +93,7 @@ export function useSyncStoresWithConfig() {
     }
   }, [toTokensConfig, toBlockchainsConfig]);
 
-  /*
-   * We update quote tokens in two scenarios.
-   * If default values exist in widget config or search parameters exist in URL.
-   * The logic for updating quote store exists in two useEffect in two locations, and they run in order.If default tokens for quote exist in widget config and also exist in URL, widget config values take precedence over URL values, and URL search parameters don’t affect the widget.
-   * Using useLayoutEffect causes widget config values to apply first.
-   * We may consider replacing this with a better solution in the future.
-   */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (fetchMetaStatus === 'success') {
       const chain = blockchains.find(
         (chain) => chain.name === config?.to?.blockchain

package/src/hooks/useSyncUrlAndStore/index.ts

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

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.helpers.ts

@@ -0,0 +1,35 @@
+import type { BlockchainMeta, Token } from 'rango-sdk';
+
+export function searchParamToToken(
+  tokens: Token[],
+  searchParam: string | null,
+  chain: BlockchainMeta | null
+): Token | null {
+  if (!chain) {
+    return null;
+  }
+  return (
+    tokens.find((token) => {
+      const symbolAndAddress = searchParam?.split('--');
+      if (symbolAndAddress?.length === 1) {
+        return (
+          token.symbol === symbolAndAddress[0] &&
+          token.address === null &&
+          token.blockchain === chain.name
+        );
+      }
+      return (
+        token.symbol === symbolAndAddress?.[0] &&
+        token.address === symbolAndAddress?.[1] &&
+        token.blockchain === chain.name
+      );
+    }) || null
+  );
+}
+
+export function tokenToSearchParam(token: Token | null): string | undefined {
+  if (token) {
+    return `${token.symbol}${token.address ? `--${token.address}` : ''}`;
+  }
+  return undefined;
+}

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -0,0 +1,135 @@
+import { useEffect } from 'react';
+import {
+  useInRouterContext,
+  useLocation,
+  useSearchParams,
+} from 'react-router-dom';
+
+import { SearchParams } from '../../constants/searchParams';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  searchParamToToken,
+  tokenToSearchParam,
+} from './useSyncUrlAndStore.helpers';
+
+export function useSyncUrlAndStore() {
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const {
+    fromBlockchain,
+    toBlockchain,
+    fromToken,
+    toToken,
+    inputAmount,
+    setFromBlockchain,
+    setToBlockchain,
+    setFromToken,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore();
+  const fetchMetaStatus = useAppStore().fetchStatus;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const isInRouterContext = useInRouterContext();
+
+  const getUrlSearchParams = () => {
+    const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
+    const fromBlockchain = searchParams.get(SearchParams.FROM_BLOCKCHAIN);
+    const fromToken = searchParams.get(SearchParams.FROM_TOKEN);
+    const toBlockchain = searchParams.get(SearchParams.TO_BLOCKCHAIN);
+    const toToken = searchParams.get(SearchParams.TO_TOKEN);
+    const autoConnect = searchParams.get(SearchParams.AUTO_CONNECT);
+
+    return {
+      fromAmount,
+      fromBlockchain,
+      fromToken,
+      toBlockchain,
+      toToken,
+      autoConnect,
+    };
+  };
+
+  const updateUrlSearchParams = (
+    searchParams: Record<string, string | undefined>
+  ) => {
+    for (const property in searchParams) {
+      if (!searchParams[property]) {
+        delete searchParams[property];
+      }
+    }
+    setSearchParams(searchParams as Record<string, string>, { replace: true });
+  };
+
+  useEffect(() => {
+    const { autoConnect } = getUrlSearchParams();
+    if (isInRouterContext && fetchMetaStatus === 'success') {
+      updateUrlSearchParams({
+        [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
+        [SearchParams.FROM_TOKEN]: tokenToSearchParam(fromToken),
+        [SearchParams.TO_BLOCKCHAIN]: toBlockchain?.name,
+        [SearchParams.TO_TOKEN]: tokenToSearchParam(toToken),
+        [SearchParams.FROM_AMOUNT]: inputAmount,
+        [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
+      });
+    }
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+  ]);
+
+  useEffect(() => {
+    if (!isInRouterContext) {
+      return;
+    }
+    const searchParams = getUrlSearchParams();
+    if (searchParams.fromAmount) {
+      setInputAmount(searchParams.fromAmount);
+    }
+    if (fetchMetaStatus === 'success') {
+      const fromBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.fromBlockchain
+      );
+      const fromToken = searchParamToToken(
+        tokens,
+        searchParams.fromToken,
+        fromBlockchain ?? null
+      );
+      const toBlockchain = blockchains.find(
+        (blockchain) => blockchain.name === searchParams.toBlockchain
+      );
+      const toToken = searchParamToToken(
+        tokens,
+        searchParams.toToken,
+        toBlockchain ?? null
+      );
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken({
+            token: fromToken,
+            meta: {
+              blockchains: blockchains,
+              tokens: tokens,
+            },
+          });
+        }
+      }
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken({
+            token: toToken,
+            meta: { blockchains: blockchains, tokens: tokens },
+          });
+        }
+      }
+    }
+  }, [fetchMetaStatus]);
+}

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);
+    }
+  }
+}