@rango-dev/widget-embedded 0.23.1-next.3 → 0.23.1-next.31

package/src/pages/Home.tsx

@@ -1,3 +1,5 @@
+import type { SelectedQuote } from '../types';
+
 import { i18n } from '@lingui/core';
 import { Button, Divider, styled, WarningIcon } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
@@ -10,19 +12,23 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
 import { Inputs } from '../containers/Inputs';
 import { QuoteInfo } from '../containers/QuoteInfo';
-import useMobileDetect from '../hooks/useMobileDetect';
+import useScreenDetect from '../hooks/useScreenDetect';
 import { useSwapInput } from '../hooks/useSwapInput';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
-import { getSwapButtonState } from '../utils/swap';
+import { isVariantExpandable } from '../utils/configs';
+import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
   display: 'grid',
   gridTemplateColumns: 'auto auto',
   alignItems: 'flex-start',
-  height: 700,
+  maxHeight: 700,
+  '& .footer__alert': {
+    paddingTop: '0',
+  },
 });
 export const TIME_TO_NAVIGATE_ANOTHER_PAGE = 300;
 
@@ -43,7 +49,7 @@ export function Home() {
     updateQuotePartialState,
   } = useQuoteStore();
   const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
-  const isMobile = useMobileDetect();
+  const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
 
   const { fetch: fetchQuote, loading } = useSwapInput({ refetchQuote });
   const { config, fetchStatus: fetchMetaStatus } = useAppStore();
@@ -64,9 +70,20 @@ export function Home() {
     warning: quoteWarning,
     needsToWarnEthOnPath,
   });
-  const isExpandable = config?.variant === 'expandable' && !isMobile;
+
+  const isExpandable = isVariantExpandable(
+    isLargeScreen,
+    isExtraLargeScreen,
+    config?.variant
+  );
+
   const hasInputs =
-    !!inputAmount && !!fromToken && !!toToken && inputAmount !== '0';
+    !!inputAmount &&
+    !!fromToken &&
+    !!toToken &&
+    inputAmount !== '0' &&
+    !isTokensIdentical(fromToken, toToken);
+
   const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
 
   const hasValidQuotes =
@@ -99,6 +116,13 @@ export function Home() {
     }
   };
 
