@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/libs/tabManager/tabManager.ts

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

package/src/pages/AddCustomTokenPage.tsx

@@ -0,0 +1,153 @@
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  darkTheme,
+  Divider,
+  DoneIcon,
+  styled,
+  TextField,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { BlockchainSelectorButton } from '../components/BlockchainSelectorButton';
+import { ImportCustomToken } from '../components/ImportCustomToken';
+import { Layout, PageContainer } from '../components/Layout';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { SearchParams } from '../constants/searchParams';
+import { useFetchCustomToken } from '../hooks/useFetchCustomToken';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/AppStore';
+import { findBlockchain, isValidTokenAddress } from '../utils/meta';
+
+const Content = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  flex: 1,
+  '& ._text-field': {
+    padding: '$4 $12',
+    backgroundColor: '$neutral300',
+    '& input': {
+      padding: '0',
+    },
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+    borderRadius: '$sm',
+    height: '$40',
+  },
+});
+
+export function AddCustomTokenPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const navigateBack = useNavigateBack();
+  const blockchains = useAppStore().blockchains();
+
+  const blockchainName = searchParams.get(SearchParams.BLOCKCHAIN) || '';
+  const blockchain = findBlockchain(blockchainName, blockchains);
+  const [address, setAddress] = useState('');
+  const { fetchCustomToken, token, loading, error, resetState } =
+    useFetchCustomToken();
+  const isValidAddress =
+    !!blockchain && isValidTokenAddress(blockchain, address);
+  const isImportDisabled = !blockchain || !address || !isValidAddress;
+
+  const getCustomToken = () => {
+    if (blockchain) {
+      void fetchCustomToken({
+        blockchain: blockchainName,
+        tokenAddress: address,
+      });
+    }
+  };
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Add Custom Token'),
+      }}>
+      <PageContainer>
+        <Content>
+          <div>
+            <BlockchainSelectorButton
+              onClick={() =>
+                navigate(navigationRoutes.blockchains, { replace: true })
+              }
+              hasLogo={!!blockchain?.logo}
+              value={
+                !!blockchain
+                  ? {
+                      name: blockchain.displayName,
+                      logo: blockchain.logo,
+                    }
+                  : undefined
+              }
+              title={i18n.t('Select chain')}
+              placeholder={i18n.t('Select chain')}
+            />
+            <Divider size={'24'} />
+            <Typography size="large" variant="label">
+              {i18n.t('Enter Address')}
+            </Typography>
+            <Divider size={10} />
+            <TextField
+              fullWidth
+              id="widget-add-custom-token-token-address-input"
+              disabled={!blockchain}
+              variant="contained"
+              placeholder={i18n.t('Enter token address')}
+              size="large"
+              value={address}
+              suffix={
+                !!address &&
+                isValidAddress && <DoneIcon color="success" size={12} />
+              }
+              onChange={(e) => setAddress(e.target.value)}
+            />
+            {!isValidAddress && !!address && (
+              <>
+                <Divider size={4} />
+                <Alert
+                  id="widget-add-custom-token-invalid-address-alert"
+                  type="error"
+                  variant="alarm"
+                  title="Invalid Address"
+                />
+              </>
+            )}
+          </div>
+
+          <Button
+            id="widget-add-custom-token-import-btn"
+            disabled={isImportDisabled}
+            type="primary"
+            variant="contained"
+            loading={loading}
+            size="large"
+            onClick={getCustomToken}>
+            {i18n.t('Import')}
+          </Button>
+        </Content>
+        <ImportCustomToken
+          token={token}
+          blockchain={blockchain ?? undefined}
+          address={address}
+          error={error ?? undefined}
+          fetchCustomToken={fetchCustomToken}
+          onCloseErrorModal={() => {
+            if (error?.type !== 'network-error') {
+              setAddress('');
+            }
+          }}
+          onImport={navigateBack}
+          onExitErrorModal={resetState}
+          onExitImportModal={resetState}
+        />
+      </PageContainer>
+    </Layout>
+  );
+}