@rango-dev/widget-embedded 0.20.1-next.8 → 0.21.0

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

@@ -20,13 +20,14 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { getRequiredWallets } from '../components/ConfirmWalletsModal/ConfirmWallets.helpers';
 import { ConfirmWalletsModal } from '../components/ConfirmWalletsModal/ConfirmWalletsModal';
 import { HeaderButton } from '../components/HeaderButtons/HeaderButtons.styles';
 import { RefreshButton } from '../components/HeaderButtons/RefreshButton';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../constants/warnings';
 import { QuoteInfo } from '../containers/QuoteInfo';
@@ -37,15 +38,7 @@ import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { QuoteWarningType } from '../types';
 import { getContainer } from '../utils/common';
-
-const Container = styled('div', {
-  position: 'relative',
-  width: '100%',
-
-  '& .quote-update__alert': {
-    paddingTop: '$10',
-  },
-});
+import { joinList } from '../utils/ui';
 
 const Buttons = styled('div', {
   width: '100%',
@@ -88,12 +81,13 @@ export function ConfirmSwapPage() {
     quoteWarningsConfirmed,
   } = useQuoteStore();
   const navigate = useNavigate();
+  const location = useLocation();
   const [dbErrorMessage, setDbErrorMessage] = useState<string>('');
 
   const { connectedWallets } = useWalletsStore();
   const showWalletsOnInit = !quoteWalletsConfirmed;
   const [showWallets, setShowWallets] = useState(false);
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const { isActiveTab } = useUiStore();
   const disabledLiquiditySources = useAppStore().disabledLiquiditySources;
   const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const { manager } = useManager();
@@ -128,7 +122,6 @@ export function ConfirmSwapPage() {
           { swapDetails: confirmSwapResult.swap },
           { id: confirmSwapResult.swap.requestId }
         );
-        setSelectedSwap(confirmSwapResult.swap.requestId);
 
         const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
         navigate(swap_url, {
@@ -259,10 +252,50 @@ export function ConfirmSwapPage() {
 
   useLayoutEffect(() => {
     if (!quote) {
-      navigate(`../`);
+      navigate(`../${location.search}`);
     }
   }, []);
 
+  const quoteWarning = confirmSwapResult.warnings?.quote ?? null;
+  const quoteError = confirmSwapResult.error;
+  const alerts = [];
+  if (dbErrorMessage) {
+    alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
+  }
+
+  if (confirmSwapResult.warnings?.quoteUpdate) {
+    alerts.push(
+      <Alert
+        variant="alarm"
+        type="warning"
+        title={
+          confirmSwapResult.warnings.quoteUpdate &&
+          getQuoteUpdateWarningMessage(confirmSwapResult.warnings.quoteUpdate)
+        }
+      />
+    );
+  }
+
+  if (quoteWarning || quoteError) {
+    alerts.push(
+      <QuoteWarningsAndErrors
+        warning={quoteWarning}
+        error={quoteError}
+        loading={fetchingConfirmationQuote}
+        refetchQuote={onRefresh}
+        showWarningModal={showQuoteWarningModal}
+        confirmationDisabled={!isActiveTab}
+        onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+        onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+        onConfirmWarningModal={async () => {
+          setShowQuoteWarningModal(false);
+          await addNewSwap();
+        }}
+        onChangeSettings={() => navigate(navigationRoutes.settings)}
+      />
+    );
+  }
+
   return (
     <Layout
       header={{
@@ -294,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>
@@ -319,7 +352,7 @@ export function ConfirmSwapPage() {
         />
       )}
 
-      <Container>
+      <PageContainer>
         <div className={descriptionStyles()}>
           <Typography variant="title" size="small">
             {i18n.t('You get')}
@@ -336,45 +369,20 @@ export function ConfirmSwapPage() {
             />
           </div>
         </div>
-        {dbErrorMessage && (
-          <>
-            <Alert type="error" variant="alarm" title={dbErrorMessage} />
-            <Divider size={12} />
-          </>
-        )}
-        {confirmSwapResult.warnings?.quoteUpdate && (
-          <div className="quote-update__alert">
-            <Alert
-              variant="alarm"
-              type="warning"
-              title={
-                confirmSwapResult.warnings.quoteUpdate &&
-                getQuoteUpdateWarningMessage(
-                  confirmSwapResult.warnings.quoteUpdate
-                )
-              }
-            />
-          </div>
-        )}
+        <Divider size="12" />
+
+        {joinList(alerts, <Divider size={10} />)}
+        {alerts.length > 0 ? <Divider size={10} /> : null}
+
         <QuoteInfo
           quote={quote}
           type="swap-preview"
           expanded={true}
-          alertPosition="top"
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}
-          refetchQuote={onRefresh}
-          showWarningModal={showQuoteWarningModal}
-          onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-          onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-          onConfirmWarningModal={async () => {
-            setShowQuoteWarningModal(false);
-            await addNewSwap();
-          }}
-          onChangeSettings={() => navigate('../' + navigationRoutes.settings)}
         />
-      </Container>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/HistoryPage.tsx

@@ -6,23 +6,14 @@ import { Divider, NotFound, styled } from '@rango-dev/ui';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { SwapsGroup } from '../components/SwapsGroup';
 import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
-import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
 
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  height: '100%',
-  gap: 15,
-});
-
 const SwapsGroupContainer = styled('div', {
   overflowY: 'visible',
   width: '100%',
@@ -46,7 +37,6 @@ const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
 };
 
 export function HistoryPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
@@ -76,7 +66,7 @@ export function HistoryPage() {
       header={{
         title: i18n.t('History'),
       }}>
-      <Container>
+      <PageContainer>
         <SearchInput
           setValue={setSearchedFor}
           fullWidth
@@ -86,6 +76,7 @@ export function HistoryPage() {
           onChange={searchHandler}
           value={searchedFor}
         />
+        <Divider size="16" />
         <SwapsGroupContainer>
           {isEmpty && (
             <NotFoundContainer>
@@ -101,16 +92,13 @@ export function HistoryPage() {
           {!isEmpty && (
             <SwapsGroup
               list={filteredList}
-              onSwapClick={(requestId) => {
-                setSelectedSwap(requestId);
-                navigate(requestId);
-              }}
+              onSwapClick={navigate}
               groupBy={groupSwapsByDate}
               isLoading={loading}
             />
           )}
         </SwapsGroupContainer>
-      </Container>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/Home.tsx

@@ -1,10 +1,11 @@
 import { i18n } from '@lingui/core';
-import { Button, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
+import { Button, Divider, styled, SwapInput, WarningIcon } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { HomeButtons } from '../components/HeaderButtons';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
+import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { SwitchFromAndToButton } from '../components/SwitchFromAndTo';
 import { errorMessages } from '../constants/errors';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -28,15 +29,6 @@ import { getPriceImpact, getPriceImpactLevel } from '../utils/quote';
 import { canComputePriceImpact, getSwapButtonState } from '../utils/swap';
 import { formatBalance, isFetchingBalance } from '../utils/wallets';
 
-const Container = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  overflowY: 'visible',
-  '& .quote__container': {
-    paddingTop: '$2',
-  },
-});
-
 const FromContainer = styled('div', {
   position: 'relative',
 });
@@ -51,7 +43,7 @@ export function Home() {
   const navigate = useNavigate();
   const {
     fetch: fetchQuote,
-    loading: fetchingQuote,
+    loading,
     error: quoteError,
     warning: quoteWarning,
   } = useSwapInput();
@@ -73,9 +65,8 @@ export function Home() {
   const fetchMetaStatus = useAppStore().fetchStatus;
 
   const { connectedWallets, getBalanceFor } = useWalletsStore();
-  const setCurrentPage = useUiStore.use.setCurrentPage();
+  const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
-  const layoutRef = useRef<HTMLDivElement>(null);
   const fetchingBalance =
     !!fromBlockchain &&
     isFetchingBalance(connectedWallets, fromBlockchain.name);
@@ -96,7 +87,7 @@ export function Home() {
 
   const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
-    fetchingQuote,
+    fetchingQuote: loading,
     inputAmount,
     quote,
     anyWalletConnected: connectedWallets.length > 0,
@@ -115,10 +106,15 @@ export function Home() {
       ? numberToString(fromTokenBalance?.amount, fromTokenBalance?.decimals)
       : '0';
 
+  const fetchingQuote =
+    fetchMetaStatus === 'success' &&
+    !!inputAmount &&
+    !!fromToken &&
+    !!toToken &&
+    loading;
+
   useEffect(() => {
-    setCurrentPage(navigationRoutes.home);
     resetQuoteWallets();
-    return setCurrentPage.bind(null, '');
   }, []);
 
   const percentageChange =
@@ -128,14 +124,13 @@ export function Home() {
 
   return (
     <Layout
-      ref={layoutRef}
-      fixedHeight={false}
+      height="auto"
       hasLogo
       footer={
         <Button
           type="primary"
           size="large"
-          disabled={swapButtonState.disabled}
+          disabled={swapButtonState.disabled || !isActiveTab}
           prefix={
             swapButtonState.action === 'confirm-warning' && <WarningIcon />
           }
@@ -160,7 +155,6 @@ export function Home() {
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
-            layoutRef={layoutRef.current}
             onClickRefresh={
               (!!quote || quoteError) && !showQuoteWarningModal
                 ? fetchQuote
@@ -171,7 +165,7 @@ export function Home() {
           />
         ),
       }}>
-      <Container>
+      <PageContainer>
         <InputsContainer>
           <FromContainer>
             <SwapInput
@@ -262,26 +256,36 @@ export function Home() {
             tooltipContainer={getContainer()}
           />
         </InputsContainer>
-        <div className="quote__container">
-          <QuoteInfo
-            quote={quote}
-            loading={fetchingQuote}
-            error={quoteError}
-            warning={quoteWarning}
-            type="basic"
-            refetchQuote={fetchQuote}
-            showWarningModal={showQuoteWarningModal}
-            onOpenWarningModal={() => setShowQuoteWarningModal(true)}
-            onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-            onConfirmWarningModal={() => {
-              setShowQuoteWarningModal(false);
-              setQuoteWarningsConfirmed(true);
-              navigate(navigationRoutes.confirmSwap);
-            }}
-            onChangeSettings={() => navigate(navigationRoutes.settings)}
-          />
-        </div>
-      </Container>
+        <Divider size="2" />
+        <QuoteInfo
+          quote={quote}
+          loading={fetchingQuote}
+          error={quoteError}
+          warning={quoteWarning}
+          type="basic"
+        />
+        {quoteWarning || quoteError ? (
+          <>
+            <Divider size="10" />
+            <QuoteWarningsAndErrors
+              warning={quoteWarning}
+              error={quoteError}
+              loading={fetchingQuote}
+              refetchQuote={fetchQuote}
+              showWarningModal={showQuoteWarningModal}
+              confirmationDisabled={!isActiveTab}
+              onOpenWarningModal={() => setShowQuoteWarningModal(true)}
+              onCloseWarningModal={() => setShowQuoteWarningModal(false)}
+              onConfirmWarningModal={() => {
+                setShowQuoteWarningModal(false);
+                setQuoteWarningsConfirmed(true);
+                navigate(navigationRoutes.confirmSwap);
+              }}
+              onChangeSettings={() => navigate(navigationRoutes.settings)}
+            />
+          </>
+        ) : null}
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/LanguagePage.tsx

@@ -8,8 +8,7 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { Layout } from '../components/Layout';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { Layout, PageContainer } from '../components/Layout';
 import { useLanguage } from '../hooks/useLanguage';
 
 export function LanguagePage() {
@@ -36,7 +35,7 @@ export function LanguagePage() {
       header={{
         title: i18n.t('Language'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <RadioRoot value={activeLanguage}>
           <List
             type={
@@ -49,7 +48,7 @@ export function LanguagePage() {
             items={languageList}
           />
         </RadioRoot>
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }