@rango-dev/widget-embedded 0.12.1-next.26 → 0.12.1-next.28

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA6E3D,wBAAgB,IAAI,sBAsYnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8E3D,wBAAgB,IAAI,sBAyYnB"}

package/dist/pages/SelectBlockchainPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBlockchainPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectBlockchainPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,qBA0DpD"}
+{"version":3,"file":"SelectBlockchainPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectBlockchainPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;CACjC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,qBA+DpD"}

package/dist/pages/SettingsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,SAAS,qBAyIzE"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,SAAS,qBA0JzE"}

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAK7C,OAAO,KAA6B,MAAM,OAAO,CAAC;AAUlD,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAeD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,qBAiEhD"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAK7C,OAAO,KAA6B,MAAM,OAAO,CAAC;AAUlD,UAAU,SAAS;IACjB,gBAAgB,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAeD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,qBAqEhD"}

package/dist/utils/numbers.d.ts

@@ -7,7 +7,9 @@ export declare const convertBigNumberToHex: (value: BigNumber, decimals: number)
 export declare const uint8ArrayToHex: (buffer: Uint8Array) => string;
 export declare function dollarToConciseString(num: number | undefined): string;
 export declare function removeExtraDecimals(num: string, maxDecimals: number): string;
-export declare const totalArrivalTime: (data: BestRouteResponse | null) => number;
+export declare const totalArrivalTime: (data: {
+    estimatedTimeInSeconds: number | null;
+}[] | undefined) => number;
 export declare const rawFees: (data: BestRouteResponse) => string;
 export declare const containsText: (text: string, searchText: string) => boolean;
 export declare const isPositiveNumber: (text?: string) => boolean;

