@rango-dev/widget-embedded 0.40.2-next.8 → 0.41.0

package/src/components/TokenList/TokenList.tsx

@@ -1,25 +1,33 @@
 /* eslint-disable @typescript-eslint/no-magic-numbers */
-import type { PropTypes, RenderDescProps } from './TokenList.types';
-import type { BlockchainMeta, Token } from 'rango-sdk';
+import type { PropTypes, RenderDescProps, TokenData } from './TokenList.types';
 
 import { i18n } from '@lingui/core';
 import {
+  Button,
+  CustomTokenWarning,
   darkTheme,
   Divider,
   ExternalLinkIcon,
   Image,
-  ListItemButton,
+  ListItem,
   NotFound,
   PinIcon,
   Skeleton,
   Typography,
   VirtualizedList,
 } from '@rango-dev/ui';
-import React from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
+import { DEFAULT_TOKEN_IMAGE_SRC } from '../../constants/customTokens';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
 import { createTintsAndShades } from '../../utils/colors';
+import { getContainer } from '../../utils/common';
+import { findBlockchain } from '../../utils/meta';
 import { formatBalance } from '../../utils/wallets';
+import { ImportCustomToken } from '../ImportCustomToken';
 
 import { LoadingTokenList } from './LoadingTokenList';
 import {
@@ -29,8 +37,10 @@ import {
   End,
   ImageSection,
   List,
+  ListItemContainer,
   Pin,
   StyledLink,
+  StyledListItemButton,
   Tag,
   TagTitle,
   Title,
@@ -97,14 +107,57 @@ export function TokenList(props: PropTypes) {
     selectedBlockchain,
     showTitle = true,
     action,
+    type,
+    showWarning = true,
   } = props;
 
   const fetchStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
   const { getBalanceFor, fetchingWallets: loadingWallet } = useAppStore();
   const { isTokenPinned } = useAppStore();
+  const { setFromToken, setToToken } = useQuoteStore();
+  const { t } = useTranslation();
+  const navigateBack = useNavigateBack();
 
-  const endRenderer = (token: Token) => {
+  const [customToken, setCustomToken] = useState<TokenData | null>(null);
+
+  const updateToken = () => {
+    if (type === 'source') {
+      setFromToken({ token: customToken, meta: { blockchains } });
+    } else {
+      setToToken({ token: customToken, meta: { blockchains } });
+    }
+  };
+
+  const handleImportToken = () => {
+    updateToken();
+    navigateBack();
+  };
+
+  const endRenderer = (token: TokenData) => {
+    if (token.customToken) {
+      const { customToken, ...otherProps } = token;
+      const handleClick: React.MouseEventHandler<HTMLButtonElement> = (
+        event
+      ) => {
+        event.stopPropagation();
+        setCustomToken({ ...otherProps, warning: true });
+      };
+
+      return (
+        // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
+        <Button
+          variant="contained"
+          type="primary"
+          size="small"
+          className="widget-token-list-item-import-btn"
+          onClick={handleClick}>
+          <Typography variant="body" size="xsmall" color="background">
+            {t('import')}
+          </Typography>
+        </Button>
+      );
+    }
     const tokenBalance = formatBalance(getBalanceFor(token));
 
     if (action) {
@@ -144,10 +197,42 @@ export function TokenList(props: PropTypes) {
       <VirtualizedList
         itemContent={(index) => {
           const token = tokens[index];
+          if (token === 'skeleton') {
+            return (
+              <ListItem
+                hasDivider
+                start={<Skeleton variant="circular" width={35} height={35} />}
+                end={
+                  <End>
+                    <Skeleton variant="text" size="large" width={70} />
+                    <Divider size={4} />
+                    <Skeleton variant="text" size="medium" width={50} />
+                  </End>
+                }
+                title={
+                  <div>
+                    <Skeleton variant="text" size="large" width={90} />
+                    <Divider size={4} />
+                    <Skeleton variant="text" size="medium" width={90} />
+                  </div>
+                }
+              />
+            );
+          }
           const address = token.address || '';
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
-          ) as BlockchainMeta;
+          );
+
+          /**
+           * This block is added to satisfy TypeScript without using assertions and to prevent any errors that could break the app.
+           * Be cautious, as Virtuoso warns us if we return empty elements.
+           * If you need to exclude any items, do so before passing them to the virtual list.
+           */
+          if (!blockchain) {
+            return null;
+          }
+
           const colors = createTintsAndShades(blockchain.color, 'main');
           const customCssForTag = {
             $$color: colors.main150,
@@ -165,26 +250,32 @@ export function TokenList(props: PropTypes) {
             color: '$$color',
           };
 
+          const handleClick = () => {
+            if (typeof token !== 'string' && !token.customToken) {
+              onChange?.(token);
+            }
+          };
+
           return (
-            <div
-              style={{
-                paddingRight: 5,
-              }}>
-              <ListItemButton
-                style={{
-                  width: '100%',
-                  overflow: 'hidden',
-                  height: '60px',
-                }}
+            <ListItemContainer>
+              <StyledListItemButton
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
                 id={`${token.symbol}${token.address}`}
-                className={`widget-token-list-item-btn`}
+                className="widget-token-list-item-btn"
                 hasDivider
-                onClick={() => onChange && onChange(tokens[index])}
+                customToken={token.customToken}
+                onClick={handleClick}
                 start={
                   <ImageSection>
-                    <Image src={token.image} size={30} />
+                    <Image
+                      src={
+                        token.image === ''
+                          ? DEFAULT_TOKEN_IMAGE_SRC
+                          : token.image
+                      }
+                      size={30}
+                    />
                     {props.type !== 'custom-token' &&
                       isTokenPinned(token, props.type) && (
                         <Pin>
@@ -210,16 +301,23 @@ export function TokenList(props: PropTypes) {
                           {token.blockchain}
                         </TagTitle>
                       </Tag>
+                      {showWarning && token.warning && (
+                        <>
+                          <Divider direction="horizontal" size={4} />
+                          <CustomTokenWarning container={getContainer()} />
+                        </>
+                      )}
                     </Title>
                   ) : undefined
                 }
                 description={
+                  typeof token !== 'string' &&
                   !!blockchain?.info &&
                   !!address &&
                   blockchain.type !== 'COSMOS'
                     ? renderDesc({
                         address,
-                        token: tokens[index],
+                        token,
                         customCssForTag,
                         customCssForTagTitle,
                         name: token.name,
@@ -231,7 +329,7 @@ export function TokenList(props: PropTypes) {
                 }
                 end={endRenderer(token)}
               />
-            </div>
+            </ListItemContainer>
           );
         }}
         totalCount={tokens.length}
@@ -240,6 +338,10 @@ export function TokenList(props: PropTypes) {
     );
   };
 
+  const customTokenBlockchain = customToken
+    ? findBlockchain(customToken?.blockchain, blockchains)
+    : null;
+
   return (
     <>
       {showTitle && (
@@ -256,7 +358,17 @@ export function TokenList(props: PropTypes) {
         {fetchStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
         {fetchStatus === 'success' &&
           (tokens.length ? (
-            <List as="ul">{renderList()}</List>
+            <>
+              <ImportCustomToken
+                token={customToken}
+                address={customToken?.address ?? ''}
+                blockchain={customTokenBlockchain ?? undefined}
+                onImport={handleImportToken}
+                onExitErrorModal={() => setCustomToken(null)}
+                onExitImportModal={() => setCustomToken(null)}
+              />
+              <List as="ul">{renderList()}</List>
+            </>
           ) : (
             !!searchedFor && (
               <NotFound

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

@@ -1,14 +1,18 @@
 import type { Token } from 'rango-sdk';
 import type { ReactElement } from 'react';
 
+export type TokenData = Token &
+  (Token & { customToken?: boolean; warning?: boolean });
+
 export interface PropTypes {
-  list: Token[];
+  list: (TokenData | 'skeleton')[];
   searchedFor?: string;
   onChange?: (token: Token) => void;
   selectedBlockchain?: string;
   type: 'source' | 'destination' | 'custom-token';
   action?: (token: Token) => ReactElement;
   showTitle?: boolean;
+  showWarning?: boolean;
 }
 
 export interface LoadingTokenListProps {

package/src/constants/customTokens.ts

@@ -4,3 +4,6 @@ export const ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS: string[] = [
   TransactionType.EVM,
   TransactionType.SOLANA,
 ];
+
+export const DEFAULT_TOKEN_IMAGE_SRC =
+  'https://raw.githubusercontent.com/rango-exchange/assets/refs/heads/main/common/unknown-image.png';

package/src/containers/Inputs/Inputs.tsx

@@ -82,11 +82,12 @@ export function Inputs(props: PropTypes) {
           balance={fromTokenFormattedBalance}
           chain={{
             displayName: fromBlockchain?.displayName || '',
-            image: fromBlockchain?.logo || '',
+            image: fromBlockchain?.logo,
           }}
           token={{
             displayName: fromToken?.symbol || '',
-            image: fromToken?.image || '',
+            image: fromToken?.image,
+            securityWarning: !!fromToken?.warning,
           }}
           onClickToken={() => onClickToken('from')}
           price={{
@@ -133,11 +134,12 @@ export function Inputs(props: PropTypes) {
         fetchingQuote={fetchingQuote}
         chain={{
           displayName: toBlockchain?.displayName || '',
-          image: toBlockchain?.logo || '',
+          image: toBlockchain?.logo,
         }}
         token={{
           displayName: toToken?.symbol || '',
-          image: toToken?.image || '',
+          image: toToken?.image,
+          securityWarning: !!toToken?.warning,
         }}
         percentageChange={numberToString(
           getPriceImpact(inputUsdValue, outputUsdValue),

package/src/hooks/useFetchCustomToken.ts

@@ -1,3 +1,4 @@
+import type { TokenData } from '../components/TokenList/TokenList.types';
 import type { Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
@@ -6,36 +7,49 @@ import { useState } from 'react';
 import { httpService } from '../services/httpService';
 import { useAppStore } from '../store/AppStore';
 
-type ErrorType = {
+type ErrorType = 'duplicated' | 'not-found' | 'token-exist' | 'network-error';
+
+export type CustomTokenError = {
+  type: ErrorType;
   title: string;
   message: string;
 };
 
-interface UseFetchCustomToken {
+export interface UseFetchCustomToken {
   fetchCustomToken: ({
     blockchain,
     tokenAddress,
   }: {
     blockchain: string;
     tokenAddress: string;
-  }) => Promise<Token | undefined>;
+  }) => Promise<void>;
+  token: Token | null;
   loading: boolean;
-  error?: ErrorType;
+  error: CustomTokenError | null;
+  resetState: () => void;
 }
 
 export function useFetchCustomToken(): UseFetchCustomToken {
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<undefined | ErrorType>(undefined);
+  const [error, setError] = useState<CustomTokenError | null>(null);
+  const [token, setToken] = useState<TokenData | null>(null);
   const { findToken } = useAppStore();
   const customTokens = useAppStore().customTokens();
 
+  const resetState = () => {
+    setToken(null);
+    setLoading(false);
+    setError(null);
+  };
+
   function produceErrorMessage(
-    type: 'duplicated' | 'not-found' | 'token-exist',
+    type: ErrorType,
     blockchain?: string
-  ) {
+  ): CustomTokenError {
     switch (type) {
       case 'duplicated':
         return {
+          type,
           title: i18n.t('Duplicate Token'),
           message: i18n.t(
             'The address you entered is duplicate, please enter a new address.'
@@ -43,6 +57,7 @@ export function useFetchCustomToken(): UseFetchCustomToken {
         };
       case 'token-exist':
         return {
+          type,
           title: i18n.t('Token Already Exists'),
           message: i18n.t(
             `There's no need to add this token again because it already exists and is supported by us.`
@@ -50,6 +65,7 @@ export function useFetchCustomToken(): UseFetchCustomToken {
         };
       case 'not-found':
         return {
+          type,
           title: i18n.t('Token Not Found'),
           message: i18n.t({
             id: 'Sorry, no token was found on {blockchain} chain with the provided address. please make sure you have entered the right token address.',
@@ -58,6 +74,12 @@ export function useFetchCustomToken(): UseFetchCustomToken {
             },
           }),
         };
+      case 'network-error':
+        return {
+          type,
+          title: i18n.t('Network error'),
+          message: i18n.t('An error occurred while retrieving token data.'),
+        };
     }
   }
 
@@ -74,7 +96,7 @@ export function useFetchCustomToken(): UseFetchCustomToken {
       if (isDuplicate) {
         const errorMessage = produceErrorMessage('duplicated');
         setError(errorMessage);
-        return undefined;
+        return;
       }
 
       const response = await httpService().getCustomToken({
@@ -85,7 +107,7 @@ export function useFetchCustomToken(): UseFetchCustomToken {
       if (!response || !response.token || response.error) {
         const errorMessage = produceErrorMessage('not-found', blockchain);
         setError(errorMessage);
-        return undefined;
+        return;
       }
 
       // Check if token is already in the system
@@ -98,21 +120,22 @@ export function useFetchCustomToken(): UseFetchCustomToken {
       if (isTokenFound) {
         const errorMessage = produceErrorMessage('token-exist');
         setError(errorMessage);
-        return undefined;
+        return;
       }
 
-      return token;
+      return setToken({ ...token, warning: true });
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      if (error?.code === 'ERR_BAD_REQUEST') {
+      if (error.code === 'ERR_BAD_REQUEST') {
         const errorMessage = produceErrorMessage('not-found', blockchain);
         setError(errorMessage);
-        return undefined;
+        return;
       }
-      setError(undefined);
-      throw new Error(error.message);
+      setError(produceErrorMessage('network-error'));
+      return;
     } finally {
       setLoading(false);
     }
   };
-  return { fetchCustomToken, loading, error };
+  return { fetchCustomToken, token, loading, error, resetState };
 }

package/src/hooks/useSearchCustomTokens/index.ts

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

package/src/hooks/useSearchCustomTokens/types.ts

@@ -0,0 +1,9 @@
+import type { Token } from 'rango-sdk';
+
+export type UseSearchCustomTokens = {
+  fetch: (query: string, blockchain?: string) => void;
+  cancel: () => void;
+  loading: boolean;
+  tokens: Token[];
+  error: string | null;
+};

package/src/hooks/useSearchCustomTokens/useSearchCustomTokens.constants.ts

@@ -0,0 +1 @@
+export const DEBOUNCE_DELAY = 600;

package/src/hooks/useSearchCustomTokens/useSearchCustomTokens.ts

@@ -0,0 +1,81 @@
+import type { UseSearchCustomTokens } from './types';
+import type { Token } from 'rango-sdk';
+
+import { useCallback, useRef, useState } from 'react';
+
+import { httpService } from '../../services/httpService';
+import { useAppStore } from '../../store/AppStore';
+import { createAssetKey } from '../../store/utils/wallets';
+import { debounce } from '../../utils/common';
+
+import { DEBOUNCE_DELAY } from './useSearchCustomTokens.constants';
+
+export function useSearchCustomTokens(): UseSearchCustomTokens {
+  const blockchains = useAppStore().blockchains();
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const { customTokens } = useAppStore();
+  const [loading, setLoading] = useState(false);
+  const [tokens, setTokens] = useState<Token[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetch = async (query: string, blockchain?: string) => {
+    setError(null);
+    setLoading(true);
+    setTokens([]);
+
+    try {
+      const response = await httpService().searchCustomTokens(
+        { query, blockchain },
+        { signal: abortControllerRef.current?.signal }
+      );
+
+      const customTokensSet = new Set(
+        customTokens().map((token) => createAssetKey(token))
+      );
+      const blockchainsSet = new Set(
+        blockchains.map((blockchain) => blockchain.name)
+      );
+      const filteredTokens = response.tokens.filter(
+        (token) =>
+          blockchainsSet.has(token.blockchain) &&
+          !customTokensSet.has(createAssetKey(token))
+      );
+
+      setTokens(filteredTokens);
+      setLoading(false);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      setError(error instanceof Error ? error.message : 'something went wrong');
+      setTokens([]);
+      if (error?.name !== 'CanceledError') {
+        setLoading(false);
+      }
+    }
+  };
+
+  const debouncedFetch = useCallback(
+    debounce((query: string, blockchain?: string) => {
+      if (abortControllerRef.current?.signal.aborted) {
+        return;
+      }
+      void fetch(query, blockchain);
+    }, DEBOUNCE_DELAY),
+    [blockchains.length]
+  );
+
+  const cancel = () => {
+    abortControllerRef.current?.abort();
+  };
+  return {
+    fetch: (query: string, blockchain?: string) => {
+      abortControllerRef.current = new AbortController();
+      setTokens([]);
+      setLoading(true);
+      debouncedFetch(query, blockchain);
+    },
+    cancel,
+    loading,
+    tokens,
+    error,
+  };
+}

package/src/hooks/useSyncStoresWithConfig.ts

@@ -26,7 +26,6 @@ export function useSyncStoresWithConfig() {
   const config = useAppStore().config;
   const fetchMetaStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
   const { findToken } = useAppStore();
 
   const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
@@ -61,7 +60,7 @@ export function useSyncStoresWithConfig() {
       }
 
       if (token) {
-        setFromToken({ token, meta: { blockchains, tokens } });
+        setFromToken({ token, meta: { blockchains } });
       } else if (!token && prevConfigFromToken.current) {
         setFromToken({ token: null });
       }
@@ -111,7 +110,7 @@ export function useSyncStoresWithConfig() {
       }
 
       if (token) {
-        setToToken({ token, meta: { blockchains, tokens } });
+        setToToken({ token, meta: { blockchains } });
       } else if (!token && prevConfigToToken.current) {
         setToToken({ token: null });
       }

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -31,7 +31,6 @@ export function useSyncUrlAndStore() {
   } = useQuoteStore();
   const fetchMetaStatus = useAppStore().fetchStatus;
   const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
   const isInRouterContext = useInRouterContext();
   const { updateIframe, updateCampaignMode } = useAppStore();
   const campaignMode = useAppStore().isInCampaignMode();
@@ -157,7 +156,6 @@ export function useSyncUrlAndStore() {
             token: fromToken,
             meta: {
               blockchains: blockchains,
-              tokens: tokens,
             },
           });
         }
@@ -168,7 +166,7 @@ export function useSyncUrlAndStore() {
         if (!!toToken) {
           setToToken({
             token: toToken,
-            meta: { blockchains: blockchains, tokens: tokens },
+            meta: { blockchains: blockchains },
           });
         }
       }