From 8e24f063ba39be0debeccef06955c603a69ffe5b Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Fri, 6 Jan 2023 03:26:56 +0800 Subject: [PATCH] Feat: support .bit resolution icon of domian (#805) --- components/AccountOverview/index.tsx | 80 ++++++----- components/AddressWithDomain/index.tsx | 32 +++++ .../AddressWithDomain/styles.module.scss | 11 ++ components/BaseTransferlist/index.tsx | 128 +++++++++++------- components/CommonERCTransferlist/index.tsx | 8 ++ components/ERC20TransferList/index.tsx | 20 ++- components/HashLink/index.tsx | 4 +- components/MultiTokenActivityList/index.tsx | 16 ++- components/NFTActivityList/index.tsx | 16 ++- components/SmartContractInfo/index.tsx | 26 ++-- components/TitleWithDomain/index.tsx | 25 ++++ components/TitleWithDomain/styles.module.scss | 36 +++++ components/TokenApprovalList/index.tsx | 2 +- components/TruncatedAddress.tsx | 23 +++- components/TxList/index.tsx | 12 +- components/{User.tsx => User/index.tsx} | 7 +- cypress/integration/block/index.spec.ts | 2 +- cypress/integration/tx/index.spec.ts | 6 +- pages/account/[id].tsx | 4 +- pages/index.tsx | 47 +++++-- pages/multi-token-collections/index.tsx | 28 +++- .../styles.module.scss | 5 + pages/nft-collections/index.tsx | 32 +++-- pages/nft-collections/styles.module.scss | 5 + pages/tokens/[type].tsx | 10 +- pages/tx/[hash].tsx | 19 ++- public/icons/bit-logo.svg | 12 ++ utils/constants.ts | 1 + utils/graphql.ts | 5 +- 29 files changed, 454 insertions(+), 168 deletions(-) create mode 100644 components/AddressWithDomain/index.tsx create mode 100644 components/AddressWithDomain/styles.module.scss create mode 100644 components/TitleWithDomain/index.tsx create mode 100644 components/TitleWithDomain/styles.module.scss rename components/{User.tsx => User/index.tsx} (53%) create mode 100644 public/icons/bit-logo.svg diff --git a/components/AccountOverview/index.tsx b/components/AccountOverview/index.tsx index 75f8a88fc..8129340a3 100644 --- a/components/AccountOverview/index.tsx +++ b/components/AccountOverview/index.tsx @@ -80,39 +80,42 @@ export type AccountOverviewProps = { isOverviewLoading?: boolean isBalanceLoading?: boolean balance: string - deployerAddr?: string + deployer?: Pick isContractVerified?: boolean } const accountOverviewQuery = gql` query ($script_hash: String, $address: String) { account(input: { script_hash: $script_hash, address: $address }) { - type - eth_address - script_hash - script - transaction_count - nonce - udt { - id - name - decimal - symbol - description - official_site - icon - } - smart_contract { - name - deployment_tx_hash - compiler_version - compiler_file_format - contract_source_code - constructor_arguments - abi - } - udt { - eth_type + ... on Account { + type + eth_address + bit_alias + script_hash + script + transaction_count + nonce + udt { + id + name + decimal + symbol + description + official_site + icon + } + smart_contract { + name + deployment_tx_hash + compiler_version + compiler_file_format + contract_source_code + constructor_arguments + abi + } + udt { + eth_type + } } } } @@ -164,6 +167,7 @@ const deployAddrQuery = gql` transaction(input: { eth_hash: $eth_hash }) { from_account { eth_address + bit_alias } } } @@ -201,8 +205,17 @@ export const fetchAccountBalance = (address: string) => provider.getBalance(addr export const fetchDeployAddress = (variables: { eth_hash: string }) => client - .request<{ transaction: { from_account: Pick } }>(deployAddrQuery, variables) - .then(data => data.transaction.from_account.eth_address) + .request<{ transaction: { from_account: Pick } }>( + deployAddrQuery, + variables, + ) + .then( + data => + data.transaction.from_account ?? { + eth_address: '', + bit_alias: '', + }, + ) type SourcifyStatusResponse = { sourcify_check_by_addresses: [{ address: string; chain_ids: string[]; status: string }] @@ -245,7 +258,7 @@ const overviewPlaceHolderCount = (account: AccountOverviewProps['account']) => { const AccountOverview: React.FC Promise }> = ({ account, balance, - deployerAddr = '', + deployer, isBalanceLoading, isOverviewLoading, refetch, @@ -338,14 +351,17 @@ const AccountOverview: React.FC Promise< const getInfoBlock = account => { const { type } = account + const domain = account.bit_alias const blockMap = { [`${GraphQLSchema.AccountType.MetaContract}`]: , - [`${GraphQLSchema.AccountType.EthUser}`]: , + [`${GraphQLSchema.AccountType.EthUser}`]: ( + + ), [`${GraphQLSchema.AccountType.EthAddrReg}`]: , [`${GraphQLSchema.AccountType.PolyjuiceContract}`]: ( { + return ( +
+ + + + +
+ leading * 2 ? `${domain?.slice(0, leading)}...${domain?.slice(-leading)}` : domain} + href={href} + /> +
+ +
+ ) +} + +export default AddressWithDomain diff --git a/components/AddressWithDomain/styles.module.scss b/components/AddressWithDomain/styles.module.scss new file mode 100644 index 000000000..19d26eee8 --- /dev/null +++ b/components/AddressWithDomain/styles.module.scss @@ -0,0 +1,11 @@ +.container { + display: flex; + align-items: center; + text-transform: initial; + & img { + width: 16px; + height: 16px; + border-radius: 50%; + margin-right: 2px; + } +} diff --git a/components/BaseTransferlist/index.tsx b/components/BaseTransferlist/index.tsx index 08172e9c2..88aef1b05 100644 --- a/components/BaseTransferlist/index.tsx +++ b/components/BaseTransferlist/index.tsx @@ -9,6 +9,7 @@ import Pagination from 'components/SimplePagination' import TokenLogo from 'components/TokenLogo' import FilterMenu from 'components/FilterMenu' import RoundedAmount from 'components/RoundedAmount' +import Address from 'components/TruncatedAddress' import Tooltip from 'components/Tooltip' import { GraphQLSchema, ZERO_ADDRESS } from 'utils' import SortIcon from 'assets/icons/sort.svg' @@ -23,6 +24,14 @@ export type TransferListItem = { amount: string from_address: string to_address: string + from_account: { + eth_address: string + bit_alias: string + } + to_account: { + eth_address: string + bit_alias: string + } log_index: number transaction_hash: string udt: udtType @@ -119,59 +128,74 @@ const TransferList: React.FC = ({ entries, metadata, type, ha {metadata?.total_count ? ( - entries?.map(item => ( - - {item.log_index} - - - - {item.from_address === ZERO_ADDRESS ? ( - 'zero address' - ) : ( - - )} - - - - - - - {item.to_address === ZERO_ADDRESS ? ( - 'zero address' - ) : ( - - )} - - - - - - - {isShowLogo ? ( - - ) : ( - handleTokenName?.(item.udt, item.token_id) ?? '' - )} - - - - {type === TransferlistType.Erc20 && ( - - + entries?.map(item => { + const from_bit_alias = item.from_account?.bit_alias + const from_address = item.from_account?.eth_address + const to_bit_alias = item.to_account?.bit_alias + const to_address = item.to_account?.eth_address + + return ( + + {item.log_index} + + {from_bit_alias ? ( +
+ ) : ( + + + {item.from_address === ZERO_ADDRESS ? ( + 'zero address' + ) : ( + + )} + + + )} - )} - - )) + + {to_bit_alias ? ( +
+ ) : ( + + + {item.to_address === ZERO_ADDRESS ? ( + 'zero address' + ) : ( + + )} + + + )} + + + + + {isShowLogo ? ( + + ) : ( + handleTokenName?.(item.udt, item.token_id) ?? '' + )} + + + + {type === TransferlistType.Erc20 && ( + + + + )} + + ) + }) ) : ( diff --git a/components/CommonERCTransferlist/index.tsx b/components/CommonERCTransferlist/index.tsx index 7615f1991..1a1398869 100644 --- a/components/CommonERCTransferlist/index.tsx +++ b/components/CommonERCTransferlist/index.tsx @@ -59,6 +59,14 @@ const getTransferListQuery = (type: TransferlistType) => gql` log_index from_address to_address + from_account{ + eth_address + bit_alias + } + to_account{ + eth_address + bit_alias + } udt { decimal name diff --git a/components/ERC20TransferList/index.tsx b/components/ERC20TransferList/index.tsx index f219ef436..963de13c9 100644 --- a/components/ERC20TransferList/index.tsx +++ b/components/ERC20TransferList/index.tsx @@ -28,8 +28,8 @@ export type TransferListProps = { block: Pick from_address: string to_address: string - from_account: Pick - to_account: Pick + from_account: Pick + to_account: Pick log_index: number polyjuice: Pick transaction_hash: string @@ -97,9 +97,11 @@ const transferListQuery = gql` to_address from_account { type + bit_alias } to_account { type + bit_alias } block { number @@ -170,9 +172,11 @@ const tokenTransferListQuery = gql` to_address from_account { type + bit_alias } to_account { type + bit_alias } block { number @@ -314,10 +318,18 @@ const TransferList: React.FC< -
+
-
+
diff --git a/components/HashLink/index.tsx b/components/HashLink/index.tsx index eae73e29e..086f1038b 100644 --- a/components/HashLink/index.tsx +++ b/components/HashLink/index.tsx @@ -1,9 +1,10 @@ +import { ReactNode } from 'react' import NextLink from 'next/link' import OpenInNewIcon from 'assets/icons/open-in-new.svg' import styles from './styles.module.scss' interface HashLinkProps { - label: string + label: string | ReactNode href: string external?: boolean style?: React.CSSProperties @@ -14,7 +15,6 @@ const HashLink: React.FC = ({ label, href, external = false, styl block: Pick from_address: string - from_account?: Pick + from_account?: Pick to_address: string - to_account?: Pick + to_account?: Pick log_index: number polyjuice: Pick token_contract_address_hash: string @@ -63,10 +63,12 @@ const activityListQuery = gql` from_address from_account { type + bit_alias } to_address to_account { type + bit_alias } log_index block { @@ -123,6 +125,8 @@ const ActivityList: React.FC< {transfers?.metadata.total_count ? ( transfers.entries.map(item => { const method = item.transaction.method_name || item.transaction.method_id + const from_bit_alias = item?.from_account?.bit_alias + const to_bit_alias = item?.to_account?.bit_alias const token_ids = Array.isArray(item.token_ids) ? item.token_ids : [item.token_id] const amounts = Array.isArray(item.amounts) ? item.amounts : [item.amount] @@ -165,8 +169,12 @@ const ActivityList: React.FC< {timeDistance(new Date(item.block.timestamp).getTime(), language)} - {
} - {
} + +
+ + +
+ {viewer ? ( diff --git a/components/NFTActivityList/index.tsx b/components/NFTActivityList/index.tsx index c81928cce..350c026b2 100644 --- a/components/NFTActivityList/index.tsx +++ b/components/NFTActivityList/index.tsx @@ -17,9 +17,9 @@ type ActivityListProps = { transaction: Pick block: Pick from_address: string - from_account?: Pick + from_account?: Pick to_address: string - to_account?: Pick + to_account?: Pick log_index: number polyjuice: Pick token_id: number @@ -60,10 +60,12 @@ const activityListQuery = gql` from_address from_account { type + bit_alias } to_address to_account { type + bit_alias } log_index block { @@ -116,6 +118,8 @@ const ActivityList: React.FC< {transfers?.metadata.total_count ? ( transfers.entries.map(item => { const method = item.transaction.method_name || item.transaction.method_id + const from_bit_alias = item?.from_account?.bit_alias + const to_bit_alias = item?.to_account?.bit_alias return ( @@ -153,8 +157,12 @@ const ActivityList: React.FC< {timeDistance(new Date(item.block.timestamp).getTime(), language)} - {
} - {
} + +
+ + +
+ {viewer ? ( diff --git a/components/SmartContractInfo/index.tsx b/components/SmartContractInfo/index.tsx index 46743fbb2..9c1883e31 100644 --- a/components/SmartContractInfo/index.tsx +++ b/components/SmartContractInfo/index.tsx @@ -4,6 +4,7 @@ import NextLink from 'next/link' import { Skeleton } from '@mui/material' import InfoList from '../InfoList' import Tooltip from 'components/Tooltip' +import Address from 'components/TruncatedAddress' import NextPageIcon from 'assets/icons/next-page.svg' import VerifiedIcon from 'assets/icons/check-success.svg' import SubmittedIcon from 'assets/icons/submit-success.svg' @@ -35,20 +36,21 @@ const verifyAndCheckSourcify = (address: string) => .then(data => data.verify_and_update_from_sourcify.abi) const SmartContract: React.FC<{ - deployer: string + deployer: Pick deployTxHash: string udt: Pick | null isVerified: boolean address: string isLoading: boolean refetch: () => Promise -}> = ({ deployer, deployTxHash, udt, isVerified, address, refetch, isLoading }) => { +}> = ({ deployer = {}, deployTxHash, udt, isVerified, address, refetch, isLoading }) => { const [t] = useTranslation('account') const [isCheckAgain, setIsCheckAgain] = useState(false) const [isSourcifyCheckLoading, setIsSourcifyCheckLoading] = useState(false) const { official_site, description, icon } = udt || {} const isSubmitted = official_site || description || icon + const { eth_address: deployerAddr = '', bit_alias = '' } = deployer const handleCheckClick = async (e: React.SyntheticEvent) => { e.stopPropagation() @@ -95,14 +97,18 @@ const SmartContract: React.FC<{ }, { field: t('deployer'), - content: deployer ? ( - - - - {deployer} - - - + content: deployerAddr ? ( + bit_alias ? ( +
+ ) : ( + + + + {deployerAddr} + + + + ) ) : isLoading ? ( ) : ( diff --git a/components/TitleWithDomain/index.tsx b/components/TitleWithDomain/index.tsx new file mode 100644 index 000000000..49e830dca --- /dev/null +++ b/components/TitleWithDomain/index.tsx @@ -0,0 +1,25 @@ +import { useTranslation } from 'next-i18next' +import { DOMAIN_LOGO_BASE_URL } from 'utils/constants' + +import styles from './styles.module.scss' + +type Props = { + domain: string +} + +const TitleWithDomain = ({ domain = '' }: Props) => { + const [t] = useTranslation('account') + const logoUrl = DOMAIN_LOGO_BASE_URL + domain + + return ( +
+ {t(`basicInfo`)} +
+ +
{domain}
+
+
+ ) +} + +export default TitleWithDomain diff --git a/components/TitleWithDomain/styles.module.scss b/components/TitleWithDomain/styles.module.scss new file mode 100644 index 000000000..6621ff2a9 --- /dev/null +++ b/components/TitleWithDomain/styles.module.scss @@ -0,0 +1,36 @@ +.title { + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 16px; + + @media screen and (max-width: 1024px) { + padding-right: unset; + } + + text-transform: initial; + .logo-domain { + max-width: 134px; + height: 24px; + background-color: #fafafa; + border: 1px solid #f0f0f0; + border-radius: 4px; + font-size: 14px; + font-weight: 400; + display: flex; + align-items: center; + margin-right: 4px; + } + .domian { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-right: 4px; + } + & img { + width: 16px; + height: 16px; + border-radius: 50%; + margin: 4px; + } +} diff --git a/components/TokenApprovalList/index.tsx b/components/TokenApprovalList/index.tsx index 0c6ee33e4..b430c8def 100644 --- a/components/TokenApprovalList/index.tsx +++ b/components/TokenApprovalList/index.tsx @@ -307,7 +307,7 @@ const TokenApprovalList: React.FC{t(item.udt.eth_type as string, { ns: 'account' })} {item.type === GraphQLSchema.ApprovalType.Approval ? 'approve' : 'approve for all'} -
+
diff --git a/components/TruncatedAddress.tsx b/components/TruncatedAddress.tsx index d58225aee..bc5580b03 100644 --- a/components/TruncatedAddress.tsx +++ b/components/TruncatedAddress.tsx @@ -1,7 +1,8 @@ import { Box, SxProps } from '@mui/material' +import Tooltip from 'components/Tooltip' +import AddressWithDomain from 'components/AddressWithDomain' import HashLink from './HashLink' import { getAddressDisplay, GraphQLSchema, ZERO_ADDRESS } from 'utils' -import Tooltip from 'components/Tooltip' const TruncatedAddress = ({ address, @@ -10,6 +11,7 @@ const TruncatedAddress = ({ sx = {}, type, monoFont = true, + domain, }: { address: string leading?: number @@ -17,6 +19,7 @@ const TruncatedAddress = ({ sx?: SxProps type?: GraphQLSchema.AccountType monoFont?: boolean + domain?: string }) => { if (address === ZERO_ADDRESS) { return ( @@ -48,11 +51,19 @@ const TruncatedAddress = ({ } return ( - - - - - + <> + {domain ? ( + + + + ) : ( + + + + + + )} + ) } diff --git a/components/TxList/index.tsx b/components/TxList/index.tsx index 67163b312..20016d656 100644 --- a/components/TxList/index.tsx +++ b/components/TxList/index.tsx @@ -25,8 +25,8 @@ export type TxListProps = { method_name: string | null type: GraphQLSchema.TransactionType block?: Pick - from_account: Pick - to_account: Pick + from_account: Pick + to_account: Pick polyjuice: Pick }> metadata: GraphQLSchema.PageMetadata @@ -75,11 +75,13 @@ const txListQuery = gql` type eth_address script_hash + bit_alias } to_account { type eth_address script_hash + bit_alias } polyjuice { value @@ -158,8 +160,10 @@ const TxList: React.FC = entries.map(item => { const hash = item.eth_hash || item.hash const from = item.from_account?.eth_address || item.from_account?.script_hash || '-' + const from_alias = item.from_account?.bit_alias let to = item.to_account?.eth_address || item.to_account?.script_hash || '-' let toType = item.to_account?.type + let to_alias = item.to_account?.bit_alias if (item.polyjuice?.native_transfer_address_hash) { to = item.polyjuice.native_transfer_address_hash @@ -212,10 +216,10 @@ const TxList: React.FC = )} -
+
-
+
diff --git a/components/User.tsx b/components/User/index.tsx similarity index 53% rename from components/User.tsx rename to components/User/index.tsx index abea1226e..68e0a62ab 100644 --- a/components/User.tsx +++ b/components/User/index.tsx @@ -1,8 +1,9 @@ import { useTranslation } from 'next-i18next' import { Skeleton } from '@mui/material' -import InfoList from './InfoList' +import InfoList from 'components/InfoList' +import TitleWithDomain from 'components/TitleWithDomain' -const User = ({ nonce, isLoading }: { nonce: number; isLoading: boolean }) => { +const User = ({ nonce, isLoading, domain }: { nonce: number; isLoading: boolean; domain: string }) => { const [t] = useTranslation('account') const list = [ @@ -16,7 +17,7 @@ const User = ({ nonce, isLoading }: { nonce: number; isLoading: boolean }) => { }, ] - return + return : t('basicInfo')} list={list} /> } export default User diff --git a/cypress/integration/block/index.spec.ts b/cypress/integration/block/index.spec.ts index 8c7294ee3..6623cb1e0 100644 --- a/cypress/integration/block/index.spec.ts +++ b/cypress/integration/block/index.spec.ts @@ -233,7 +233,7 @@ context('Block Page', () => { expect(field.find('time').attr('datetime')).to.eq('2022-06-24T04:03:33.492000Z') }) .next() - .should('have.text', '0x60a227...c90b8984') + .should('have.text', 'gwtest.bit') .next() .should('have.text', 'polyjuice creator') .next() diff --git a/cypress/integration/tx/index.spec.ts b/cypress/integration/tx/index.spec.ts index 0bbcce915..1b03f3ce1 100644 --- a/cypress/integration/tx/index.spec.ts +++ b/cypress/integration/tx/index.spec.ts @@ -20,11 +20,7 @@ context('Transaction Page', () => { }) it('should have from', () => { - cy.get('dl[title="from"]') - .find('dt') - .should('have.text', 'from') - .next() - .should('have.text', '0x40dfb7df991c9aa6138a60f0cac6ed1d02b834b8') + cy.get('dl[title="from"]').find('dt').should('have.text', 'from') }) it('should have contract address', () => { diff --git a/pages/account/[id].tsx b/pages/account/[id].tsx index d166c9a4b..7ff2b03d1 100644 --- a/pages/account/[id].tsx +++ b/pages/account/[id].tsx @@ -88,7 +88,7 @@ const Account = () => { const deployment_tx_hash = isSmartContractAccount(account) && account?.smart_contract?.deployment_tx_hash - const { data: deployerAddr } = useQuery( + const { data: deployer } = useQuery( ['deployer', deployment_tx_hash], () => fetchDeployAddress({ @@ -288,7 +288,7 @@ const Account = () => { isBalanceLoading={!account && isBalanceLoading} account={account} balance={balance} - deployerAddr={deployerAddr} + deployer={deployer} refetch={accountOverviewRefetch} />
diff --git a/pages/index.tsx b/pages/index.tsx index 64e589538..17ef232a3 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -29,7 +29,9 @@ import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRound import Search from 'components/Search' import BlockStateIcon from 'components/BlockStateIcon' import TxStatusIcon from 'components/TxStatusIcon' +import Address from 'components/TruncatedAddress' import { fetchHome, timeDistance, formatInt, client, GraphQLSchema, IS_MAINNET } from 'utils' + type State = API.Home.Parsed // TODO: add polyjuice status @@ -46,7 +48,7 @@ const formatAddress = (addr: string, bigScreen: boolean = true, isSpecial: boole } } if (bigScreen && addr.length > 16) { - return `${addr.slice(0, 8)}...${addr.slice(-7)}` + return `${addr.slice(0, 8)}...${addr.slice(-8)}` } if (!bigScreen && addr.length > 8) { return `${addr.slice(0, 4)}...${addr.slice(-4)}` @@ -78,11 +80,13 @@ const queryHomeLists = gql` eth_address script_hash type + bit_alias } to_account { eth_address script_hash type + bit_alias } polyjuice { status @@ -109,8 +113,8 @@ interface HomeLists { eth_hash: string hash: string type: GraphQLSchema.TransactionType - from_account: Pick - to_account: Pick + from_account: Pick + to_account: Pick polyjuice: Pick }> } @@ -451,6 +455,9 @@ const TxList: React.FC<{ list: HomeLists['transactions']['entries']; isLoading: let to = tx.to_account?.eth_address || tx.to_account?.script_hash || '-' let toType = tx.to_account?.type + const from_bit_alias = tx.from_account?.bit_alias + const to_bit_alias = tx.to_account?.bit_alias + if (tx.polyjuice?.native_transfer_address_hash) { to = tx.polyjuice.native_transfer_address_hash toType = GraphQLSchema.AccountType.EthUser @@ -525,16 +532,18 @@ const TxList: React.FC<{ list: HomeLists['transactions']['entries']; isLoading: sx={{ pl: { xs: 1, sm: 0 } }} justifyContent={{ xs: 'center', md: 'space-between' }} > - + {`${t('from')}`} - + - + {`${t('to')}`} - + diff --git a/pages/multi-token-collections/index.tsx b/pages/multi-token-collections/index.tsx index d7537d620..8a3ce7c28 100644 --- a/pages/multi-token-collections/index.tsx +++ b/pages/multi-token-collections/index.tsx @@ -12,6 +12,7 @@ import Table from 'components/Table' import Pagination from 'components/SimplePagination' import TokenLogo from 'components/TokenLogo' import HashLink from 'components/HashLink' +import Address from 'components/TruncatedAddress' import { SIZES } from 'components/PageSize' import NoDataIcon from 'assets/icons/no-data.svg' import { client, GraphQLSchema } from 'utils' @@ -35,6 +36,7 @@ const erc1155ListQuery = gql` icon account { eth_address + bit_alias } holders_count minted_count @@ -124,6 +126,8 @@ const MultiTokenCollectionList = () => { {list?.metadata.total_count ? ( list.entries.map(item => { + const domain = item?.account?.bit_alias + return ( @@ -138,13 +142,23 @@ const MultiTokenCollectionList = () => { - - - - + {domain ? ( +
+
+
+ ) : ( + <> + + + + + + )} {item.token_type_count.toLocaleString('en')} diff --git a/pages/multi-token-collections/styles.module.scss b/pages/multi-token-collections/styles.module.scss index 48931ff31..fa187fd4a 100644 --- a/pages/multi-token-collections/styles.module.scss +++ b/pages/multi-token-collections/styles.module.scss @@ -51,6 +51,11 @@ a:last-child { display: none; } + .address-with-domain { + a:last-child { + display: inline !important; + } + } @media screen and (max-width: 1024px) { a:first-child { display: none; diff --git a/pages/nft-collections/index.tsx b/pages/nft-collections/index.tsx index c20e2d336..16bc728f8 100644 --- a/pages/nft-collections/index.tsx +++ b/pages/nft-collections/index.tsx @@ -5,13 +5,14 @@ import { useTranslation } from 'next-i18next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { useQuery } from 'react-query' import { gql } from 'graphql-request' -import { Skeleton, Tooltip } from '@mui/material' +import { Skeleton } from '@mui/material' import SubpageHead from 'components/SubpageHead' import PageTitle from 'components/PageTitle' import Table from 'components/Table' import Pagination from 'components/SimplePagination' import TokenLogo from 'components/TokenLogo' import HashLink from 'components/HashLink' +import Address from 'components/TruncatedAddress' import { SIZES } from 'components/PageSize' import NoDataIcon from 'assets/icons/no-data.svg' import { client, GraphQLSchema } from 'utils' @@ -35,6 +36,7 @@ const erc721ListQuery = gql` icon account { eth_address + bit_alias } holders_count minted_count @@ -123,6 +125,8 @@ const NftCollectionList = () => { {list?.metadata.total_count ? ( list.entries.map(item => { + const domain = item?.account?.bit_alias + return ( @@ -137,15 +141,23 @@ const NftCollectionList = () => { - - - - - - + {domain ? ( +
+
+
+ ) : ( + <> + + + + + + )} {(+item.holders_count).toLocaleString('en')} diff --git a/pages/nft-collections/styles.module.scss b/pages/nft-collections/styles.module.scss index 48931ff31..fa187fd4a 100644 --- a/pages/nft-collections/styles.module.scss +++ b/pages/nft-collections/styles.module.scss @@ -51,6 +51,11 @@ a:last-child { display: none; } + .address-with-domain { + a:last-child { + display: inline !important; + } + } @media screen and (max-width: 1024px) { a:first-child { display: none; diff --git a/pages/tokens/[type].tsx b/pages/tokens/[type].tsx index a4b7101b1..87b5df3e6 100644 --- a/pages/tokens/[type].tsx +++ b/pages/tokens/[type].tsx @@ -17,6 +17,7 @@ import TokenLogo from 'components/TokenLogo' import FilterMenu from 'components/FilterMenu' import Amount from 'components/Amount' import Tooltip from 'components/Tooltip' +import Address from 'components/TruncatedAddress' import { SIZES } from 'components/PageSize' import SortIcon from 'assets/icons/sort.svg' import AddIcon from 'assets/icons/add.svg' @@ -43,7 +44,7 @@ type TokenListProps = { icon: string | null symbol: string holders_count: number - account: Pick + account: Pick }> metadata: GraphQLSchema.PageMetadata } @@ -103,6 +104,7 @@ const tokenListQuery = gql` account { eth_address script_hash + bit_alias } } metadata { @@ -311,6 +313,8 @@ const TokenList = () => { } const id = token.bridge_account_id ?? token.id const addr = token.contract_address_hash || token.account.script_hash + const domain = token.account?.bit_alias + return ( @@ -374,7 +378,9 @@ const TokenList = () => { - {addr.length > 42 ? ( + {domain ? ( +
+ ) : addr.length > 42 ? ( diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx index c93a1d532..c1b0e0402 100644 --- a/pages/tx/[hash].tsx +++ b/pages/tx/[hash].tsx @@ -23,6 +23,7 @@ import Amount from 'components/Amount' import { SIZES } from 'components/PageSize' import Tooltip from 'components/Tooltip' import PolyjuiceStatus from 'components/PolyjuiceStatus' +import Address from 'components/TruncatedAddress' import { TransferlistType } from 'components/BaseTransferlist' import ExpandIcon from 'assets/icons/expand.svg' import { @@ -34,6 +35,7 @@ import { PCKB_UDT_INFO, provider, } from 'utils' + import styles from './styles.module.scss' const tabs = ['erc20Records', 'erc721Records', 'erc1155Records', 'logs', 'rawData'] @@ -45,8 +47,14 @@ interface Transaction { index: number method_id: string | null method_name: string | null - from_account: Pick | null - to_account: Pick | null + from_account: Pick< + GraphQLSchema.Account, + 'eth_address' | 'type' | 'smart_contract' | 'script_hash' | 'bit_alias' + > | null + to_account: Pick< + GraphQLSchema.Account, + 'eth_address' | 'type' | 'smart_contract' | 'script_hash' | 'bit_alias' + > | null polyjuice: Pick< GraphQLSchema.Polyjuice, | 'tx_hash' @@ -74,10 +82,12 @@ const txQuery = gql` from_account { eth_address type + bit_alias } to_account { eth_address type + bit_alias script_hash smart_contract { name @@ -265,6 +275,7 @@ const Tx = () => { const fromAddrDisplay = getAddressDisplay(tx?.from_account) const toAddrDisplay = getAddressDisplay(tx?.to_account, tx?.polyjuice?.native_transfer_address_hash) const method = tx?.method_name ?? tx?.method_id + const from_bit_alias = tx?.from_account?.bit_alias const overview: InfoItermProps[] = [ { @@ -282,7 +293,9 @@ const Tx = () => { ) : tx ? ( : fromAddrDisplay.label + } href={`/address/${fromAddrDisplay.address}`} style={{ wordBreak: 'break-all' }} /> diff --git a/public/icons/bit-logo.svg b/public/icons/bit-logo.svg new file mode 100644 index 000000000..84519256c --- /dev/null +++ b/public/icons/bit-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/utils/constants.ts b/utils/constants.ts index 66d36f75e..be34cf5a0 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -8,6 +8,7 @@ export const API_ENDPOINT = `https://${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/ export const WS_ENDPOINT = `wss://${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/socket` export const GRAPHQL_ENDPOINT = `https://${process.env.NEXT_PUBLIC_SERVER_ENDPOINT}/graphql` export const NODE_URL = process.env.NEXT_PUBLIC_NODE_URL +export const DOMAIN_LOGO_BASE_URL = 'https://identicons.did.id/identicon/' export const EXPLORER_TITLE = process.env.NEXT_PUBLIC_EXPLORER_TITLE export const IS_MAINNET = process.env.NEXT_PUBLIC_CHAIN_TYPE === 'mainnet' diff --git a/utils/graphql.ts b/utils/graphql.ts index a8e2064e0..e952c2e69 100644 --- a/utils/graphql.ts +++ b/utils/graphql.ts @@ -117,6 +117,7 @@ export namespace GraphQLSchema { token_transfer_count: number transaction_count: number type: AccountType + bit_alias: string } export interface AccountCkb { @@ -226,7 +227,7 @@ export namespace GraphQLSchema { name: string symbol: string icon: string - account: Pick + account: Pick holders_count: string minted_count: string } @@ -236,7 +237,7 @@ export namespace GraphQLSchema { name: string symbol: string icon: string - account: Pick + account: Pick holders_count: string minted_count: string token_type_count: number