package/dist/utils/numbers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,MAAO,MAAM,yBAAkB,MAC7B,CAAC;AAE/B,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBAChC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA2EF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,SAAS,YACN,MAAM,KACf,MAEF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAKpD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAoBrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAa5E;AAED,eAAO,MAAM,gBAAgB,SAAU,iBAAiB,GAAG,IAAI,WACc,CAAC;AAE9E,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC;AAGjC,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,MAAM,EACpB,gBAAgB,SAAI,GACnB,MAAM,CASR"}
+{"version":3,"file":"numbers.d.ts","sourceRoot":"","sources":["../../src/utils/numbers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,MAAO,MAAM,yBAAkB,MAC7B,CAAC;AAE/B,eAAO,MAAM,eAAe,MAAO,MAAM,KAAG,MAM3C,CAAC;AAEF,eAAO,MAAM,cAAc,WACjB,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,gBAChC,MAAM,GAAG,IAAI,gBACb,MAAM,GAAG,IAAI,KACzB,MA2EF,CAAC;AAEF,eAAO,MAAM,qBAAqB,UACzB,SAAS,YACN,MAAM,KACf,MAEF,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,KAAG,MAKpD,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAoBrE;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAa5E;AAED,eAAO,MAAM,gBAAgB,SACrB;IAAE,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,EAAE,GAAG,SAAS,WACS,CAAC;AAEzE,eAAO,MAAM,OAAO,SAAU,iBAAiB,KAAG,MAOnC,CAAC;AAEhB,eAAO,MAAM,YAAY,SAAU,MAAM,cAAc,MAAM,YACF,CAAC;AAE5D,eAAO,MAAM,gBAAgB,UAAW,MAAM,YACd,CAAC;AAGjC,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,MAAM,EACpB,gBAAgB,SAAI,GACnB,MAAM,CASR"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.26",
+  "version": "0.12.1-next.28",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.2",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.6",
     "@rango-dev/queue-manager-react": "^0.15.1-next.4",
-    "@rango-dev/ui": "^0.15.1-next.17",
+    "@rango-dev/ui": "^0.15.1-next.19",
     "@rango-dev/wallets-react": "^0.1.1-next.6",
     "@rango-dev/wallets-shared": "^0.15.1-next.4",
     "bignumber.js": "^9.1.1",

package/src/Widget.tsx

@@ -30,6 +30,10 @@ const MainContainer = styled('div', {
     boxSizing: 'inherit',
     listStyleType: 'none',
   },
+  '& *:focus-visible': {
+    outline: '1px $info500 solid',
+    transition: 'none',
+  },
 });
 
 export type WidgetProps = {

package/src/components/BlockchainList/BlockchainList.helpers.ts

@@ -1,7 +1,7 @@
+import { BlockchainCategories } from '@rango-dev/ui';
 import { type BlockchainMeta, TransactionType } from 'rango-sdk';
 
 import { containsText } from '../../utils/common';
-import { BlockchainCategories } from '../SelectableCategoryList/SelectableCategoryList.types';
 
 export const filterByType = (
   blockchain: BlockchainMeta,

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -2,13 +2,18 @@
 import type { PropTypes } from './BlockchainsSection.types';
 
 import { i18n } from '@lingui/core';
-import { Divider, Image, Skeleton, Typography } from '@rango-dev/ui';
+import {
+  BlockchainsChip,
+  Divider,
+  Image,
+  Skeleton,
+  Typography,
+} from '@rango-dev/ui';
 import { type BlockchainMeta } from 'rango-sdk';
 import React, { useEffect, useState } from 'react';
 
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
-import { BlockchainsChip } from '../BlockchainsChip';
 
 import { sortBlockchains } from './BlockchainSection.helpers';
 import { Container } from './BlockchainsSection.styles';

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -8,6 +8,8 @@ import {
   TextField,
 } from '@rango-dev/ui';
 
+export const EXPANDABLE_TRANSITION_DURATION = 300;
+
 const slideDown = keyframes({
   from: {
     height: 0,
@@ -169,7 +171,7 @@ export const CustomDestination = styled('div', {
 });
 
 export const ExpandedIcon = styled('div', {
-  transition: 'all 300ms ease',
+  transition: `all ${EXPANDABLE_TRANSITION_DURATION}ms ease`,
   variants: {
     orientation: {
       down: {
@@ -195,10 +197,10 @@ export const CollapsibleContent = styled(Collapsible.Content, {
   variants: {
     open: {
       true: {
-        animation: `${slideDown} 300ms ease-out`,
+        animation: `${slideDown} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
       },
       false: {
-        animation: `${slideUp} 300ms ease-out`,
+        animation: `${slideUp} ${EXPANDABLE_TRANSITION_DURATION}ms ease-out`,
       },
     },
   },

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
   WalletIcon,
 } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { getConfirmSwapErrorMessage } from '../../constants/errors';
@@ -33,6 +33,7 @@ import {
   ConfirmButton,
   CustomDestination,
   CustomDestinationButton,
+  EXPANDABLE_TRANSITION_DURATION,
   ExpandedIcon,
   ListContainer,
   NavigateBack,
@@ -71,6 +72,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const [showCustomDestination, setShowCustomDestination] = useState(
     !!customDestination
   );
+  const customDestinationRef = useRef<HTMLDivElement | null>(null);
+
   const requiredWallets = getRequiredWallets(bestRoute);
   const customDestinationEnabled =
     typeof config?.customDestination === 'undefined'
@@ -231,6 +234,14 @@ export function ConfirmWalletsModal(props: PropTypes) {
     );
   }, [connectedWallets.length]);
 
+  useLayoutEffect(() => {
+    if (showCustomDestination && customDestinationRef.current) {
+      setTimeout(() => {
+        customDestinationRef?.current?.scrollIntoView({ behavior: 'smooth' });
+      }, EXPANDABLE_TRANSITION_DURATION);
+    }
+  }, [showCustomDestination]);
+
   const modalContainer = document.querySelector('#swap-box') as HTMLDivElement;
 
   const navigate = useNavigate();
@@ -389,6 +400,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   {isLastWallet && customDestinationEnabled && (
                     <CustomDestination>
                       <CollapsibleRoot
+                        ref={customDestinationRef}
                         selected={showCustomDestination}
                         open={showCustomDestination}
                         onOpenChange={(checked) => {

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -19,7 +19,10 @@ import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
 import { useWalletList } from '../../hooks/useWalletList';
-import { TIME_TO_CLOSE_MODAL } from '../../pages/WalletsPage';
+import {
+  TIME_TO_CLOSE_MODAL,
+  TIME_TO_IGNORE_MODAL,
+} from '../../pages/WalletsPage';
 import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
 import { getBlockchainDisplayNameFor } from '../../utils/meta';
@@ -51,12 +54,23 @@ export function WalletList(props: PropTypes) {
   const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
     useState<'in-progress' | 'completed' | null>(null);
   const { connect } = useWallets();
+  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const { list, error, handleClick } = useWalletList({
     config,
     chain,
-    onBeforeConnect: setOpenWalletStateModal,
-    onConnect: () =>
-      setTimeout(() => setOpenWalletStateModal(''), TIME_TO_CLOSE_MODAL),
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenWalletStateModal(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: () => {
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
+      }
+      setTimeout(() => {
+        setOpenWalletStateModal('');
+      }, TIME_TO_CLOSE_MODAL);
+    },
   });
   const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
   const numberOfSupportedWallets = list.length;
@@ -165,15 +179,13 @@ export function WalletList(props: PropTypes) {
             : undefined;
         return (
           <>
-            {openWalletStateModal === wallet.type && (
-              <WalletModal
-                open={openWalletStateModal === wallet.type}
-                onClose={() => setOpenWalletStateModal('')}
-                image={wallet.image}
-                state={wallet.state}
-                error={error}
-              />
-            )}
+            <WalletModal
+              open={openWalletStateModal === wallet.type}
+              onClose={() => setOpenWalletStateModal('')}
+              image={wallet.image}
+              state={wallet.state}
+              error={error}
+            />
             {!!experimentalChainWallet && (
               <Modal
                 open={!!experimentalChainWallet && showExperimentalChainModal}

package/src/components/Layout/Layout.styles.ts

@@ -10,6 +10,7 @@ export const Container = styled('div', {
   width: '95vw',
   maxWidth: '390px',
   maxHeight: '700px',
+  backgroundColor: '$neutral100',
   variants: {
     fixedHeight: {
       true: {
@@ -22,6 +23,8 @@ export const Container = styled('div', {
   },
 });
 export const Content = styled('div', {
+  borderTopLeftRadius: '20px',
+  borderTopRightRadius: '20px',
   display: 'flex',
   flexDirection: 'column',
   flex: 1,

package/src/components/Slippage/SlippageTooltipContent.tsx

@@ -7,7 +7,7 @@ import { SlippageTooltipContainer } from './Slippage.styles';
 export function SlippageTooltipContent() {
   return (
     <SlippageTooltipContainer>
-      <Typography variant="label" size="small" color="neutral900">
+      <Typography variant="label" size="medium" color="neutral900">
         {i18n.t(
           'Your transaction will be reverted if the price changes unfavorably by more than this percentage'
         )}

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -12,7 +12,7 @@ export const Container = styled('div', {
     width: '100%',
     justifyContent: 'space-between',
     alignItems: 'center',
-    padding: '$10 $5',
+    padding: '$10 $20',
     borderBottom: '1px solid',
     $$color: '$colors$neutral300',
     [`.${darkTheme} &`]: {
@@ -43,7 +43,6 @@ export const Container = styled('div', {
 
 export const HeaderDetails = styled('div', {
   width: '100%',
-  padding: '0px 15px',
 });
 
 export const StepsList = styled('div', {

package/src/components/SwapDetails/SwapDetails.tsx

@@ -38,7 +38,11 @@ import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
 import { useNotificationStore } from '../../store/notification';
-import { numberToString } from '../../utils/numbers';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../../utils/numbers';
 import { getPriceImpactLevel } from '../../utils/routing';
 import {
   getLastConvertedTokenInFailedSwap,
@@ -55,12 +59,7 @@ import {
   SwapDetailsModal,
 } from '../SwapDetailsModal';
 
-import {
-  getSteps,
-  getStepState,
-  RESET_INTERVAL,
-  SECONDS,
-} from './SwapDetails.helpers';
+import { getSteps, getStepState, RESET_INTERVAL } from './SwapDetails.helpers';
 import { Container, HeaderDetails, StepsList } from './SwapDetails.styles';
 
 export function SwapDetails(props: SwapDetailsProps) {
@@ -163,13 +162,6 @@ export function SwapDetails(props: SwapDetailsProps) {
     0
   );
 
-  const totalTime = swap.steps.reduce(
-    (totalTime, step) => totalTime + (step.estimatedTimeInSeconds || 0),
-    0
-  );
-
-  const minutes = Math.floor(totalTime / SECONDS);
-
   const diagnosisUrl = swap.steps.find(
     (step) => step.diagnosisUrl
   )?.diagnosisUrl;
@@ -319,7 +311,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               GAS_FEE_MIN_DECIMALS,
               GAS_FEE_MAX_DECIMALS
             )}
-            time={minutes}
+            time={secondsToString(totalArrivalTime(swap.steps))}
             steps={numberOfSteps}
           />
           <RouteSummary

package/src/pages/ConfirmSwapPage.tsx

@@ -462,9 +462,7 @@ export function ConfirmSwapPage(props: PropTypes) {
         {showBestRoute && (
           <BestRoute
             expanded={true}
-            tooltipContainer={
-              document.getElementById('swap-box') as HTMLElement
-            }
+            tooltipContainer={getContainer()}
             steps={formatBestRoute(bestRoute) ?? []}
             input={{
               value: numberToString(
@@ -495,7 +493,9 @@ export function ConfirmSwapPage(props: PropTypes) {
               GAS_FEE_MIN_DECIMALS,
               GAS_FEE_MAX_DECIMALS
             )}
-            totalTime={secondsToString(totalArrivalTime(bestRoute))}
+            totalTime={secondsToString(
+              totalArrivalTime(bestRoute.result?.swaps)
+            )}
             recommended={true}
             type="swap-preview"
             percentageChange={percentageChange}

package/src/pages/Home.tsx

@@ -40,6 +40,7 @@ import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { ButtonState } from '../types';
+import { getContainer } from '../utils/common';
 import {
   numberToString,
   secondsToString,
@@ -414,6 +415,7 @@ export function Home() {
             <BestRoute
               type="basic"
               recommended={true}
+              tooltipContainer={getContainer()}
               input={{
                 value: numberToString(
                   inputAmount,
@@ -449,7 +451,9 @@ export function Home() {
                 GAS_FEE_MIN_DECIMALS,
                 GAS_FEE_MAX_DECIMALS
               )}
-              totalTime={secondsToString(totalArrivalTime(bestRoute))}
+              totalTime={secondsToString(
+                totalArrivalTime(bestRoute?.result?.swaps)
+              )}
             />
           </BestRouteContainer>
         ) : showBestRoute && !fetchingBestRoute ? (

package/src/pages/SelectBlockchainPage.tsx

@@ -1,11 +1,10 @@
 import { i18n } from '@lingui/core';
-import { Divider } from '@rango-dev/ui';
+import { Divider, SelectableCategoryList } from '@rango-dev/ui';
 import React, { useState } from 'react';
 
 import { BlockchainList } from '../components/BlockchainList';
 import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
-import { SelectableCategoryList } from '../components/SelectableCategoryList';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useBestRouteStore } from '../store/bestRoute';
@@ -23,7 +22,10 @@ export function SelectBlockchainPage(props: PropTypes) {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useBestRouteStore.use.setToBlockchain();
   const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
-
+  const {
+    meta: { blockchains: allBlockchains },
+    loadingStatus,
+  } = useMetaStore();
   const blockchains = supportedBlockchains
     ? useMetaStore.use
         .meta()
@@ -45,6 +47,8 @@ export function SelectBlockchainPage(props: PropTypes) {
       <SelectableCategoryList
         setCategory={setBlockchainCategory}
         category={blockchainCategory}
+        blockchains={allBlockchains}
+        isLoading={loadingStatus === 'loading'}
       />
       <Divider size={24} />
       <SearchInput

package/src/pages/SettingsPage.tsx

@@ -2,10 +2,12 @@ import { i18n } from '@lingui/core';
 import {
   ChevronRightIcon,
   Divider,
+  InfoIcon,
   List,
   ListItemButton,
   Skeleton,
   Switch,
+  Tooltip,
   Typography,
 } from '@rango-dev/ui';
 import React from 'react';
@@ -14,10 +16,12 @@ import { useNavigate } from 'react-router-dom';
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
 import { Slippage } from '../components/Slippage';
+import { SlippageTooltipContainer as TooltipContainer } from '../components/Slippage/Slippage.styles';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
+import { getContainer } from '../utils/common';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
@@ -131,9 +135,26 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
   const infiniteApprovalItem = {
     id: 'infinite-approval-item',
     title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Infinite Approval')}
-      </Typography>
+      <>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Infinite Approval')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          side="top"
+          container={getContainer()}
+          content={
+            <TooltipContainer>
+              <Typography variant="label" size="medium" color="neutral900">
+                {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,

package/src/pages/WalletsPage.tsx

@@ -37,14 +37,16 @@ export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage({ config }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
-  const [openModal, setOpenModal] = useState<WalletType>('');
+  const [openModal, setOpenModal] = useState(false);
+  const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
 
   const { list, handleClick, error } = useWalletList({
     config,
     onBeforeConnect: (type) => {
       modalTimerId = setTimeout(() => {
-        setOpenModal(type);
+        setOpenModal(true);
+        setSelectedWalletType(type);
       }, TIME_TO_IGNORE_MODAL);
     },
     onConnect: () => {
@@ -52,13 +54,15 @@ export function WalletsPage({ config }: PropTypes) {
         clearTimeout(modalTimerId);
       }
       setTimeout(() => {
-        setOpenModal('');
+        setOpenModal(false);
       }, TIME_TO_CLOSE_MODAL);
     },
   });
 
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
-  const selectedWallet = list.find((wallet) => wallet.type === openModal);
+  const selectedWallet = list.find(
+    (wallet) => wallet.type === selectedWalletType
+  );
   const selectedWalletImage = selectedWallet?.image || '';
   const selectedWalletState =
     selectedWallet?.state || WalletState.NOT_INSTALLED;
@@ -91,7 +95,7 @@ export function WalletsPage({ config }: PropTypes) {
           })}
           <WalletModal
             open={!!openModal}
-            onClose={() => setOpenModal('')}
+            onClose={() => setOpenModal(false)}
             image={selectedWalletImage}
             state={selectedWalletState}
             error={error}

package/src/utils/numbers.ts

@@ -147,8 +147,9 @@ export function removeExtraDecimals(num: string, maxDecimals: number): string {
   }
 }
 
-export const totalArrivalTime = (data: BestRouteResponse | null) =>
-  data?.result?.swaps?.reduce((a, b) => a + b.estimatedTimeInSeconds, 0) || 0;
+export const totalArrivalTime = (
+  data: { estimatedTimeInSeconds: number | null }[] | undefined
+) => data?.reduce((a, b) => a + (b.estimatedTimeInSeconds ?? 0), 0) || 0;
 
 export const rawFees = (data: BestRouteResponse): string =>
   (

package/dist/components/BlockchainsChip/BlockchainsChip.d.ts

@@ -1,5 +0,0 @@
-import type { PropTypes } from './BlockchainsChip.types';
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export declare function BlockchainsChip(props: PropsWithChildren<PropTypes>): React.JSX.Element;
-//# sourceMappingURL=BlockchainsChip.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BlockchainsChip.d.ts","sourceRoot":"","sources":["../../../src/components/BlockchainsChip/BlockchainsChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,eAAe,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAOlE"}