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

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,7 @@
 import type { ConfigSlice } from './config';
 import type { DataSlice } from './data';
+import type { WalletsSlice } from './wallets';
+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,13 +48,13 @@ 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[];
 }
 
 export const createSettingsSlice: StateCreator<
-  SettingsSlice & DataSlice & ConfigSlice,
+  SettingsSlice & DataSlice & ConfigSlice & WalletsSlice,
   [],
   [],
   SettingsSlice
@@ -186,10 +188,15 @@ export const createSettingsSlice: StateCreator<
       }),
     });
   },
-  setCustomToken: (token) =>
+  setCustomToken: (token) => {
+    void get().fetchCustomTokensBalance({
+      tokens: [token],
+      connectedWallets: get().connectedWallets,
+    });
     set((state) => ({
       _customTokens: [token, ...state._customTokens],
-    })),
+    }));
+  },
   deleteCustomToken: (token) =>
     set((state) => ({
       _customTokens: state._customTokens.filter(

package/src/store/slices/wallets.ts

@@ -1,6 +1,6 @@
 import type { AppStoreState } from './types';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
-import type { Token, WalletDetail } from 'rango-sdk';
+import type { Asset, Token, WalletDetail } from 'rango-sdk';
 
 import BigNumber from 'bignumber.js';
 
@@ -24,6 +24,7 @@ import {
   extractAssetFromBalanceKey,
   removeBalanceFromAggregatedBalance,
   updateAggregatedBalanceStateForNewAccount,
+  updateBalancesWithNewPrices,
 } from '../utils/wallets';
 
 type WalletAddress = string;
@@ -124,6 +125,10 @@ export interface WalletsSlice {
     accounts: Wallet[],
     options?: { retryOnFailedBalances?: boolean }
   ) => Promise<void>;
+  fetchCustomTokensBalance: (params: {
+    tokens: Asset[];
+    connectedWallets: Wallet[];
+  }) => Promise<void>;
   getBalanceFor: (token: Token) => Balance | null;
   getBalances: () => BalanceState;
   getBalancesForWalletAddress: (address: string) => BalanceState;
@@ -295,6 +300,98 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
         });
       }
     },
+    fetchCustomTokensBalance: async (params) => {
+      const { tokens, connectedWallets } = params;
+
+      const tokensByBlockchain = tokens.reduce<{ [key: string]: Asset[] }>(
+        (acc, asset) => {
+          (acc[asset.blockchain] ||= []).push(asset);
+          return acc;
+        },
+        {}
+      );
+
+      const addedWallets = new Set<string>();
+
+      const tokensByWalletAddress = connectedWallets.reduce<{
+        [key: string]: Asset[];
+      }>((acc, wallet) => {
+        const key = `${wallet.address}-${wallet.chain}`;
+        if (addedWallets.has(key)) {
+          return acc;
+        }
+
+        addedWallets.add(key);
+        if (tokensByBlockchain[wallet.chain]) {
+          if (!acc[wallet.address]) {
+            acc[wallet.address] = [];
+          }
+          acc[wallet.address].push(...tokensByBlockchain[wallet.chain]);
+        }
+        return acc;
+      }, {});
+
+      Object.entries(tokensByWalletAddress).forEach(
+        async ([walletAddress, tokens]) => {
+          try {
+            const { balances } = await httpService().getMultipleTokenBalance({
+              assets: tokens.map(({ symbol, address, blockchain }) => ({
+                symbol,
+                address,
+                blockchain,
+              })),
+              walletAddress,
+            });
+
+            if (balances) {
+              let nextBalances: BalanceState = get()._balances;
+              let nextAggregatedBalances: AggregatedBalanceState =
+                get()._aggregatedBalances;
+
+              balances.forEach((balance) => {
+                if (parseFloat(balance.amount.amount) === 0) {
+                  return;
+                }
+
+                const WalletDetail = {
+                  blockChain: balance.asset.blockchain,
+                  balances: [balance],
+                  address: walletAddress,
+                };
+
+                updateBalancesWithNewPrices(WalletDetail, nextBalances, get);
+
+                const balancesForWallet = createBalanceStateForNewAccount(
+                  WalletDetail,
+                  get
+                );
+
+                nextAggregatedBalances =
+                  updateAggregatedBalanceStateForNewAccount(
+                    nextAggregatedBalances,
+                    balancesForWallet
+                  );
+
+                nextBalances = {
+                  ...nextBalances,
+                  ...balancesForWallet,
+                };
+              });
+
+              set((state) => ({
+                _balances: {
+                  ...state._balances,
+                  ...nextBalances,
+                },
+                _aggregatedBalances: nextAggregatedBalances,
+              }));
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
+      );
+    },
     setWalletsAsSelected: (wallets) => {
       const nextConnectedWalletsWithUpdatedSelectedStatus =
         get().connectedWallets.map((connectedWallet) => {
@@ -332,6 +429,10 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
       get().addConnectedWallet(accounts, namespace);
 
       void get().fetchBalances(accounts);
+      void get().fetchCustomTokensBalance({
+        tokens: get().customTokens(),
+        connectedWallets: accounts,
+      });
     },
     removeBalancesForWallet: (walletType, options) => {
       let walletsNeedsToBeRemoved = get().connectedWallets.filter(
@@ -562,7 +663,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
           }
         }
 
-        let nextBalances: BalanceState = {};
+        let nextBalances: BalanceState = get()._balances;
         let nextAggregatedBalances: AggregatedBalanceState =
           get()._aggregatedBalances;
         walletsDetails.forEach((wallet) => {
@@ -570,6 +671,8 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
             return;
           }
 
+          updateBalancesWithNewPrices(wallet, nextBalances, get);
+
           // Remove old balances for current wallet and blockchain
           get().removeBalancesForWallet(walletType, {
             chains: [wallet.blockChain],

package/src/store/utils/wallets.ts

@@ -44,8 +44,36 @@ export function extractAssetFromBalanceKey(key: BalanceKey): Asset {
   };
 }
 
+export function updateBalancesWithNewPrices(
+  wallet: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
+  balanceState: BalanceState,
+  store: () => AppStoreState
+): BalanceState {
+  wallet.balances?.forEach((balance) => {
+    const usdPrice =
+      balance.price ?? store().findToken(balance.asset)?.usdPrice;
+    const balancesToUpdate =
+      store()._aggregatedBalances[createAssetKey(balance.asset)];
+
+    balancesToUpdate?.forEach((balanceKey) => {
+      if (balanceState[balanceKey]) {
+        balanceState[balanceKey] = {
+          ...balanceState[balanceKey],
+          usdValue: usdPrice
+            ? new BigNumber(usdPrice ?? ZERO)
+                .multipliedBy(balanceState[balanceKey].amount)
+                .toString()
+            : '',
+        };
+      }
+    });
+  });
+
+  return balanceState;
+}
+
 export function createBalanceStateForNewAccount(
-  account: WalletDetail,
+  account: Omit<WalletDetail, 'failed' | 'explorerUrl'>,
   store: () => AppStoreState
 ): BalanceState {
   const state: BalanceState = {};
@@ -55,7 +83,8 @@ export function createBalanceStateForNewAccount(
     const amount = accountBalance.amount.amount;
     const decimals = accountBalance.amount.decimals;
 
-    const usdPrice = store().findToken(accountBalance.asset)?.usdPrice;
+    const usdPrice =
+      accountBalance.price ?? store().findToken(accountBalance.asset)?.usdPrice;
     const usdValue = usdPrice
       ? new BigNumber(usdPrice ?? ZERO).multipliedBy(amount).toString()
       : '';

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/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"}