diff --git a/.changelog/760.internal.md b/.changelog/760.internal.md new file mode 100644 index 000000000..fad11ced4 --- /dev/null +++ b/.changelog/760.internal.md @@ -0,0 +1 @@ +Improve performance when displaying token lists, using newly available data diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx index 7ad8afce7..8d006b577 100644 --- a/src/app/components/ContractVerificationIcon/index.tsx +++ b/src/app/components/ContractVerificationIcon/index.tsx @@ -50,7 +50,7 @@ const StyledBox = styled(Box, { }) type ContractVerificationIconProps = { - account: RuntimeAccount | undefined + account: Pick | undefined noLink?: boolean } @@ -62,8 +62,6 @@ const Waiting: FC = () => ( ) export const ContractVerificationIcon: FC = ({ account, noLink = false }) => { - const { t } = useTranslation() - if (!account) { return } @@ -71,6 +69,16 @@ export const ContractVerificationIcon: FC = ({ ac const verified = !!account.evm_contract?.verification const address_eth = account.address_eth! + return +} + +export const VerificationIcon: FC<{ address_eth: string; verified: boolean; noLink?: boolean }> = ({ + address_eth, + verified, + noLink = false, +}) => { + const { t } = useTranslation() + const status: VerificationStatus = verified ? 'verified' : 'unverified' const statusLabel: Record = { verified: t('contract.verification.isVerified'), diff --git a/src/app/components/Tokens/TokenDetails.tsx b/src/app/components/Tokens/TokenDetails.tsx index f351a9564..2dea76db4 100644 --- a/src/app/components/Tokens/TokenDetails.tsx +++ b/src/app/components/Tokens/TokenDetails.tsx @@ -8,7 +8,7 @@ import { TokenLink } from './TokenLink' import { CopyToClipboard } from '../CopyToClipboard' import { AccountLink } from '../Account/AccountLink' import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink' -import { DelayedContractVerificationIcon } from '../ContractVerificationIcon' +import { DelayedContractVerificationIcon, VerificationIcon } from '../ContractVerificationIcon' import Box from '@mui/material/Box' import { COLORS } from '../../../styles/theme/colors' import { TokenTypeTag } from './TokenList' @@ -55,7 +55,11 @@ export const TokenDetails: FC<{
{t('contract.verification.title')}
- + {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere. + + ) : ( + + )}
{t(isMobile ? 'tokens.holdersCount_short' : 'tokens.holdersCount')}
diff --git a/src/app/components/Tokens/TokenList.tsx b/src/app/components/Tokens/TokenList.tsx index 83db7d20e..e06a8be8c 100644 --- a/src/app/components/Tokens/TokenList.tsx +++ b/src/app/components/Tokens/TokenList.tsx @@ -5,7 +5,11 @@ import { TablePaginationProps } from '../Table/TablePagination' import { AccountLink } from '../Account/AccountLink' import { TokenLink } from './TokenLink' import { CopyToClipboard } from '../CopyToClipboard' -import { DelayedContractVerificationIcon, verificationIconBoxHeight } from '../ContractVerificationIcon' +import { + DelayedContractVerificationIcon, + VerificationIcon, + verificationIconBoxHeight, +} from '../ContractVerificationIcon' import Box from '@mui/material/Box' import { getTokenTypeDescription, @@ -116,11 +120,15 @@ export const TokenList = (props: TokensProps) => { width: '100%', }} > - + {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere. + + ) : ( + + )} ), }, diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx index 3d5808959..8e76a3029 100644 --- a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx @@ -8,7 +8,7 @@ import { useScreenSize } from '../../hooks/useScreensize' import { useTranslation } from 'react-i18next' import { AccountLink } from '../../components/Account/AccountLink' import { CopyToClipboard } from '../../components/CopyToClipboard' -import { DelayedContractVerificationIcon } from '../../components/ContractVerificationIcon' +import { DelayedContractVerificationIcon, VerificationIcon } from '../../components/ContractVerificationIcon' import { getNameForTicker, Ticker } from '../../../types/ticker' import { DelayedContractCreatorInfo } from '../../components/Account/ContractCreatorInfo' import CardContent from '@mui/material/CardContent' @@ -50,7 +50,11 @@ export const TokenDetailsCard: FC<{ scope: SearchScope; address: string }> = ({
{t('contract.verification.title')}
- + {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere. + + ) : ( + + )}
{t('common.type')}
diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx index 03fc254f4..1787ae2d7 100644 --- a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx +++ b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx @@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography' import { COLORS } from '../../../styles/theme/colors' import { useTokenInfo } from './hook' import Skeleton from '@mui/material/Skeleton' -import { DelayedContractVerificationIcon } from '../../components/ContractVerificationIcon' +import { DelayedContractVerificationIcon, VerificationIcon } from '../../components/ContractVerificationIcon' import { AccountLink } from '../../components/Account/AccountLink' import Box from '@mui/material/Box' import { CopyToClipboard } from '../../components/CopyToClipboard' @@ -67,11 +67,19 @@ export const TokenTitleCard: FC<{ scope: SearchScope; address: string }> = ({ sc alignItems: 'center', }} > - + {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere. + + ) : ( + + )}