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

package/src/pages/LiquiditySourcePage.tsx

@@ -14,14 +14,13 @@ import {
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { LoadingLiquiditySourceList } from '../components/LoadingLiquiditySourceList';
 import { SearchInput } from '../components/SearchInput';
 import {
   LiquiditySourceList,
   LiquiditySourceSuffix,
   NotFoundContainer,
-  SettingsContainer,
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
 import { containsText } from '../utils/numbers';
@@ -40,6 +39,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers, disabledLiquiditySources);
 
+  const types = { Exchanges: i18n.t('Exchanges'), Bridges: i18n.t('Bridges') };
   const validTypes: Array<LiquiditySourceType> = [];
   if (sourceType === 'Exchanges') {
     validTypes.push('DEX');
@@ -103,19 +103,21 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         suffix: (
           <LiquiditySourceSuffix>
             <Button variant="ghost" size="xsmall" onClick={toggleAllSources}>
-              {i18n.t(hasSelectAll ? 'Deselect all' : 'Select all')}
+              {hasSelectAll ? i18n.t('Deselect all') : i18n.t('Select all')}
             </Button>
           </LiquiditySourceSuffix>
         ),
       }}>
-      <SettingsContainer>
+      <PageContainer view>
         <SearchInput
           value={searchedFor}
           setValue={setSearchedFor}
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Search {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', {
+            sourceType: types[sourceType],
+          })}
           onChange={searchHandler}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
@@ -145,7 +147,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
             </LiquiditySourceList>
           )
         )}
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SelectBlockchainPage.tsx

