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

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

package/src/pages/LiquiditySourcePage.tsx

@@ -86,7 +86,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
     };
   });
 
-  const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
@@ -120,7 +120,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           placeholder={i18n.t('Search {sourceType}', {
             sourceType: types[sourceType],
           })}
-          onChange={searchHandler}
+          onChange={handleSearch}
         />
         {fetchStatus === 'loading' && <LoadingLiquiditySourceList />}
 

package/src/pages/SelectBlockchainPage.tsx

@@ -5,6 +5,7 @@ import {
   SelectableCategoryList,
 } from '@rango-dev/ui';
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { BlockchainList } from '../components/BlockchainList';
 import { Layout, PageContainer } from '../components/Layout';
@@ -14,7 +15,8 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 
 interface PropTypes {
-  type: 'source' | 'destination';
+  type: 'source' | 'destination' | 'custom-token';
+  hideCategory?: boolean;
 }
 
 export function SelectBlockchainPage(props: PropTypes) {
@@ -24,15 +26,15 @@ export function SelectBlockchainPage(props: PropTypes) {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const setToBlockchain = useQuoteStore.use.setToBlockchain();
   const setFromBlockchain = useQuoteStore.use.setFromBlockchain();
-  const fetchStatus = useAppStore().fetchStatus;
+  const { fetchStatus } = useAppStore();
+  const navigate = useNavigate();
 
   const blockchains = useAppStore().blockchains({
     type,
   });
-
   const activeCategoriesCount = getCategoriesCount(blockchains);
 
-  const showCategory = activeCategoriesCount !== 1;
+  const showCategory = !props.hideCategory && activeCategoriesCount !== 1;
 
   return (
     <Layout
@@ -66,15 +68,20 @@ export function SelectBlockchainPage(props: PropTypes) {
 
         <BlockchainList
           list={blockchains}
+          showTitle={type !== 'custom-token'}
           searchedFor={searchedFor}
           blockchainCategory={blockchainCategory}
           onChange={(blockchain) => {
-            if (type === 'source') {
-              setFromBlockchain(blockchain);
+            if (type === 'custom-token') {
+              navigate(`..?blockchain=${blockchain.name}`, { replace: true });
             } else {
-              setToBlockchain(blockchain);
+              if (type === 'source') {
+                setFromBlockchain(blockchain);
+              } else {
+                setToBlockchain(blockchain);
+              }
+              navigateBack();
             }
-            navigateBack();
           }}
         />
       </PageContainer>

package/src/pages/SelectSwapItemsPage.tsx

@@ -8,7 +8,7 @@ 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/TokenList';
+import { TokenList } from '../components/TokenList';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';