@rango-dev/widget-embedded 0.12.1-next.8 → 0.13.0

package/src/components/AppRouter.tsx

@@ -1,11 +1,41 @@
-import React, { Fragment, PropsWithChildren } from 'react';
-import { MemoryRouter, useInRouterContext } from 'react-router';
+import type { WidgetConfig } from '../types';
+import type { WalletType } from '@rango-dev/wallets-shared';
+import type { PropsWithChildren } from 'react';
+
 import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
-import { WalletType } from '@rango-dev/wallets-shared';
-import { UpdateUrl } from './UpdateUrl';
-import { useMetaStore } from '../store/meta';
 import { useWallets } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-types';
+import React, { useEffect, useRef } from 'react';
+import { MemoryRouter, useInRouterContext } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { Home } from '../pages/Home';
+import { useMetaStore } from '../store/meta';
+
+import { UpdateUrl } from './UpdateUrl';
+
+function Route(props: PropsWithChildren) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const firstRender = useRef(true);
+  const paths = location.pathname.split('/');
+  const pathMatched = paths[paths.length - 1] === navigationRoutes.confirmSwap;
+  const shouldRedirectToMainPage = pathMatched && firstRender.current;
+
+  useEffect(() => {
+    if (shouldRedirectToMainPage) {
+      navigate('.');
+    }
+    firstRender.current = false;
+  }, []);
+
+  if (shouldRedirectToMainPage) {
+    return <Home />;
+  }
+
+  return <> {props.children}</>;
+}
 
 export function AppRouter({
   children,
@@ -14,9 +44,10 @@ export function AppRouter({
   lastConnectedWallet: string;
   disconnectedWallet: WalletType | undefined;
   clearDisconnectedWallet: () => void;
+  config: WidgetConfig | undefined;
 }) {
   const isRouterInContext = useInRouterContext();
-  const Router = isRouterInContext ? Fragment : MemoryRouter;
+  const Router = isRouterInContext ? Route : MemoryRouter;
   const { blockchains } = useMetaStore.use.meta();
   const { canSwitchNetworkTo } = useWallets();
 
@@ -33,7 +64,7 @@ export function AppRouter({
   return (
     <>
       <Router>{children}</Router>
-      {isRouterInContext && <UpdateUrl />}
+      {isRouterInContext && <UpdateUrl config={props.config} />}
     </>
   );
 }

package/src/components/AppRoutes.tsx

@@ -32,43 +32,19 @@ export function AppRoutes(props: PropTypes) {
     },
     {
       path: navigationRoutes.fromSwap,
-      element: (
-        <SelectSwapItemsPage
-          type="from"
-          supportedBlockchains={config?.from?.blockchains}
-          supportedTokens={config?.from?.tokens}
-          pinnedTokens={config?.pinnedTokens}
-        />
-      ),
+      element: <SelectSwapItemsPage type="source" />,
     },
     {
       path: navigationRoutes.toSwap,
-      element: (
-        <SelectSwapItemsPage
-          type="to"
-          supportedBlockchains={config?.to?.blockchains}
-          supportedTokens={config?.to?.tokens}
-          pinnedTokens={config?.pinnedTokens}
-        />
-      ),
+      element: <SelectSwapItemsPage type="destination" />,
     },
     {
       path: navigationRoutes.fromBlockchain,
-      element: (
-        <SelectBlockchainPage
-          type="from"
-          supportedBlockchains={config?.to?.blockchains}
-        />
-      ),
+      element: <SelectBlockchainPage type="source" />,
     },
     {
       path: navigationRoutes.toBlockchain,
-      element: (
-        <SelectBlockchainPage
-          type="to"
-          supportedBlockchains={config?.to?.blockchains}
-        />
-      ),
+      element: <SelectBlockchainPage type="destination" />,
     },
     {
       path: navigationRoutes.settings,

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/BlockchainList/BlockchainList.styles.ts

@@ -1,10 +1,15 @@
 import { styled } from '@rango-dev/ui';
 
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
 export const List = styled('ul', {
   padding: 0,
   margin: 0,
   listStyle: 'none',
-  height: 355,
   overflowY: 'auto',
   paddingRight: '$5',
   '.image-container': {
@@ -12,7 +17,3 @@ export const List = styled('ul', {
     overflow: 'hidden',
   },
 });
-
-export const Content = styled('div', {
-  minHeight: 325,
-});

package/src/components/BlockchainList/BlockchainList.tsx

@@ -14,7 +14,7 @@ import React, { useEffect, useState } from 'react';
 import { useMetaStore } from '../../store/meta';
 
 import { filterBlockchains } from './BlockchainList.helpers';
-import { Content, List } from './BlockchainList.styles';
+import { Container, List } from './BlockchainList.styles';
 import { LoadingBlockchainList } from './LoadingBlockchainList';
 
 export function BlockchainList(props: PropTypes) {
@@ -41,7 +41,7 @@ export function BlockchainList(props: PropTypes) {
       );
     }
     return (
-      <List>
+      <List key={`${blockchainCategory}-${searchedFor}`}>
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}
@@ -61,16 +61,13 @@ export function BlockchainList(props: PropTypes) {
   };
 
   return (
-    <div>
+    <Container>
       <Typography variant="label" size="large">
         {i18n.t('Select Blockchain')}
       </Typography>
       <Divider size={4} />
-
-      <Content>
-        {loadingStatus === 'loading' && <LoadingBlockchainList />}
-        {loadingStatus === 'success' && renderList()}
-      </Content>
-    </div>
+      {loadingStatus === 'loading' && <LoadingBlockchainList />}
+      {loadingStatus === 'success' && renderList()}
+    </Container>
   );
 }

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -2,41 +2,37 @@
 import type { PropTypes } from './BlockchainsSection.types';
 
 import { i18n } from '@lingui/core';
-import { Divider, Image, Skeleton, Typography } from '@rango-dev/ui';
-import { type BlockchainMeta } from 'rango-sdk';
-import React, { useEffect, useState } from 'react';
+import {
+  BlockchainsChip,
+  Divider,
+  Image,
+  Skeleton,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
 
+import { usePrepareBlockchainList } from '../../hooks/usePrepareBlockchainList';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
-import { BlockchainsChip } from '../BlockchainsChip';
 
-import { sortBlockchains } from './BlockchainSection.helpers';
 import { Container } from './BlockchainsSection.styles';
 
-const MIN = 9;
-const MAX = 10;
+const LIST_SIZE = 10;
+const MAX_ITEMS = LIST_SIZE + 1;
 const NUMBER_OF_LOADING = 12;
+
 export function BlockchainsSection(props: PropTypes) {
   const { blockchains, type, blockchain, onChange, onMoreClick } = props;
-  const sortedBlockchains = sortBlockchains(blockchains);
-  const [selectFromMoreBlockchain, setSelectFromMoreBlockchain] =
-    useState<BlockchainMeta | null>(null);
+  const blockchainsList = usePrepareBlockchainList(blockchains, {
+    limit: blockchains.length === MAX_ITEMS ? MAX_ITEMS : LIST_SIZE,
+    selected: blockchain?.name,
+  });
+
   const loadingStatus = useMetaStore.use.loadingStatus();
   const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
   const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
-  const COUNT_BLOCKCHAINS = !!selectFromMoreBlockchain ? MIN : MAX;
-
-  useEffect(() => {
-    const selectBlockchainFromMore = sortedBlockchains
-      .slice(MAX, sortedBlockchains.length)
-      .find(
-        (item) =>
-          item.chainId === blockchain?.chainId && item.name === blockchain?.name
-      );
-    if (!!selectBlockchainFromMore) {
-      setSelectFromMoreBlockchain(selectBlockchainFromMore);
-    }
-  }, [blockchain]);
+  const showMoreButton =
+    blockchains.length !== MAX_ITEMS && blockchainsList.more.length;
 
   return (
     <div>
@@ -65,18 +61,7 @@ export function BlockchainsSection(props: PropTypes) {
                 {i18n.t('All')}
               </Typography>
             </BlockchainsChip>
-            {!!selectFromMoreBlockchain && (
-              <BlockchainsChip
-                selected={
-                  !!selectFromMoreBlockchain &&
-                  selectFromMoreBlockchain.chainId === blockchain?.chainId
-                }
-                key={selectFromMoreBlockchain.chainId}
-                onClick={() => onChange(selectFromMoreBlockchain)}>
-                <Image src={selectFromMoreBlockchain.logo} size={30} />
-              </BlockchainsChip>
-            )}
-            {sortedBlockchains.slice(0, COUNT_BLOCKCHAINS).map((item) => (
+            {blockchainsList.list.map((item) => (
               <BlockchainsChip
                 key={item.chainId}
                 selected={!!blockchain && blockchain.chainId === item.chainId}
@@ -85,13 +70,15 @@ export function BlockchainsSection(props: PropTypes) {
               </BlockchainsChip>
             ))}
 
-            <BlockchainsChip onClick={onMoreClick}>
-              <Typography variant="body" size="xsmall" color="secondary500">
-                {i18n._('More +{count}', {
-                  count: sortedBlockchains.length - MAX,
-                })}
-              </Typography>
-            </BlockchainsChip>
+            {showMoreButton ? (
+              <BlockchainsChip onClick={onMoreClick}>
+                <Typography variant="body" size="xsmall" color="secondary500">
+                  {i18n._('More +{count}', {
+                    count: blockchainsList.more.length,
+                  })}
+                </Typography>
+              </BlockchainsChip>
+            ) : null}
           </>
         )}
       </Container>

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

@@ -2,10 +2,18 @@
 import type { Step } from '@rango-dev/ui/dist/widget/ui/src/components/BestRoute/BestRoute.types';
 import type { BestRouteResponse, BlockchainMeta } from 'rango-sdk';
 
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 
 export function formatBestRoute(
-  bestRoute: BestRouteResponse
+  bestRoute: BestRouteResponse,
+  blockchains: BlockchainMeta[]
 ): Step[] | undefined {
   return bestRoute.result?.swaps.map((swap) => {
     return {
@@ -13,23 +21,41 @@ export function formatBestRoute(
       from: {
         token: { displayName: swap.from.symbol, image: swap.from.logo },
         chain: {
-          displayName: swap.from.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
           image: swap.from.blockchainLogo,
         },
         price: {
-          value: numberToString(swap.fromAmount, 6, 6),
-          usdValue: numberToString(swap.from.usdPrice?.toString(), 6, 6),
+          value: numberToString(
+            swap.fromAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.from.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
         },
       },
       to: {
         token: { displayName: swap.to.symbol, image: swap.to.logo },
         chain: {
-          displayName: swap.to.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
           image: swap.to.blockchainLogo,
         },
         price: {
-          value: numberToString(swap.toAmount, 6, 6),
-          usdValue: numberToString(swap.to.usdPrice?.toString(), 6, 6),
+          value: numberToString(
+            swap.toAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: numberToString(
+            swap.to.usdPrice?.toString(),
+            USD_VALUE_MIN_DECIMALS,
+            USD_VALUE_MAX_DECIMALS
+          ),
         },
       },
     };

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

@@ -1,12 +1,15 @@
 import * as Collapsible from '@radix-ui/react-collapsible';
 import {
   Button,
+  darkTheme,
   IconButton,
   keyframes,
   styled,
   TextField,
 } from '@rango-dev/ui';
 
+export const EXPANDABLE_TRANSITION_DURATION = 300;
+
 const slideDown = keyframes({
   from: {
     height: 0,
@@ -45,14 +48,31 @@ export const WalletButton = styled('button', {
   border: '0',
   display: 'flex',
   justifyContent: 'center',
-  backgroundColor: '$neutral100',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
   alignItems: 'center',
   cursor: 'pointer',
   width: 110,
   position: 'relative',
+
   '&:hover': {
-    backgroundColor: '$surface600',
-    opacity: '0.8',
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
   },
   variants: {
     selected: {
@@ -70,6 +90,7 @@ export const Trigger = styled(Collapsible.Trigger, {
   outline: 'none',
   width: '100%',
   backgroundColor: 'transparent',
+  fontFamily: 'inherit',
 });
 
 export const ShowMoreHeader = styled('div', {
@@ -117,7 +138,27 @@ export const CustomDestinationButton = styled(Button, {
   padding: '$15 !important',
   justifyContent: 'space-between',
   alignItems: 'center',
-  backgroundColor: '$neutral100 !important',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:focus-visible': {
+    $$background: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$background: '$colors$info700',
+    },
+    backgroundColor: '$$background',
+    outline: 0,
+  },
 });
 
 export const CustomDestination = styled('div', {
@@ -131,7 +172,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: {
@@ -157,10 +198,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

@@ -2,6 +2,7 @@ import type { PropTypes } from './ConfirmWalletsModal.types';
 import type { ConnectedWallet } from '../../store/wallets';
 import type { ConfirmSwapWarnings, Wallet } from '../../types';
 
+import { i18n } from '@lingui/core';
 import {
   Alert,
   BalanceErrors,
@@ -14,9 +15,11 @@ 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';
+import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getRouteWarningMessage } from '../../constants/warnings';
 import { useBestRouteStore } from '../../store/bestRoute';
 import { useMetaStore } from '../../store/meta';
@@ -30,6 +33,7 @@ import {
   ConfirmButton,
   CustomDestination,
   CustomDestinationButton,
+  EXPANDABLE_TRANSITION_DURATION,
   ExpandedIcon,
   ListContainer,
   NavigateBack,
@@ -51,6 +55,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   const {
     bestRoute,
     setSelectedWallets: selectRouteWallets,
+    routeWalletsConfirmed,
     setRouteWalletConfirmed,
     customDestination,
     setCustomDestination,
@@ -67,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'
@@ -227,12 +234,26 @@ 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();
   return (
     <Modal
       open={open}
-      onClose={onClose}
+      onClose={() => {
+        if (!routeWalletsConfirmed) {
+          navigate(navigationRoutes.home, { replace: true });
+        }
+        onClose();
+      }}
       dismissible={!showMoreWalletFor}
       container={modalContainer}
       {...(!showMoreWalletFor && {
@@ -267,9 +288,13 @@ export function ConfirmWalletsModal(props: PropTypes) {
               onClick={setShowMoreWalletFor.bind(null, '')}>
               <ChevronLeftIcon size={16} />
             </NavigateBack>
-            <Typography
-              variant="headline"
-              size="small">{`Your ${showMoreWalletFor} wallets`}</Typography>
+            <Typography variant="headline" size="small">
+              {i18n.t({
+                id: 'yourWallets',
+                message: 'Your {blockchainName} wallets',
+                values: { blockchainName: showMoreWalletFor },
+              })}
+            </Typography>
           </ShowMoreHeader>
         ),
       })}
@@ -279,7 +304,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
         <MessageBox
-          title="Insufficient account balance"
+          title={i18n.t('Insufficient account balance')}
           type="error"
           description={<BalanceErrors messages={balanceWarnings ?? []} />}>
           <Button
@@ -288,7 +313,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
             type="primary"
             fullWidth
             onClick={onConfirmBalance}>
-            Proceed anyway
+            {i18n.t('Proceed anyway')}
           </Button>
         </MessageBox>
       </Modal>
@@ -311,7 +336,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         <>
           {error && (
             <>
-              <Alert variant="alarm" type="error" title={error} />
+              <Alert variant="alarm" type="error" title={i18n.t(error)} />
               <Divider size={12} />
             </>
           )}
@@ -332,18 +357,29 @@ export function ConfirmWalletsModal(props: PropTypes) {
               );
 
               const key = `wallet-${index}`;
-              const isLastWallet = index !== requiredWallets.length - 1;
+              const isLastWallet = index === requiredWallets.length - 1;
 
               return (
                 <div key={key}>
                   <Title>
-                    <Typography
-                      variant="title"
-                      size="xmedium">{`Your ${blockchain?.displayName} wallets`}</Typography>
+                    <Typography variant="title" size="xmedium">
+                      {i18n.t({
+                        id: 'yourWallets',
+                        message: 'Your {blockchainName} wallets',
+                        values: { blockchainName: blockchain?.displayName },
+                      })}
+                    </Typography>
                     <Typography
                       variant="label"
                       color="$neutral900"
-                      size="medium">{`You need to connect a ${blockchain?.displayName} wallet.`}</Typography>
+                      size="medium">
+                      {i18n.t({
+                        id: 'needConnect',
+                        message:
+                          'You need to connect a {blockchainName} wallet.',
+                        values: { blockchainName: blockchain?.displayName },
+                      })}
+                    </Typography>
                   </Title>
                   <Divider size={24} />
                   <ListContainer>
@@ -364,6 +400,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                   {isLastWallet && customDestinationEnabled && (
                     <CustomDestination>
                       <CollapsibleRoot
+                        ref={customDestinationRef}
                         selected={showCustomDestination}
                         open={showCustomDestination}
                         onOpenChange={(checked) => {
@@ -398,6 +435,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                           }>
                           <CustomDestinationButton
                             fullWidth
+                            variant="default"
                             suffix={
                               <ExpandedIcon
                                 orientation={
@@ -410,7 +448,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               <WalletIcon size={18} color="info" />
                               <Divider size={4} direction="horizontal" />
                               <Typography variant="label" size="medium">
-                                Send to a different address
+                                {i18n.t('Send to a different address')}
                               </Typography>
                             </div>
                           </CustomDestinationButton>
@@ -420,7 +458,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                             <Divider size={4} />
                             <StyledTextField
                               autoFocus
-                              placeholder="Your destination address"
+                              placeholder={i18n.t('Your destination address')}
                               value={destination}
                               onChange={(e) => {
                                 setDestination(e.target.value);
@@ -434,7 +472,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
                           <Alert
                             variant="alarm"
                             type="error"
-                            title={`Address '${destination}' doesn't match the blockchain address pattern.`}
+                            title={i18n.t({
+                              id: 'addressMatch',
+                              values: { destination },
+                              message:
+                                "Address {destination} doesn't match the blockchain address pattern.",
+                            })}
                           />
                         </div>
                       )}