@rango-dev/widget-embedded 0.31.1-next.2 → 0.32.0

package/src/constants/customTokens.ts

@@ -0,0 +1,6 @@
+import { TransactionType } from 'rango-types';
+
+export const ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS: string[] = [
+  TransactionType.EVM,
+  TransactionType.SOLANA,
+];

package/src/constants/navigationRoutes.ts

@@ -4,6 +4,8 @@ export const navigationRoutes = {
   toSwap: 'to-swap',
   blockchains: 'blockchains',
   settings: 'settings',
+  customTokens: 'custom-tokens',
+  addCustomTokens: 'add-custom-tokens',
   liquiditySources: 'liquidity-sources',
   bridges: 'bridges',
   exchanges: 'exchanges',

package/src/constants/searchParams.ts

@@ -5,6 +5,9 @@ export enum SearchParams {
   TO_TOKEN = 'toToken',
   FROM_AMOUNT = 'fromAmount',
   AUTO_CONNECT = 'autoConnect',
+
+  // This is for custom tokens
+  BLOCKCHAIN = 'blockchain',
   /*
    * dApps can transmit liquidity sources as a search parameter,
    * and these take precedence over widget configurations

package/src/containers/Settings/Lists.tsx

@@ -20,6 +20,7 @@ import {
   styled,
   Switch,
   Tabs,
+  TargetIcon,
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
@@ -97,9 +98,11 @@ export function SettingsLists() {
   const {
     config: { features },
   } = useAppStore();
+  const customTokens = useAppStore().customTokens();
   const isThemeHidden = isFeatureHidden('theme', features);
   const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
   const isLanguageHidden = isFeatureHidden('language', features);
+  const isCustomTokensHidden = isFeatureHidden('customTokens', features);
 
   const infiniteApprove = useAppStore().infiniteApprove;
   const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
@@ -185,6 +188,25 @@ export function SettingsLists() {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
+  const customTokensItem = {
+    id: 'custom-tokens-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Custom Tokens')}
+      </Typography>
+    ),
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {`${customTokens.length}`}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    start: <TargetIcon color="gray" size={16} />,
+    onClick: () => navigate(navigationRoutes.customTokens),
+  };
   const languageItem = {
     id: 'language-item',
     title: (
@@ -261,7 +283,9 @@ export function SettingsLists() {
   const settingItems: ListPropTypes['items'] = isLiquidityHidden
     ? []
     : [bridgeItem, exchangeItem];
-
+  if (!isCustomTokensHidden) {
+    settingItems.push(customTokensItem);
+  }
   if (!isLanguageHidden) {
     settingItems.push(languageItem);
   }

package/src/hooks/useFetchCustomToken.ts

@@ -0,0 +1,114 @@
+import type { Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { useState } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { getConfig } from '../utils/configs';
+
+type ErrorType = {
+  title: string;
+  message: string;
+};
+
+interface UseFetchCustomToken {
+  fetchCustomToken: ({
+    blockchain,
+    tokenAddress,
+  }: {
+    blockchain: string;
+    tokenAddress: string;
+  }) => Promise<Token>;
+  loading: boolean;
+  error?: ErrorType;
+}
+
+export function useFetchCustomToken(): UseFetchCustomToken {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<undefined | ErrorType>(undefined);
+  const { findToken } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+
+  function produceErrorMessage(
+    type: 'duplicated' | 'not-found' | 'token-exist',
+    blockchain?: string
+  ) {
+    switch (type) {
+      case 'duplicated':
+        return {
+          title: i18n.t('Duplicate Token'),
+          message: i18n.t(
+            'The address you entered is duplicate, please enter a new address.'
+          ),
+        };
+      case 'token-exist':
+        return {
+          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.`
+          ),
+        };
+      case 'not-found':
+        return {
+          title: i18n.t('Token Not Found'),
+          message: i18n.t(
+            `Sorry, no token was found on ${blockchain} blockchain with the provided address. please make sure you have entered the right token address.`
+          ),
+        };
+    }
+  }
+
+  const fetchCustomToken: UseFetchCustomToken['fetchCustomToken'] = async ({
+    blockchain,
+    tokenAddress,
+  }) => {
+    setLoading(true);
+    try {
+      // Check for duplicate token in customTokens
+      const isDuplicate = customTokens.some(
+        (token) => token.address?.toLowerCase() === tokenAddress.toLowerCase()
+      );
+      if (isDuplicate) {
+        const errorMessage = produceErrorMessage('duplicated');
+        setError(errorMessage);
+        return undefined;
+      }
+
+      const res = await fetch(
+        `${getConfig('BASE_URL')}/meta/token?apiKey=${getConfig(
+          'API_KEY'
+        )}&blockchain=${blockchain}&address=${tokenAddress}`
+      );
+      const contentType = res.headers.get('content-type');
+      const response =
+        contentType &&
+        contentType.includes('application/json') &&
+        (await res.json());
+      if (!response || response.error) {
+        const errorMessage = produceErrorMessage('not-found', blockchain);
+        setError(errorMessage);
+        return undefined;
+      }
+
+      // Check if token is already in the system
+      const isTokenFound = findToken({
+        blockchain: response.blockchain,
+        address: response.address,
+        symbol: response.symbol,
+      });
+      if (isTokenFound) {
+        const errorMessage = produceErrorMessage('token-exist');
+        setError(errorMessage);
+        return undefined;
+      }
+
+      return response;
+    } catch (error: any) {
+      setError(undefined);
+      throw new Error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { fetchCustomToken, loading, error };
+}

package/src/hooks/useSwapInput.ts

@@ -11,6 +11,8 @@ import { isPositiveNumber } from '../utils/numbers';
 import {
   generateQuoteWarnings,
   getDefaultQuote,
+  getQuoteFromTokenUsdPrice,
+  getQuoteToTokenUsdPrice,
   sortQuotesBy,
 } from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
@@ -146,12 +148,15 @@ export function useSwapInput({
             requestId: quote?.requestId || '',
             swaps: quote?.swaps,
           });
-
+          const outputUsdValue =
+            getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice;
+          const inputUsdValue =
+            getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice;
           const quoteWarning =
             quote &&
             generateQuoteWarnings(quote, {
-              fromToken,
-              toToken,
+              fromToken: { ...fromToken, usdPrice: inputUsdValue },
+              toToken: { ...toToken, usdPrice: outputUsdValue },
               userSlippage,
               findToken,
             });

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -54,6 +54,8 @@ export function useSyncUrlAndStore() {
     const clientUrl = searchParams.get(SearchParams.CLIENT_URL);
     const liquiditySources = searchParams.get(SearchParams.LIQUIDITY_SOURCES);
 
+    const blockchain = searchParams.get(SearchParams.BLOCKCHAIN);
+
     return {
       fromAmount,
       fromBlockchain,
@@ -64,6 +66,7 @@ export function useSyncUrlAndStore() {
       clientUrl,
       liquiditySources,
       utmQueryParams,
+      blockchain,
     };
   };
 
@@ -79,7 +82,8 @@ export function useSyncUrlAndStore() {
   };
 
   useEffect(() => {
-    const { autoConnect, clientUrl, utmQueryParams } = getUrlSearchParams();
+    const { autoConnect, clientUrl, utmQueryParams, blockchain } =
+      getUrlSearchParams();
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -89,6 +93,7 @@ export function useSyncUrlAndStore() {
         [SearchParams.FROM_AMOUNT]: inputAmount,
         [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
         [SearchParams.CLIENT_URL]: clientUrl ?? undefined,
+        [SearchParams.BLOCKCHAIN]: blockchain ?? undefined,
         [SearchParams.LIQUIDITY_SOURCES]: campaignMode
           ? liquiditySourcesParamsRef.current
           : undefined,

package/src/hooks/useTheme.ts

@@ -93,8 +93,12 @@ export function useTheme(props: WidgetTheme) {
     if (theme === 'auto') {
       return OSTheme === 'dark' ? darkClassNames : lightClassNames;
     }
+
     return theme === 'dark' ? darkClassNames : lightClassNames;
   };
 
-  return { activeTheme: getActiveTheme };
+  return {
+    activeTheme: getActiveTheme,
+    mode: theme === 'auto' ? OSTheme : theme,
+  };
 }

package/src/pages/AddCustomTokenPage.tsx

@@ -0,0 +1,210 @@
+import { i18n } from '@lingui/core';
+import {
+  Alert,
+  Button,
+  darkTheme,
+  Divider,
+  DoneIcon,
+  MessageBox,
+  styled,
+  TextField,
+  Typography,
+} from '@rango-dev/ui';
+import { type Token } from 'rango-sdk';
+import React, { useEffect, 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 { 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', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  flex: 1,
+  '& ._text-field': {
+    padding: '$4 $10',
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+    borderRadius: '$sm',
+    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 isValidAddress =
+    !!blockchain && isValidTokenAddress(blockchain, address);
+  const isImportDisabled = !blockchain || !address || !isValidAddress;
+
+  const getCustomToken = async () => {
+    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);
+        }
+      }
+    }
+  };
+
+  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={{
+        title: i18n.t('Add Custom Token'),
+      }}>
+      <PageContainer>
+        <Content>
+          <div>
+            <BlockchainSelectorButton
+              onClick={() =>
+                navigate(navigationRoutes.blockchains, { replace: true })
+              }
+              hasLogo={!!blockchain?.logo}
+              value={
+                !!blockchain
+                  ? {
+                      name: blockchain.displayName,
+                      logo: blockchain.logo,
+                    }
+                  : undefined
+              }
+              title={i18n.t('Select chain')}
+              placeholder={i18n.t('Select chain')}
+            />
+            <Divider size={'24'} />
+            <Typography size="large" variant="label">
+              {i18n.t('Enter Address')}
+            </Typography>
+            <Divider size={10} />
+            <TextField
+              fullWidth
+              disabled={!blockchain}
+              variant="contained"
+              placeholder={i18n.t('Enter token address')}
+              size="large"
+              value={address}
+              suffix={
+                !!address &&
+                isValidAddress && <DoneIcon color="success" size={12} />
+              }
+              onChange={(e) => setAddress(e.target.value)}
+            />
+            {!isValidAddress && !!address && (
+              <>
+                <Divider size={4} />
+                <Alert type="error" variant="alarm" title="Invalid Address" />
+              </>
+            )}
+          </div>
+
+          <Button
+            disabled={isImportDisabled}
+            type="primary"
+            variant="contained"
+            loading={loading}
+            size="large"
+            onClick={getCustomToken}>
+            {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} />
+
+            <Button
+              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}
+          />
+        )}
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/pages/CustomTokensPage.tsx

@@ -0,0 +1,184 @@
+import type { Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  CustomTokensZeroStateDarkIcon,
+  CustomTokensZeroStateIcon,
+  DeleteIcon,
+  Divider,
+  IconButton,
+  MessageBox,
+  NotFound,
+  styled,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { WatermarkedModal } from '../components/common/WatermarkedModal';
+import { Layout, PageContainer } from '../components/Layout';
+import { SearchInput } from '../components/SearchInput';
+import { TokenList } from '../components/TokenList';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useTheme } from '../hooks/useTheme';
+import { useAppStore } from '../store/AppStore';
+import { useQuoteStore } from '../store/quote';
+import { containsText, getContainer } from '../utils/common';
+import { createTokenHash } from '../utils/meta';
+
+const Content = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  flex: 1,
+});
+const NotFoundContent = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0.75',
+});
+const DeleteIconButton = styled(IconButton, {
+  '&:hover': {
+    '& svg': {
+      color: '$secondary550',
+    },
+  },
+});
+export function CustomTokensPage() {
+  const [searchedFor, setSearchedFor] = useState<string>('');
+  const { deleteCustomToken } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+  const { fromToken, toToken, setFromToken, setToToken } = useQuoteStore();
+  const { mode } = useTheme({});
+  const navigate = useNavigate();
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
+  const [selectedToken, setSelectedToken] = useState<Token>();
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchedFor(value);
+  };
+  const isDarkTheme = mode === 'dark';
+
+  const customTokensResults = customTokens.filter(
+    (token) =>
+      containsText(token.symbol, searchedFor) ||
+      containsText(token.address || '', searchedFor) ||
+      containsText(token.name || '', searchedFor)
+  );
+
+  const handleDeleteCustomToken = () => {
+    if (selectedToken) {
+      const toTokenHash = toToken ? createTokenHash(toToken) : null;
+      const fromTokenHash = fromToken ? createTokenHash(fromToken) : null;
+      const selectedTokenHash = createTokenHash(selectedToken);
+
+      if (toTokenHash === selectedTokenHash) {
+        setToToken({ token: null });
+      } else if (fromTokenHash === selectedTokenHash) {
+        setFromToken({ token: null });
+      }
+      deleteCustomToken(selectedToken);
+    }
+    setIsDeleteModalOpen(false);
+  };
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Custom Tokens'),
+      }}>
+      <PageContainer>
+        <Content>
+          {!!customTokens.length ? (
+            <>
+              <SearchInput
+                value={searchedFor}
+                setValue={setSearchedFor}
+                fullWidth
+                color="light"
+                variant="contained"
+                placeholder={i18n.t('Search Token')}
+                onChange={handleSearch}
+              />
+              <Divider size={16} />
+              <TokenList
+                list={customTokensResults}
+                type="custom-token"
+                searchedFor={searchedFor}
+                showTitle={false}
+                action={(token) => (
+                  <DeleteIconButton
+                    variant="ghost"
+                    onClick={() => {
+                      setIsDeleteModalOpen(true);
+                      setSelectedToken(token);
+                    }}>
+                    <DeleteIcon size={12} color="gray" />
+                  </DeleteIconButton>
+                )}
+              />
+            </>
+          ) : (
+            <NotFoundContent>
+              <NotFound
+                icon={
+                  isDarkTheme ? (
+                    <CustomTokensZeroStateDarkIcon size={200} />
+                  ) : (
+                    <CustomTokensZeroStateIcon size={200} />
+                  )
+                }
+                title={i18n.t('No custom tokens')}
+                description={i18n.t(
+                  'press the button to add your custom token'
+                )}
+              />
+            </NotFoundContent>
+          )}
+          <Divider size={20} />
+
+          <Button
+            type="primary"
+            variant="contained"
+            size="large"
+            onClick={() => navigate(navigationRoutes.addCustomTokens)}>
+            {i18n.t('Add Custom Token')}
+          </Button>
+        </Content>
+        <WatermarkedModal
+          open={isDeleteModalOpen}
+          dismissible
+          onClose={() => setIsDeleteModalOpen(false)}
+          container={getContainer()}>
+          <MessageBox
+            title={i18n.t('Delete Custom Token')}
+            type="error"
+            description={i18n.t('Are you sure you want to Delete this Token?')}>
+            <Divider size={40} />
+            <Divider size={10} />
+
+            <Button
+              fullWidth
+              variant="contained"
+              type="primary"
+              size="large"
+              onClick={handleDeleteCustomToken}>
+              {i18n.t('Yes, Delete it')}
+            </Button>
+            <Divider size={12} />
+            <Button
+              fullWidth
+              variant="outlined"
+              type="primary"
+              size="large"
+              onClick={() => setIsDeleteModalOpen(false)}>
+              {i18n.t('No, Continue')}
+            </Button>
+          </MessageBox>
+        </WatermarkedModal>
+      </PageContainer>
+    </Layout>
+  );
+}

package/src/pages/HistoryPage.tsx

@@ -87,7 +87,7 @@ export function HistoryPage() {
   const loading = !state.loadedFromPersistor;
   const [filterBy, setFilterBy] = useState('');
   const [openClearModal, setOpenClearModal] = useState(false);
-  const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
@@ -159,7 +159,7 @@ export function HistoryPage() {
             variant="contained"
             placeholder={i18n.t('Search Transaction')}
             autoFocus
-            onChange={searchHandler}
+            onChange={handleSearch}
             style={{ height: 36 }}
             value={searchedFor}
           />