Skip to content

F
frontend
Commit 4c91e208 authored by tom's avatar tom
Browse files
Options

remove Address component, pt.1

parent 0409b908
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 313 deletions
ui/address/contract/ContractCode.tsx
View file @ 4c91e208
......@@ -12,10 +12,8 @@ import dayjs from 'lib/date/dayjs';
import useSocketChannel from 'lib/socket/useSocketChannel';
import useSocketMessage from 'lib/socket/useSocketMessage';
import * as stubs from 'stubs/contract';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal';
import RawDataSnippet from 'ui/shared/RawDataSnippet';
......@@ -171,10 +169,12 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
{ !data?.is_verified && data?.verified_twin_address_hash && !data?.minimal_proxy_address_hash && (
<Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
<span>Contract is not verified. However, we found a verified contract with the same bytecode in Blockscout DB </span>
<Address>
<AddressIcon address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}/>
<AddressLink type="address" hash={ data.verified_twin_address_hash } truncation="constant" ml={ 2 }/>
</Address>
<AddressEntity
address={{ hash: data.verified_twin_address_hash, is_contract: true, implementation_name: null }}
truncation="constant"
fontSize="sm"
fontWeight="500"
/>
<chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>
<LinkInternal href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }>
Verify & Publish
......@@ -185,10 +185,12 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
{ data?.minimal_proxy_address_hash && (
<Alert status="warning" flexWrap="wrap" whiteSpace="pre-wrap">
<span>Minimal Proxy Contract for </span>
<Address>
<AddressIcon address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}/>
<AddressLink type="address" hash={ data.minimal_proxy_address_hash } truncation="constant" ml={ 2 }/>
</Address>
<AddressEntity
address={{ hash: data.minimal_proxy_address_hash, is_contract: true, implementation_name: null }}
truncation="constant"
fontSize="sm"
fontWeight="500"
/>
<span>. </span>
<Box>
<Link href="https://eips.ethereum.org/EIPS/eip-1167">EIP-1167</Link>
......
ui/address/contract/ContractExternalLibraries.tsx
View file @ 4c91e208
......@@ -24,10 +24,7 @@ import arrowIcon from 'icons/arrows/east-mini.svg';
import iconWarning from 'icons/status/warning.svg';
import useIsMobile from 'lib/hooks/useIsMobile';
import { apos } from 'lib/html-entities';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props {
className?: string;
......@@ -38,11 +35,13 @@ const Item = (data: SmartContractExternalLibrary) => {
return (
<Flex flexDir="column" py={ 2 } w="100%" rowGap={ 1 }>
<Box>{ data.name }</Box>
<Address>
<AddressIcon address={{ hash: data.address_hash, is_contract: true, implementation_name: null }}/>
<AddressLink hash={ data.address_hash } type="address" ml={ 2 } fontWeight={ 500 } fontSize="sm" target="_blank" query={{ tab: 'contract' }}/>
<CopyToClipboard text={ data.address_hash }/>
</Address>
<AddressEntity
address={{ hash: data.address_hash, is_contract: true, implementation_name: null }}
query={{ tab: 'contract' }}
fontSize="sm"
fontWeight="500"
target="_blank"
/>
</Flex>
);
};
......
ui/address/contract/ContractImplementationAddress.tsx
View file @ 4c91e208
import { Flex } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import React from 'react';
import type { Address as TAddress } from 'types/api/address';
import { getResourceKey } from 'lib/api/useApiQuery';
import Address from 'ui/shared/address/Address';
import AddressLink from 'ui/shared/address/AddressLink';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
interface Props {
hash: string | undefined;
......@@ -22,10 +22,10 @@ const ContractImplementationAddress = ({ hash }: Props) => {
}
return (
<Address whiteSpace="pre-wrap" flexWrap="wrap" mb={ 6 }>
<span>Implementation address: </span>
<AddressLink type="address" hash={ data.implementation_address }/>
</Address>
<Flex mb={ 6 } flexWrap="wrap" columnGap={ 2 }>
<span>Implementation address:</span>
<AddressEntity address={{ hash: data.implementation_address, is_contract: true }} noIcon noCopy/>
</Flex>
);
};
......
ui/address/contract/ContractMethodConstant.tsx
View file @ 4c91e208
......@@ -7,9 +7,7 @@ import type { SmartContractMethodOutput } from 'types/api/contract';
import config from 'configs/app';
import { WEI } from 'lib/consts';
import Address from 'ui/shared/address/Address';
import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
function castValueToString(value: number | string | boolean | bigint | undefined): string {
switch (typeof value) {
......@@ -49,10 +47,10 @@ const ContractMethodStatic = ({ data }: Props) => {
const content = (() => {
if (typeof data.value === 'string' && data.type === 'address' && data.value) {
return (
<Address>
<AddressLink type="address" hash={ data.value }/>
<CopyToClipboard text={ data.value }/>
</Address>
<AddressEntity
address={{ hash: data.value }}
noIcon
/>
);
}
......
ui/addresses/AddressesListItem.tsx
View file @ 4c91e208
......@@ -5,11 +5,8 @@ import React from 'react';
import type { AddressesItem } from 'types/api/addresses';
import config from 'configs/app';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Tag from 'ui/shared/chakra/Tag';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
type Props = {
......@@ -31,19 +28,12 @@ const AddressesListItem = ({
return (
<ListItemMobile rowGap={ 3 }>
<Flex alignItems="center" justifyContent="space-between" w="100%">
<Address maxW="100%" mr={ 8 }>
<AddressIcon address={ item } mr={ 2 } isLoading={ isLoading }/>
<AddressLink
fontWeight={ 700 }
flexGrow={ 1 }
w="calc(100% - 32px)"
hash={ item.hash }
alias={ item.name }
type="address"
isLoading={ isLoading }
/>
<CopyToClipboard text={ item.hash } isLoading={ isLoading }/>
</Address>
<AddressEntity
address={ item }
isLoading={ isLoading }
fontWeight={ 700 }
mr={ 2 }
/>
<Skeleton isLoaded={ !isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text_secondary">
<span>{ index }</span>
</Skeleton>
......
ui/addresses/AddressesTableItem.tsx
View file @ 4c91e208
......@@ -5,11 +5,8 @@ import React from 'react';
import type { AddressesItem } from 'types/api/addresses';
import config from 'configs/app';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Tag from 'ui/shared/chakra/Tag';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
type Props = {
item: AddressesItem;
......@@ -37,20 +34,12 @@ const AddressesTableItem = ({
{ index }
</Skeleton>
</Td>
<Td>
<Address display="inline-flex" maxW="100%">
<AddressIcon address={ item } mr={ 2 } isLoading={ isLoading }/>
<AddressLink
fontWeight={ 700 }
flexGrow={ 1 }
w="calc(100% - 32px)"
hash={ item.hash }
alias={ item.name }
type="address"
isLoading={ isLoading }
/>
<CopyToClipboard text={ item.hash } isLoading={ isLoading }/>
</Address>
<Td verticalAlign="middle">
<AddressEntity
address={ item }
isLoading={ isLoading }
fontWeight={ 700 }
/>
</Td>
<Td pl={ 10 }>
{ item.public_tags && item.public_tags.length ? item.public_tags.map(tag => (
......
ui/home/LatestTxsItem.tsx
View file @ 4c91e208
......@@ -14,10 +14,8 @@ import config from 'configs/app';
import rightArrowIcon from 'icons/arrows/east.svg';
import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxStatus from 'ui/shared/TxStatus';
import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
......@@ -83,31 +81,20 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
isLoading={ isLoading }
/>
<Box overflow="hidden" ml={ 1 }>
<Address mb={ 2 }>
<AddressIcon address={ tx.from } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ tx.from.hash }
alias={ tx.from.name }
fontWeight="500"
ml={ 2 }
fontSize="sm"
<AddressEntity
isLoading={ isLoading }
address={ tx.from }
fontSize="sm"
fontWeight="500"
mb={ 2 }
/>
{ dataTo && (
<AddressEntity
isLoading={ isLoading }
address={ dataTo }
fontSize="sm"
fontWeight="500"
/>
</Address>
{ dataTo && (
<Address>
<AddressIcon address={ dataTo } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ dataTo.hash }
alias={ dataTo.name }
fontWeight="500"
ml={ 2 }
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
) }
</Box>
</Grid>
......
ui/home/LatestTxsItemMobile.tsx
View file @ 4c91e208
......@@ -13,10 +13,8 @@ import config from 'configs/app';
import rightArrowIcon from 'icons/arrows/east.svg';
import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxStatus from 'ui/shared/TxStatus';
import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
......@@ -67,19 +65,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
) }
</Flex>
<Flex alignItems="center" mb={ 3 }>
<Address mr={ 2 }>
<AddressIcon address={ tx.from } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ tx.from.hash }
alias={ tx.from.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
<AddressEntity
isLoading={ isLoading }
address={ tx.from }
truncation="constant"
fontSize="sm"
fontWeight="500"
mr={ 2 }
/>
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
......@@ -87,19 +80,13 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
isLoading={ isLoading }
/>
{ dataTo && (
<Address ml={ 2 }>
<AddressIcon address={ dataTo } isLoading={ isLoading }/>
<AddressLink
type="address"
hash={ dataTo.hash }
alias={ dataTo.name }
fontWeight="500"
ml={ 2 }
truncation="constant"
fontSize="sm"
isLoading={ isLoading }
/>
</Address>
<AddressEntity
isLoading={ isLoading }
address={ dataTo }
truncation="constant"
fontSize="sm"
fontWeight="500"
/>
) }
</Flex>
<Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
......
ui/pages/ContractVerification.tsx
View file @ 4c91e208
import { Text } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
......@@ -9,12 +8,9 @@ import { useAppContext } from 'lib/contexts/app';
import getQueryParamString from 'lib/router/getQueryParamString';
import ContractVerificationForm from 'ui/contractVerification/ContractVerificationForm';
import { isValidVerificationMethod, sortVerificationMethods } from 'ui/contractVerification/utils';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import ContentLoader from 'ui/shared/ContentLoader';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import PageTitle from 'ui/shared/Page/PageTitle';
const ContractVerification = () => {
......@@ -100,15 +96,14 @@ const ContractVerification = () => {
title="New smart contract verification"
backLink={ backLink }
/>
{ hash && (
<Address mb={ 12 }>
<AddressIcon address={{ hash, is_contract: true, implementation_name: null }} flexShrink={ 0 }/>
<Text fontFamily="heading" ml={ 2 } fontWeight={ 500 } fontSize="lg" w={{ base: '100%', lg: 'auto' }} whiteSpace="nowrap" overflow="hidden">
<HashStringShortenDynamic hash={ hash }/>
</Text>
<CopyToClipboard text={ hash }/>
</Address>
) }
<AddressEntity
address={{ hash, is_contract: true, implementation_name: null }}
noLink
fontFamily="heading"
fontSize="lg"
fontWeight={ 500 }
mb={ 12 }
/>
{ content }
</>
);
......
ui/pages/CsvExport.tsx
View file @ 4c91e208
......@@ -8,14 +8,11 @@ import type { CsvExportParams } from 'types/client/address';
import type { ResourceName } from 'lib/api/resources';
import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app';
import useIsMobile from 'lib/hooks/useIsMobile';
import { nbsp } from 'lib/html-entities';
import CsvExportForm from 'ui/csvExport/CsvExportForm';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import ContentLoader from 'ui/shared/ContentLoader';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import PageTitle from 'ui/shared/Page/PageTitle';
interface ExportTypeEntity {
......@@ -60,7 +57,6 @@ const isCorrectExportType = (type: string): type is CsvExportParams['type'] => O
const CsvExport = () => {
const router = useRouter();
const isMobile = useIsMobile();
const appProps = useAppContext();
const addressHash = router.query.address?.toString() || '';
......@@ -133,10 +129,10 @@ const CsvExport = () => {
/>
<Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
<span>Export { EXPORT_TYPES[exportType].text } for address </span>
<Address>
<AddressIcon address={{ hash: addressHash, is_contract: true, implementation_name: null }}/>
<AddressLink hash={ addressHash } type="address" ml={ 2 } truncation={ isMobile ? 'constant' : 'dynamic' }/>
</Address>
<AddressEntity
address={{ hash: addressHash, is_contract: true, implementation_name: null }}
noCopy
/>
<span>{ nbsp }</span>
{ filterType && filterValue && <span>with applied filter by { filterType } ({ filterValue }) </span> }
<span>to CSV file. </span>
......
ui/pages/Sol2Uml.tsx
View file @ 4c91e208
......@@ -3,16 +3,12 @@ import { useRouter } from 'next/router';
import React from 'react';
import { useAppContext } from 'lib/contexts/app';
import useIsMobile from 'lib/hooks/useIsMobile';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import PageTitle from 'ui/shared/Page/PageTitle';
import Sol2UmlDiagram from 'ui/sol2uml/Sol2UmlDiagram';
const Sol2Uml = () => {
const router = useRouter();
const isMobile = useIsMobile();
const appProps = useAppContext();
const addressHash = router.query.address?.toString() || '';
......@@ -36,12 +32,11 @@ const Sol2Uml = () => {
title="Solidity UML diagram"
backLink={ backLink }
/>
<Flex mb={ 10 }>
<Flex mb={ 10 } flexWrap="wrap" columnGap={ 3 }>
<span>For contract</span>
<Address ml={ 3 }>
<AddressIcon address={{ hash: addressHash, is_contract: true, implementation_name: null }}/>
<AddressLink hash={ addressHash } type="address" ml={ 2 } truncation={ isMobile ? 'constant' : 'dynamic' }/>
</Address>
<AddressEntity
address={{ hash: addressHash, is_contract: true, implementation_name: null }}
/>
</Flex>
<Sol2UmlDiagram addressHash={ addressHash }/>
</>
......
ui/searchResults/SearchResultListItem.tsx
View file @ 4c91e208
......@@ -11,9 +11,7 @@ import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
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 * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
......@@ -76,14 +74,31 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
case 'contract':
case 'address': {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
};
return (
<Address>
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
<AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
</Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Address>
<AddressEntity.Container>
<AddressEntity.Icon address={ address }/>
<AddressEntity.Link
address={ address }
onClick={ handleLinkClick }
>
<AddressEntity.Content
asProp={ shouldHighlightHash ? 'mark' : 'span' }
address={ address }
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 700 }
/>
</AddressEntity.Link>
<AddressEntity.Copy address={ address }/>
</AddressEntity.Container>
);
}
......
ui/searchResults/SearchResultTableItem.tsx
View file @ 4c91e208
......@@ -11,9 +11,7 @@ import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index';
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 * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
......@@ -95,25 +93,33 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
case 'address': {
if (data.name) {
const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
};
return (
<>
<Td fontSize="sm">
<Flex alignItems="center" overflow="hidden">
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<LinkInternal
href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
fontWeight={ 700 }
overflow="hidden"
whiteSpace="nowrap"
<AddressEntity.Container>
<AddressEntity.Icon address={ address }/>
<AddressEntity.Link
address={ address }
onClick={ handleLinkClick }
>
<Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
<HashStringShortenDynamic hash={ data.address }/>
</Box>
</LinkInternal>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Flex>
<AddressEntity.Content
asProp={ shouldHighlightHash ? 'mark' : 'span' }
address={ address }
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 700 }
/>
</AddressEntity.Link>
<AddressEntity.Copy address={ address }/>
</AddressEntity.Container>
</Td>
<Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
<span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? data.name : highlightText(data.name, searchTerm) }}/>
......@@ -122,15 +128,32 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
);
}
const address = {
hash: data.address,
is_contract: data.type === 'contract',
is_verified: data.is_smart_contract_verified,
name: null,
implementation_name: null,
};
return (
<Td colSpan={ 3 } fontSize="sm">
<Address>
<AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
<mark>
<AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
</mark>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> }
</Address>
<AddressEntity.Container>
<AddressEntity.Icon address={ address }/>
<AddressEntity.Link
address={ address }
onClick={ handleLinkClick }
>
<AddressEntity.Content
asProp="mark"
address={ address }
fontSize="sm"
lineHeight={ 5 }
fontWeight={ 700 }
/>
</AddressEntity.Link>
<AddressEntity.Copy address={ address }/>
</AddressEntity.Container>
</Td>
);
}
......
ui/shared/AddressSnippet.tsx
View file @ 4c91e208
......@@ -14,6 +14,7 @@ interface Props {
isLoading?: boolean;
}
// TODO @tom2drum remove this component
const AddressSnippet = ({ address, subtitle, isLoading }: Props) => {
return (
<Box maxW="100%">
......
ui/shared/TokenTransfer/TokenTransferListItem.tsx
View file @ 4c91e208
......@@ -6,12 +6,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import eastArrowIcon from 'icons/arrows/east.svg';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import Tag from 'ui/shared/chakra/Tag';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import InOutTag from 'ui/shared/InOutTag';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -80,11 +77,14 @@ const TokenTransferListItem = ({
</Flex>
) }
<Flex w="100%" columnGap={ 3 }>
<Address width={ addressWidth } flexShrink={ 0 }>
<AddressIcon address={ from } isLoading={ isLoading }/>
<AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isDisabled={ baseAddress === from.hash } isLoading={ isLoading }/>
{ baseAddress !== from.hash && <CopyToClipboard text={ from.hash } isLoading={ isLoading }/> }
</Address>
<AddressEntity
address={ from }
isLoading={ isLoading }
noLink={ baseAddress === from.hash }
noCopy={ baseAddress === from.hash }
flexShrink={ 0 }
width={ addressWidth }
/>
{ baseAddress ? (
<InOutTag
isIn={ baseAddress === to.hash }
......@@ -97,11 +97,14 @@ const TokenTransferListItem = ({
) :
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading } flexShrink={ 0 }/>
}
<Address width={ addressWidth } flexShrink={ 0 }>
<AddressIcon address={ to } isLoading={ isLoading }/>
<AddressLink type="address" ml={ 2 } fontWeight="500" hash={ to.hash } isDisabled={ baseAddress === to.hash } isLoading={ isLoading }/>
{ baseAddress !== to.hash && <CopyToClipboard text={ to.hash } isLoading={ isLoading }/> }
</Address>
<AddressEntity
address={ to }
isLoading={ isLoading }
noLink={ baseAddress === to.hash }
noCopy={ baseAddress === to.hash }
flexShrink={ 0 }
width={ addressWidth }
/>
</Flex>
{ value && (
<Flex columnGap={ 2 } w="100%">
......
ui/shared/TokenTransfer/TokenTransferTableItem.tsx
View file @ 4c91e208
......@@ -5,11 +5,8 @@ import React from 'react';
import type { TokenTransfer } from 'types/api/tokenTransfer';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Tag from 'ui/shared/chakra/Tag';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import InOutTag from 'ui/shared/InOutTag';
import TokenSnippet from 'ui/shared/TokenSnippet/TokenSnippet';
......@@ -75,19 +72,14 @@ const TokenTransferTableItem = ({
</Td>
) }
<Td>
<Address display="inline-flex" maxW="100%" my="3px">
<AddressIcon address={ from } isLoading={ isLoading }/>
<AddressLink
type="address" ml={ 2 }
fontWeight="500"
hash={ from.hash }
alias={ from.name }
flexGrow={ 1 }
isDisabled={ baseAddress === from.hash }
isLoading={ isLoading }
/>
{ baseAddress !== from.hash && <CopyToClipboard text={ from.hash } isLoading={ isLoading }/> }
</Address>
<AddressEntity
address={ from }
isLoading={ isLoading }
my="5px"
noLink={ baseAddress === from.hash }
noCopy={ baseAddress === from.hash }
flexGrow={ 1 }
/>
</Td>
{ baseAddress && (
<Td px={ 0 }>
......@@ -103,20 +95,14 @@ const TokenTransferTableItem = ({
</Td>
) }
<Td>
<Address display="inline-flex" maxW="100%" my="3px">
<AddressIcon address={ to } isLoading={ isLoading }/>
<AddressLink
type="address"
ml={ 2 }
fontWeight="500"
hash={ to.hash }
alias={ to.name }
flexGrow={ 1 }
isDisabled={ baseAddress === to.hash }
isLoading={ isLoading }
/>
{ baseAddress !== to.hash && <CopyToClipboard text={ to.hash } isLoading={ isLoading }/> }
</Address>
<AddressEntity
address={ to }
isLoading={ isLoading }
my="5px"
noLink={ baseAddress === to.hash }
noCopy={ baseAddress === to.hash }
flexGrow={ 1 }
/>
</Td>
<Td isNumeric verticalAlign="top">
<Skeleton isLoaded={ !isLoading } display="inline-block" my="7px">
......
ui/shared/address/Address.tsx
View file @ 4c91e208
......@@ -6,6 +6,7 @@ interface Props {
children: React.ReactNode;
}
// TODO @tom2drum delete this component
/**
* @deprecated use `ui/shared/entities/address` instead
*/
......
ui/shared/entities/address/AddressEntity.tsx
View file @ 4c91e208
......@@ -29,11 +29,15 @@ const Link = chakra((props: LinkProps) => {
);
});
type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize'> & {
type IconProps = Pick<EntityProps, 'address' | 'isLoading' | 'iconSize' | 'noIcon'> & {
asProp?: As;
};
const Icon = (props: IconProps) => {
if (props.noIcon) {
return null;
}
const styles = {
...getIconProps(props.iconSize),
marginRight: 2,
......@@ -46,19 +50,27 @@ const Icon = (props: IconProps) => {
if (props.address.is_contract) {
if (props.address.is_verified) {
return (
<EntityBase.Icon
{ ...props }
asProp={ iconContractVerified }
color="green.500"
/>
<Tooltip label="Verified contract">
<span>
<EntityBase.Icon
{ ...props }
asProp={ iconContractVerified }
color="green.500"
/>
</span>
</Tooltip>
);
}
return (
<EntityBase.Icon
{ ...props }
asProp={ iconContract }
/>
<Tooltip label="Contract">
<span>
<EntityBase.Icon
{ ...props }
asProp={ iconContract }
/>
</span>
</Tooltip>
);
}
......
ui/shared/entities/address/AddressEntityWithTokenFilter.tsx
View file @ 4c91e208
import { chakra } from '@chakra-ui/react';
import _omit from 'lodash/omit';
import React from 'react';
import { route } from 'nextjs-routes';
......@@ -11,8 +10,6 @@ interface Props extends AddressEntity.EntityProps {
}
const AddressEntityWithTokenFilter = (props: Props) => {
const linkProps = _omit(props, [ 'className' ]);
const partsProps = _omit(props, [ 'className', 'onClick' ]);
const defaultHref = route({
pathname: '/address/[hash]',
query: {
......@@ -25,15 +22,7 @@ const AddressEntityWithTokenFilter = (props: Props) => {
});
return (
<AddressEntity.Container className={ props.className }>
<AddressEntity.Icon { ...partsProps }/>
<AddressEntity.Link
{ ...linkProps }
href={ props.href ?? defaultHref }
>
<AddressEntity.Content { ...partsProps }/>
</AddressEntity.Link>
</AddressEntity.Container>
<AddressEntity.default { ...props } href={ props.href ?? defaultHref }/>
);
};
......
ui/shared/entities/base/components.tsx
View file @ 4c91e208
......@@ -26,6 +26,7 @@ export interface EntityBaseProps {
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
query?: Record<string, string>;
tailLength?: number;
target?: React.HTMLAttributeAnchorTarget;
truncation?: Truncation;
}
......
ui/token/TokenHolders/TokenHoldersListItem.tsx
View file @ 4c91e208
......@@ -4,10 +4,7 @@ import React from 'react';
import type { TokenHolder, TokenInfo } from 'types/api/token';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import Utilization from 'ui/shared/Utilization/Utilization';
......@@ -22,19 +19,12 @@ const TokenHoldersListItem = ({ holder, token, isLoading }: Props) => {
return (
<ListItemMobile rowGap={ 3 }>
<Address display="inline-flex" maxW="100%">
<AddressIcon address={ holder.address } isLoading={ isLoading }/>
<AddressLink
type="address"
ml={ 2 }
fontWeight="700"
hash={ holder.address.hash }
alias={ holder.address.name }
flexGrow={ 1 }
isLoading={ isLoading }
/>
<CopyToClipboard text={ holder.address.hash } isLoading={ isLoading }/>
</Address>
<AddressEntity
address={ holder.address }
isLoading={ isLoading }
fontWeight="700"
maxW="100%"
/>
<Flex justifyContent="space-between" alignItems="center" width="100%">
<Skeleton isLoaded={ !isLoading } display="inline-block" width="100%">
<Box as="span" wordBreak="break-word" mr={ 6 }>
......
ui/token/TokenHolders/TokenHoldersTableItem.tsx
View file @ 4c91e208
......@@ -4,10 +4,7 @@ import React from 'react';
import type { TokenHolder, TokenInfo } from 'types/api/token';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import Utilization from 'ui/shared/Utilization/Utilization';
type Props = {
......@@ -22,20 +19,12 @@ const TokenTransferTableItem = ({ holder, token, isLoading }: Props) => {
return (
<Tr>
<Td verticalAlign="middle">
<Address display="inline-flex" maxW="100%">
<AddressIcon address={ holder.address } isLoading={ isLoading }/>
<AddressLink
type="address"
ml={ 2 }
fontWeight="700"
hash={ holder.address.hash }
alias={ holder.address.name }
flexGrow={ 1 }
isLoading={ isLoading }
truncation="constant"
/>
<CopyToClipboard text={ holder.address.hash } isLoading={ isLoading }/>
</Address>
<AddressEntity
address={ holder.address }
isLoading={ isLoading }
flexGrow={ 1 }
fontWeight="700"
/>
</Td>
<Td verticalAlign="middle" isNumeric>
<Skeleton isLoaded={ !isLoading } display="inline-block" wordBreak="break-word">
......
ui/token/TokenTransfer/TokenTransferListItem.tsx
View file @ 4c91e208
......@@ -6,12 +6,9 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import eastArrowIcon from 'icons/arrows/east.svg';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import Tag from 'ui/shared/chakra/Tag';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
......@@ -59,17 +56,21 @@ const TokenTransferListItem = ({
</Flex>
{ method && <Tag isLoading={ isLoading }>{ method }</Tag> }
<Flex w="100%" columnGap={ 3 }>
<Address width="50%">
<AddressIcon address={ from } isLoading={ isLoading }/>
<AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
<CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
</Address>
<AddressEntityWithTokenFilter
address={ from }
isLoading={ isLoading }
tokenHash={ token.address }
width="50%"
fontWeight="500"
/>
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
<Address width="50%">
<AddressIcon address={ to } isLoading={ isLoading }/>
<AddressLink ml={ 2 } fontWeight="500" hash={ to.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
<CopyToClipboard text={ to.hash } isLoading={ isLoading }/>
</Address>
<AddressEntityWithTokenFilter
address={ to }
isLoading={ isLoading }
tokenHash={ token.address }
width="50%"
fontWeight="500"
/>
</Flex>
{ value && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
<Flex columnGap={ 2 } w="100%">
......
ui/verifiedContracts/VerifiedContractsListItem.tsx
View file @ 4c91e208
......@@ -9,11 +9,9 @@ import iconCheck from 'icons/check.svg';
import iconCross from 'icons/cross.svg';
import iconSuccess from 'icons/status/success.svg';
import dayjs from 'lib/date/dayjs';
import Address from 'ui/shared/address/Address';
import AddressIcon from 'ui/shared/address/AddressIcon';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShorten from 'ui/shared/HashStringShorten';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -29,14 +27,18 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
return (
<ListItemMobile rowGap={ 3 }>
<Address columnGap={ 2 } overflow="hidden" w="100%">
<AddressIcon address={ data.address } isLoading={ isLoading }/>
<AddressLink hash={ data.address.hash } type="address" alias={ data.address.name } isLoading={ isLoading } query={{ tab: 'contract' }}/>
<Flex w="100%">
<AddressEntity
isLoading={ isLoading }
address={ data.address }
query={{ tab: 'contract' }}
noCopy
/>
<Skeleton isLoaded={ !isLoading } color="text_secondary" ml="auto">
<HashStringShorten hash={ data.address.hash } isTooltipDisabled/>
</Skeleton>
<CopyToClipboard text={ data.address.hash } ml={ -1 } isLoading={ isLoading }/>
</Address>
<CopyToClipboard text={ data.address.hash } isLoading={ isLoading }/>
</Flex>
<Flex columnGap={ 3 }>
<Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Balance { config.chain.currency.symbol }</Skeleton>
<Skeleton isLoaded={ !isLoading } color="text_secondary">
......
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