Skip to content

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

Icon component with skeleton

parent 98dcb80b
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 100 deletions
ui/block/BlockDetails.tsx
View file @ 313e4ac9
import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
import type { UseQueryResult } from '@tanstack/react-query';
import BigNumber from 'bignumber.js';
import capitalize from 'lodash/capitalize';
......@@ -20,6 +20,7 @@ import { space } from 'lib/html-entities';
import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import getQueryParamString from 'lib/router/getQueryParamString';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
......@@ -159,9 +160,7 @@ const BlockDetails = ({ query }: Props) => {
hint="Date & time at which block was produced."
isLoading={ isPlaceholderData }
>
<Skeleton isLoaded={ !isPlaceholderData } boxSize={ 5 } borderRadius="full">
<Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
</Skeleton>
<Icon as={ clockIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
<Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>
{ dayjs(data.timestamp).fromNow() }
</Skeleton>
......@@ -281,9 +280,7 @@ const BlockDetails = ({ query }: Props) => {
}
isLoading={ isPlaceholderData }
>
<Skeleton isLoaded={ !isPlaceholderData } boxSize={ 5 }>
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
</Skeleton>
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
<Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>
{ burntFees.dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
</Skeleton>
......
ui/blocks/BlocksListItem.tsx
View file @ 313e4ac9
import { Flex, Skeleton, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
import { Flex, Skeleton, Text, Box, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import capitalize from 'lodash/capitalize';
import { route } from 'nextjs-routes';
......@@ -13,6 +13,7 @@ import { WEI } from 'lib/consts';
import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import BlockTimestamp from 'ui/blocks/BlockTimestamp';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import LinkInternal from 'ui/shared/LinkInternal';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -97,9 +98,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<Text fontWeight={ 500 }>Burnt fees</Text>
<Flex columnGap={ 4 } mt={ 2 }>
<Flex>
<Skeleton isLoaded={ !isLoading } boxSize={ 5 } display="inline-block">
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
</Skeleton>
<Icon as={ flameIcon } boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" ml={ 1 }>
<span>{ burntFees.div(WEI).toFixed() }</span>
</Skeleton>
......
ui/blocks/BlocksTableItem.tsx
View file @ 313e4ac9
import { Tr, Td, Flex, Box, Icon, Tooltip, Skeleton, useColorModeValue } from '@chakra-ui/react';
import { Tr, Td, Flex, Box, Tooltip, Skeleton, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import { motion } from 'framer-motion';
import { route } from 'nextjs-routes';
......@@ -12,6 +12,7 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward';
import { WEI } from 'lib/consts';
import BlockTimestamp from 'ui/blocks/BlockTimestamp';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import LinkInternal from 'ui/shared/LinkInternal';
import TextSeparator from 'ui/shared/TextSeparator';
......@@ -110,9 +111,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
{ !appConfig.L2.isL2Network && (
<Td fontSize="sm">
<Flex alignItems="center" columnGap={ 1 }>
<Skeleton isLoaded={ !isLoading } boxSize={ 5 }>
<Icon as={ flameIcon } boxSize={ 5 } color={ burntFeesIconColor }/>
</Skeleton>
<Icon as={ flameIcon } boxSize={ 5 } color={ burntFeesIconColor } isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } display="inline-block">
{ burntFees.dividedBy(WEI).toFixed(8) }
</Skeleton>
......
ui/shared/ApiKeySnippet.tsx
View file @ 313e4ac9
import { Box, HStack, Icon, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
import { Box, HStack, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import keyIcon from 'icons/key.svg';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
interface Props {
......@@ -13,9 +14,7 @@ interface Props {
const ApiKeySnippet = ({ apiKey, name, isLoading }: Props) => {
return (
<HStack spacing={ 2 } alignItems="start">
<Skeleton isLoaded={ !isLoading } boxSize={ 6 } display="inline-block">
<Icon as={ keyIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
</Skeleton>
<Icon as={ keyIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') } isLoading={ isLoading }/>
<Box>
<Flex alignItems={{ base: 'flex-start', lg: 'center' }}>
<Skeleton isLoaded={ !isLoading } display="inline-block" fontWeight={ 600 } mr={ 1 }>
......
ui/shared/TokenTransfer/TokenTransferListItem.tsx
View file @ 313e4ac9
import { Flex, Icon, Skeleton } from '@chakra-ui/react';
import { Flex, Skeleton } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -10,6 +10,7 @@ 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 InOutTag from 'ui/shared/InOutTag';
......@@ -66,14 +67,13 @@ const TokenTransferListItem = ({
{ showTxInfo && txHash && (
<Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
<Flex>
<Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 2 } borderRadius="base">
<Icon
as={ transactionIcon }
boxSize="30px"
color="link"
/>
</Skeleton>
<Address width="100%">
<Icon
as={ transactionIcon }
boxSize="30px"
color="link"
isLoading={ isLoading }
/>
<Address width="100%" ml={ 2 }>
<AddressLink
hash={ txHash }
type="transaction"
......@@ -98,7 +98,7 @@ const TokenTransferListItem = ({
</Address>
{ baseAddress ?
<InOutTag isIn={ baseAddress === to.hash } isOut={ baseAddress === from.hash } w="50px" textAlign="center" isLoading={ isLoading }/> :
<Skeleton isLoaded={ !isLoading } boxSize={ 6 }><Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/></Skeleton>
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
}
<Address width={ addressWidth }>
<AddressIcon address={ to } isLoading={ isLoading }/>
......
ui/shared/TokenTransfer/TokenTransferNft.tsx
View file @ 313e4ac9
import { Box, Icon, chakra, Skeleton } from '@chakra-ui/react';
import { Box, chakra, Skeleton } from '@chakra-ui/react';
import { route } from 'nextjs-routes';
import React from 'react';
import nftPlaceholder from 'icons/nft_shield.svg';
import Icon from 'ui/shared/chakra/Icon';
import HashStringShorten from 'ui/shared/HashStringShorten';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import LinkInternal from 'ui/shared/LinkInternal';
......@@ -29,10 +30,8 @@ const TokenTransferNft = ({ hash, id, className, isDisabled, isLoading, truncati
w="100%"
className={ className }
>
<Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 1 } borderRadius="base">
<Icon as={ nftPlaceholder } boxSize="30px" color="inherit"/>
</Skeleton>
<Skeleton isLoaded={ !isLoading } maxW="calc(100% - 34px)">
<Icon as={ nftPlaceholder } boxSize="30px" color="inherit" isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } maxW="calc(100% - 34px)" ml={ 1 }>
{ truncation === 'constant' ? <HashStringShorten hash={ id }/> : <HashStringShortenDynamic hash={ id } fontWeight={ 500 }/> }
</Skeleton>
</Component>
......
ui/shared/TransactionSnippet.tsx
View file @ 313e4ac9
import { Icon, Skeleton, useColorModeValue } from '@chakra-ui/react';
import { useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import transactionIcon from 'icons/transactions.svg';
import Address from 'ui/shared/address/Address';
import AddressLink from 'ui/shared/address/AddressLink';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
interface Props {
......@@ -14,9 +15,7 @@ interface Props {
const TransactionSnippet = ({ hash, isLoading }: Props) => {
return (
<Address maxW="100%">
<Skeleton isLoaded={ !isLoading } boxSize={ 6 } borderRadius="base">
<Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') }/>
</Skeleton>
<Icon as={ transactionIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') } isLoading={ isLoading }/>
<AddressLink hash={ hash } fontWeight="600" type="transaction" ml={ 2 } isLoading={ isLoading }/>
<CopyToClipboard text={ hash } isLoading={ isLoading }/>
</Address>
......
ui/shared/chakra/Icon.tsx 0 → 100644
View file @ 313e4ac9
import { Skeleton, Icon as ChakraIcon } from '@chakra-ui/react';
import type { IconProps, As } from '@chakra-ui/react';
import React from 'react';
interface Props extends IconProps {
isLoading?: boolean;
as: As;
}
const Icon = ({ isLoading, ...props }: Props, ref: React.LegacyRef<SVGSVGElement>) => {
return (
<Skeleton isLoaded={ !isLoading } boxSize={ props.boxSize } w={ props.w } h={ props.h } borderRadius={ props.borderRadius }>
<ChakraIcon { ...props } ref={ ref }/>
</Skeleton>
);
};
export default React.memo(React.forwardRef(Icon));
ui/token/TokenTransfer/TokenTransferListItem.tsx
View file @ 313e4ac9
import { Text, Flex, Icon, useColorModeValue, Skeleton } from '@chakra-ui/react';
import { Text, Flex, useColorModeValue, Skeleton } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -11,6 +11,7 @@ import trimTokenSymbol from 'lib/token/trimTokenSymbol';
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 ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -45,14 +46,13 @@ const TokenTransferListItem = ({
<ListItemMobile rowGap={ 3 } isAnimated>
<Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
<Flex>
<Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 2 }>
<Icon
as={ transactionIcon }
boxSize="30px"
color={ iconColor }
/>
</Skeleton>
<Address width="100%">
<Icon
as={ transactionIcon }
boxSize="30px"
color={ iconColor }
isLoading={ isLoading }
/>
<Address width="100%" ml={ 2 }>
<AddressLink
hash={ txHash }
type="transaction"
......@@ -79,9 +79,7 @@ const TokenTransferListItem = ({
<AddressLink ml={ 2 } fontWeight="500" hash={ from.hash } type="address_token" tokenHash={ token.address } isLoading={ isLoading }/>
<CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
</Address>
<Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
</Skeleton>
<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 }/>
......
ui/token/TokenTransfer/TokenTransferTableItem.tsx
View file @ 313e4ac9
import { Tr, Td, Icon, Grid, Skeleton, Box } from '@chakra-ui/react';
import { Tr, Td, Grid, Skeleton, Box } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -9,6 +9,7 @@ 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 TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
......@@ -69,9 +70,9 @@ const TokenTransferTableItem = ({
</Address>
</Td>
<Td px={ 0 }>
<Skeleton isLoaded={ !isLoading } boxSize={ 6 } my="3px">
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
</Skeleton>
<Box my="3px">
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
</Box>
</Td>
<Td>
<Address display="inline-flex" maxW="100%" py="3px">
......
ui/tx/TxDetails.tsx
View file @ 313e4ac9
......@@ -3,7 +3,7 @@ import {
GridItem,
Text,
Box,
Icon,
Icon as ChakraIcon,
Link,
Spinner,
Tag,
......@@ -29,6 +29,7 @@ import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
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 CurrencyValue from 'ui/shared/CurrencyValue';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
......@@ -96,14 +97,14 @@ const TxDetails = () => {
const executionSuccessBadge = toAddress?.is_contract && data.result === 'success' ? (
<Tooltip label="Contract execution completed">
<chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
<Icon as={ successIcon } boxSize={ 4 } color={ executionSuccessIconColor } cursor="pointer"/>
<ChakraIcon as={ successIcon } boxSize={ 4 } color={ executionSuccessIconColor } cursor="pointer"/>
</chakra.span>
</Tooltip>
) : null;
const executionFailedBadge = toAddress?.is_contract && Boolean(data.status) && data.result !== 'success' ? (
<Tooltip label="Error occurred during contract execution">
<chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
<Icon as={ errorIcon } boxSize={ 4 } color="error" cursor="pointer"/>
<ChakraIcon as={ errorIcon } boxSize={ 4 } color="error" cursor="pointer"/>
</chakra.span>
</Tooltip>
) : null;
......@@ -182,9 +183,7 @@ const TxDetails = () => {
hint="Date & time of transaction inclusion, including length of time for confirmation"
isLoading={ isPlaceholderData }
>
<Skeleton isLoaded={ !isPlaceholderData } boxSize={ 5 }>
<Icon as={ clockIcon } boxSize={ 5 } color="gray.500"/>
</Skeleton>
<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>
......
ui/tx/internals/TxInternalsListItem.tsx
View file @ 313e4ac9
import { Flex, Icon, Box, HStack, Skeleton } from '@chakra-ui/react';
import { Flex, Box, HStack, Skeleton } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -9,6 +9,7 @@ import eastArrowIcon from 'icons/arrows/east.svg';
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 ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -33,9 +34,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
<AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isLoading={ isLoading }/>
<CopyToClipboard text={ from.hash } isLoading={ isLoading }/>
</Address>
<Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
</Skeleton>
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
{ toData && (
<Address width="calc((100% - 48px) / 2)">
<AddressIcon address={ toData } isLoading={ isLoading }/>
......
ui/tx/internals/TxInternalsTableItem.tsx
View file @ 313e4ac9
import { Tr, Td, Icon, Box, Flex, Skeleton } from '@chakra-ui/react';
import { Tr, Td, Box, Flex, Skeleton } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -9,6 +9,7 @@ import rightArrowIcon from 'icons/arrows/east.svg';
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 TxStatus from 'ui/shared/TxStatus';
......@@ -42,9 +43,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
</Address>
</Td>
<Td px={ 0 } verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
<Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500"/>
</Skeleton>
<Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
</Td>
<Td verticalAlign="middle">
{ toData && (
......
ui/txs/TxsListItem.tsx
View file @ 313e4ac9
......@@ -2,7 +2,6 @@ import {
HStack,
Box,
Flex,
Icon,
Skeleton,
} from '@chakra-ui/react';
import { route } from 'nextjs-routes';
......@@ -18,6 +17,7 @@ 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 CopyToClipboard from 'ui/shared/CopyToClipboard';
import InOutTag from 'ui/shared/InOutTag';
import LinkInternal from 'ui/shared/LinkInternal';
......@@ -56,14 +56,13 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
</Flex>
<Flex justifyContent="space-between" lineHeight="24px" mt={ 3 } alignItems="center">
<Flex>
<Skeleton isLoaded={ !isLoading } boxSize="30px" mr={ 2 } borderRadius="base">
<Icon
as={ transactionIcon }
boxSize="30px"
color="link"
/>
</Skeleton>
<Address width="100%">
<Icon
as={ transactionIcon }
boxSize="30px"
color="link"
isLoading={ isLoading }
/>
<Address width="100%" ml={ 2 }>
<AddressLink
hash={ tx.hash }
type="transaction"
......@@ -117,13 +116,14 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
</Address>
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 } isLoading={ isLoading }/> : (
<Skeleton isLoaded={ !isLoading } mx={ 2 } boxSize={ 6 }>
<Box mx={ 2 }>
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
color="gray.500"
isLoading={ isLoading }
/>
</Skeleton>
</Box>
) }
{ dataTo ? (
<Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
......
ui/txs/TxsTableItem.tsx
View file @ 313e4ac9
import {
Tr,
Td,
Icon,
VStack,
Show,
Hide,
Flex,
Skeleton,
Box,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { route } from 'nextjs-routes';
......@@ -19,6 +19,7 @@ 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 CurrencyValue from 'ui/shared/CurrencyValue';
......@@ -133,9 +134,9 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
<Td px={ 0 }>
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 } isLoading={ isLoading }/> : (
<Skeleton mx="6px" isLoaded={ !isLoading } boxSize={ 6 }>
<Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500"/>
</Skeleton>
<Box mx="6px">
<Icon as={ rightArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
</Box>
) }
</Td>
<Td>
......@@ -146,18 +147,15 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
<Td colSpan={ 3 }>
<Flex alignItems="center">
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" isLoading={ isLoading }/> :
(
<Skeleton isLoaded={ !isLoading } boxSize={ 6 }>
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
color="gray.500"
transform="rotate(90deg)"
/>
</Skeleton>
)
}
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" isLoading={ isLoading }/> : (
<Icon
as={ rightArrowIcon }
boxSize={ 6 }
color="gray.500"
transform="rotate(90deg)"
isLoading={ isLoading }
/>
) }
<VStack alignItems="start" overflow="hidden" ml={ 1 }>
{ addressFrom }
{ addressTo }
......
ui/watchlist/WatchlistTable/WatchListAddressItem.tsx
View file @ 313e4ac9
import { HStack, VStack, chakra, Icon, Flex, Skeleton } from '@chakra-ui/react';
import { HStack, VStack, chakra, Flex, Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { TWatchlistItem } from 'types/client/account';
......@@ -8,6 +8,7 @@ import TokensIcon from 'icons/tokens.svg';
// import WalletIcon from 'icons/wallet.svg';
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 TokenLogo from 'ui/shared/TokenLogo';
......@@ -40,10 +41,8 @@ const WatchListAddressItem = ({ item, isLoading }: { item: TWatchlistItem; isLoa
</Skeleton>
</Flex>
{ item.tokens_count && (
<HStack spacing={ 0 } fontSize="sm" pl={ infoItemsPaddingLeft }>
<Skeleton isLoaded={ !isLoading } boxSize={ 5 } mr={ 2 } borderRadius="sm">
<Icon as={ TokensIcon } boxSize={ 5 }/>
</Skeleton>
<HStack spacing={ 2 } fontSize="sm" pl={ infoItemsPaddingLeft }>
<Icon as={ TokensIcon } boxSize={ 5 } isLoading={ isLoading } borderRadius="sm"/>
<Skeleton isLoaded={ !isLoading } display="inline-flex">
<span>{ `Tokens:${ nbsp }` + item.tokens_count }</span>
{ /* api does not provide token prices */ }
......
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