+  const onClickOnQuote = (quote: SelectedQuote) => {
+    if (selectedQuote?.requestId !== quote.requestId) {
+      setShowQuoteWarningModal(false);
+      setSelectedQuote(quote);
+    }
+  };
+
   return (
     <MainContainer>
       <Layout
@@ -200,7 +224,7 @@ export function Home() {
       {isExpandable ? (
         <ExpandedQuotes
           loading={fetchingQuote}
-          onClickOnQuote={(quote) => setSelectedQuote(quote)}
+          onClickOnQuote={onClickOnQuote}
           fetch={fetchQuote}
           onClickRefresh={onClickRefresh}
           isVisible={isVisibleExpanded}

package/src/pages/LanguagePage.tsx

@@ -1,5 +1,7 @@
 import { i18n } from '@lingui/core';
 import {
+  Alert,
+  Divider,
   List,
   ListItemButton,
   Radio,
@@ -10,9 +12,11 @@ import React from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
 import { useLanguage } from '../hooks/useLanguage';
+import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function LanguagePage() {
   const { activeLanguage, changeLanguage, languages } = useLanguage();
+  const navigateBack = useNavigateBack();
 
   const languageList = languages.map((languageItem) => {
     const { local, label, SVGFlag } = languageItem;
@@ -24,7 +28,10 @@ export function LanguagePage() {
           {label}
         </Typography>
       ),
-      onClick: () => changeLanguage(languageItem.local),
+      onClick: () => {
+        changeLanguage(languageItem.local);
+        navigateBack();
+      },
       end: <Radio value={local} />,
       start: <SVGFlag />,
     };
@@ -36,6 +43,12 @@ export function LanguagePage() {
         title: i18n.t('Language'),
       }}>
       <PageContainer>
+        <Alert
+          type="warning"
+          variant="alarm"
+          title="Important Notice: Machine translations are in use"
+        />
+        <Divider size={'8'} />
         <RadioRoot value={activeLanguage}>
           <List
             type={

package/src/pages/LiquiditySourcePage.tsx

@@ -44,8 +44,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     validTypes.push('DEX');
   }
   if (sourceType === 'Bridges') {
-    validTypes.push('BRIDGE');
-    validTypes.push('AGGREGATOR');
+    validTypes.push('BRIDGE', 'AGGREGATOR', 'OFF_CHAIN');
   }
 
   const liquiditySources = supportedUniqueSwappersGroups.filter((uniqueItem) =>
@@ -136,11 +135,13 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fetchStatus === 'success' && (
             <LiquiditySourceList disabled={campaignMode}>
               {filteredList.map((sourceItem) => {
+                const { groupTitle, ...otherProps } = sourceItem;
+
                 return (
                   <React.Fragment key={sourceItem.id}>
                     <ListItemButton
                       style={{ height: '61px' }}
-                      {...sourceItem}
+                      {...otherProps}
                       selected={false}
                       hasDivider
                     />

package/src/pages/SelectSwapItemsPage.tsx

@@ -14,7 +14,6 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useWalletsStore } from '../store/wallets';
-import { sortTokens } from '../utils/wallets';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -34,7 +33,6 @@ export function SelectSwapItemsPage(props: PropTypes) {
   } = useQuoteStore();
   const getBalanceFor = useWalletsStore.use.getBalanceFor();
   const [searchedFor, setSearchedFor] = useState<string>('');
-  const { isTokenPinned } = useAppStore();
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
   const selectedBlockchainName = selectedBlockchain?.name ?? '';
@@ -47,12 +45,9 @@ export function SelectSwapItemsPage(props: PropTypes) {
     type,
     blockchain: selectedBlockchainName,
     searchFor: searchedFor,
+    getBalanceFor: getBalanceFor,
   });
 
-  const checkIsTokenPinned = (token: Token) => isTokenPinned(token, type);
-
-  const tokensList = sortTokens(tokens, getBalanceFor, checkIsTokenPinned);
-
   const updateBlockchain = (blockchain: BlockchainMeta) => {
     if (type === 'source') {
       setFromBlockchain(blockchain);
@@ -101,7 +96,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
         />
         <Divider size={16} />
         <TokenList
-          list={tokensList}
+          list={tokens}
           selectedBlockchain={selectedBlockchainName}
           searchedFor={searchedFor}
           type={type}

package/src/pages/SettingsPage.tsx

@@ -1,194 +1,21 @@
 import { i18n } from '@lingui/core';
-import {
-  Alert,
-  Button,
-  ChevronRightIcon,
-  Divider,
-  InfoIcon,
-  List,
-  ListItemButton,
-  Skeleton,
-  styled,
-  Switch,
-  Tooltip,
-  Typography,
-} from '@rango-dev/ui';
+import { Alert, Button, styled } from '@rango-dev/ui';
 import React from 'react';
-import {
-  useInRouterContext,
-  useNavigate,
-  useSearchParams,
-} from 'react-router-dom';
+import { useInRouterContext, useSearchParams } from 'react-router-dom';
 
 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';
 import { SearchParams } from '../constants/searchParams';
+import { SettingsLists } from '../containers/Settings/Lists';
 import { useAppStore } from '../store/AppStore';
-import { getContainer } from '../utils/common';
-import { getUniqueSwappersGroups, isFeatureHidden } from '../utils/settings';
 
 const ResetAction = styled('div', {
   paddingLeft: '$8',
 });
 
 export function SettingsPage() {
-  const navigate = useNavigate();
-  const { theme } = useAppStore().config;
-  const fetchStatus = useAppStore().fetchStatus;
-  const swappers = useAppStore().swappers();
-  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
-  const {
-    config: { features },
-    isInCampaignMode,
-    updateCampaignMode,
-  } = useAppStore();
+  const { isInCampaignMode, updateCampaignMode } = useAppStore();
   const campaignMode = isInCampaignMode();
-  const isThemeHidden = isFeatureHidden('theme', features);
-
-  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
-
-  const isLanguageHidden = isFeatureHidden('language', features);
-
-  const infiniteApprove = useAppStore().infiniteApprove;
-  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
-
-  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
-    swappers,
-    disabledLiquiditySources
-  );
-
-  const bridgeSources = supportedUniqueSwappersGroups.filter(
-    (uniqueItem) =>
-      uniqueItem.type === 'BRIDGE' || uniqueItem.type === 'AGGREGATOR'
-  );
-  const totalBridgeSources = bridgeSources.length;
-  const totalSelectedBridgeSources = bridgeSources.filter(
-    (uniqueItem) => uniqueItem.selected
-  ).length;
-
-  const exchangeSources = supportedUniqueSwappersGroups.filter(
-    (uniqueItem) => uniqueItem.type === 'DEX'
-  );
-  const totalExchangeSources = exchangeSources.length;
-  const totalSelectedExchangeSources = exchangeSources.filter(
-    (uniqueItem) => uniqueItem.selected
-  ).length;
-
-  const handleEndItem = (totalSelected: number, total: number) => {
-    switch (fetchStatus) {
-      case 'loading':
-        return <Skeleton variant="text" size="medium" width={50} />;
-      case 'failed':
-        return (
-          <Typography variant="body" size="medium" color="$error500">
-            {i18n.t('Loading failed')}
-          </Typography>
-        );
-      default:
-        return (
-          <Typography variant="body" size="medium">
-            {`${totalSelected} / ${total}`}
-          </Typography>
-        );
-    }
-  };
-
-  const bridgeItem = {
-    id: 'bridge-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Enabled bridges')}
-      </Typography>
-    ),
-    end: (
-      <>
-        {handleEndItem(totalSelectedBridgeSources, totalBridgeSources)}
-        <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="black" />
-      </>
-    ),
-    onClick: () => navigate(navigationRoutes.bridges),
-  };
-
-  const exchangeItem = {
-    id: 'exchange-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Enabled exchanges')}
-      </Typography>
-    ),
-    end: (
-      <>
-        {handleEndItem(totalSelectedExchangeSources, totalExchangeSources)}
-        <Divider direction="horizontal" size={8} />
-        <ChevronRightIcon color="gray" />
-      </>
-    ),
-    onClick: () => navigate(navigationRoutes.exchanges),
-  };
-
-  const languageItem = {
-    id: 'language-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Language')}
-      </Typography>
-    ),
-    end: <ChevronRightIcon color="gray" />,
-    onClick: () => navigate(navigationRoutes.languages),
-  };
-
-  const themeItem = {
-    id: 'theme-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Theme')}
-      </Typography>
-    ),
-    end: <ChevronRightIcon color="gray" />,
-    onClick: () => navigate(navigationRoutes.themes),
-  };
-
-  const infiniteApprovalItem = {
-    id: 'infinite-approval-item',
-    title: (
-      <>
-        <Typography variant="title" size="xmedium">
-          {i18n.t('Infinite approval')}
-        </Typography>
-        <Divider direction="horizontal" size={4} />
-        <Tooltip
-          side="top"
-          sideOffset={4}
-          container={getContainer()}
-          content={
-            <TooltipContainer>
-              <Typography variant="label" size="medium" color="neutral700">
-                {i18n.t(
-                  "Enabling the 'Infinite approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
-                )}
-              </Typography>
-            </TooltipContainer>
-          }>
-          <InfoIcon color="gray" />
-        </Tooltip>
-      </>
-    ),
-    end: <Switch checked={infiniteApprove} />,
-    onClick: toggleInfiniteApprove,
-  };
-
-  const settingItems = isLiquidityHidden ? [] : [bridgeItem, exchangeItem];
-
-  if (!isLanguageHidden) {
-    settingItems.push(languageItem);
-  }
-  if (!theme?.singleTheme && !isThemeHidden) {
-    settingItems.push(themeItem);
-  }
-  settingItems.push(infiniteApprovalItem);
 
   const [, setSearchParams] = useSearchParams();
   const isRouterInContext = useInRouterContext();
