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

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,7 +20,7 @@ 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';
@@ -81,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();
@@ -121,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, {
@@ -252,7 +252,7 @@ export function ConfirmSwapPage() {
 
   useLayoutEffect(() => {
     if (!quote) {
-      navigate(`../`);
+      navigate(`../${location.search}`);
     }
   }, []);
 
@@ -284,6 +284,7 @@ export function ConfirmSwapPage() {
         loading={fetchingConfirmationQuote}
         refetchQuote={onRefresh}
         showWarningModal={showQuoteWarningModal}
+        confirmationDisabled={!isActiveTab}
         onOpenWarningModal={() => setShowQuoteWarningModal(true)}
         onCloseWarningModal={() => setShowQuoteWarningModal(false)}
         onConfirmWarningModal={async () => {
@@ -326,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/HistoryPage.tsx

@@ -10,7 +10,6 @@ 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';
@@ -38,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);
@@ -94,10 +92,7 @@ export function HistoryPage() {
           {!isEmpty && (
             <SwapsGroup
               list={filteredList}
-              onSwapClick={(requestId) => {
-                setSelectedSwap(requestId);
-                navigate(requestId);
-              }}
+              onSwapClick={navigate}
               groupBy={groupSwapsByDate}
               isLoading={loading}
             />

package/src/pages/Home.tsx

@@ -43,7 +43,7 @@ export function Home() {
   const navigate = useNavigate();
   const {
     fetch: fetchQuote,
-    loading: fetchingQuote,
+    loading,
     error: quoteError,
     warning: quoteWarning,
   } = useSwapInput();
@@ -65,7 +65,7 @@ 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 fetchingBalance =
     !!fromBlockchain &&
@@ -87,7 +87,7 @@ export function Home() {
 
   const swapButtonState = getSwapButtonState({
     fetchMetaStatus,
-    fetchingQuote,
+    fetchingQuote: loading,
     inputAmount,
     quote,
     anyWalletConnected: connectedWallets.length > 0,
@@ -106,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 =
@@ -125,7 +130,7 @@ export function Home() {
         <Button
           type="primary"
           size="large"
-          disabled={swapButtonState.disabled}
+          disabled={swapButtonState.disabled || !isActiveTab}
           prefix={
             swapButtonState.action === 'confirm-warning' && <WarningIcon />
           }
@@ -268,6 +273,7 @@ export function Home() {
               loading={fetchingQuote}
               refetchQuote={fetchQuote}
               showWarningModal={showQuoteWarningModal}
+              confirmationDisabled={!isActiveTab}
               onOpenWarningModal={() => setShowQuoteWarningModal(true)}
               onCloseWarningModal={() => setShowQuoteWarningModal(false)}
               onConfirmWarningModal={() => {

package/src/pages/SwapDetailsPage.tsx

@@ -1,27 +1,41 @@
+import { i18n } from '@lingui/core';
 import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
 import { useManager } from '@rango-dev/queue-manager-react';
+import { Alert } from '@rango-dev/ui';
 import React from 'react';
+import { useParams } from 'react-router-dom';
 
 import { SwapDetails } from '../components/SwapDetails';
 import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
-import { useUiStore } from '../store/ui';
 import { getPendingSwaps } from '../utils/queue';
 
 export function SwapDetailsPage() {
   const { manager, state } = useManager();
   const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
-  const requestId = useUiStore.use.selectedSwapRequestId();
+  const { requestId } = useParams<{ requestId: string }>();
   const navigateBack = useNavigateBack();
   const { fetchStatus: fetchMetaStatus } = useAppStore();
 
+  if (!requestId) {
+    return (
+      <Alert
+        containerStyles={{ margin: '20px' }}
+        type="error"
+        title={i18n.t(
+          'The request ID is necessary to display the swap details.'
+        )}
+      />
+    );
+  }
+
   const showSkeleton = loading || fetchMetaStatus === 'loading';
 
-  const selectedSwap = pendingSwaps.find(
-    ({ swap }) => swap.requestId === requestId
-  );
+  const selectedSwap = requestId
+    ? pendingSwaps.find(({ swap }) => swap.requestId === requestId)
+    : undefined;
 
   const onCancel = () => {
     if (selectedSwap?.id) {
@@ -47,7 +61,7 @@ export function SwapDetailsPage() {
   if (!swap || showSkeleton) {
     return (
       <SwapDetailsPlaceholder
-        requestId={requestId || ''}
+        requestId={requestId}
         showSkeleton={showSkeleton}
       />
     );
@@ -56,7 +70,7 @@ export function SwapDetailsPage() {
   return (
     <SwapDetails
       swap={swap}
-      requestId={requestId || ''}
+      requestId={requestId}
       onCancel={onCancel}
       onDelete={onDelete}
     />

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

@@ -1,21 +1,49 @@
+import type { TabManagerInterface } from '../libs/tabManager';
+
 import { create } from 'zustand';
 
+import { TabManager } from '../libs/tabManager';
+
 import createSelectors from './selectors';
 
 interface UiState {
-  connectWalletsButtonDisabled: boolean;
-  selectedSwapRequestId: string | null;
-  currentPage: string;
-  setSelectedSwap: (requestId: string | null) => void;
-  setCurrentPage: (path: string) => void;
+  isActiveTab: boolean;
+  tabManagerInitiated: boolean;
+  showActivateTabModal: boolean;
+  activateCurrentTab: (
+    setCurrentTabAsActive: () => void,
+    hasRunningSwaps: boolean
+  ) => void;
+  setShowActivateTabModal: (flag: boolean) => void;
 }
 
 export const useUiStore = createSelectors(
-  create<UiState>()((set) => ({
-    connectWalletsButtonDisabled: false,
-    selectedSwapRequestId: null,
-    currentPage: '',
-    setSelectedSwap: (requestId) => set({ selectedSwapRequestId: requestId }),
-    setCurrentPage: (path) => set({ currentPage: path }),
+  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;

package/src/utils/quote.ts

@@ -35,33 +35,6 @@ import {
   hasProperSlippage,
 } from './swap';
 
-export function searchParamsToToken(
-  tokens: Token[],
-  searchParams: string | null,
-  chain: BlockchainMeta | null
-): Token | null {
-  if (!chain) {
-    return null;
-  }
-  return (
-    tokens.find((token) => {
-      const symbolAndAddress = searchParams?.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 getQuoteToTokenUsdPrice(
   quote: BestRouteResponse | null
 ): number | null | undefined {

package/dist/components/UpdateUrl.d.ts

@@ -1,2 +0,0 @@
-export declare function UpdateUrl(): null;
-//# sourceMappingURL=UpdateUrl.d.ts.map

package/dist/components/UpdateUrl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpdateUrl.d.ts","sourceRoot":"","sources":["../../src/components/UpdateUrl.tsx"],"names":[],"mappings":"AAcA,wBAAgB,SAAS,SA+IxB"}

package/src/components/UpdateUrl.tsx

@@ -1,158 +0,0 @@
-import { useEffect, useRef } from 'react';
-import {
-  createSearchParams,
-  useLocation,
-  useSearchParams,
-} from 'react-router-dom';
-
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { SearchParams } from '../constants/searchParams';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
-import { useUiStore } from '../store/ui';
-import { searchParamsToToken } from '../utils/quote';
-
-export function UpdateUrl() {
-  const firstRender = useRef(true);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
-  const firstRenderSearchParams = useRef(location.search);
-  const searchParamsRef = useRef<Record<string, string>>({});
-  const fromBlockchain = useQuoteStore.use.fromBlockchain();
-  const toBlockchain = useQuoteStore.use.toBlockchain();
-  const fromToken = useQuoteStore.use.fromToken();
-  const toToken = useQuoteStore.use.toToken();
-  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const setFromToken = useQuoteStore.use.setFromToken();
-  const setToBlockchain = useQuoteStore.use.setToBlockchain();
-  const setToToken = useQuoteStore.use.setToToken();
-  const inputAmount = useQuoteStore.use.inputAmount();
-  const setInputAmount = useQuoteStore.use.setInputAmount();
-  const fetchMetaStatus = useAppStore().fetchStatus;
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-
-  useEffect(() => {
-    const params: Record<string, string> = {};
-    createSearchParams(firstRenderSearchParams.current).forEach(
-      (value, key) => {
-        params[key] = value;
-      }
-    );
-    searchParamsRef.current = params;
-    const requestId =
-      location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
-    if (requestId) {
-      setSelectedSwap(requestId);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!firstRender.current) {
-      let fromChainString = '',
-        fromTokenString = '',
-        toChainString = '',
-        toTokenString = '',
-        fromAmount = '';
-      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
-      if (fetchMetaStatus !== 'success') {
-        fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
-        fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
-        toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
-        toTokenString = searchParamsRef.current[SearchParams.TO_TOKEN];
-        fromAmount =
-          searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
-      } else {
-        fromChainString = fromBlockchain?.name || '';
-        fromTokenString =
-          (fromToken?.symbol || '') +
-          (fromToken?.address ? `--${fromToken?.address}` : '');
-        toChainString = toBlockchain?.name || '';
-        toTokenString =
-          (toToken?.symbol || '') +
-          (toToken?.address ? `--${toToken?.address}` : '');
-        fromAmount = inputAmount;
-      }
-      setSearchParams(
-        {
-          ...(fromChainString && {
-            [SearchParams.FROM_CHAIN]: fromChainString,
-          }),
-          ...(fromTokenString && {
-            [SearchParams.FROM_TOKEN]: fromTokenString,
-          }),
-          ...(toChainString && { [SearchParams.TO_CHAIN]: toChainString }),
-          ...(toTokenString && { [SearchParams.TO_TOKEN]: toTokenString }),
-          ...(fromAmount && {
-            [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
-          }),
-          ...(autoConnect && {
-            [SearchParams.AUTO_CONNECT]: autoConnect,
-          }),
-        },
-        { replace: true }
-      );
-    }
-    firstRender.current = false;
-  }, [
-    location.pathname,
-    inputAmount,
-    fromBlockchain,
-    fromToken,
-    toBlockchain,
-    toToken,
-  ]);
-
-  useEffect(() => {
-    if (fetchMetaStatus === 'success') {
-      const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
-      const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
-      const toChainString = searchParams.get(SearchParams.TO_CHAIN);
-      const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
-      const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
-      const fromBlockchain = blockchains.find(
-        (blockchain) => blockchain.name === fromChainString
-      );
-      const fromToken = searchParamsToToken(
-        tokens,
-        fromTokenString,
-        fromBlockchain || null
-      );
-      const toBlockchain = blockchains.find(
-        (blockchain) => blockchain.name === toChainString
-      );
-      const toToken = searchParamsToToken(
-        tokens,
-        toTokenString,
-        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 },
-          });
-        }
-      }
-      if (fromAmount) {
-        setInputAmount(fromAmount);
-      }
-    }
-  }, [fetchMetaStatus]);
-
-  return null;
-}