@@ -2,12 +2,12 @@ import { i18n } from '@lingui/core';
 import {
   Divider,
   getCountCategories,
-  SelectableCategoryList
+  SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { BlockchainList } from '../components/BlockchainList';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
@@ -27,7 +27,7 @@ export function SelectBlockchainPage(props: PropTypes) {
   const fetchStatus = useAppStore().fetchStatus;
 
   const blockchains = useAppStore().blockchains({
-    type: type
+    type,
   });
 
   const countActiveCategories = getCountCategories(blockchains);
@@ -37,47 +37,47 @@ export function SelectBlockchainPage(props: PropTypes) {
   return (
     <Layout
       header={{
-        title: i18n.t(`Select Blockchain`)
+        title: i18n.t(`Select Blockchain`),
       }}>
-      <Divider size={12} />
+      <PageContainer view>
+        {showCategory && (
+          <>
+            <SelectableCategoryList
+              setCategory={setBlockchainCategory}
+              category={blockchainCategory}
+              blockchains={blockchains}
+              isLoading={fetchStatus === 'loading'}
+            />
+            <Divider size={24} />
+          </>
+        )}
 
-      {showCategory && (
-        <>
-          <SelectableCategoryList
-            setCategory={setBlockchainCategory}
-            category={blockchainCategory}
-            blockchains={blockchains}
-            isLoading={fetchStatus === 'loading'}
-          />
-          <Divider size={24} />
-        </>
-      )}
+        <SearchInput
+          value={searchedFor}
+          autoFocus
+          placeholder={i18n.t('Search Blockchain')}
+          color="light"
+          variant="contained"
+          size="large"
+          setValue={() => setSearchedFor('')}
+          onChange={(event) => setSearchedFor(event.target.value)}
+        />
+        <Divider size={16} />
 
-      <SearchInput
-        value={searchedFor}
-        autoFocus
-        placeholder={i18n.t('Search Blockchain')}
-        color="light"
-        variant="contained"
-        size="large"
-        setValue={() => setSearchedFor('')}
-        onChange={(event) => setSearchedFor(event.target.value)}
-      />
-      <Divider size={16} />
-
-      <BlockchainList
-        list={blockchains}
-        searchedFor={searchedFor}
-        blockchainCategory={blockchainCategory}
-        onChange={(blockchain) => {
-          if (type === 'source') {
-            setFromBlockchain(blockchain);
-          } else {
-            setToBlockchain(blockchain);
-          }
-          navigateBack();
-        }}
-      />
+        <BlockchainList
+          list={blockchains}
+          searchedFor={searchedFor}
+          blockchainCategory={blockchainCategory}
+          onChange={(blockchain) => {
+            if (type === 'source') {
+              setFromBlockchain(blockchain);
+            } else {
+              setToBlockchain(blockchain);
+            }
+            navigateBack();
+          }}
+        />
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SelectSwapItemsPage.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { BlockchainsSection } from '../components/BlockchainsSection';
-import { Layout } from '../components/Layout';
+import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { TokenList } from '../components/TokenList/TokenList';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -68,51 +68,57 @@ export function SelectSwapItemsPage(props: PropTypes) {
       setToToken({ token, meta: { blockchains, tokens } });
     }
   };
+  const types = {
+    source: i18n.t('Source'),
+    destination: i18n.t('Destination'),
+  };
 
   return (
     <Layout
       header={{
-        title: i18n.t('Swap {type}', { type }),
+        title: i18n.t('Swap {type}', { type: types[type] }),
       }}>
-      <BlockchainsSection
-        blockchains={blockchains}
-        type={type == 'source' ? 'from' : 'to'}
-        blockchain={type === 'source' ? fromBlockchain : toBlockchain}
-        onMoreClick={() => navigate(navigationRoutes.blockchains)}
-        onChange={(blockchain) => {
-          updateBlockchain(blockchain);
-        }}
-      />
-      <Divider size={24} />
-      <SearchInput
-        value={searchedFor}
-        autoFocus
-        placeholder={i18n.t('Search Token')}
-        color="light"
-        variant="contained"
-        size="large"
-        setValue={() => setSearchedFor('')}
-        onChange={(event) => setSearchedFor(event.target.value)}
-      />
-      <Divider size={16} />
-      <TokenList
-        list={tokensList}
-        selectedBlockchain={selectedBlockchainName}
-        searchedFor={searchedFor}
-        type={type}
-        onChange={(token) => {
-          updateToken(token);
+      <PageContainer>
+        <BlockchainsSection
+          blockchains={blockchains}
+          type={type == 'source' ? 'from' : 'to'}
+          blockchain={type === 'source' ? fromBlockchain : toBlockchain}
+          onMoreClick={() => navigate(navigationRoutes.blockchains)}
+          onChange={(blockchain) => {
+            updateBlockchain(blockchain);
+          }}
+        />
+        <Divider size={24} />
+        <SearchInput
+          value={searchedFor}
+          autoFocus
+          placeholder={i18n.t('Search Token')}
+          color="light"
+          variant="contained"
+          size="large"
+          setValue={() => setSearchedFor('')}
+          onChange={(event) => setSearchedFor(event.target.value)}
+        />
+        <Divider size={16} />
+        <TokenList
+          list={tokensList}
+          selectedBlockchain={selectedBlockchainName}
+          searchedFor={searchedFor}
+          type={type}
+          onChange={(token) => {
+            updateToken(token);
 
-          const tokenBlockchain = blockchains.find(
-            (chain) => token.blockchain === chain.name
-          );
-          if (tokenBlockchain) {
-            updateBlockchain(tokenBlockchain);
-          }
+            const tokenBlockchain = blockchains.find(
+              (chain) => token.blockchain === chain.name
+            );
+            if (tokenBlockchain) {
+              updateBlockchain(tokenBlockchain);
+            }
 
-          navigateBack();
-        }}
-      />
+            navigateBack();
+          }}
+        />
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/SettingsPage.tsx

@@ -13,8 +13,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { Layout } from '../components/Layout';
-import { SettingsContainer } from '../components/SettingsContainer';
+import { Layout, PageContainer } from '../components/Layout';
 import { Slippage } from '../components/Slippage';
 import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
@@ -183,7 +182,7 @@ export function SettingsPage() {
       header={{
         title: i18n.t('Settings'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <Slippage />
         <List
           type={
@@ -191,7 +190,7 @@ export function SettingsPage() {
           }
           items={settingItems}
         />
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

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/ThemePage.tsx

@@ -11,8 +11,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 { useAppStore } from '../store/AppStore';
 
 type Theme = 'dark' | 'light' | 'auto';
@@ -70,7 +69,7 @@ export function ThemePage() {
       header={{
         title: i18n.t('Theme'),
       }}>
-      <SettingsContainer>
+      <PageContainer>
         <RadioRoot
           onValueChange={(value) => setTheme(value as Theme)}
           value={theme}>
@@ -85,7 +84,7 @@ export function ThemePage() {
             items={themesList}
           />
         </RadioRoot>
-      </SettingsContainer>
+      </PageContainer>
     </Layout>
   );
 }

package/src/pages/WalletsPage.tsx

@@ -2,12 +2,13 @@ import type { WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 
-import { Layout } from '../components/Layout';
+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', {
@@ -20,7 +21,7 @@ const ListContainer = styled('div', {
   height: '100%',
 });
 
-const Container = styled('div', {
+const Container = styled(PageContainer, {
   textAlign: 'center',
 });
 
@@ -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,
@@ -71,16 +73,16 @@ export function WalletsPage() {
           {list.map((wallet, index) => {
             const key = `wallet-${index}-${wallet.type}`;
             return (
-              <Fragment key={key}>
-                <Wallet
-                  {...wallet}
-                  container={getContainer()}
-                  onClick={(type) => {
-                    void handleClick(type);
-                  }}
-                  isLoading={fetchMetaStatus === 'loading'}
-                />
-              </Fragment>
+              <Wallet
+                key={key}
+                {...wallet}
+                container={getContainer()}
+                onClick={(type) => {
+                  void handleClick(type);
+                }}
+                isLoading={fetchMetaStatus === 'loading'}
+                disabled={!isActiveTab}
+              />
             );
           })}
           <WalletModal

package/src/store/slices/settings.ts

@@ -15,7 +15,7 @@ export type ThemeMode = 'auto' | 'dark' | 'light';
 
 export interface SettingsSlice {
   theme: ThemeMode;
-  language: Language;
+  language: Language | null;
   disabledLiquiditySources: string[];
   /** Keeping a history of blockchains that user has selected (in Swap process) */
   preferredBlockchains: string[];
@@ -31,7 +31,7 @@ export interface SettingsSlice {
   toggleInfiniteApprove: () => void;
   toggleLiquiditySource: (name: string) => void;
   setTheme: (theme: ThemeMode) => void;
-  setLanguage: (language: Language) => void;
+  setLanguage: (language: Language | null) => void;
   toggleAllLiquiditySources: (
     swappers: SwapperMeta[],
     shouldReset?: boolean
@@ -53,7 +53,7 @@ export const createSettingsSlice: StateCreator<
 > = (set, get) => ({
   disabledLiquiditySources: [],
   theme: 'auto',
-  language: DEFAULT_LANGUAGE,
+  language: null,
   preferredBlockchains: [],
   slippage: DEFAULT_SLIPPAGE,
   customSlippage: null,

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/types/notification.ts

@@ -3,7 +3,6 @@ import {
   type RouteEvent,
   type Step,
   type StepEvent,
-  StepExecutionBlockedEventStatus,
 } from '@rango-dev/queue-manager-rango-preset';
 
 type NotificationRoute = {
@@ -25,9 +24,3 @@ export type Notification = Pick<Route, 'requestId'> & {
   read: boolean;
   route: NotificationRoute;
 };
-
-export const validBlockedStatuses: StepExecutionBlockedEventStatus[] = [
-  StepExecutionBlockedEventStatus.WAITING_FOR_CHANGE_WALLET_ACCOUNT,
-  StepExecutionBlockedEventStatus.WAITING_FOR_NETWORK_CHANGE,
-  StepExecutionBlockedEventStatus.WAITING_FOR_WALLET_CONNECT,
-];

package/src/utils/date.ts

@@ -1,6 +1,7 @@
 import type { GroupBy } from '../components/SwapsGroup/SwapsGroup.types';
 import type { PendingSwap } from 'rango-types';
 
+import { i18n } from '@lingui/core';
 import dayjs from 'dayjs';
 
 export const groupSwapsByDate: GroupBy = (swaps) => {
@@ -14,28 +15,28 @@ export const groupSwapsByDate: GroupBy = (swaps) => {
     [
       'today',
       {
-        title: 'Today',
+        title: i18n.t('Today'),
         swaps: [],
       },
     ],
     [
       'week',
       {
-        title: 'This week',
+        title: i18n.t('This week'),
         swaps: [],
       },
     ],
     [
       'month',
       {
-        title: 'This month',
+        title: i18n.t('This month'),
         swaps: [],
       },
     ],
     [
       'year',
       {
-        title: 'This year',
+        title: i18n.t('This year'),
         swaps: [],
       },
     ],

package/src/utils/quote.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 import type { QuoteError, QuoteWarning, Wallet } from '../types';
-import type { PriceImpactWarningLevel } from '@rango-dev/ui';
+import type { PriceImpactWarningLevel, Step } from '@rango-dev/ui';
 import type {
   SimulationAssetAndAmount,
   SimulationValidationStatus,
@@ -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 {
@@ -336,3 +309,20 @@ export function getPriceImpact(
 
   return percentageChange && percentageChange < 0 ? percentageChange : null;
 }
+
+export const getUniqueBlockchains = (steps: Step[]) => {
+  const set = new Set();
+  const result: { displayName: string; image: string }[] = [];
+  steps.forEach((step) => {
+    if (!set.has(step.from.chain.displayName)) {
+      set.add(step.from.chain.displayName);
+      result.push(step.from.chain);
+    }
+    if (!set.has(step.to.chain.displayName)) {
+      set.add(step.to.chain.displayName);
+      result.push(step.to.chain);
+    }
+  });
+
+  return result;
+};