@@ -205,7 +32,6 @@ export function SettingsPage() {
       updateCampaignMode('liquiditySources', undefined);
     }
   };
-
   return (
     <Layout
       header={{
@@ -222,19 +48,14 @@ export function SettingsPage() {
             action={
               <ResetAction>
                 <Button type="secondary" size="small" onClick={onClick}>
-                  Reset
+                  {i18n.t('Reset')}
                 </Button>
               </ResetAction>
             }
           />
         )}
         <Slippage />
-        <List
-          type={
-            <ListItemButton title="_" id="_" onClick={() => console.log()} />
-          }
-          items={settingItems}
-        />
+        <SettingsLists />
       </PageContainer>
     </Layout>
   );

package/src/store/slices/config.ts

@@ -6,7 +6,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
-  enableNewLiquiditySources: true,
+  excludeLiquiditySources: true,
   customDestination: true,
 };
 
@@ -72,7 +72,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
         ? false
-        : !!config.enableNewLiquiditySources;
+        : !!config.excludeLiquiditySources;
     },
     isInCampaignMode: () => {
       const { campaignMode } = get();

package/src/store/slices/data.ts

@@ -1,14 +1,16 @@
 // We keep all the received data from server in this slice
 
 import type { ConfigSlice } from './config';
+import type { Balance } from '../../types';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
 
 import { httpService as sdk } from '../../services/httpService';
-import { containsText } from '../../utils/common';
+import { compareWithSearchFor, containsText } from '../../utils/common';
 import { isTokenExcludedInConfig } from '../../utils/configs';
+import { isTokenNative } from '../../utils/meta';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
-import { areTokensEqual } from '../../utils/wallets';
+import { areTokensEqual, compareTokenBalance } from '../../utils/wallets';
 
 type BlockchainOptions = {
   type?: 'source' | 'destination';
@@ -19,10 +21,12 @@ type TokenOptions = {
   // filter by an specific blockchain
   blockchain?: string;
   searchFor?: string;
+  getBalanceFor?: (token: Token) => Balance | null;
 };
+
 export type FetchStatus = 'loading' | 'success' | 'failed';
 export interface DataSlice {
-  _blockchains: BlockchainMeta[];
+  _blockchainsMapByName: Map<string, BlockchainMeta>;
   _tokens: Token[];
   _popularTokens: Token[];
   _swappers: SwapperMeta[];
@@ -31,7 +35,6 @@ export interface DataSlice {
   tokens: (options?: TokenOptions) => Token[];
   swappers: () => SwapperMeta[];
   isTokenPinned: (token: Token, type: 'source' | 'destination') => boolean;
-
   fetch: () => Promise<void>;
 }
 
@@ -42,14 +45,17 @@ export const createDataSlice: StateCreator<
   DataSlice
 > = (set, get) => ({
   // State
-  _blockchains: [],
+  _blockchainsMapByName: new Map<string, BlockchainMeta>(),
   _tokens: [],
   _popularTokens: [],
   _swappers: [],
   fetchStatus: 'loading',
   // Selectors
   blockchains: (options) => {
-    const blockchainsFromState = get()._blockchains;
+    const blockchainsMapByName = get()._blockchainsMapByName;
+    const blockchainsFromState = Array.from(
+      blockchainsMapByName?.values() || []
+    );
 
     if (!options || !options?.type) {
       return blockchainsFromState;
@@ -76,6 +82,7 @@ export const createDataSlice: StateCreator<
   },
   tokens: (options) => {
     const tokensFromState = get()._tokens;
+    const blockchainsMapByName = get()._blockchainsMapByName;
 
     if (!options || !options?.type) {
       return tokensFromState;
@@ -127,29 +134,62 @@ export const createDataSlice: StateCreator<
 
         return true;
       })
-      .sort((a, b) => {
-        // Check pinned tokens
-        if (get().isTokenPinned(a, options.type)) {
-          return -1;
+      .sort((tokenA, tokenB) => {
+        //1. sort by pinned tokens
+        const isToken1Pinned = get().isTokenPinned(tokenA, options.type);
+        const isToken2Pinned = get().isTokenPinned(tokenB, options.type);
+        if (isToken1Pinned !== isToken2Pinned) {
+          return isToken1Pinned ? -1 : 1;
         }
-        if (get().isTokenPinned(b, options.type)) {
-          return 1;
+
+        //2. sort by balance
+        if (options.getBalanceFor) {
+          const token1Balance = options.getBalanceFor(tokenA);
+          const token2Balance = options.getBalanceFor(tokenB);
+          const balanceCompare = compareTokenBalance(
+            token1Balance,
+            token2Balance
+          );
+          if (balanceCompare !== 0) {
+            return balanceCompare;
+          }
         }
 
-        // Check secondary coins
-        if (a.isSecondaryCoin) {
-          return 1;
+        //3. sort by token popularity
+        if (tokenA.isPopular !== tokenB.isPopular) {
+          return tokenA.isPopular ? -1 : 1;
         }
-        if (b.isSecondaryCoin) {
-          return -1;
+
+        //4. sort by search phrase
+        if (options.searchFor) {
+          const symbolSearchForCompare = compareWithSearchFor(
+            tokenA,
+            tokenB,
+            options.searchFor
+          );
+          if (symbolSearchForCompare) {
+            return symbolSearchForCompare;
+          }
         }
 
-        // Check it has an address or not.
-        if (!a.address && b.address) {
-          return -1;
+        const blockChainA = blockchainsMapByName.get(tokenA.blockchain);
+        const blockChainB = blockchainsMapByName.get(tokenB.blockchain);
+
+        //5. sort by native token
+        const isNativeTokenA = isTokenNative(tokenA, blockChainA);
+        const isNativeTokenB = isTokenNative(tokenB, blockChainB);
+        if (isNativeTokenA !== isNativeTokenB) {
+          return isNativeTokenA ? -1 : 1;
         }
-        if (a.address && !b.address) {
-          return 1;
+
+        //6. sort by token isSecondary
+        if (tokenA.isSecondaryCoin !== tokenB.isSecondaryCoin) {
+          return tokenA.isSecondaryCoin ? 1 : -1;
+        }
+
+        //7. sort by blockchain order
+        if (!!blockChainA && !!blockChainB) {
+          return blockChainA.sort - blockChainB.sort;
         }
 
         return 0;
@@ -177,12 +217,12 @@ export const createDataSlice: StateCreator<
     const liquiditySources =
       campaignModeLiquiditySource ?? config.liquiditySources;
 
-    const enableNewLiquiditySources = campaignModeLiquiditySource
+    const excludeLiquiditySources = campaignModeLiquiditySource
       ? false
-      : config.enableNewLiquiditySources;
+      : config.excludeLiquiditySources;
 
     /*
-     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
+     * If the excludeLiquiditySources flag is set to true, we return all swappers that are not included in the config.
      * Otherwise, we return all swappers that are included in the config.
      */
     const swappers = get()._swappers.filter((swapper) => {
@@ -191,7 +231,7 @@ export const createDataSlice: StateCreator<
       );
 
       const shouldExcludeLiquiditySources =
-        enableNewLiquiditySources ||
+        excludeLiquiditySources ||
         !liquiditySources ||
         liquiditySources.length === 0;
 
@@ -207,10 +247,17 @@ export const createDataSlice: StateCreator<
   // Actions
   fetch: async () => {
     try {
-      const response = await sdk().getAllMetadata();
+      const { enableCentralizedSwappers } = get().config;
+      const response = await sdk().getAllMetadata({
+        enableCentralizedSwappers,
+      });
 
       set({ fetchStatus: 'success' });
-      const blockchains: BlockchainMeta[] = [];
+      const blockchainsMapByName: Map<string, BlockchainMeta> = new Map<
+        string,
+        BlockchainMeta
+      >();
+
       const tokens: Token[] = [];
       const popularTokens: Token[] = response.popularTokens;
       const swappers: SwapperMeta[] = response.swappers;
@@ -223,20 +270,21 @@ export const createDataSlice: StateCreator<
         tokens.push(token);
       });
 
-      response.blockchains.forEach((blockchain) => {
+      const sortedBlockchain = response.blockchains.sort(
+        (a, b) => a.sort - b.sort
+      );
+
+      sortedBlockchain.forEach((blockchain) => {
         if (
           blockchain.enabled &&
           blockchainsWithAtLeastOneToken.has(blockchain.name)
         ) {
-          blockchains.push(blockchain);
+          blockchainsMapByName.set(blockchain.name, blockchain);
         }
       });
 
-      // Sort
-      blockchains.sort((a, b) => a.sort - b.sort);
-
       set({
-        _blockchains: blockchains,
+        _blockchainsMapByName: blockchainsMapByName,
         _tokens: tokens,
         _popularTokens: popularTokens,
         _swappers: swappers,

package/src/store/slices/settings.ts

@@ -160,9 +160,13 @@ export const createSettingsSlice: StateCreator<
     const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
 
     set({
-      ...(isThemeHidden && { theme: 'auto' }),
-      ...(isLanguageHidden && { language: DEFAULT_LANGUAGE }),
-      ...(isLiquidityHidden && { disabledLiquiditySources: [] }),
+      ...(isThemeHidden && { theme: nextConfig.theme?.mode || 'auto' }),
+      ...(isLanguageHidden && {
+        language: nextConfig.language || DEFAULT_LANGUAGE,
+      }),
+      ...(isLiquidityHidden && {
+        disabledLiquiditySources: nextConfig.liquiditySources || [],
+      }),
     });
   },
 });