Skip to content

F
frontend
Commit 64b466b6 authored by isstuev's avatar isstuev
Browse files
Options

search redesign

parent ebd5aa67
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 257 deletions
lib/date/dayjs.ts
View file @ 64b466b6
......@@ -7,6 +7,8 @@ import relativeTime from 'dayjs/plugin/relativeTime';
import updateLocale from 'dayjs/plugin/updateLocale';
import weekOfYear from 'dayjs/plugin/weekOfYear';
import { nbsp } from 'lib/html-entities';
const relativeTimeConfig = {
thresholds: [
{ l: 's', r: 1 },
......@@ -33,7 +35,7 @@ dayjs.extend(minMax);
dayjs.updateLocale('en', {
formats: {
LLLL: 'MMMM-DD-YYYY HH:mm:ss A Z UTC',
llll: `MMM DD YYYY HH:mm:ss A (Z${ nbsp }UTC)`,
},
relativeTime: {
s: 'a sec',
......
ui/address/contract/ContractCode.tsx
View file @ 64b466b6
......@@ -187,7 +187,7 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
<InfoItem label="Optimization enabled" value={ data.optimization_enabled ? 'true' : 'false' } isLoading={ isPlaceholderData }/> }
{ data.optimization_runs && <InfoItem label="Optimization runs" value={ String(data.optimization_runs) } isLoading={ isPlaceholderData }/> }
{ data.verified_at &&
<InfoItem label="Verified at" value={ dayjs(data.verified_at).format('LLLL') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
<InfoItem label="Verified at" value={ dayjs(data.verified_at).format('llll') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
{ data.file_path && <InfoItem label="Contract file path" value={ data.file_path } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
</Grid>
) }
......
ui/block/BlockDetails.tsx
View file @ 64b466b6
......@@ -166,7 +166,7 @@ const BlockDetails = ({ query }: Props) => {
</Skeleton>
<TextSeparator/>
<Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">
{ dayjs(data.timestamp).format('LLLL') }
{ dayjs(data.timestamp).format('llll') }
</Skeleton>
</DetailsInfoItem>
<DetailsInfoItem
......
ui/home/IndexingAlertIntTxs.tsx
View file @ 64b466b6
......@@ -54,7 +54,7 @@ const IndexingAlertIntTxs = ({ className }: { className?: string }) => {
<Text fontSize="xs" color={ hintTextcolor }>
{ data.indexed_internal_transactions_ratio &&
`${ Math.floor(Number(data.indexed_internal_transactions_ratio) * 100) }% Blocks With Internal Transactions Indexed${ nbsp }${ ndash } ` }
We{ apos }re indexing this chain right now. Some of the counts may be inaccurate.`
We{ apos }re indexing this chain right now. Some of the counts may be inaccurate.
</Text>
);
......
ui/pages/SearchResults.tsx
View file @ 64b466b6
......@@ -15,39 +15,6 @@ import Pagination from 'ui/shared/pagination/Pagination';
import Thead from 'ui/shared/TheadSticky';
import Header from 'ui/snippets/header/Header';
import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
// eslint-disable-next-line import-helpers/order-imports
import * as searchMock from 'mocks/search/index';
const mock = [
searchMock.address1,
searchMock.block1,
searchMock.contract1,
searchMock.label1,
searchMock.token1,
searchMock.token2,
searchMock.tx1,
searchMock.address1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.contract1,
searchMock.label1,
searchMock.token1,
searchMock.token2,
searchMock.tx1,
searchMock.address1,
searchMock.block1,
searchMock.contract1,
searchMock.label1,
searchMock.token1,
searchMock.token2,
];
const SearchResultsPageContent = () => {
const router = useRouter();
......@@ -101,8 +68,7 @@ const SearchResultsPageContent = () => {
return (
<>
<Show below="lg" ssr={ false }>
{ mock.map((item, index) => (
// { data.items.map((item, index) => (
{ data.items.map((item, index) => (
<SearchResultListItem
key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
data={ item }
......@@ -117,13 +83,12 @@ const SearchResultsPageContent = () => {
<Tr>
<Th width="30%">Search Result</Th>
<Th width="35%"/>
<Th width="35%"/>
<Th width="35%" pr={ 10 }/>
<Th width="150px">Category</Th>
</Tr>
</Thead>
<Tbody>
{ /* { data.items.map((item, index) => ( */ }
{ mock.map((item, index) => (
{ data.items.map((item, index) => (
<SearchResultTableItem
key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
data={ item }
......
ui/searchResults/SearchResultListItem.tsx
View file @ 64b466b6
......@@ -15,10 +15,10 @@ import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import HashStringShorten from 'ui/shared/HashStringShorten';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import LinkInternal from 'ui/shared/LinkInternal';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
import TokenLogo from 'ui/shared/TokenLogo';
interface Props {
......@@ -89,7 +89,6 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
<Flex alignItems="flex-start">
<Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<LinkInternal
ml={ 2 }
href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
fontWeight={ 700 }
wordBreak="break-all"
......@@ -138,32 +137,25 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
return (
<Grid templateColumns="1fr auto" overflow="hidden" gap={ 5 }>
<Skeleton isLoaded={ !isLoading } overflow="hidden" display="flex" alignItems="center">
<HashStringShorten hash={ data.address }/>
<HashStringShortenDynamic hash={ data.address }/>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Skeleton>
{ data.token_type === 'ERC-20' && data.exchange_rate && (
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
${ Number(data.exchange_rate).toLocaleString() }
</Text>
) }
{ data.token_type !== 'ERC-20' && data.total_supply && (
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" variant="secondary">
Items { Number(data.total_supply).toLocaleString() }
</Text>
) }
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
</Grid>
);
}
case 'block': {
const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
return (
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Text variant="secondary" mr={ 2 }>{ dayjs(data.timestamp).format('llll') }</Text>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
<HashStringShorten hash={ data.block_hash }/>
<>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
<HashStringShortenDynamic hash={ data.block_hash }/>
</Box>
</Flex>
<Text variant="secondary" mr={ 2 }>{ dayjs(data.timestamp).format('llll') }</Text>
</>
);
}
case 'transaction': {
......@@ -192,12 +184,14 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
}
})();
const category = getItemCategory(data);
return (
<ListItemMobile py={ 3 } fontSize="sm" rowGap={ 2 }>
<Flex justifyContent="space-between" w="100%" overflow="hidden" lineHeight={ 6 }>
{ firstRow }
<Skeleton isLoaded={ !isLoading } color="text_secondary" ml={ 8 } textTransform="capitalize">
<span>{ data.type }</span>
<span>{ category ? searchItemTitles[category].itemTitleShort : '' }</span>
</Skeleton>
</Flex>
{ Boolean(secondRow) && (
......
ui/searchResults/SearchResultTableItem.tsx
View file @ 64b466b6
......@@ -17,6 +17,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import LinkInternal from 'ui/shared/LinkInternal';
import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
import TokenLogo from 'ui/shared/TokenLogo';
interface Props {
......@@ -66,25 +67,19 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
</Flex>
</Td>
<Td fontSize="sm" verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center">
<Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center" justifyContent="space-between">
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-32px)' : 'unset' }>
<HashStringShortenDynamic hash={ data.address }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Skeleton>
</Td>
<Td fontSize="sm" verticalAlign="middle">
<Td fontSize="sm" verticalAlign="middle" isNumeric>
<Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden">
{ data.token_type === 'ERC-20' && data.exchange_rate && (
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
${ Number(data.exchange_rate).toLocaleString() }
</Text>
) }
{ data.token_type !== 'ERC-20' && data.total_supply && (
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" variant="secondary">
Items { Number(data.total_supply).toLocaleString() }
</Text>
) }
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
</Skeleton>
</Td>
</>
......@@ -154,12 +149,15 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
</LinkInternal>
</Flex>
</Td>
<Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
<Flex alignItems="center" overflow="hidden">
<HashStringShortenDynamic hash={ data.address }/>
<Td fontSize="sm" verticalAlign="middle">
<Flex alignItems="center" overflow="hidden" justifyContent="space-between">
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-32px)' : 'unset' }>
<HashStringShortenDynamic hash={ data.address }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
</Td>
<Td></Td>
</>
);
}
......@@ -186,7 +184,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<HashStringShortenDynamic hash={ data.block_hash }/>
</Box>
</Td>
<Td fontSize="sm" verticalAlign="middle">
<Td fontSize="sm" verticalAlign="middle" isNumeric>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
</Td>
</>
......@@ -204,7 +202,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
</chakra.mark>
</Flex>
</Td>
<Td fontSize="sm" verticalAlign="middle">
<Td fontSize="sm" verticalAlign="middle" isNumeric>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
</Td>
</>
......@@ -213,12 +211,14 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
}
})();
const category = getItemCategory(data);
return (
<Tr>
{ content }
<Td fontSize="sm" textTransform="capitalize" verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
<span>{ data.type }</span>
<span>{ category ? searchItemTitles[category].itemTitle : '' }</span>
</Skeleton>
</Td>
</Tr>
......
ui/shared/search/utils.ts 0 → 100644
View file @ 64b466b6
import type { SearchResultItem } from 'types/api/search';
export type Category = 'token' | 'nft' | 'address' | 'app' | 'public_tag' | 'transaction' | 'block';
export const searchCategories: Array<{id: Category; title: string }> = [
{ id: 'token', title: 'Tokens (ERC-20)' },
{ id: 'nft', title: 'NFTs (ERC-721 & 1155)' },
{ id: 'address', title: 'Addresses' },
{ id: 'app', title: 'Apps' },
{ id: 'public_tag', title: 'Public tags' },
{ id: 'transaction', title: 'Transactions' },
{ id: 'block', title: 'Blocks' },
];
export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleShort: string }> = {
token: { itemTitle: 'Token', itemTitleShort: 'Token' },
nft: { itemTitle: 'NFT', itemTitleShort: 'NFT' },
address: { itemTitle: 'Address', itemTitleShort: 'Address' },
app: { itemTitle: 'App', itemTitleShort: 'App' },
public_tag: { itemTitle: 'Public tag', itemTitleShort: 'Tag' },
transaction: { itemTitle: 'Transaction', itemTitleShort: 'Txn' },
block: { itemTitle: 'Block', itemTitleShort: 'Block' },
};
export function getItemCategory(item: SearchResultItem): Category | undefined {
switch (item.type) {
case 'address':
case 'contract': {
return 'address';
}
case 'token': {
if (item.token_type === 'ERC-20') {
return 'token';
}
return 'nft';
}
case 'block': {
return 'block';
}
case 'label': {
return 'public_tag';
}
case 'transaction': {
return 'transaction';
}
}
}
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx
View file @ 64b466b6
......@@ -9,45 +9,11 @@ import useIsMobile from 'lib/hooks/useIsMobile';
import TextAd from 'ui/shared/ad/TextAd';
import ContentLoader from 'ui/shared/ContentLoader';
import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
import type { Category } from 'ui/shared/search/utils';
import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
import SearchBarSuggestItem from './SearchBarSuggestItem';
type Category = 'token' | 'nft' | 'address' | 'app' | 'public_tag' | 'transaction' | 'block';
const CATEGORIES: Array<{id: Category; title: string }> = [
{ id: 'token', title: 'Tokens (ERC-20)' },
{ id: 'nft', title: 'NFTs (ERC-721 & ERC-1155)' },
{ id: 'address', title: 'Addresses' },
{ id: 'app', title: 'Apps' },
{ id: 'public_tag', title: 'Public tags' },
{ id: 'transaction', title: 'Transactions' },
{ id: 'block', title: 'Blocks' },
];
const getItemCategory = (item: SearchResultItem): Category | undefined => {
switch (item.type) {
case 'address':
case 'contract': {
return 'address';
}
case 'token': {
if (item.token_type === 'ERC-20') {
return 'token';
}
return 'nft';
}
case 'block': {
return 'block';
}
case 'label': {
return 'public_tag';
}
case 'transaction': {
return 'transaction';
}
}
};
interface Props {
query: QueryWithPagesResult<'search'>;
searchTerm: string;
......@@ -55,40 +21,6 @@ interface Props {
containerId: string;
}
// eslint-disable-next-line import-helpers/order-imports
import * as searchMock from 'mocks/search/index';
const mock = [
searchMock.address1,
searchMock.block1,
searchMock.contract1,
searchMock.label1,
searchMock.token1,
searchMock.token2,
searchMock.tx1,
searchMock.address1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.block1,
searchMock.contract1,
searchMock.label1,
searchMock.token1,
searchMock.token2,
searchMock.tx1,
searchMock.address1,
searchMock.block1,
searchMock.contract1,
searchMock.label1,
searchMock.token1,
searchMock.token2,
];
const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props) => {
const isMobile = useIsMobile();
......@@ -133,8 +65,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
return {};
}
const map: Partial<Record<Category, Array<SearchResultItem>>> = {};
// query.data?.items.forEach(item => {
mock.forEach(item => {
query.data?.items.forEach(item => {
const cat = getItemCategory(item);
if (cat) {
if (cat in map) {
......@@ -168,7 +99,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
return <Text>Something went wrong. Try refreshing the page or come back later.</Text>;
}
const resultCategories = CATEGORIES.filter(cat => itemsGroups[cat.id]);
const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
return (
<>
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx
View file @ 64b466b6
......@@ -27,45 +27,29 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
flexShrink={ 0 }
/>
{ data.name && (
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 1 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
) }
{ !data.name && (
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
flexGrow={ 1 }
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
flexGrow={ 1 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Box>
) }
{ !data.name && data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
{ data.name && (
<Flex alignItems="center" justifyContent="space-between">
<Text
as={ shouldHighlightHash ? 'mark' : 'span' }
overflow="hidden"
whiteSpace="nowrap"
variant="secondary"
flexGrow={ 1 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 1 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
) }
</>
);
......@@ -79,43 +63,29 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
flexShrink={ 0 }
/>
<Flex alignItems="center" w="420px">
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
{ data.name && (
<>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 0 }
w="200px"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
<Text
as={ shouldHighlightHash ? 'mark' : 'span' }
overflow="hidden"
whiteSpace="nowrap"
variant="secondary"
ml={ 2 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</>
) }
{ !data.name && (
<>
<Box
as={ shouldHighlightHash ? 'mark' : 'span' }
display="block"
overflow="hidden"
whiteSpace="nowrap"
fontWeight={ 700 }
>
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</>
<Text
variant="secondary"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
flexGrow={ 0 }
ml={ 6 }
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
</Text>
) }
</Flex>
);
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
View file @ 64b466b6
import { Text, Icon, Grid } from '@chakra-ui/react';
import { Text, Icon, Flex, Grid } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultBlock } from 'types/api/search';
......@@ -20,7 +20,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
if (isMobile) {
return (
<>
<Grid alignItems="center" templateColumns="24px auto 1fr" gap={ 2 }>
<Flex alignItems="center">
<Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
<Text
fontWeight={ 700 }
......@@ -30,23 +30,24 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
</Text>
<Text variant="secondary" overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
<HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
</Text>
</Grid>
</Flex>
<Text variant="secondary" overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
<HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
</Text>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
</>
);
}
return (
<Grid templateColumns="24px auto 1fr auto" gap={ 2 }>
<Grid templateColumns="24px auto minmax(auto, max-content) auto" gap={ 2 }>
<Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>
<Text
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
w="200px"
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
</Text>
......@@ -59,7 +60,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
>
<HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
</Text>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
<Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
</Grid>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
View file @ 64b466b6
......@@ -38,16 +38,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
{ data.token_type === 'ERC-20' && data.exchange_rate && (
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } fontWeight={ 700 } maxW="200px">
${ Number(data.exchange_rate).toLocaleString() }
</Text>
) }
{ data.token_type !== 'ERC-20' && data.total_supply && (
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } variant="secondary" maxW="200px" >
Items { Number(data.total_supply).toLocaleString() }
</Text>
) }
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } fontWeight={ 700 } maxW="200px">
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
</Grid>
</>
);
......@@ -72,16 +66,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
</Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
</Flex>
{ data.token_type === 'ERC-20' && data.exchange_rate && (
<Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } fontWeight={ 700 }>
${ Number(data.exchange_rate).toLocaleString() }
</Text>
) }
{ data.token_type !== 'ERC-20' && data.total_supply && (
<Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } variant="secondary">
Items { Number(data.total_supply).toLocaleString() }
</Text>
) }
<Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
{ data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
</Text>
</Grid>
);
};
......
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
View file @ 64b466b6
......@@ -29,12 +29,13 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
}
return (
<Grid templateColumns="24px 1fr auto" gap={ 2 }>
<Grid templateColumns="24px minmax(auto, max-content) auto" gap={ 2 }>
<Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>
<chakra.mark overflow="hidden" whiteSpace="nowrap" display="block" fontWeight={ 700 } width="fit-content">
<chakra.mark overflow="hidden" whiteSpace="nowrap" display="block" fontWeight={ 700 } >
<HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
</chakra.mark>
<Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
<Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
</Grid>
);
};
......
ui/tx/TxDetails.tsx
View file @ 64b466b6
......@@ -195,7 +195,7 @@ const TxDetails = () => {
<Icon as={ clockIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
<Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>{ dayjs(data.timestamp).fromNow() }</Skeleton>
<TextSeparator/>
<Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">{ dayjs(data.timestamp).format('LLLL') }</Skeleton>
<Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">{ dayjs(data.timestamp).format('llll') }</Skeleton>
<TextSeparator color="gray.500"/>
<Skeleton isLoaded={ !isPlaceholderData } color="text_secondary">
<span>{ getConfirmationDuration(data.confirmation_duration) }</span>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment