From d407f15cfb27b335eab5d9bfcf5dc490ad5e6f08 Mon Sep 17 00:00:00 2001 From: Chen Yu Date: Fri, 19 Aug 2022 23:55:33 +0800 Subject: [PATCH] fix: fix style of empty list (#417) --- assets/icons/empty-filtered-list.svg | 33 +++++ assets/icons/no-data.svg | 33 +++++ components/AssetList/index.tsx | 12 +- components/AssetList/styles.module.scss | 4 +- components/BridgedRecordList/index.tsx | 16 +- .../BridgedRecordList/styles.module.scss | 5 + components/ChartComponents/styles.module.scss | 2 +- components/ContractEventsList.tsx | 92 ++++++------ components/ContractInfo/styles.module.scss | 10 +- components/ERC20TransferList/index.tsx | 10 +- .../ERC20TransferList/styles.module.scss | 4 +- components/FilterMenu/styles.module.scss | 2 +- components/InfoList/styles.module.scss | 2 +- components/RawTxData/styles.module.scss | 2 +- components/SimpleERC20Transferlist/index.tsx | 32 +++- .../styles.module.scss | 13 ++ components/TokenHolderList/index.tsx | 45 +++--- components/TokenHolderList/styles.module.scss | 5 + components/TxList/index.tsx | 31 +++- components/TxList/styles.module.scss | 13 ++ components/TxLogsList/index.tsx | 2 + components/TxLogsList/styles.module.scss | 13 +- pages/404.tsx | 2 +- pages/account/styles.module.scss | 2 +- pages/blocks.tsx | 15 +- pages/contracts.tsx | 2 +- pages/token/styles.module.scss | 2 +- pages/tokens/[type].tsx | 139 +++++++++++------- pages/tokens/styles.module.scss | 11 +- public/locales/en-US/list.json | 5 +- public/locales/en-US/tokens.json | 5 +- public/locales/zh-CN/list.json | 3 +- public/locales/zh-CN/tokens.json | 3 +- styles/mixin.scss | 18 +++ 34 files changed, 417 insertions(+), 171 deletions(-) create mode 100644 assets/icons/empty-filtered-list.svg create mode 100644 assets/icons/no-data.svg create mode 100644 components/TokenHolderList/styles.module.scss diff --git a/assets/icons/empty-filtered-list.svg b/assets/icons/empty-filtered-list.svg new file mode 100644 index 000000000..7cd0a63c9 --- /dev/null +++ b/assets/icons/empty-filtered-list.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/no-data.svg b/assets/icons/no-data.svg new file mode 100644 index 000000000..f12532b6a --- /dev/null +++ b/assets/icons/no-data.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/AssetList/index.tsx b/components/AssetList/index.tsx index 9d21c360b..b48333f91 100644 --- a/components/AssetList/index.tsx +++ b/components/AssetList/index.tsx @@ -1,11 +1,12 @@ import { useTranslation } from 'next-i18next' import NextLink from 'next/link' import { gql } from 'graphql-request' +import BigNumber from 'bignumber.js' import Table from 'components/Table' import TokenLogo from 'components/TokenLogo' -import { parseTokenName, client, formatAmount, GraphQLSchema } from 'utils' +import { parseTokenName, client, GraphQLSchema } from 'utils' +import NoDataIcon from 'assets/icons/no-data.svg' import styles from './styles.module.scss' -import BigNumber from 'bignumber.js' export type UdtList = Array<{ value: string @@ -89,8 +90,11 @@ const AssetList = ({ list = [] }: { list: UdtList }) => { }) ) : ( - - {t(`emptyAssetList`)} + +
+ + {t(`emptyAssetList`)} +
)} diff --git a/components/AssetList/styles.module.scss b/components/AssetList/styles.module.scss index fce77e81d..9e53c9cd9 100644 --- a/components/AssetList/styles.module.scss +++ b/components/AssetList/styles.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixin.scss'; + .name { display: flex; align-items: center; @@ -34,5 +36,5 @@ } .noRecords { - text-align: center; + @include empty-list; } diff --git a/components/BridgedRecordList/index.tsx b/components/BridgedRecordList/index.tsx index b0ebc9b92..83352f93f 100644 --- a/components/BridgedRecordList/index.tsx +++ b/components/BridgedRecordList/index.tsx @@ -5,6 +5,7 @@ import Table from 'components/Table' import HashLink from 'components/HashLink' import Address from 'components/TruncatedAddress' import Pagination from 'components/Pagination' +import NoDataIcon from 'assets/icons/no-data.svg' import Amount from 'components/Amount' import { timeDistance, getBridgedRecordListRes, CKB_EXPLORER_URL, PCKB_UAN, PCKB_UDT_INFO } from 'utils' import styles from './styles.module.scss' @@ -84,16 +85,21 @@ const BridgedRecordList: React.FC<{ list: ParsedList; showUser?: boolean }> = ({ )) ) : ( - - {t(`no_records`)} + +
+ + {t(`no_records`)} +
)} -
- -
+ {+list.meta.total ? ( +
+ +
+ ) : null} ) } diff --git a/components/BridgedRecordList/styles.module.scss b/components/BridgedRecordList/styles.module.scss index b72712c1c..ea3fa96ec 100644 --- a/components/BridgedRecordList/styles.module.scss +++ b/components/BridgedRecordList/styles.module.scss @@ -1,5 +1,10 @@ +@import '../../styles/mixin.scss'; + .pagination { display: flex; justify-content: flex-end; padding: 1.125rem 1.5rem; } +.noRecords { + @include empty-list; +} diff --git a/components/ChartComponents/styles.module.scss b/components/ChartComponents/styles.module.scss index cf967cb03..c21fbea53 100644 --- a/components/ChartComponents/styles.module.scss +++ b/components/ChartComponents/styles.module.scss @@ -20,7 +20,7 @@ } li span { font-size: 14px; - color: #333; + color: var(--primary-text-color); } li::before { position: absolute; diff --git a/components/ContractEventsList.tsx b/components/ContractEventsList.tsx index 40a10ca36..80320add2 100644 --- a/components/ContractEventsList.tsx +++ b/components/ContractEventsList.tsx @@ -17,8 +17,9 @@ import { InputAdornment, TextField, } from '@mui/material' -import { ParsedEventLog, IMG_URL, useDebounce } from 'utils' import ContractEventListItem from './ContractEventListItem' +import NoDataIcon from 'assets/icons/no-data.svg' +import { ParsedEventLog, IMG_URL, useDebounce } from 'utils' export const EventFilterIcon = ({ setSearchText, tooltip, value }) => ( @@ -63,7 +64,7 @@ const ContractEventsList = ({ list }: { list: ParsedEventLog[] }) => { ) }, [debouncedSetListItems, list, searchText]) - return ( + return listItems?.length ? ( @@ -113,59 +114,68 @@ const ContractEventsList = ({ list }: { list: ParsedEventLog[] }) => { - {listItems?.length ? ( - listItems?.map((item, idx) => ( - - - - + {listItems?.map((item, idx) => ( + + + + + + {item.txHash.slice(0, 17)}... + + + + - {item.txHash.slice(0, 17)}... + # {item.blockNumber} - - - - # {item.blockNumber} - - - - - - - - {/* {item.method} */} - - - - - )) - ) : ( - - - {t('no_records')} + + + + + + {/* {item.method} */} + + - )} + ))} + ) : ( + +
+ + {t(`no_records`)} +
+ ) } diff --git a/components/ContractInfo/styles.module.scss b/components/ContractInfo/styles.module.scss index 628284082..0bc4d842e 100644 --- a/components/ContractInfo/styles.module.scss +++ b/components/ContractInfo/styles.module.scss @@ -12,7 +12,7 @@ font-family: Roboto; font-weight: 400; font-size: 0.875rem; - color: #333; + color: var(--primary-text-color); border-radius: 4px; border-color: #ddd; } @@ -65,7 +65,7 @@ .params, .response { - color: #333; + color: var(--primary-text-color); font-size: 0.875rem; font-weight: 500; margin-top: 0.5rem; @@ -93,7 +93,7 @@ border: 1px solid var(--border-color); margin: 1rem auto; font-size: 0.875rem; - color: #333; + color: var(--primary-text-color); summary { display: flex; @@ -252,7 +252,7 @@ padding: 1rem 0; font-size: 0.875rem; font-weight: 400; - color: #333; + color: var(--primary-text-color); & > div { flex: 1; display: flex; @@ -284,7 +284,7 @@ h6 { font-size: 1rem; font-weight: 500; - color: #333; + color: var(--primary-text-color); margin: 0; } .title { diff --git a/components/ERC20TransferList/index.tsx b/components/ERC20TransferList/index.tsx index 4f8120419..86a40958b 100644 --- a/components/ERC20TransferList/index.tsx +++ b/components/ERC20TransferList/index.tsx @@ -11,6 +11,7 @@ import TransferDirection from 'components/TransferDirection' import RoundedAmount from 'components/RoundedAmount' import TokenLogo from 'components/TokenLogo' import ChangeIcon from 'assets/icons/change.svg' +import NoDataIcon from 'assets/icons/no-data.svg' import { client, timeDistance, getBlockStatus, GraphQLSchema } from 'utils' import styles from './styles.module.scss' @@ -234,14 +235,17 @@ const TransferList: React.FC< }) ) : ( - - {t(`no_records`)} + +
+ + {t(`no_records`)} +
)} - + {token_transfers.metadata.total_count ? : null} ) } diff --git a/components/ERC20TransferList/styles.module.scss b/components/ERC20TransferList/styles.module.scss index a8f447b7c..d06f50d71 100644 --- a/components/ERC20TransferList/styles.module.scss +++ b/components/ERC20TransferList/styles.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixin.scss'; + .container { th, td { @@ -15,7 +17,7 @@ } } .noRecords { - text-align: center !important; + @include empty-list; } } diff --git a/components/FilterMenu/styles.module.scss b/components/FilterMenu/styles.module.scss index d78e0ca51..066031a22 100644 --- a/components/FilterMenu/styles.module.scss +++ b/components/FilterMenu/styles.module.scss @@ -53,7 +53,7 @@ input { width: 100%; - color: #333; + color: var(--primary-text-color); font-size: 0.875rem; font-weight: 500; padding: 0.75rem 0.5rem; diff --git a/components/InfoList/styles.module.scss b/components/InfoList/styles.module.scss index ea48e4b5a..6a960a637 100644 --- a/components/InfoList/styles.module.scss +++ b/components/InfoList/styles.module.scss @@ -40,7 +40,7 @@ margin: 0; font-weight: 500; font-size: 1rem; - color: #333; + color: var(--primary-text-color); border-bottom: 1px solid var(--border-color); } diff --git a/components/RawTxData/styles.module.scss b/components/RawTxData/styles.module.scss index 012a41807..b1ffad782 100644 --- a/components/RawTxData/styles.module.scss +++ b/components/RawTxData/styles.module.scss @@ -20,7 +20,7 @@ border-radius: 4px; border-color: var(--border-color); font-size: 0.875rem; - color: #333; + color: var(--primary-text-color); &:first-of-type { margin-bottom: 2rem; } diff --git a/components/SimpleERC20Transferlist/index.tsx b/components/SimpleERC20Transferlist/index.tsx index ce5e05a2c..99526887f 100644 --- a/components/SimpleERC20Transferlist/index.tsx +++ b/components/SimpleERC20Transferlist/index.tsx @@ -10,9 +10,11 @@ import Table from 'components/Table' import Pagination from 'components/SimplePagination' import TokenLogo from 'components/TokenLogo' import FilterMenu from 'components/FilterMenu' -import SortIcon from 'assets/icons/sort.svg' import RoundedAmount from 'components/RoundedAmount' +import SortIcon from 'assets/icons/sort.svg' import ChangeIcon from 'assets/icons/change.svg' +import NoDataIcon from 'assets/icons/no-data.svg' +import EmptyFilteredListIcon from 'assets/icons/empty-filtered-list.svg' import { GraphQLSchema, client } from 'utils' import styles from './styles.module.scss' @@ -104,6 +106,8 @@ export const fetchTransferList = (variables: { .then(data => data.token_transfers) .catch(() => ({ entries: [], metadata: { before: null, after: null, total_count: 0 } })) +const FILTER_KEYS = ['address_from', 'address_to'] + const TransferList: React.FC = ({ token_transfers: { entries, metadata } }) => { const [isShowLogo, setIsShowLogo] = useState(true) const [t] = useTranslation('list') @@ -113,6 +117,9 @@ const TransferList: React.FC = ({ token_transfers: { entries, asPath, } = useRouter() + const isFiltered = Object.keys(query).some(key => FILTER_KEYS.includes(key)) + const isFilterUnnecessary = !metadata.total_count && !isFiltered + const handleLogIndexSortClick = (e: React.MouseEvent) => { const { dataset: { order }, @@ -128,7 +135,7 @@ const TransferList: React.FC = ({ token_transfers: { entries, const handleTokenDisplayChange = () => setIsShowLogo(show => !show) return ( -
+
@@ -141,13 +148,13 @@ const TransferList: React.FC = ({ token_transfers: { entries, - )}
{t('from')} - +
{t('to')} - +
@@ -202,15 +209,24 @@ const TransferList: React.FC = ({ token_transfers: { entries, )) ) : (
- {t(`no_records`)} + + {isFiltered ? ( +
+ + {t(`no_related_content`)} +
+ ) : ( +
+ + {t(`no_records`)} +
+ )}
- - + {metadata.total_count ? : null}
) } diff --git a/components/SimpleERC20Transferlist/styles.module.scss b/components/SimpleERC20Transferlist/styles.module.scss index 4c8b88f08..2ae9e94c5 100644 --- a/components/SimpleERC20Transferlist/styles.module.scss +++ b/components/SimpleERC20Transferlist/styles.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixin.scss'; + .container { th { text-transform: capitalize; @@ -8,6 +10,13 @@ text-align: right; } } + &[data-is-filter-unnecessary='true'] { + th { + svg { + display: none; + } + } + } } .tokenLogo { @@ -40,3 +49,7 @@ display: flex; align-items: center; } + +.noRecords { + @include empty-list; +} diff --git a/components/TokenHolderList/index.tsx b/components/TokenHolderList/index.tsx index 4484b56d7..bde9c9025 100644 --- a/components/TokenHolderList/index.tsx +++ b/components/TokenHolderList/index.tsx @@ -1,12 +1,14 @@ import { useTranslation } from 'next-i18next' import BigNumber from 'bignumber.js' +import { Stack } from '@mui/material' +import { useTheme } from '@mui/material/styles' +import useMediaQuery from '@mui/material/useMediaQuery' import Table from 'components/Table' import Address from 'components/TruncatedAddress' import Pagination from 'components/Pagination' -import { useTheme } from '@mui/material/styles' -import useMediaQuery from '@mui/material/useMediaQuery' -import { Stack } from '@mui/material' +import NoDataIcon from 'assets/icons/no-data.svg' import { getTokenHolderListRes } from 'utils' +import styles from './styles.module.scss' type ParsedTokenHolderList = ReturnType @@ -45,29 +47,34 @@ const TokenHolderList: React.FC<{ )) ) : ( - - {t(`no_records`)} + +
+ + {t(`no_records`)} +
)} - - {/* TODO: pagesize */} - {/* */} - {/* + {+list.meta.total ? ( + + {/* TODO: pagesize */} + {/* */} + {/* {t('showLatestRecords', { ns: 'common', number: isMobile ? '100k' : '500k' })} */} - - + + + ) : null} ) } diff --git a/components/TokenHolderList/styles.module.scss b/components/TokenHolderList/styles.module.scss new file mode 100644 index 000000000..18ebfdf04 --- /dev/null +++ b/components/TokenHolderList/styles.module.scss @@ -0,0 +1,5 @@ +@import '../../styles/mixin.scss'; + +.noRecords { + @include empty-list; +} diff --git a/components/TxList/index.tsx b/components/TxList/index.tsx index c179d5205..d90e8e4f3 100644 --- a/components/TxList/index.tsx +++ b/components/TxList/index.tsx @@ -1,4 +1,5 @@ import { useTranslation } from 'next-i18next' +import { useRouter } from 'next/router' import NextLink from 'next/link' import { gql } from 'graphql-request' import Table from 'components/Table' @@ -9,9 +10,11 @@ import Pagination from 'components/SimplePagination' import TransferDirection from 'components/TransferDirection' import Tooltip from 'components/Tooltip' import FilterMenu from 'components/FilterMenu' +import RoundedAmount from 'components/RoundedAmount' +import NoDataIcon from 'assets/icons/no-data.svg' +import EmptyFilteredListIcon from 'assets/icons/empty-filtered-list.svg' import { getBlockStatus, timeDistance, GraphQLSchema, client, PCKB_UDT_INFO } from 'utils' import styles from './styles.module.scss' -import RoundedAmount from 'components/RoundedAmount' export type TxListProps = { transactions: { @@ -108,6 +111,8 @@ export const fetchTxList = (variables: Variables) => .then(data => data.transactions) .catch(() => ({ entries: [], metadata: { before: null, after: null, total_count: 0 } })) +const FILTER_KEYS = ['block_from', 'block_to'] + const TxList: React.FC = ({ transactions: { entries, metadata }, maxCount, @@ -115,9 +120,12 @@ const TxList: React.FC = viewer, }) => { const [t, { language }] = useTranslation('list') + const { query } = useRouter() + const isFiltered = Object.keys(query).some(key => FILTER_KEYS.includes(key)) + const isFilterUnnecessary = !metadata.total_count && !isFiltered return ( -
+
@@ -125,7 +133,7 @@ const TxList: React.FC = @@ -194,14 +202,25 @@ const TxList: React.FC = }) ) : ( - )}
{t('block')} - +
{t('age')}
- {t(`no_records`)} + + {isFiltered ? ( +
+ + {t(`no_related_content`)} +
+ ) : ( +
+ + {t(`no_records`)} +
+ )}
- {pageSize ? ( + + {!metadata.total_count ? null : pageSize ? ( ) : ( diff --git a/components/TxList/styles.module.scss b/components/TxList/styles.module.scss index 1a844e769..b204b405b 100644 --- a/components/TxList/styles.module.scss +++ b/components/TxList/styles.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixin.scss'; + .container { th, td { @@ -5,8 +7,19 @@ text-align: right; } } + &[data-is-filter-unnecessary='true'] { + th { + svg { + display: none; + } + } + } } .direction { padding-left: 0 !important; padding-right: 0 !important; } + +.noRecords { + @include empty-list; +} diff --git a/components/TxLogsList/index.tsx b/components/TxLogsList/index.tsx index 3d688c212..7e33f21d4 100644 --- a/components/TxLogsList/index.tsx +++ b/components/TxLogsList/index.tsx @@ -3,6 +3,7 @@ import NextLink from 'next/link' import { Link } from '@mui/material' import { ParsedEventLog } from 'utils' import LogFieldItem from 'components/LogItemField' +import NoDataIcon from 'assets/icons/no-data.svg' import styles from './styles.module.scss' const TxLogsList = ({ list }: { list: ParsedEventLog[] }) => { @@ -104,6 +105,7 @@ const TxLogsList = ({ list }: { list: ParsedEventLog[] }) => {
) : (
+ {t('noLogs')}
) diff --git a/components/TxLogsList/styles.module.scss b/components/TxLogsList/styles.module.scss index 59dc85cd2..e049c9bd1 100644 --- a/components/TxLogsList/styles.module.scss +++ b/components/TxLogsList/styles.module.scss @@ -1,18 +1,17 @@ +@import '../../styles/mixin.scss'; + .container { font-size: 14px; margin: 24px; overflow: auto; .title { - color: #333; + color: var(--primary-text-color); font-weight: 400; } } .noRecords { - display: flex; - justify-content: center; - align-items: center; - min-height: 50px; + @include empty-list; } .topicItem { @@ -72,7 +71,7 @@ flex-basis: 100px; flex-shrink: 0; font-size: 16px; - color: #333; + color: var(--primary-text-color); display: flex; justify-content: flex-end; padding-right: 30px; @@ -82,7 +81,7 @@ } .eventSignature { - color: #333; + color: var(--primary-text-color); display: flex; align-items: flex-start; min-height: 40px; diff --git a/pages/404.tsx b/pages/404.tsx index 636220ebf..3c00d3957 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -13,7 +13,7 @@ import NotFoundIcon from '../assets/icons/404.svg' const Custom404 = () => { const [t] = useTranslation('common') const [search, setSearch] = useState('') - const { back, query, push } = useRouter() + const { back, query } = useRouter() const searchRef = useRef(null) useEffect(() => { diff --git a/pages/account/styles.module.scss b/pages/account/styles.module.scss index 31b418154..88c35a86a 100644 --- a/pages/account/styles.module.scss +++ b/pages/account/styles.module.scss @@ -22,7 +22,7 @@ @include mono-font; font-size: 0.875rem; font-weight: 500; - color: #333; + color: var(--primary-text-color); word-break: break-all; user-select: none; diff --git a/pages/blocks.tsx b/pages/blocks.tsx index 52f1db05d..5c9036684 100644 --- a/pages/blocks.tsx +++ b/pages/blocks.tsx @@ -25,6 +25,7 @@ import Pagination from 'components/Pagination' import PageSize, { SIZES } from 'components/PageSize' import BlockStateIcon from 'components/BlockStateIcon' import TableCell from 'components/TableCell' +import NoDataIcon from 'assets/icons/no-data.svg' import { fetchBlockList, timeDistance } from 'utils' const BlockList = () => { @@ -223,7 +224,19 @@ const BlockList = () => { ) : ( - {t(`no_records`)} +
+ + {t(`no_records`)} +
)} diff --git a/pages/contracts.tsx b/pages/contracts.tsx index 51650201f..83584a2fa 100644 --- a/pages/contracts.tsx +++ b/pages/contracts.tsx @@ -108,7 +108,7 @@ const ContractList = () => { {c.compiler.fileFormat?.split(' ')[0] ?? '-'} - {c.compiler.version.split('+')[0]} + {c.compiler.version?.split('+')[0]} diff --git a/pages/token/styles.module.scss b/pages/token/styles.module.scss index f4221c8d7..37dffaa3c 100644 --- a/pages/token/styles.module.scss +++ b/pages/token/styles.module.scss @@ -32,7 +32,7 @@ @include mono-font; font-size: 0.875rem; font-weight: 500; - color: #333; + color: var(--primary-text-color); word-break: break-all; user-select: none; diff --git a/pages/tokens/[type].tsx b/pages/tokens/[type].tsx index b0e966e2a..369c5b6e2 100644 --- a/pages/tokens/[type].tsx +++ b/pages/tokens/[type].tsx @@ -20,6 +20,8 @@ import FilterMenu from 'components/FilterMenu' import { SIZES } from 'components/PageSize' import Amount from 'components/Amount' import AddIcon from 'assets/icons/add.svg' +import NoDataIcon from 'assets/icons/no-data.svg' +import EmptyFilteredListIcon from 'assets/icons/empty-filtered-list.svg' import { GraphQLSchema, client, parseTokenName } from 'utils' import styles from './styles.module.scss' @@ -90,6 +92,7 @@ const fetchTokenList = (variables: Variables): Promise = .then(data => data.udts) .catch(() => ({ entries: [], metadata: { before: null, after: null, total_count: 0 } })) +const FILTER_KEYS = ['name'] const TokenList = () => { const [t] = useTranslation(['tokens', 'common', 'list']) const { @@ -132,6 +135,9 @@ const TokenList = () => { }, ) + const isFiltered = !!name + const isFilterUnnecessary = !data?.metadata.total_count && !isFiltered + const handleHolderCountSortClick = (e: React.MouseEvent) => { const { dataset: { order }, @@ -150,7 +156,11 @@ const TokenList = () => { return ( <> - + {title} @@ -193,28 +203,6 @@ const TokenList = () => { {t(type === 'bridge' ? 'add-bridged-token' : 'add-native-erc20-token')} - {/* */} ) : ( { {t(h.label ?? h.key)} {h.key === 'token' ? ( - + ) : null} {/* {h.key === 'holderCount' ? ( */} @@ -280,29 +268,58 @@ const TokenList = () => { - - - + + + + + {name || '-'} + + + + + + ) : ( + + - {name || '-'} - - - + + {name || '-'} + + + + )} @@ -341,21 +358,33 @@ const TokenList = () => { }) ) : ( - - {t(`no_records`)} + + {isFiltered ? ( +
+ + {t(`no_related_content`, { ns: 'list' })} +
+ ) : ( +
+ + {t(`no_records`)} +
+ )} )} -
- {!data ? ( - - ) : ( - - )} -
+ {data?.metadata.total_count ? ( +
+ {!data ? ( + + ) : ( + + )} +
+ ) : null} diff --git a/pages/tokens/styles.module.scss b/pages/tokens/styles.module.scss index c5ff57750..bd21383e1 100644 --- a/pages/tokens/styles.module.scss +++ b/pages/tokens/styles.module.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixin.scss'; + .container { table { th { @@ -18,6 +20,13 @@ left: 0; transform: translateX(-20px); } + &[data-is-filter-unnecessary='true'] { + th { + svg { + display: none; + } + } + } } .add { @@ -51,5 +60,5 @@ } .noRecords { - text-align: center !important; + @include empty-list; } diff --git a/public/locales/en-US/list.json b/public/locales/en-US/list.json index 39ffe1b27..d4938416f 100644 --- a/public/locales/en-US/list.json +++ b/public/locales/en-US/list.json @@ -7,7 +7,7 @@ "age": "Age", "transfer": "Transfer", "token": "Token", - "no_records": "No Records", + "no_records": "There're no matching entries", "txHash": "Txn Hash", "block": "Block", "type": "Type", @@ -54,5 +54,6 @@ "address_from": "Search by address", "address_to": "Search by address" }, - "n_kinds_in_total": "{{number}} Kinds in Total" + "n_kinds_in_total": "{{number}} Kinds in Total", + "no_related_content": "No related content" } diff --git a/public/locales/en-US/tokens.json b/public/locales/en-US/tokens.json index 0cbc3e1b6..c5fb23b18 100644 --- a/public/locales/en-US/tokens.json +++ b/public/locales/en-US/tokens.json @@ -26,11 +26,12 @@ "age": "Age", "transfer": "Transfer", "transferRecords": "Transfers", - "no_records": "No Records", + "no_records": "There are no matching entries", "add-bridged-token": "Register a bridged token", "add-native-erc20-token": "Register a native token", "bridgedRecords": "Bridged Transfers", "tokenHolders": "Holders", "origin": "Origin", - "bridgeName": "Bridge" + "bridgeName": "Bridge", + "view-mapped-native-token": "View mapped native token" } diff --git a/public/locales/zh-CN/list.json b/public/locales/zh-CN/list.json index 161a321ad..1a45eec72 100644 --- a/public/locales/zh-CN/list.json +++ b/public/locales/zh-CN/list.json @@ -53,5 +53,6 @@ "address_from": "通过地址搜索", "address_to": "通过地址搜索" }, - "n_kinds_in_total": "共计 {{number}} 种" + "n_kinds_in_total": "共计 {{number}} 种", + "no_related_content": "没有相关数据" } diff --git a/public/locales/zh-CN/tokens.json b/public/locales/zh-CN/tokens.json index f1be26ed4..1c0cfc164 100644 --- a/public/locales/zh-CN/tokens.json +++ b/public/locales/zh-CN/tokens.json @@ -32,5 +32,6 @@ "bridgedRecords": "桥接交易记录", "tokenHolders": "持有人", "origin": "来源", - "bridgeName": "跨链桥" + "bridgeName": "跨链桥", + "view-mapped-native-token": "查看对应原生代币" } diff --git a/styles/mixin.scss b/styles/mixin.scss index dbf40e309..55a04784e 100644 --- a/styles/mixin.scss +++ b/styles/mixin.scss @@ -14,3 +14,21 @@ font-family: 'JetBrains Mono', monospace, 'Courier New' !important; user-select: all; } + +@mixin empty-list { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 8.25rem 0; + color: var(--primary-color); + font-size: 0.875rem; + font-weight: 400; + span { + margin-top: 2rem; + color: var(--primary-text-color); + } + @media screen and (max-width: 1024px) { + padding: 5.625rem 0; + } +}