Skip to content

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

remove AddressSnippet and Address components

parent 7f44ff84
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 95 deletions
ui/customAbi/CustomAbiTable/CustomAbiListItem.tsx
View file @ b17946c5
import { Box, Skeleton } from '@chakra-ui/react';
import React, { useCallback } from 'react';
import type { CustomAbi } from 'types/api/account';
import AddressSnippet from 'ui/shared/AddressSnippet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
......@@ -25,7 +26,16 @@ const CustomAbiListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Prop
return (
<ListItemMobile>
<AddressSnippet address={ item.contract_address } subtitle={ item.name } isLoading={ isLoading }/>
<Box maxW="100%">
<AddressEntity
address={ item.contract_address }
fontWeight="600"
isLoading={ isLoading }
/>
<Skeleton fontSize="sm" color="text_secondary" mt={ 0.5 } ml={ 8 } display="inline-block" isLoaded={ !isLoading }>
<span>{ item.name }</span>
</Skeleton>
</Box>
<TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
</ListItemMobile>
);
......
ui/customAbi/CustomAbiTable/CustomAbiTableItem.tsx
View file @ b17946c5
import {
Tr,
Td,
Box,
Skeleton,
} from '@chakra-ui/react';
import React, { useCallback } from 'react';
import type { CustomAbi } from 'types/api/account';
import AddressSnippet from 'ui/shared/AddressSnippet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
interface Props {
......@@ -29,7 +31,16 @@ const CustomAbiTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
return (
<Tr alignItems="top" key={ item.id }>
<Td>
<AddressSnippet address={ item.contract_address } subtitle={ item.name } isLoading={ isLoading }/>
<Box maxW="100%">
<AddressEntity
address={ item.contract_address }
fontWeight="600"
isLoading={ isLoading }
/>
<Skeleton fontSize="sm" color="text_secondary" mt={ 0.5 } ml={ 8 } display="inline-block" isLoaded={ !isLoading }>
<span>{ item.name }</span>
</Skeleton>
</Box>
</Td>
<Td>
<TableItemActionButtons onDeleteClick={ onItemDeleteClick } onEditClick={ onItemEditClick } isLoading={ isLoading }/>
......
ui/privateTags/AddressTagTable/AddressTagListItem.tsx
View file @ b17946c5
......@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
import type { AddressTag } from 'types/api/account';
import AddressSnippet from 'ui/shared/AddressSnippet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
......@@ -26,7 +26,12 @@ const AddressTagListItem = ({ item, onEditClick, onDeleteClick, isLoading }: Pro
return (
<ListItemMobile>
<Flex alignItems="flex-start" flexDirection="column" maxW="100%">
<AddressSnippet address={ item.address } isLoading={ isLoading }/>
<AddressEntity
address={ item.address }
isLoading={ isLoading }
fontWeight="600"
w="100%"
/>
<HStack spacing={ 3 } mt={ 4 }>
<Text fontSize="sm" fontWeight={ 500 }>Private tag</Text>
<Skeleton isLoaded={ !isLoading } display="inline-block" borderRadius="sm">
......
ui/privateTags/AddressTagTable/AddressTagTableItem.tsx
View file @ b17946c5
......@@ -6,8 +6,8 @@ import React, { useCallback } from 'react';
import type { AddressTag } from 'types/api/account';
import AddressSnippet from 'ui/shared/AddressSnippet';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
interface Props {
......@@ -29,7 +29,12 @@ const AddressTagTableItem = ({ item, onEditClick, onDeleteClick, isLoading }: Pr
return (
<Tr alignItems="top" key={ item.id }>
<Td>
<AddressSnippet address={ item.address } isLoading={ isLoading }/>
<AddressEntity
address={ item.address }
isLoading={ isLoading }
fontWeight="600"
py="2px"
/>
</Td>
<Td whiteSpace="nowrap">
<Tag isLoading={ isLoading } isTruncated>{ item.name }</Tag>
......
ui/publicTags/PublicTagTable/PublicTagListItem.tsx
View file @ b17946c5
......@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
import type { PublicTag } from 'types/api/account';
import AddressSnippet from 'ui/shared/AddressSnippet';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
......@@ -28,7 +28,15 @@ const PublicTagListItem = ({ item, isLoading, onEditClick, onDeleteClick }: Prop
<ListItemMobile>
<VStack spacing={ 3 } alignItems="flex-start" maxW="100%">
<VStack spacing={ 4 } alignItems="unset" maxW="100%">
{ item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address } isLoading={ isLoading }/>) }
{ item.addresses_with_info.map((address) => (
<AddressEntity
key={ address.hash }
address={ address }
isLoading={ isLoading }
fontWeight="600"
w="100%"
/>
)) }
</VStack>
<HStack spacing={ 3 }>
<Text fontSize="sm" fontWeight={ 500 }>Public tags</Text>
......
ui/publicTags/PublicTagTable/PublicTagTableItem.tsx
View file @ b17946c5
......@@ -9,8 +9,8 @@ import React, { useCallback } from 'react';
import type { PublicTag } from 'types/api/account';
import AddressSnippet from 'ui/shared/AddressSnippet';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
interface Props {
......@@ -33,7 +33,15 @@ const PublicTagTableItem = ({ item, isLoading, onEditClick, onDeleteClick }: Pro
<Tr alignItems="top" key={ item.id }>
<Td>
<VStack spacing={ 4 } alignItems="unset">
{ item.addresses_with_info.map((address) => <AddressSnippet key={ address.hash } address={ address } isLoading={ isLoading }/>) }
{ item.addresses_with_info.map((address) => (
<AddressEntity
key={ address.hash }
address={ address }
isLoading={ isLoading }
fontWeight="600"
py="2px"
/>
)) }
</VStack>
</Td>
<Td>
......
ui/shared/AddressSnippet.tsx deleted 100644 → 0
View file @ 7f44ff84
import { Box, Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { AddressParam } from 'types/api/addressParams';
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';
interface Props {
address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name'>;
subtitle?: string;
isLoading?: boolean;
}
// TODO @tom2drum remove this component
const AddressSnippet = ({ address, subtitle, isLoading }: Props) => {
return (
<Box maxW="100%">
<Address>
<AddressIcon address={ address } isLoading={ isLoading }/>
<AddressLink type="address" hash={ address.hash } fontWeight="600" ml={ 2 } isLoading={ isLoading }/>
<CopyToClipboard text={ address.hash } isLoading={ isLoading }/>
</Address>
{ subtitle && (
<Skeleton fontSize="sm" color="text_secondary" mt={ 0.5 } ml={ 8 } display="inline-block" isLoaded={ !isLoading }>
<span>{ subtitle }</span>
</Skeleton>
) }
</Box>
);
};
export default React.memo(AddressSnippet);
ui/shared/address/Address.tsx deleted 100644 → 0
View file @ 7f44ff84
import { Flex, chakra } from '@chakra-ui/react';
import React from 'react';
interface Props {
className?: string;
children: React.ReactNode;
}
// TODO @tom2drum delete this component
/**
* @deprecated use `ui/shared/entities/address` instead
*/
const Address = ({ children, className }: Props) => {
return <Flex alignItems="center" overflow="hidden" className={ className }>{ children }</Flex>;
};
const AddressChakra = chakra(Address);
export default React.memo(AddressChakra);
ui/shared/logs/LogDecodedInputDataTable.tsx
View file @ b17946c5
......@@ -4,9 +4,8 @@ import React from 'react';
import type { DecodedInput } from 'types/api/decodedInput';
import type { ArrayElement } from 'types/utils';
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';
import TruncatedValue from 'ui/shared/TruncatedValue';
interface Props {
......@@ -33,10 +32,10 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement<DecodedInpu
const content = (() => {
if (type === 'address' && typeof value === 'string') {
return (
<Address justifyContent="space-between">
<AddressLink type="address" hash={ value } isLoading={ isLoading }/>
<CopyToClipboard text={ value } isLoading={ isLoading }/>
</Address>
<AddressEntity
address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
isLoading={ isLoading }
/>
);
}
......
ui/shared/logs/LogItem.tsx
View file @ b17946c5
......@@ -7,9 +7,8 @@ import { route } from 'nextjs-routes';
// import searchIcon from 'icons/search.svg';
import { space } 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 AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
import LogTopic from 'ui/shared/logs/LogTopic';
......@@ -54,15 +53,19 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
) }
{ hasTxInfo ? <RowHeader isLoading={ isLoading }>Transaction</RowHeader> : <RowHeader isLoading={ isLoading }>Address</RowHeader> }
<GridItem display="flex" alignItems="center">
<Address mr={{ base: 9, lg: 0 }}>
{ !hasTxInfo && <AddressIcon address={ address } mr={ 2 } isLoading={ isLoading }/> }
<AddressLink
hash={ hasTxInfo ? txHash : address.hash }
alias={ hasTxInfo ? undefined : address.name }
type={ type === 'address' ? 'transaction' : 'address' }
{ type === 'address' ? (
<TxEntity
hash={ txHash }
isLoading={ isLoading }
mr={{ base: 9, lg: 4 }}
/>
</Address>
) : (
<AddressEntity
address={ address }
isLoading={ isLoading }
mr={{ base: 9, lg: 4 }}
/>
) }
{ /* api doesn't have find topic feature yet */ }
{ /* <Tooltip label="Find matches topic">
<Link ml={ 2 } mr={{ base: 9, lg: 0 }} display="inline-flex">
......
ui/shared/logs/LogTopic.tsx
View file @ b17946c5
......@@ -4,9 +4,8 @@ import React from 'react';
import hexToAddress from 'lib/hexToAddress';
import hexToUtf8 from 'lib/hexToUtf8';
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';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
interface Props {
......@@ -51,10 +50,10 @@ const LogTopic = ({ hex, index, isLoading }: Props) => {
case 'address': {
return (
<Address>
<AddressLink type="address" hash={ value } isLoading={ isLoading }/>
<CopyToClipboard text={ value } isLoading={ isLoading }/>
</Address>
<AddressEntity
address={{ hash: value, name: '', implementation_name: null, is_contract: false, is_verified: false }}
isLoading={ isLoading }
/>
);
}
}
......
ui/verifiedAddresses/VerifiedAddressesListItem.tsx
View file @ b17946c5
......@@ -5,8 +5,8 @@ import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
import editIcon from 'icons/edit.svg';
import dayjs from 'lib/date/dayjs';
import AddressSnippet from 'ui/shared/AddressSnippet';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
import VerifiedAddressesStatus from './VerifiedAddressesStatus';
......@@ -69,8 +69,12 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
return (
<ListItemMobileGrid.Container>
<ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
<ListItemMobileGrid.Value py="3px">
<AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }} isLoading={ isLoading }/>
<ListItemMobileGrid.Value>
<AddressEntity
address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
isLoading={ isLoading }
w="100%"
/>
</ListItemMobileGrid.Value>
{ item.metadata.tokenName && (
......
ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
View file @ b17946c5
......@@ -5,8 +5,8 @@ import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
import editIcon from 'icons/edit.svg';
import dayjs from 'lib/date/dayjs';
import AddressSnippet from 'ui/shared/AddressSnippet';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import VerifiedAddressesStatus from './VerifiedAddressesStatus';
import VerifiedAddressesTokenSnippet from './VerifiedAddressesTokenSnippet';
......@@ -54,7 +54,11 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
return (
<Tr>
<Td>
<AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }} isLoading={ isLoading }/>
<AddressEntity
address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}
isLoading={ isLoading }
fontWeight="600"
/>
</Td>
<Td fontSize="sm" verticalAlign="middle" pr={ 1 }>
{ tokenInfo }
......
ui/watchlist/WatchlistTable/WatchListAddressItem.tsx
View file @ b17946c5
......@@ -9,9 +9,9 @@ import TokensIcon from 'icons/tokens.svg';
import WalletIcon from 'icons/wallet.svg';
import getCurrencyValue from 'lib/getCurrencyValue';
import { nbsp } from 'lib/html-entities';
import AddressSnippet from 'ui/shared/AddressSnippet';
import Icon from 'ui/shared/chakra/Icon';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TokenLogo from 'ui/shared/TokenLogo';
const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isLoading?: boolean }) => {
......@@ -26,7 +26,12 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
return (
<VStack spacing={ 2 } align="stretch" fontWeight={ 500 }>
<AddressSnippet address={ item.address } isLoading={ isLoading }/>
<AddressEntity
address={ item.address }
isLoading={ isLoading }
fontWeight="600"
py="2px"
/>
<Flex fontSize="sm" pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
<TokenLogo
data={ nativeTokenData }
......
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