@rango-dev/widget-embedded 0.40.2-next.1 → 0.40.2-next.10

package/src/pages/AddCustomTokenPage.tsx

@@ -5,25 +5,21 @@ import {
   darkTheme,
   Divider,
   DoneIcon,
-  MessageBox,
   styled,
   TextField,
   Typography,
 } from '@rango-dev/ui';
-import { type Token } from 'rango-sdk';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { BlockchainSelectorButton } from '../components/BlockchainSelectorButton';
-import { WatermarkedModal } from '../components/common/WatermarkedModal';
-import { CustomTokenModal } from '../components/CustomTokenModal';
+import { ImportCustomToken } from '../components/ImportCustomToken';
 import { Layout, PageContainer } from '../components/Layout';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
 import { useFetchCustomToken } from '../hooks/useFetchCustomToken';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
-import { getContainer } from '../utils/common';
 import { findBlockchain, isValidTokenAddress } from '../utils/meta';
 
 const Content = styled('div', {
@@ -41,68 +37,31 @@ const Content = styled('div', {
     height: '$40',
   },
 });
-const CUSTOM_TOKEN_REFRESH_DELAY = 1000;
 
 export function AddCustomTokenPage() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const navigateBack = useNavigateBack();
-  const { setCustomToken } = useAppStore();
   const blockchains = useAppStore().blockchains();
 
   const blockchainName = searchParams.get(SearchParams.BLOCKCHAIN) || '';
   const blockchain = findBlockchain(blockchainName, blockchains);
   const [address, setAddress] = useState('');
-  const [isOpenErrorModal, setIsOpenErrorModal] = useState<boolean>(false);
-  const [token, setToken] = useState<Token>();
-  const { fetchCustomToken, loading, error } = useFetchCustomToken();
-  const [networkError, setNetworkError] = useState('');
+  const { fetchCustomToken, token, loading, error, resetState } =
+    useFetchCustomToken();
   const isValidAddress =
     !!blockchain && isValidTokenAddress(blockchain, address);
   const isImportDisabled = !blockchain || !address || !isValidAddress;
 
-  const getCustomToken = async () => {
+  const getCustomToken = () => {
     if (blockchain) {
-      try {
-        const res = await fetchCustomToken({
-          blockchain: blockchainName,
-          tokenAddress: address,
-        });
-        setNetworkError('');
-        if (!!res) {
-          setToken(res);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (error: any) {
-        if (error.message === 'Failed to fetch') {
-          setNetworkError(i18n.t('Network Error'));
-          setIsOpenErrorModal(true);
-        }
-      }
+      void fetchCustomToken({
+        blockchain: blockchainName,
+        tokenAddress: address,
+      });
     }
   };
 
-  const closeErrorModal = () => {
-    if (!!error) {
-      setAddress('');
-    }
-    setIsOpenErrorModal(false);
-  };
-
-  const handleErrorModalButtonClick = async () => {
-    if (!!networkError) {
-      setTimeout(async () => {
-        await getCustomToken();
-      }, CUSTOM_TOKEN_REFRESH_DELAY);
-    }
-    closeErrorModal();
-  };
-
-  useEffect(() => {
-    if (!!error) {
-      setIsOpenErrorModal(true);
-    }
-  }, [error]);
   return (
     <Layout
       header={{
@@ -164,50 +123,21 @@ export function AddCustomTokenPage() {
             {i18n.t('Import')}
           </Button>
         </Content>
-        <WatermarkedModal
-          open={isOpenErrorModal}
-          dismissible
-          onClose={closeErrorModal}
-          container={getContainer()}>
-          <MessageBox
-            title={error?.title || networkError}
-            type="error"
-            description={
-              error?.message || i18n.t('Failed Network, Please retry.')
-            }>
-            <Divider size={40} />
-            <Divider size={10} />
-            {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
-            <Button
-              id={`widget-add-custom-token-${
-                networkError ? 'retry' : 'add-another'
-              }-btn`}
-              variant="contained"
-              size="large"
-              type="primary"
-              fullWidth
-              onClick={handleErrorModalButtonClick}>
-              {networkError
-                ? i18n.t('Retry')
-                : i18n.t('Add another custom token')}
-            </Button>
-          </MessageBox>
-        </WatermarkedModal>
-        {blockchain && token && (
-          <CustomTokenModal
-            blockchain={blockchain}
-            token={token}
-            onSubmitClick={() => {
-              if (token) {
-                setCustomToken(token);
-                setToken(undefined);
-                navigateBack();
-              }
-            }}
-            onClose={() => setToken(undefined)}
-            open={!!blockchain && !!token}
-          />
-        )}
+        <ImportCustomToken
+          token={token}
+          blockchain={blockchain ?? undefined}
+          address={address}
+          error={error ?? undefined}
+          fetchCustomToken={fetchCustomToken}
+          onCloseErrorModal={() => {
+            if (error?.type !== 'network-error') {
+              setAddress('');
+            }
+          }}
+          onImport={navigateBack}
+          onExitErrorModal={resetState}
+          onExitImportModal={resetState}
+        />
       </PageContainer>
     </Layout>
   );

package/src/pages/CustomTokensPage.tsx

@@ -108,6 +108,7 @@ export function CustomTokensPage() {
                 type="custom-token"
                 searchedFor={searchedFor}
                 showTitle={false}
+                showWarning={false}
                 action={(token) => (
                   <DeleteIconButton
                     id="widget-custom-token-delete-icon-btn"

package/src/pages/SelectSwapItemPage/SelectSwapItemPage.constants.ts

@@ -0,0 +1,2 @@
+export const MAX_TOKENS_BEFORE_FETCH = 20;
+export const MIN_SEARCH_LENGTH = 3;

package/src/pages/SelectSwapItemPage/SelectSwapItemPage.helpers.ts

@@ -0,0 +1,51 @@
+import type { TokenList } from '../../components/TokenList';
+import type { Token } from 'rango-sdk';
+import type { ComponentProps } from 'react';
+
+import {
+  MAX_TOKENS_BEFORE_FETCH,
+  MIN_SEARCH_LENGTH,
+} from './SelectSwapItemPage.constants';
+
+export function shouldSearchForCustomTokens(
+  metaSearchResultTokens: Token[],
+  query: string,
+  blockchain?: string
+) {
+  if (
+    blockchain &&
+    metaSearchResultTokens.length === 1 &&
+    metaSearchResultTokens[0].address === query
+  ) {
+    return false;
+  }
+  return (
+    metaSearchResultTokens.length < MAX_TOKENS_BEFORE_FETCH &&
+    query.trim().length >= MIN_SEARCH_LENGTH
+  );
+}
+
+export function prepareTokensList(
+  tokens: Token[],
+  customTokens: Token[],
+  query: string,
+  loading: boolean,
+  blockchain?: string
+) {
+  let modifiedList: ComponentProps<typeof TokenList>['list'] = [...tokens];
+
+  if (shouldSearchForCustomTokens(tokens, query, blockchain)) {
+    modifiedList = loading
+      ? [...modifiedList, 'skeleton', 'skeleton', 'skeleton']
+      : [
+          ...modifiedList,
+          ...customTokens.map((customToken) => ({
+            ...customToken,
+            customToken: true,
+            warning: true,
+          })),
+        ];
+  }
+
+  return modifiedList;
+}

package/src/pages/{SelectSwapItemsPage.tsx → SelectSwapItemPage/SelectSwapItemsPage.tsx}

@@ -1,18 +1,24 @@
 import type { BlockchainMeta, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
-import { Divider } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import { Divider, Spinner } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { BlockchainsSection } from '../components/BlockchainsSection';
-import { Layout, PageContainer } from '../components/Layout';
-import { SearchInput } from '../components/SearchInput';
-import { TokenList } from '../components/TokenList';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { useAppStore } from '../store/AppStore';
-import { useQuoteStore } from '../store/quote';
+import { BlockchainsSection } from '../../components/BlockchainsSection';
+import { Layout, PageContainer } from '../../components/Layout';
+import { SearchInput } from '../../components/SearchInput';
+import { TokenList } from '../../components/TokenList';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
+import { useSearchCustomTokens } from '../../hooks/useSearchCustomTokens';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+import {
+  prepareTokensList,
+  shouldSearchForCustomTokens,
+} from './SelectSwapItemPage.helpers';
 
 interface PropTypes {
   type: 'source' | 'destination';
@@ -31,6 +37,12 @@ export function SelectSwapItemsPage(props: PropTypes) {
     setToBlockchain,
   } = useQuoteStore();
   const { getBalanceFor } = useAppStore();
+  const {
+    fetch,
+    loading,
+    tokens: customTokens,
+    cancel,
+  } = useSearchCustomTokens();
   const [searchedFor, setSearchedFor] = useState<string>('');
 
   const selectedBlockchain = type === 'source' ? fromBlockchain : toBlockchain;
@@ -47,6 +59,14 @@ export function SelectSwapItemsPage(props: PropTypes) {
     getBalanceFor: getBalanceFor,
   });
 
+  const modifiedTokens = prepareTokensList(
+    tokens,
+    customTokens,
+    searchedFor,
+    loading,
+    selectedBlockchain?.name
+  );
+
   const updateBlockchain = (blockchain: BlockchainMeta) => {
     if (type === 'source') {
       setFromBlockchain(blockchain);
@@ -57,9 +77,9 @@ export function SelectSwapItemsPage(props: PropTypes) {
 
   const updateToken = (token: Token) => {
     if (type === 'source') {
-      setFromToken({ token, meta: { blockchains, tokens } });
+      setFromToken({ token, meta: { blockchains } });
     } else {
-      setToToken({ token, meta: { blockchains, tokens } });
+      setToToken({ token, meta: { blockchains } });
     }
   };
   const types = {
@@ -67,6 +87,18 @@ export function SelectSwapItemsPage(props: PropTypes) {
     destination: i18n.t('Destination'),
   };
 
+  useEffect(() => {
+    if (
+      shouldSearchForCustomTokens(tokens, searchedFor, selectedBlockchain?.name)
+    ) {
+      fetch(searchedFor, selectedBlockchain?.name ?? undefined);
+    }
+
+    return () => {
+      cancel();
+    };
+  }, [tokens.length, searchedFor, selectedBlockchain?.name]);
+
   return (
     <Layout
       header={{
@@ -92,10 +124,19 @@ export function SelectSwapItemsPage(props: PropTypes) {
           size="large"
           setValue={() => setSearchedFor('')}
           onChange={(event) => setSearchedFor(event.target.value)}
+          suffix={
+            shouldSearchForCustomTokens(
+              tokens,
+              searchedFor,
+              selectedBlockchain?.name
+            ) && loading ? (
+              <Spinner size={12} color="secondary" />
+            ) : undefined
+          }
         />
         <Divider size={16} />
         <TokenList
-          list={tokens}
+          list={modifiedTokens}
           selectedBlockchain={selectedBlockchainName}
           searchedFor={searchedFor}
           type={type}

package/src/pages/SelectSwapItemPage/index.ts

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

package/src/store/app.ts

@@ -1,5 +1,5 @@
-import type { AppStoreState } from './slices/types';
 import type { WidgetConfig } from '../types';
+import type { AppStoreState } from './slices/types';
 import type { StateCreator } from 'zustand';
 
 import { create } from 'zustand';
@@ -48,6 +48,17 @@ export function createAppStore(initialData?: WidgetConfig) {
             disabledLiquiditySources: state.disabledLiquiditySources,
           };
         },
+        version: 1,
+        migrate: (persistedState, version) => {
+          const state = persistedState as AppStoreState;
+          if (version === 0) {
+            state._customTokens = state._customTokens.map((token) => ({
+              ...token,
+              warning: true,
+            }));
+          }
+          return state;
+        },
       }
     )
   );

package/src/store/quote.ts

@@ -1,3 +1,4 @@
+import type { TokenData } from '../components/TokenList/TokenList.types';
 import type {
   BlockchainMeta,
   MetaResponse,
@@ -35,7 +36,9 @@ export const getUsdValue = (
 
 export type Meta = Pick<MetaResponse, 'blockchains' | 'tokens'>;
 
-export type SetTokenParams = { token: Token; meta: Meta } | { token: null };
+export type SetTokenParams =
+  | { token: TokenData; meta: { blockchains: BlockchainMeta[] } }
+  | { token: null };
 
 type SomeQuoteState = {
   quotes: MultiRouteResponse | null;
@@ -58,9 +61,9 @@ export interface QuoteState {
   inputUsdValue: BigNumber | null;
   outputAmount: BigNumber | null;
   outputUsdValue: BigNumber | null;
-  fromToken: Token | null;
+  fromToken: TokenData | null;
   sortStrategy: PreferenceType;
-  toToken: Token | null;
+  toToken: TokenData | null;
   quoteWalletsConfirmed: boolean;
   selectedWallets: Wallet[];
   quoteWarningsConfirmed: boolean;

package/src/store/slices/settings.ts

@@ -1,5 +1,6 @@
 import type { ConfigSlice } from './config';
 import type { DataSlice } from './data';
+import type { TokenData } from '../../components/TokenList/TokenList.types';
 import type { WidgetConfig } from '../../types';
 import type { SwapperMeta, Token } from 'rango-sdk';
 import type { StateCreator } from 'zustand';
@@ -46,7 +47,7 @@ export interface SettingsSlice {
   ) => void;
   addPreferredBlockchain: (blockchain: string) => void;
   updateSettings: (config: WidgetConfig) => void;
-  setCustomToken: (token: Token) => void;
+  setCustomToken: (token: TokenData) => void;
   deleteCustomToken: (token: Token) => void;
   customTokens: () => Token[];
 }

package/src/store/slices/wallets.ts

@@ -259,6 +259,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
             return {
               address: account.address,
               chain: account.chain,
+              isContractWallet: account.isContractWallet,
               explorerUrl: null,
               walletType: account.walletType,
               selected: shouldMarkWalletAsSelected,

package/src/types/config.ts

@@ -2,6 +2,7 @@ import type { Language, theme } from '@rango-dev/ui';
 import type { LegacyProviderInterface } from '@rango-dev/wallets-core/dist/legacy/mod';
 import type { WalletType } from '@rango-dev/wallets-shared';
 import type { Asset } from 'rango-sdk';
+import type { ReactElement } from 'react';
 
 export type WidgetVariant = 'default' | 'expanded' | 'full-expanded';
 
@@ -273,6 +274,10 @@ export type WidgetConfig = {
   __UNSTABLE_OR_INTERNAL__?: {
     walletConnectListedDesktopWalletLink?: string;
     autoUpdateSettings?: boolean; // If true, settings will be updated automatically based on the configuration.
+    swapBoxBanner?: {
+      element: ReactElement;
+      routes?: string[];
+    };
   };
   routing?: Routing;
 };

package/src/types/wallets.ts

@@ -5,6 +5,7 @@ export interface Wallet {
   chain: string;
   address: string;
   walletType: WalletType;
+  isContractWallet?: boolean;
 }
 
 export type Balance = {

package/src/utils/quote.ts

@@ -293,7 +293,7 @@ export function getPriceImpact(
 
 export const getUniqueBlockchains = (steps: Step[]) => {
   const set = new Set();
-  const result: { displayName: string; image: string }[] = [];
+  const result: { displayName: string; image?: string }[] = [];
   steps.forEach((step) => {
     if (!set.has(step.from.chain.displayName)) {
       set.add(step.from.chain.displayName);

package/src/utils/swap.ts

@@ -455,6 +455,7 @@ export function createQuoteRequestBody(params: {
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
   destination?: string;
+  contractCall: boolean;
 }): BestRouteRequest {
   const {
     fromToken,
@@ -470,6 +471,7 @@ export function createQuoteRequestBody(params: {
     affiliatePercent,
     affiliateWallets,
     destination,
+    contractCall,
   } = params;
   const selectedWalletsMap = selectedWallets?.reduce(
     (
@@ -509,6 +511,7 @@ export function createQuoteRequestBody(params: {
     connectedWallets,
     selectedWallets: selectedWalletsMap ?? {},
     slippage: slippage.toString(),
+    contractCall,
     ...(destination && { destination: destination }),
     ...(excludeLiquiditySources && {
       swapperGroups: disabledLiquiditySources.concat(liquiditySources ?? []),

package/src/utils/wallets.ts

@@ -45,6 +45,8 @@ export type ExtendedModalWalletInfo = WalletInfoWithExtra &
   Pick<ExtendedWalletInfo, 'properties' | 'isHub'>;
 
 export function mapStatusToWalletState(state: WalletState): WalletStatus {
+  // TODO: refactor
+  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
   switch (true) {
     case state.connected:
       return WalletStatus.CONNECTED;
@@ -137,7 +139,11 @@ export function prepareAccountsForWalletStore(
 ): Wallet[] {
   const result: Wallet[] = [];
 
-  function addAccount(network: Network, address: string) {
+  function addAccount(
+    network: Network,
+    address: string,
+    isContractWallet?: boolean
+  ) {
     const accountForChainAlreadyExists = !!result.find(
       (account) => account.chain === network
     );
@@ -146,6 +152,7 @@ export function prepareAccountsForWalletStore(
         address,
         chain: network,
         walletType: wallet,
+        isContractWallet: isContractWallet ?? false,
       };
 
       result.push(newAccount);
@@ -192,7 +199,7 @@ export function prepareAccountsForWalletStore(
          * for contract wallets like Safe wallet, we should add only account for the
          * current connected blockchain not all of the supported blockchains
          */
-        addAccount(network, address.toLowerCase());
+        addAccount(network, address.toLowerCase(), isContractWallet);
       } else {
         /*
          * all evm chains are not supported in wallets, so we are adding

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAiGnD"}