@rango-dev/widget-embedded 0.17.1-next.8 → 0.18.0

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -1,7 +1,7 @@
 import type { ModalPropTypes } from './SwapDetailsModal.types';
 
-import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
 import { Modal } from '@rango-dev/ui';
+import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
 import { CancelContent } from './SwapDetailsModal.Cancel';

package/src/components/SwapDetailsModal/SwapDetailsModal.types.ts

@@ -1,5 +1,5 @@
-import type { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
 import type { WalletType } from '@rango-dev/wallets-shared';
+import type { PendingSwapNetworkStatus } from 'rango-types';
 
 export type ModalState =
   | Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -1,9 +1,18 @@
-import { styled } from '@rango-dev/ui';
+import { css, darkTheme, styled } from '@rango-dev/ui';
+
+export const groupStyles = css();
 
 export const Group = styled('div', {
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  [`& .${groupStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Time = styled('div', {

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { limitDecimalPlaces } from '../../utils/numbers';
 
-import { Group, SwapList, Time } from './SwapsGroup.styles';
+import { Group, groupStyles, SwapList, Time } from './SwapsGroup.styles';
 
 export function SwapsGroup(props: PropTypes) {
   const { list, onSwapClick, groupBy, isLoading } = props;
@@ -34,8 +34,7 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
-                  className="group-title">
+                  className={groupStyles()}>
                   {i18n.t(group.title)}
                 </Typography>
               </Time>
@@ -68,8 +67,7 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
-                  className="group-title">
+                  className={groupStyles()}>
                   {i18n.t(group.title)}
                 </Typography>
               </Time>

package/src/components/TokenList/TokenList.helpers.ts

@@ -1,8 +1,8 @@
-import type { TokenWithBalance } from './TokenList.types';
+import type { Token } from 'rango-sdk';
 
 import { containsText } from '../../utils/common';
 
-export const filterTokens = (list: TokenWithBalance[], searchedFor: string) =>
+export const filterTokens = (list: Token[], searchedFor: string) =>
   list.filter(
     (token) =>
       containsText(token.symbol, searchedFor) ||

package/src/components/TokenList/TokenList.styles.ts

@@ -1,4 +1,51 @@
-import { styled, Typography } from '@rango-dev/ui';
+import {
+  css,
+  darkTheme,
+  ImageContainer,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
+
+export const tokenNameStyles = css({
+  position: 'absolute',
+  transform: 'none',
+  transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: 100,
+  overflow: 'hidden',
+});
+export const descriptionStyles = css({
+  position: 'relative',
+  height: 12,
+  width: '30%',
+  maxWidth: '150px',
+});
+export const tokenTitleStyles = css({
+  position: 'absolute',
+  transform: 'none',
+  transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  bottom: '-8px',
+});
+export const tokenAddressStyles = css({
+  transform: 'translateY(12px)',
+  visibility: 'hidden',
+  '& a': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    fontSize: '$12',
+    lineHeight: '$16',
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+    textDecoration: 'none',
+  },
+});
+export const tokenWithoutNameStyles = css({});
+export const usdValueStyles = css();
 
 export const Container = styled('div', {
   display: 'flex',
@@ -23,54 +70,25 @@ export const List = styled('ul', {
   listStyle: 'none',
   '& li': {
     alignItems: 'none',
-    '.description': {
-      position: 'relative',
-      height: 12,
-      width: 150,
-      '.token-title': {
-        position: 'absolute',
-        transform: 'none',
-        transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-        bottom: '-8px',
-      },
 
-      '.token-address': {
-        transform: 'translateY(12px)',
-        visibility: 'hidden',
-        '& a': {
-          fontSize: '$12',
-          lineHeight: '$16',
-          color: '$neutral600',
-          textDecoration: 'none',
-        },
-      },
-      '.token-name': {
-        position: 'absolute',
-        transform: 'none',
-        transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        maxWidth: 100,
-        overflow: 'hidden',
-      },
-    },
     '&:hover': {
-      '.description': {
-        '.token-address': {
+      [`& .${descriptionStyles}`]: {
+        [`& .${tokenAddressStyles}`]: {
           position: 'absolute',
           transform: 'none',
           transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
           visibility: 'visible',
         },
-        '.token-address-without-name': {
+
+        [`& .${tokenWithoutNameStyles}`]: {
           bottom: '-15px',
         },
-        '.token-name': {
+        [`& .${tokenNameStyles}`]: {
           position: 'absolute',
           transform: 'translateY(-12px)',
           visibility: 'hidden',
         },
-        '.token-title': {
+        [`& .${tokenTitleStyles}`]: {
           position: 'absolute',
           transform: 'translateY(-12px)',
           bottom: '-10px',
@@ -92,9 +110,20 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  [`& .${usdValueStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
-export const End = styled('ul', {
+export const End = styled('div', {
   display: 'flex',
   alignItems: 'end',
   flexDirection: 'column',
@@ -106,7 +135,7 @@ export const Description = styled('div', {
 });
 export const ImageSection = styled('div', {
   position: 'relative',
-  '.image-container': {
+  [`& ${ImageContainer}`]: {
     borderRadius: '$xm',
     overflow: 'hidden',
   },
@@ -119,3 +148,10 @@ export const Pin = styled('div', {
   bottom: -6,
   right: -6,
 });
+
+export const TokenBalance = styled(Typography, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

package/src/components/TokenList/TokenList.tsx

@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type {
-  PropTypes,
-  RenderDescProps,
-  TokenWithBalance,
-} from './TokenList.types';
+import type { PropTypes, RenderDescProps } from './TokenList.types';
+import type { Token } from 'rango-sdk';
 import type { CommonProps } from 'react-window';
 
 import { i18n } from '@lingui/core';
@@ -24,11 +21,13 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/colors';
+import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
 import {
   BalanceContainer,
   Container,
+  descriptionStyles,
   End,
   ImageSection,
   List,
@@ -36,6 +35,12 @@ import {
   Tag,
   TagTitle,
   Title,
+  tokenAddressStyles,
+  TokenBalance,
+  tokenNameStyles,
+  tokenTitleStyles,
+  tokenWithoutNameStyles,
+  usdValueStyles,
 } from './TokenList.styles';
 
 const PAGE_SIZE = 20;
@@ -46,11 +51,11 @@ const renderDesc = (props: RenderDescProps) => {
   const length = address.length;
 
   return (
-    <div className="description">
+    <div className={descriptionStyles()}>
       {name ? (
-        <div className="token-name">{name}</div>
+        <div className={tokenNameStyles()}>{name}</div>
       ) : (
-        <Title className="token-title">
+        <Title className={tokenTitleStyles()}>
           <Typography variant="title" size="xmedium">
             {token.symbol}
           </Typography>
@@ -65,7 +70,9 @@ const renderDesc = (props: RenderDescProps) => {
 
       {!!address && (
         <div
-          className={`token-address ${!name && 'token-address-without-name'}`}>
+          className={`${tokenAddressStyles()} ${
+            !name && tokenWithoutNameStyles()
+          }`}>
           <a
             href={url}
             target="_blank"
@@ -74,6 +81,7 @@ const renderDesc = (props: RenderDescProps) => {
             {length > 10
               ? `${address.slice(0, 5)}...${address.slice(length - 6, length)}`
               : address}{' '}
+            <Divider size={4} direction="horizontal" />
             <ExternalLinkIcon color="gray" size={12} />
           </a>
         </div>
@@ -85,11 +93,11 @@ const renderDesc = (props: RenderDescProps) => {
 export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
-  const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
+  const [tokens, setTokens] = useState<Token[]>(list);
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const loadingWallet = useWalletsStore.use.loading();
+  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
@@ -134,7 +142,7 @@ export function TokenList(props: PropTypes) {
       <VirtualizedList
         Item={({ index, style }) => {
           const token = tokens[index];
-
+          const tokenBalance = formatBalance(getBalanceFor(token));
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
@@ -169,6 +177,8 @@ export function TokenList(props: PropTypes) {
               <ListItemButton
                 style={{
                   height: style?.height,
+                  width: '100%',
+                  overflow: 'hidden',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
@@ -178,7 +188,7 @@ export function TokenList(props: PropTypes) {
                 start={
                   <ImageSection>
                     <Image src={token.image} size={30} />
-                    {isTokenPinned(token) && (
+                    {isTokenPinned(token, props.type) && (
                       <Pin>
                         <PinIcon size={12} color="gray" />
                       </Pin>
@@ -229,18 +239,18 @@ export function TokenList(props: PropTypes) {
                       <Skeleton variant="text" size="medium" width={50} />
                     </End>
                   ) : (
-                    tokens[index]?.balance && (
+                    tokenBalance && (
                       <BalanceContainer>
-                        <Typography variant="title" size="small">
-                          {token.balance?.amount}
-                        </Typography>
+                        <TokenBalance variant="title" size="small">
+                          {tokenBalance.amount}
+                        </TokenBalance>
                         <div />
-                        {token.balance?.usdValue && (
+                        {tokenBalance.usdValue && (
                           <Typography
                             variant="body"
-                            color="neutral600"
+                            className={usdValueStyles()}
                             size="xsmall">
-                            {`$${token.balance?.usdValue}`}
+                            {`$${tokenBalance.usdValue}`}
                           </Typography>
                         )}
                       </BalanceContainer>

package/src/components/TokenList/TokenList.types.ts

@@ -1,17 +1,11 @@
 import type { Token } from 'rango-sdk';
 
-export interface TokenWithBalance extends Token {
-  balance?: {
-    amount: string;
-    usdValue: string;
-  };
-}
-
 export interface PropTypes {
-  list: TokenWithBalance[];
+  list: Token[];
   searchedFor?: string;
-  onChange: (token: TokenWithBalance) => void;
+  onChange: (token: Token) => void;
   selectedBlockchain?: string;
+  type: 'source' | 'destination';
 }
 
 export interface LoadingTokenListProps {
@@ -22,7 +16,7 @@ export interface RenderDescProps {
   name?: string | null;
   address: string;
   url: string;
-  token: TokenWithBalance;
+  token: Token;
   customCssForTag: TagCSS;
   customCssForTagTitle: TitleCSS;
 }

package/src/components/TokenList/index.ts

@@ -1,2 +1 @@
 export { TokenList } from './TokenList';
-export type { TokenWithBalance } from './TokenList.types';

package/src/components/UpdateUrl.tsx

@@ -7,7 +7,6 @@ import {
 
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
-import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
@@ -33,7 +32,6 @@ export function UpdateUrl() {
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  useSyncStoresWithConfig();
 
   useEffect(() => {
     const params: Record<string, string> = {};
@@ -57,6 +55,7 @@ export function UpdateUrl() {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
+      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
       if (fetchMetaStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
@@ -65,9 +64,6 @@ export function UpdateUrl() {
         fromAmount =
           searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
-        if (location.state === 'redirect') {
-          return;
-        }
         fromChainString = fromBlockchain?.name || '';
         fromTokenString =
           (fromToken?.symbol || '') +
@@ -91,6 +87,9 @@ export function UpdateUrl() {
           ...(fromAmount && {
             [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
           }),
+          ...(autoConnect && {
+            [SearchParams.AUTO_CONNECT]: autoConnect,
+          }),
         },
         { replace: true }
       );

package/src/constants/errors.ts

@@ -10,18 +10,22 @@ export const errorMessages = () => {
     liquiditySourcesError: {
       title: i18n.t('Please reset your liquidity sources.'),
       description: i18n.t(
-        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
+        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources.'
       ),
     },
     noResultError: {
-      title: i18n.t('No Routes Found'),
+      title: i18n.t('No Routes Found.'),
       description: i18n.t(
         "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
       ),
     },
     bridgeLimitErrors: {
-      increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
-      decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
+      increaseAmount: i18n.t(
+        'Bridge Limit Error: Please increase your amount.'
+      ),
+      decreaseAmount: i18n.t(
+        'Bridge Limit Error: Please decrease your amount.'
+      ),
     },
     highValueLossError: {
       impactTitle: i18n.t('High Price Impact'),
@@ -29,7 +33,7 @@ export const errorMessages = () => {
       description: i18n.t(
         'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
       ),
-      confirmMessage: i18n.t('Confirm High price impact'),
+      confirmMessage: i18n.t('Confirm high price impact'),
     },
     quoteUpdatedWithHighValueLoss: {
       title: i18n.t(

package/src/constants/index.ts

@@ -1 +1,2 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+export const DEFAULT_BASE_URL = 'https://api.rango.exchange';

package/src/constants/navigationRoutes.ts

@@ -1,17 +1,16 @@
 export const navigationRoutes = {
   home: '/',
   fromSwap: 'from-swap',
-  fromBlockchain: '/from-swap/blockchains',
-  toBlockchain: '/to-swap/blockchains',
   toSwap: 'to-swap',
+  blockchains: 'blockchains',
   settings: 'settings',
-  liquiditySources: '/settings/liquidity-sources',
-  themes: '/settings/themes',
-  bridges: '/settings/bridges',
-  exchanges: '/settings/exchanges',
-  languages: '/settings/languages',
+  liquiditySources: 'liquidity-sources',
+  themes: 'themes',
+  bridges: 'bridges',
+  exchanges: 'exchanges',
+  languages: 'languages',
   swaps: 'swaps',
   wallets: 'wallets',
   confirmSwap: 'confirm-swap',
-  swapDetails: 'swaps/:requestId',
+  swapDetails: ':requestId',
 };

package/src/constants/searchParams.ts

@@ -4,4 +4,5 @@ export enum SearchParams {
   'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
+  'AUTO_CONNECT' = 'autoConnect',
 }

package/src/containers/App/App.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const MainContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: '$widget',
+  boxSizing: 'border-box',
+  '& *, *::before, *::after': {
+    boxSizing: 'inherit',
+    listStyleType: 'none',
+  },
+  '& *:focus-visible': {
+    outlineColor: '$info500',
+    transition: 'none',
+  },
+});

package/src/containers/App/App.tsx

@@ -0,0 +1,52 @@
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import { I18nManager } from '@rango-dev/ui';
+import React, { useContext, useEffect, useState } from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { AppRoutes } from '../../components/AppRoutes';
+import { WidgetEvents } from '../../components/WidgetEvents';
+import { globalFont } from '../../globalStyles';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { WidgetContext } from '../Wallets';
+
+import { MainContainer } from './App.styles';
+
+export function Main() {
+  globalFont();
+
+  const { config } = useAppStore();
+  const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage, changeLanguage } = useLanguage();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  useEffect(() => {
+    void useNotificationStore.persist.rehydrate();
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+  }, []);
+  useEffect(() => {
+    changeLanguage(config?.language);
+  }, [config?.language]);
+
+  return (
+    <I18nManager language={activeLanguage}>
+      <MainContainer id="swap-container" className={activeTheme()}>
+        <WidgetEvents />
+        <AppRouter
+          lastConnectedWallet={lastConnectedWalletWithNetwork}
+          disconnectedWallet={disconnectedWallet}
+          clearDisconnectedWallet={() => {
+            setDisconnectedWallet(undefined);
+          }}>
+          <AppRoutes />
+        </AppRouter>
+      </MainContainer>
+    </I18nManager>
+  );
+}

package/src/containers/App/index.ts

@@ -0,0 +1 @@
+export { Main } from './App';

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -1,8 +1,24 @@
 import { styled } from '@rango-dev/ui';
 
+export const PositionTopAlerts = styled('div', {
+  paddingBottom: '$10',
+});
+
 export const QuoteContainer = styled('div', {
   width: '100%',
-  paddingTop: '$2',
+  '& .position-top__skeleton': {
+    paddingTop: '$10',
+  },
+});
+
+export const SkeletonContainer = styled('div', {
+  variants: {
+    paddingTop: {
+      true: {
+        paddingTop: '$10',
+      },
+    },
+  },
 });
 
 export const FooterStepAlarm = styled('div', {