@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,36 +1,30 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
 
-import { MessageBox, Wallet } from '@rango-dev/ui';
+import { MessageBox, Wallet, WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
 import { getContainer } from '../../utils/common';
-import { mapStatusToWalletState } from '../../utils/wallets';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const { type, title, currentStepWallet, message, showWalletButton } = props;
-  const { connect, getWalletInfo, state } = useWallets();
+  const { connect, getWalletInfo, state: walletState } = useWallets();
   const walletType = currentStepWallet?.walletType;
-  const walletState = walletType
-    ? mapStatusToWalletState(state(walletType))
-    : null;
-  const walletInfo = walletType ? getWalletInfo(walletType) : null;
-  const shouldShowWallet =
-    showWalletButton && !!walletType && !!walletState && !!walletInfo;
+  const isConnected = walletType && walletState(walletType).connected;
+  const state = isConnected ? WalletState.CONNECTED : WalletState.DISCONNECTED;
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
-      {shouldShowWallet && (
+      {showWalletButton && walletType && (
         <WalletContainer>
           <Wallet
             container={getContainer()}
-            title={walletInfo.name}
-            image={walletInfo.img}
+            title={getWalletInfo(walletType).name}
+            image={getWalletInfo(walletType).img}
             type={walletType}
-            state={walletState}
-            link={walletInfo.installLink}
+            state={state}
             onClick={async () => connect(walletType)}
           />
         </WalletContainer>

package/src/components/SwapDetailsModal/SwapDetailsModal.helpers.tsx

@@ -1,7 +1,7 @@
 import type { ModalNetworkValueTypes } from './SwapDetailsModal.types';
 
 import { i18n } from '@lingui/core';
-import { PendingSwapNetworkStatus } from 'rango-types';
+import { PendingSwapNetworkStatus } from '@rango-dev/queue-manager-rango-preset';
 
 export const modalNetworkValues: Record<
   Exclude<PendingSwapNetworkStatus, PendingSwapNetworkStatus.WaitingForQueue>,

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,18 +1,9 @@
-import { css, darkTheme, styled } from '@rango-dev/ui';
-
-export const groupStyles = css();
+import { styled } from '@rango-dev/ui';
 
 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, groupStyles, SwapList, Time } from './SwapsGroup.styles';
+import { Group, SwapList, Time } from './SwapsGroup.styles';
 
 export function SwapsGroup(props: PropTypes) {
   const { list, onSwapClick, groupBy, isLoading } = props;
@@ -34,7 +34,8 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  className={groupStyles()}>
+                  color="neutral600"
+                  className="group-title">
                   {i18n.t(group.title)}
                 </Typography>
               </Time>
@@ -67,7 +68,8 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  className={groupStyles()}>
+                  color="neutral600"
+                  className="group-title">
                   {i18n.t(group.title)}
                 </Typography>
               </Time>

package/src/components/SwitchFromAndTo.tsx

@@ -1,7 +1,7 @@
 import { ReverseIcon, styled } from '@rango-dev/ui';
 import React from 'react';
 
-import { useQuoteStore } from '../store/quote';
+import { useBestRouteStore } from '../store/bestRoute';
 
 const SwitchButtonContainer = styled('div', {
   position: 'absolute',
@@ -27,7 +27,7 @@ const StyledButton = styled('div', {
 });
 
 export function SwitchFromAndToButton() {
-  const switchFromAndTo = useQuoteStore.use.switchFromAndTo();
+  const switchFromAndTo = useBestRouteStore.use.switchFromAndTo();
 
   return (
     <SwitchButtonContainer>

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

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

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

@@ -1,51 +1,4 @@
-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();
+import { styled, Typography } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -70,25 +23,54 @@ 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': {
-      [`& .${descriptionStyles}`]: {
-        [`& .${tokenAddressStyles}`]: {
+      '.description': {
+        '.token-address': {
           position: 'absolute',
           transform: 'none',
           transition: 'transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms',
           visibility: 'visible',
         },
-
-        [`& .${tokenWithoutNameStyles}`]: {
+        '.token-address-without-name': {
           bottom: '-15px',
         },
-        [`& .${tokenNameStyles}`]: {
+        '.token-name': {
           position: 'absolute',
           transform: 'translateY(-12px)',
           visibility: 'hidden',
         },
-        [`& .${tokenTitleStyles}`]: {
+        '.token-title': {
           position: 'absolute',
           transform: 'translateY(-12px)',
           bottom: '-10px',
@@ -110,20 +92,9 @@ 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('div', {
+export const End = styled('ul', {
   display: 'flex',
   alignItems: 'end',
   flexDirection: 'column',
@@ -135,7 +106,7 @@ export const Description = styled('div', {
 });
 export const ImageSection = styled('div', {
   position: 'relative',
-  [`& ${ImageContainer}`]: {
+  '.image-container': {
     borderRadius: '$xm',
     overflow: 'hidden',
   },
@@ -148,10 +119,3 @@ 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,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { PropTypes, RenderDescProps } from './TokenList.types';
-import type { Token } from 'rango-sdk';
+import type {
+  PropTypes,
+  RenderDescProps,
+  TokenWithBalance,
+} from './TokenList.types';
 import type { CommonProps } from 'react-window';
 
 import { i18n } from '@lingui/core';
@@ -18,16 +21,15 @@ import {
 } from '@rango-dev/ui';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { useAppStore } from '../../store/AppStore';
+import { useAppStore } from '../../store/app';
+import { useMetaStore } from '../../store/meta';
 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,
@@ -35,12 +37,6 @@ import {
   Tag,
   TagTitle,
   Title,
-  tokenAddressStyles,
-  TokenBalance,
-  tokenNameStyles,
-  tokenTitleStyles,
-  tokenWithoutNameStyles,
-  usdValueStyles,
 } from './TokenList.styles';
 
 const PAGE_SIZE = 20;
@@ -51,11 +47,11 @@ const renderDesc = (props: RenderDescProps) => {
   const length = address.length;
 
   return (
-    <div className={descriptionStyles()}>
+    <div className="description">
       {name ? (
-        <div className={tokenNameStyles()}>{name}</div>
+        <div className="token-name">{name}</div>
       ) : (
-        <Title className={tokenTitleStyles()}>
+        <Title className="token-title">
           <Typography variant="title" size="xmedium">
             {token.symbol}
           </Typography>
@@ -70,9 +66,7 @@ const renderDesc = (props: RenderDescProps) => {
 
       {!!address && (
         <div
-          className={`${tokenAddressStyles()} ${
-            !name && tokenWithoutNameStyles()
-          }`}>
+          className={`token-address ${!name && 'token-address-without-name'}`}>
           <a
             href={url}
             target="_blank"
@@ -81,7 +75,6 @@ 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>
@@ -93,11 +86,11 @@ const renderDesc = (props: RenderDescProps) => {
 export function TokenList(props: PropTypes) {
   const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
-  const [tokens, setTokens] = useState<Token[]>(list);
-  const fetchStatus = useAppStore().fetchStatus;
-  const blockchains = useAppStore().blockchains();
+  const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
+  const loadingStatus = useMetaStore.use.loadingStatus();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
-  const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
+  const loadingWallet = useWalletsStore.use.loading();
+  const { blockchains } = useMetaStore.use.meta();
   const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
@@ -142,7 +135,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
@@ -177,8 +170,6 @@ export function TokenList(props: PropTypes) {
               <ListItemButton
                 style={{
                   height: style?.height,
-                  width: '100%',
-                  overflow: 'hidden',
                 }}
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
@@ -188,7 +179,7 @@ export function TokenList(props: PropTypes) {
                 start={
                   <ImageSection>
                     <Image src={token.image} size={30} />
-                    {isTokenPinned(token, props.type) && (
+                    {isTokenPinned(token) && (
                       <Pin>
                         <PinIcon size={12} color="gray" />
                       </Pin>
@@ -239,18 +230,18 @@ export function TokenList(props: PropTypes) {
                       <Skeleton variant="text" size="medium" width={50} />
                     </End>
                   ) : (
-                    tokenBalance && (
+                    tokens[index]?.balance && (
                       <BalanceContainer>
-                        <TokenBalance variant="title" size="small">
-                          {tokenBalance.amount}
-                        </TokenBalance>
+                        <Typography variant="title" size="small">
+                          {token.balance?.amount}
+                        </Typography>
                         <div />
-                        {tokenBalance.usdValue && (
+                        {token.balance?.usdValue && (
                           <Typography
                             variant="body"
-                            className={usdValueStyles()}
+                            color="neutral600"
                             size="xsmall">
-                            {`$${tokenBalance.usdValue}`}
+                            {`$${token.balance?.usdValue}`}
                           </Typography>
                         )}
                       </BalanceContainer>
@@ -277,8 +268,8 @@ export function TokenList(props: PropTypes) {
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
-      {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
-      {fetchStatus === 'success' && <List>{renderList()}</List>}
+      {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
+      {loadingStatus === 'success' && <List>{renderList()}</List>}
     </Container>
   );
 }

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

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

package/src/components/TokenList/index.ts

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

package/src/components/UpdateUrl.tsx

@@ -1,3 +1,5 @@
+import type { WidgetConfig } from '../types';
+
 import { useEffect, useRef } from 'react';
 import {
   createSearchParams,
@@ -7,31 +9,34 @@ import {
 
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
-import { searchParamsToToken } from '../utils/quote';
+import { searchParamsToToken } from '../utils/routing';
+
+type Props = { config: WidgetConfig | undefined };
 
-export function UpdateUrl() {
+export function UpdateUrl(props: Props) {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const firstRenderSearchParams = useRef(location.search);
   const searchParamsRef = useRef<Record<string, string>>({});
-  const fromBlockchain = useQuoteStore.use.fromBlockchain();
-  const toBlockchain = useQuoteStore.use.toBlockchain();
-  const fromToken = useQuoteStore.use.fromToken();
-  const toToken = useQuoteStore.use.toToken();
-  const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const setFromToken = useQuoteStore.use.setFromToken();
-  const setToBlockchain = useQuoteStore.use.setToBlockchain();
-  const setToToken = useQuoteStore.use.setToToken();
-  const inputAmount = useQuoteStore.use.inputAmount();
-  const setInputAmount = useQuoteStore.use.setInputAmount();
-  const fetchMetaStatus = useAppStore().fetchStatus;
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
+  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
+  const toBlockchain = useBestRouteStore.use.toBlockchain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const { blockchains, tokens } = useMetaStore.use.meta();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  useSyncStoresWithConfig(props.config);
 
   useEffect(() => {
     const params: Record<string, string> = {};
@@ -55,8 +60,7 @@ export function UpdateUrl() {
         toChainString = '',
         toTokenString = '',
         fromAmount = '';
-      const autoConnect = searchParamsRef.current[SearchParams.AUTO_CONNECT];
-      if (fetchMetaStatus !== 'success') {
+      if (loadingStatus !== 'success') {
         fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
         fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];
         toChainString = searchParamsRef.current[SearchParams.TO_CHAIN];
@@ -64,6 +68,9 @@ export function UpdateUrl() {
         fromAmount =
           searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
+        if (location.state === 'redirect') {
+          return;
+        }
         fromChainString = fromBlockchain?.name || '';
         fromTokenString =
           (fromToken?.symbol || '') +
@@ -87,9 +94,6 @@ export function UpdateUrl() {
           ...(fromAmount && {
             [SearchParams.FROM_AMOUNT]: fromAmount.toString(),
           }),
-          ...(autoConnect && {
-            [SearchParams.AUTO_CONNECT]: autoConnect,
-          }),
         },
         { replace: true }
       );
@@ -105,7 +109,7 @@ export function UpdateUrl() {
   ]);
 
   useEffect(() => {
-    if (fetchMetaStatus === 'success') {
+    if (loadingStatus === 'success') {
       const fromChainString = searchParams.get(SearchParams.FROM_CHAIN);
       const fromTokenString = searchParams.get(SearchParams.FROM_TOKEN);
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
@@ -130,29 +134,20 @@ export function UpdateUrl() {
       if (!!fromBlockchain) {
         setFromBlockchain(fromBlockchain);
         if (!!fromToken) {
-          setFromToken({
-            token: fromToken,
-            meta: {
-              blockchains: blockchains,
-              tokens: tokens,
-            },
-          });
+          setFromToken(fromToken);
         }
       }
       if (!!toBlockchain) {
         setToBlockchain(toBlockchain);
         if (!!toToken) {
-          setToToken({
-            token: toToken,
-            meta: { blockchains: blockchains, tokens: tokens },
-          });
+          setToToken(toToken);
         }
       }
       if (fromAmount) {
         setInputAmount(fromAmount);
       }
     }
-  }, [fetchMetaStatus]);
+  }, [loadingStatus]);
 
   return null;
 }

package/src/components/WidgetEvents.tsx

@@ -8,13 +8,11 @@ import {
 } from '@rango-dev/queue-manager-rango-preset';
 import { useEffect } from 'react';
 
-import { useAppStore } from '../store/AppStore';
 import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
 import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
-  const tokens = useAppStore().tokens();
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
@@ -40,8 +38,8 @@ export function WidgetEvents() {
             (wallet) => wallet.chain === step?.toBlockchain
           );
 
-        fromAccount && getWalletsDetails([fromAccount], tokens);
-        toAccount && getWalletsDetails([toAccount], tokens);
+        fromAccount && getWalletsDetails([fromAccount]);
+        toAccount && getWalletsDetails([toAccount]);
       }
       if (
         (event.type === StepEventType.TX_EXECUTION_BLOCKED &&