Skip to content

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

migration: next part

parent 1cbb8cd9
Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 250 deletions
lib/web3/wallets.ts
View file @ 1cfab7e7
import type { WalletType, WalletInfo } from 'types/client/wallets'; import type { WalletType, WalletInfo } from 'types/client/wallets';
import coinbaseIcon from 'icons/wallets/coinbase.svg';
import metamaskIcon from 'icons/wallets/metamask.svg';
import tokenPocketIcon from 'icons/wallets/token-pocket.svg';
export const WALLETS_INFO: Record<Exclude<WalletType, 'none'>, WalletInfo> = { export const WALLETS_INFO: Record<Exclude<WalletType, 'none'>, WalletInfo> = {
metamask: { metamask: {
name: 'MetaMask', name: 'MetaMask',
icon: metamaskIcon, icon: 'wallets/metamask',
}, },
coinbase: { coinbase: {
name: 'Coinbase Wallet', name: 'Coinbase Wallet',
icon: coinbaseIcon, icon: 'wallets/coinbase',
}, },
token_pocket: { token_pocket: {
name: 'TokenPocket', name: 'TokenPocket',
icon: tokenPocketIcon, icon: 'wallets/token-pocket',
}, },
}; };
types/client/wallets.ts
View file @ 1cfab7e7
import type { ArrayElement } from 'types/utils'; import type { ArrayElement } from 'types/utils';
import type { IconName } from 'ui/shared/IconSvg';
export const SUPPORTED_WALLETS = [ export const SUPPORTED_WALLETS = [
'metamask', 'metamask',
'coinbase', 'coinbase',
...@@ -10,5 +12,5 @@ export type WalletType = ArrayElement<typeof SUPPORTED_WALLETS>; ...@@ -10,5 +12,5 @@ export type WalletType = ArrayElement<typeof SUPPORTED_WALLETS>;
export interface WalletInfo { export interface WalletInfo {
name: string; name: string;
icon: React.ElementType; icon: IconName;
} }
ui/addressVerification/AddressVerificationModal.tsx
View file @ 1cfab7e7
import { Icon, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Link } from '@chakra-ui/react'; import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Link } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { AddressVerificationFormFirstStepFields, AddressCheckStatusSuccess } from './types'; import type { AddressVerificationFormFirstStepFields, AddressCheckStatusSuccess } from './types';
import type { VerifiedAddress } from 'types/api/account'; import type { VerifiedAddress } from 'types/api/account';
import eastArrowIcon from 'icons/arrows/east.svg';
import * as mixpanel from 'lib/mixpanel/index'; import * as mixpanel from 'lib/mixpanel/index';
import IconSvg from 'ui/shared/IconSvg';
import Web3ModalProvider from 'ui/shared/Web3ModalProvider'; import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
import AddressVerificationStepAddress from './steps/AddressVerificationStepAddress'; import AddressVerificationStepAddress from './steps/AddressVerificationStepAddress';
...@@ -100,7 +100,7 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o ...@@ -100,7 +100,7 @@ const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, o
<ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }> <ModalHeader fontWeight="500" textStyle="h3" mb={ 6 }>
{ stepIndex !== 0 && ( { stepIndex !== 0 && (
<Link mr={ 3 } onClick={ handleGoToPrevStep }> <Link mr={ 3 } onClick={ handleGoToPrevStep }>
<Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle"/> <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" verticalAlign="middle"/>
</Link> </Link>
) } ) }
<span>{ step.title }</span> <span>{ step.title }</span>
......
ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
View file @ 1cfab7e7
import { chakra, Checkbox, Code, Icon } from '@chakra-ui/react'; import { chakra, Checkbox, Code } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps } from 'react-hook-form'; import type { ControllerRenderProps } from 'react-hook-form';
...@@ -7,10 +7,10 @@ import { useFormContext, Controller } from 'react-hook-form'; ...@@ -7,10 +7,10 @@ import { useFormContext, Controller } from 'react-hook-form';
import type { FormFields } from '../types'; import type { FormFields } from '../types';
import type { SmartContractVerificationConfig } from 'types/api/contract'; import type { SmartContractVerificationConfig } from 'types/api/contract';
import iconSearch from 'icons/search.svg';
import { getResourceKey } from 'lib/api/useApiQuery'; import { getResourceKey } from 'lib/api/useApiQuery';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import FancySelect from 'ui/shared/FancySelect/FancySelect'; import FancySelect from 'ui/shared/FancySelect/FancySelect';
import IconSvg from 'ui/shared/IconSvg';
import ContractVerificationFormRow from '../ContractVerificationFormRow'; import ContractVerificationFormRow from '../ContractVerificationFormRow';
...@@ -56,7 +56,7 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => { ...@@ -56,7 +56,7 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
defaultOptions defaultOptions
size={ isMobile ? 'md' : 'lg' } size={ isMobile ? 'md' : 'lg' }
placeholder="Compiler (enter version or use the dropdown)" placeholder="Compiler (enter version or use the dropdown)"
placeholderIcon={ <Icon as={ iconSearch }/> } placeholderIcon={ <IconSvg name="search"/> }
isDisabled={ formState.isSubmitting } isDisabled={ formState.isSubmitting }
error={ error } error={ error }
isRequired isRequired
......
ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
View file @ 1cfab7e7
import { Flex, FormControl, Icon, IconButton, Input, Text } from '@chakra-ui/react'; import { Flex, FormControl, IconButton, Input, Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { Control, ControllerRenderProps, FieldError } from 'react-hook-form'; import type { Control, ControllerRenderProps, FieldError } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import type { FormFields } from '../types'; import type { FormFields } from '../types';
import minusIcon from 'icons/minus.svg';
import plusIcon from 'icons/plus.svg';
import { ADDRESS_REGEXP } from 'lib/validations/address'; import { ADDRESS_REGEXP } from 'lib/validations/address';
import IconSvg from 'ui/shared/IconSvg';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow'; import ContractVerificationFormRow from '../ContractVerificationFormRow';
...@@ -86,7 +85,7 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on ...@@ -86,7 +85,7 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
w="30px" w="30px"
h="30px" h="30px"
onClick={ handleRemoveButtonClick } onClick={ handleRemoveButtonClick }
icon={ <Icon as={ minusIcon } w="20px" h="20px"/> } icon={ <IconSvg name="minus" w="20px" h="20px"/> }
isDisabled={ isDisabled } isDisabled={ isDisabled }
/> />
) } ) }
...@@ -97,7 +96,7 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on ...@@ -97,7 +96,7 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
w="30px" w="30px"
h="30px" h="30px"
onClick={ handleAddButtonClick } onClick={ handleAddButtonClick }
icon={ <Icon as={ plusIcon } w="20px" h="20px"/> } icon={ <IconSvg name="plus" w="20px" h="20px"/> }
isDisabled={ isDisabled } isDisabled={ isDisabled }
/> />
) } ) }
......
ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
View file @ 1cfab7e7
import { import {
Link, Link,
Icon,
chakra, chakra,
Popover, Popover,
PopoverTrigger, PopoverTrigger,
...@@ -20,9 +19,9 @@ import { Controller } from 'react-hook-form'; ...@@ -20,9 +19,9 @@ import { Controller } from 'react-hook-form';
import type { FormFields } from '../types'; import type { FormFields } from '../types';
import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/api/contract'; import type { SmartContractVerificationConfig, SmartContractVerificationMethod } from 'types/api/contract';
import infoIcon from 'icons/info.svg';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import FancySelect from 'ui/shared/FancySelect/FancySelect'; import FancySelect from 'ui/shared/FancySelect/FancySelect';
import IconSvg from 'ui/shared/IconSvg';
import { METHOD_LABELS } from '../utils'; import { METHOD_LABELS } from '../utils';
...@@ -105,7 +104,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props ...@@ -105,7 +104,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
<Popover trigger="hover" isLazy placement={ isMobile ? 'bottom-end' : 'right-start' } offset={ [ -8, 8 ] }> <Popover trigger="hover" isLazy placement={ isMobile ? 'bottom-end' : 'right-start' } offset={ [ -8, 8 ] }>
<PopoverTrigger> <PopoverTrigger>
<chakra.span display="inline-block" ml={ 1 } cursor="pointer" verticalAlign="middle" h="22px"> <chakra.span display="inline-block" ml={ 1 } cursor="pointer" verticalAlign="middle" h="22px">
<Icon as={ infoIcon } boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/> <IconSvg name="info" boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/>
</chakra.span> </chakra.span>
</PopoverTrigger> </PopoverTrigger>
<Portal> <Portal>
......
ui/home/LatestTxsItem.tsx
View file @ 1cfab7e7
...@@ -11,12 +11,11 @@ import React from 'react'; ...@@ -11,12 +11,11 @@ import React from 'react';
import type { Transaction } from 'types/api/transaction'; import type { Transaction } from 'types/api/transaction';
import config from 'configs/app'; import config from 'configs/app';
import rightArrowIcon from 'icons/arrows/east.svg';
import getValueWithUnit from 'lib/getValueWithUnit'; import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import TxStatus from 'ui/shared/statusTag/TxStatus'; import TxStatus from 'ui/shared/statusTag/TxStatus';
import TxFeeStability from 'ui/shared/tx/TxFeeStability'; import TxFeeStability from 'ui/shared/tx/TxFeeStability';
import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
...@@ -78,8 +77,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ...@@ -78,8 +77,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
</Box> </Box>
</Flex> </Flex>
<Grid alignItems="center" alignSelf="flex-start" templateColumns="24px auto"> <Grid alignItems="center" alignSelf="flex-start" templateColumns="24px auto">
<Icon <IconSvg
as={ rightArrowIcon } name="arrows/east"
boxSize={ 6 } boxSize={ 6 }
color="gray.500" color="gray.500"
transform="rotate(90deg)" transform="rotate(90deg)"
......
ui/home/LatestTxsItemMobile.tsx
View file @ 1cfab7e7
...@@ -10,12 +10,11 @@ import React from 'react'; ...@@ -10,12 +10,11 @@ import React from 'react';
import type { Transaction } from 'types/api/transaction'; import type { Transaction } from 'types/api/transaction';
import config from 'configs/app'; import config from 'configs/app';
import rightArrowIcon from 'icons/arrows/east.svg';
import getValueWithUnit from 'lib/getValueWithUnit'; import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import TxStatus from 'ui/shared/statusTag/TxStatus'; import TxStatus from 'ui/shared/statusTag/TxStatus';
import TxFeeStability from 'ui/shared/tx/TxFeeStability'; import TxFeeStability from 'ui/shared/tx/TxFeeStability';
import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
...@@ -76,8 +75,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ...@@ -76,8 +75,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
fontWeight="500" fontWeight="500"
mr={ 2 } mr={ 2 }
/> />
<Icon <IconSvg
as={ rightArrowIcon } name="arrows/east"
boxSize={ 6 } boxSize={ 6 }
color="gray.500" color="gray.500"
isLoading={ isLoading } isLoading={ isLoading }
......
ui/home/Stats.tsx
View file @ 1cfab7e7
...@@ -5,13 +5,6 @@ import React from 'react'; ...@@ -5,13 +5,6 @@ import React from 'react';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import config from 'configs/app'; import config from 'configs/app';
import blockIcon from 'icons/block.svg';
import clockIcon from 'icons/clock-light.svg';
import bitcoinIcon from 'icons/coins/bitcoin.svg';
import gasIcon from 'icons/gas.svg';
import txIcon from 'icons/transactions.svg';
import batchesIcon from 'icons/txn_batches.svg';
import walletIcon from 'icons/wallet.svg';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { WEI } from 'lib/consts'; import { WEI } from 'lib/consts';
import { HOMEPAGE_STATS } from 'stubs/stats'; import { HOMEPAGE_STATS } from 'stubs/stats';
...@@ -58,7 +51,7 @@ const Stats = () => { ...@@ -58,7 +51,7 @@ const Stats = () => {
<> <>
{ config.features.zkEvmRollup.isEnabled ? ( { config.features.zkEvmRollup.isEnabled ? (
<StatsItem <StatsItem
icon={ batchesIcon } icon="txn_batches"
title="Latest batch" title="Latest batch"
value={ (zkEvmLatestBatchQuery.data || 0).toLocaleString() } value={ (zkEvmLatestBatchQuery.data || 0).toLocaleString() }
url={ route({ pathname: '/zkevm-l2-txn-batches' }) } url={ route({ pathname: '/zkevm-l2-txn-batches' }) }
...@@ -66,7 +59,7 @@ const Stats = () => { ...@@ -66,7 +59,7 @@ const Stats = () => {
/> />
) : ( ) : (
<StatsItem <StatsItem
icon={ blockIcon } icon="block"
title="Total blocks" title="Total blocks"
value={ Number(data.total_blocks).toLocaleString() } value={ Number(data.total_blocks).toLocaleString() }
url={ route({ pathname: '/blocks' }) } url={ route({ pathname: '/blocks' }) }
...@@ -75,21 +68,21 @@ const Stats = () => { ...@@ -75,21 +68,21 @@ const Stats = () => {
) } ) }
{ hasAvgBlockTime && ( { hasAvgBlockTime && (
<StatsItem <StatsItem
icon={ clockIcon } icon="clock-light"
title="Average block time" title="Average block time"
value={ `${ (data.average_block_time / 1000).toFixed(1) }s` } value={ `${ (data.average_block_time / 1000).toFixed(1) }s` }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
) } ) }
<StatsItem <StatsItem
icon={ txIcon } icon="transactions"
title="Total transactions" title="Total transactions"
value={ Number(data.total_transactions).toLocaleString() } value={ Number(data.total_transactions).toLocaleString() }
url={ route({ pathname: '/txs' }) } url={ route({ pathname: '/txs' }) }
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
/> />
<StatsItem <StatsItem
icon={ walletIcon } icon="wallet"
title="Wallet addresses" title="Wallet addresses"
value={ Number(data.total_addresses).toLocaleString() } value={ Number(data.total_addresses).toLocaleString() }
_last={ isOdd ? lastItemTouchStyle : undefined } _last={ isOdd ? lastItemTouchStyle : undefined }
...@@ -97,7 +90,7 @@ const Stats = () => { ...@@ -97,7 +90,7 @@ const Stats = () => {
/> />
{ hasGasTracker && data.gas_prices && ( { hasGasTracker && data.gas_prices && (
<StatsItem <StatsItem
icon={ gasIcon } icon="gas"
title="Gas tracker" title="Gas tracker"
value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` } value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` }
_last={ isOdd ? lastItemTouchStyle : undefined } _last={ isOdd ? lastItemTouchStyle : undefined }
...@@ -107,7 +100,7 @@ const Stats = () => { ...@@ -107,7 +100,7 @@ const Stats = () => {
) } ) }
{ data.rootstock_locked_btc && ( { data.rootstock_locked_btc && (
<StatsItem <StatsItem
icon={ bitcoinIcon } icon="coins/bitcoin"
title="BTC Locked in 2WP" title="BTC Locked in 2WP"
value={ `${ BigNumber(data.rootstock_locked_btc).div(WEI).dp(0).toFormat() } RBTC` } value={ `${ BigNumber(data.rootstock_locked_btc).div(WEI).dp(0).toFormat() } RBTC` }
_last={ isOdd ? lastItemTouchStyle : undefined } _last={ isOdd ? lastItemTouchStyle : undefined }
......
ui/home/StatsItem.tsx
View file @ 1cfab7e7
...@@ -3,11 +3,12 @@ import { Skeleton, Flex, useColorModeValue, chakra, LightMode } from '@chakra-ui ...@@ -3,11 +3,12 @@ import { Skeleton, Flex, useColorModeValue, chakra, LightMode } from '@chakra-ui
import React from 'react'; import React from 'react';
import breakpoints from 'theme/foundations/breakpoints'; import breakpoints from 'theme/foundations/breakpoints';
import Icon from 'ui/shared/chakra/Icon';
import Hint from 'ui/shared/Hint'; import Hint from 'ui/shared/Hint';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
type Props = { type Props = {
icon: React.FC<React.SVGAttributes<SVGElement>>; icon: IconName;
title: string; title: string;
value: string; value: string;
className?: string; className?: string;
...@@ -57,7 +58,7 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading ...@@ -57,7 +58,7 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading
href: url, href: url,
} : {}) } } : {}) }
> >
<Icon as={ icon } boxSize={ 7 } isLoading={ isLoading } borderRadius="base"/> <IconSvg name={ icon } boxSize={ 7 } isLoading={ isLoading } borderRadius="base"/>
<Flex <Flex
flexDirection="column" flexDirection="column"
alignItems="start" alignItems="start"
......
ui/home/indicators/utils/indicators.tsx
View file @ 1cfab7e7
import { Icon } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TChainIndicator } from '../types'; import type { TChainIndicator } from '../types';
import config from 'configs/app'; import config from 'configs/app';
import globeIcon from 'icons/globe.svg';
import lockIcon from 'icons/lock.svg';
import txIcon from 'icons/transactions.svg';
import { sortByDateDesc } from 'ui/shared/chart/utils/sorts'; import { sortByDateDesc } from 'ui/shared/chart/utils/sorts';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import IconSvg from 'ui/shared/IconSvg';
const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = { const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
id: 'daily_txs', id: 'daily_txs',
title: 'Daily transactions', title: 'Daily transactions',
value: (stats) => Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }), value: (stats) => Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>, icon: <IconSvg name="transactions" boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
hint: `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`, hint: `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`,
api: { api: {
resourceName: 'homepage_chart_txs', resourceName: 'homepage_chart_txs',
...@@ -58,7 +55,7 @@ const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = { ...@@ -58,7 +55,7 @@ const marketPriceIndicator: TChainIndicator<'homepage_chart_market'> = {
id: 'market_cap', id: 'market_cap',
title: 'Market cap', title: 'Market cap',
value: (stats) => '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 0, notation: 'compact' }), value: (stats) => '$' + Number(stats.market_cap).toLocaleString(undefined, { maximumFractionDigits: 0, notation: 'compact' }),
icon: <Icon as={ globeIcon } boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>, icon: <IconSvg name="globe" boxSize={ 6 } bgColor="#6A5DCC" borderRadius="base" color="white"/>,
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.', hint: 'The total market value of a cryptocurrency\'s circulating supply. It is analogous to the free-float capitalization in the stock market. Market Cap = Current Price x Circulating Supply.',
api: { api: {
...@@ -81,7 +78,7 @@ const tvlIndicator: TChainIndicator<'homepage_chart_market'> = { ...@@ -81,7 +78,7 @@ const tvlIndicator: TChainIndicator<'homepage_chart_market'> = {
id: 'tvl', id: 'tvl',
title: 'Total value locked', title: 'Total value locked',
value: (stats) => '$' + Number(stats.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }), value: (stats) => '$' + Number(stats.tvl).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
icon: <Icon as={ lockIcon } boxSize={ 6 } bgColor="#517FDB" borderRadius="base" color="white"/>, icon: <IconSvg name="lock" boxSize={ 6 } bgColor="#517FDB" borderRadius="base" color="white"/>,
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
hint: 'Total value of digital assets locked or staked in a chain', hint: 'Total value of digital assets locked or staked in a chain',
api: { api: {
......
ui/marketplace/MarketplaceAppCard.tsx
View file @ 1cfab7e7
import { Box, Icon, IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue } from '@chakra-ui/react'; import { Box, IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue } from '@chakra-ui/react';
import type { MouseEvent } from 'react'; import type { MouseEvent } from 'react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import type { MarketplaceAppPreview } from 'types/client/marketplace'; import type { MarketplaceAppPreview } from 'types/client/marketplace';
import northEastIcon from 'icons/arrows/north-east.svg'; import IconSvg from 'ui/shared/IconSvg';
import starFilledIcon from 'icons/star_filled.svg';
import starOutlineIcon from 'icons/star_outline.svg';
import MarketplaceAppCardLink from './MarketplaceAppCardLink'; import MarketplaceAppCardLink from './MarketplaceAppCardLink';
...@@ -152,8 +150,8 @@ const MarketplaceAppCard = ({ ...@@ -152,8 +150,8 @@ const MarketplaceAppCard = ({
> >
More More
<Icon <IconSvg
as={ northEastIcon } name="arrows/north-east"
marginLeft={ 1 } marginLeft={ 1 }
/> />
</Link> </Link>
...@@ -175,8 +173,8 @@ const MarketplaceAppCard = ({ ...@@ -175,8 +173,8 @@ const MarketplaceAppCard = ({
h={ 8 } h={ 8 }
onClick={ handleFavoriteClick } onClick={ handleFavoriteClick }
icon={ isFavorite ? icon={ isFavorite ?
<Icon as={ starFilledIcon } w={ 4 } h={ 4 } color="yellow.400"/> : <IconSvg name="star_filled" w={ 4 } h={ 4 } color="yellow.400"/> :
<Icon as={ starOutlineIcon } w={ 4 } h={ 4 } color="gray.300"/> <IconSvg name="star_outline" w={ 4 } h={ 4 } color="gray.300"/>
} }
/> />
) } ) }
......
ui/marketplace/MarketplaceAppModal.tsx
View file @ 1cfab7e7
import { import {
Box, Flex, Heading, Icon, IconButton, Image, Link, List, Modal, ModalBody, Box, Flex, Heading, IconButton, Image, Link, List, Modal, ModalBody,
ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text, useColorModeValue, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Tag, Text, useColorModeValue,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import type { MarketplaceAppOverview } from 'types/client/marketplace'; import type { MarketplaceAppOverview } from 'types/client/marketplace';
import linkIcon from 'icons/link.svg';
import ghIcon from 'icons/social/git.svg';
import tgIcon from 'icons/social/telega.svg';
import twIcon from 'icons/social/tweet.svg';
import starFilledIcon from 'icons/star_filled.svg';
import starOutlineIcon from 'icons/star_outline.svg';
import useIsMobile from 'lib/hooks/useIsMobile'; import useIsMobile from 'lib/hooks/useIsMobile';
import { nbsp } from 'lib/html-entities'; import { nbsp } from 'lib/html-entities';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
import MarketplaceAppModalLink from './MarketplaceAppModalLink'; import MarketplaceAppModalLink from './MarketplaceAppModalLink';
...@@ -47,15 +43,15 @@ const MarketplaceAppModal = ({ ...@@ -47,15 +43,15 @@ const MarketplaceAppModal = ({
const socialLinks = [ const socialLinks = [
telegram ? { telegram ? {
icon: tgIcon, icon: 'social/telega' as IconName,
url: telegram, url: telegram,
} : null, } : null,
twitter ? { twitter ? {
icon: twIcon, icon: 'social/tweet' as IconName,
url: twitter, url: twitter,
} : null, } : null,
github ? { github ? {
icon: ghIcon, icon: 'social/git' as IconName,
url: github, url: github,
} : null, } : null,
].filter(Boolean); ].filter(Boolean);
...@@ -138,8 +134,8 @@ const MarketplaceAppModal = ({ ...@@ -138,8 +134,8 @@ const MarketplaceAppModal = ({
h={ 8 } h={ 8 }
onClick={ handleFavoriteClick } onClick={ handleFavoriteClick }
icon={ isFavorite ? icon={ isFavorite ?
<Icon as={ starFilledIcon } w={ 4 } h={ 4 } color="yellow.400"/> : <IconSvg name="star_filled" w={ 4 } h={ 4 } color="yellow.400"/> :
<Icon as={ starOutlineIcon } w={ 4 } h={ 4 } color="gray.300"/> } <IconSvg name="star_outline" w={ 4 } h={ 4 } color="gray.300"/> }
/> />
</Box> </Box>
</Box> </Box>
...@@ -188,8 +184,8 @@ const MarketplaceAppModal = ({ ...@@ -188,8 +184,8 @@ const MarketplaceAppModal = ({
maxW="100%" maxW="100%"
overflow="hidden" overflow="hidden"
> >
<Icon <IconSvg
as={ linkIcon } name="link"
display="inline" display="inline"
verticalAlign="baseline" verticalAlign="baseline"
boxSize="18px" boxSize="18px"
...@@ -227,8 +223,8 @@ const MarketplaceAppModal = ({ ...@@ -227,8 +223,8 @@ const MarketplaceAppModal = ({
w={ 10 } w={ 10 }
h={ 10 } h={ 10 }
> >
<Icon <IconSvg
as={ icon } name={ icon }
w="20px" w="20px"
h="20px" h="20px"
display="block" display="block"
......
ui/marketplace/MarketplaceCategoriesMenu.tsx
View file @ 1cfab7e7
import { Box, Button, Icon, Menu, MenuButton, MenuList, Skeleton } from '@chakra-ui/react'; import { Box, Button, Menu, MenuButton, MenuList, Skeleton } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { MarketplaceCategory } from 'types/client/marketplace'; import { MarketplaceCategory } from 'types/client/marketplace';
import eastMiniArrowIcon from 'icons/arrows/east-mini.svg'; import IconSvg from 'ui/shared/IconSvg';
import MarketplaceCategoriesMenuItem from './MarketplaceCategoriesMenuItem'; import MarketplaceCategoriesMenuItem from './MarketplaceCategoriesMenuItem';
...@@ -50,7 +50,7 @@ const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories, i ...@@ -50,7 +50,7 @@ const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories, i
alignItems="center" alignItems="center"
> >
{ selectedCategoryId } { selectedCategoryId }
<Icon transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/> <IconSvg transform="rotate(-90deg)" ml={{ base: 'auto', sm: 1 }} name="arrows/east-mini" w={ 5 } h={ 5 }/>
</Box> </Box>
</MenuButton> </MenuButton>
......
ui/marketplace/MarketplaceCategoriesMenuItem.tsx
View file @ 1cfab7e7
import { Icon, MenuItem } from '@chakra-ui/react'; import { MenuItem } from '@chakra-ui/react';
import type { FunctionComponent, SVGAttributes } from 'react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { MarketplaceCategory } from 'types/client/marketplace'; import { MarketplaceCategory } from 'types/client/marketplace';
import starFilledIcon from 'icons/star_filled.svg'; import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
type Props = { type Props = {
id: string; id: string;
onClick: (category: string) => void; onClick: (category: string) => void;
} }
const ICONS: Record<string, FunctionComponent<SVGAttributes<SVGElement>>> = { const ICONS: Record<string, IconName> = {
[MarketplaceCategory.FAVORITES]: starFilledIcon, [MarketplaceCategory.FAVORITES]: 'star_filled',
}; };
const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => { const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => {
...@@ -27,7 +27,7 @@ const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => { ...@@ -27,7 +27,7 @@ const MarketplaceCategoriesMenuItem = ({ id, onClick }: Props) => {
display="flex" display="flex"
alignItems="center" alignItems="center"
> >
{ id in ICONS && <Icon mr={ 3 } as={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/> } { id in ICONS && <IconSvg mr={ 3 } name={ ICONS[id] } w={ 4 } h={ 4 } color="blackAlpha.800"/> }
{ id } { id }
</MenuItem> </MenuItem>
); );
......
ui/pages/Address.tsx
View file @ 1cfab7e7
import { Box, Flex, HStack, Icon } from '@chakra-ui/react'; import { Box, Flex, HStack } from '@chakra-ui/react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React from 'react'; import React from 'react';
import type { RoutedTab } from 'ui/shared/Tabs/types'; import type { RoutedTab } from 'ui/shared/Tabs/types';
import config from 'configs/app'; import config from 'configs/app';
import iconSuccess from 'icons/status/success.svg';
import useApiQuery from 'lib/api/useApiQuery'; import useApiQuery from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app'; import { useAppContext } from 'lib/contexts/app';
import useContractTabs from 'lib/hooks/useContractTabs'; import useContractTabs from 'lib/hooks/useContractTabs';
...@@ -30,6 +29,7 @@ import TextAd from 'ui/shared/ad/TextAd'; ...@@ -30,6 +29,7 @@ import TextAd from 'ui/shared/ad/TextAd';
import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import EntityTags from 'ui/shared/EntityTags'; import EntityTags from 'ui/shared/EntityTags';
import IconSvg from 'ui/shared/IconSvg';
import NetworkExplorers from 'ui/shared/NetworkExplorers'; import NetworkExplorers from 'ui/shared/NetworkExplorers';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import RoutedTabs from 'ui/shared/Tabs/RoutedTabs'; import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
...@@ -127,7 +127,7 @@ const AddressPageContent = () => { ...@@ -127,7 +127,7 @@ const AddressPageContent = () => {
return ( return (
<> <>
<span>Contract</span> <span>Contract</span>
<Icon as={ iconSuccess } boxSize="14px" color="green.500" ml={ 1 }/> <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
</> </>
); );
} }
......
ui/pages/Marketplace.tsx
View file @ 1cfab7e7
import { Box, Icon, Link, Skeleton } from '@chakra-ui/react'; import { Box, Link, Skeleton } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import config from 'configs/app'; import config from 'configs/app';
import PlusIcon from 'icons/plus.svg';
import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal'; import MarketplaceAppModal from 'ui/marketplace/MarketplaceAppModal';
import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu'; import MarketplaceCategoriesMenu from 'ui/marketplace/MarketplaceCategoriesMenu';
import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal'; import MarketplaceDisclaimerModal from 'ui/marketplace/MarketplaceDisclaimerModal';
import MarketplaceList from 'ui/marketplace/MarketplaceList'; import MarketplaceList from 'ui/marketplace/MarketplaceList';
import FilterInput from 'ui/shared/filters/FilterInput'; import FilterInput from 'ui/shared/filters/FilterInput';
import IconSvg from 'ui/shared/IconSvg';
import useMarketplace from '../marketplace/useMarketplace'; import useMarketplace from '../marketplace/useMarketplace';
const feature = config.features.marketplace; const feature = config.features.marketplace;
...@@ -104,8 +104,8 @@ const Marketplace = () => { ...@@ -104,8 +104,8 @@ const Marketplace = () => {
href={ feature.submitFormUrl } href={ feature.submitFormUrl }
isExternal isExternal
> >
<Icon <IconSvg
as={ PlusIcon } name="plus"
w={ 3 } w={ 3 }
h={ 3 } h={ 3 }
mr={ 2 } mr={ 2 }
......
ui/pages/Token.tsx
View file @ 1cfab7e7
import { Box, Flex, Icon, Tooltip } from '@chakra-ui/react'; import { Box, Flex, Tooltip } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
...@@ -9,8 +9,6 @@ import type { PaginationParams } from 'ui/shared/pagination/types'; ...@@ -9,8 +9,6 @@ import type { PaginationParams } from 'ui/shared/pagination/types';
import type { RoutedTab } from 'ui/shared/Tabs/types'; import type { RoutedTab } from 'ui/shared/Tabs/types';
import config from 'configs/app'; import config from 'configs/app';
import iconSuccess from 'icons/status/success.svg';
import iconVerifiedToken from 'icons/verified_token.svg';
import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery'; import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
import { useAppContext } from 'lib/contexts/app'; import { useAppContext } from 'lib/contexts/app';
import useContractTabs from 'lib/hooks/useContractTabs'; import useContractTabs from 'lib/hooks/useContractTabs';
...@@ -30,6 +28,7 @@ import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet'; ...@@ -30,6 +28,7 @@ import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import EntityTags from 'ui/shared/EntityTags'; import EntityTags from 'ui/shared/EntityTags';
import IconSvg from 'ui/shared/IconSvg';
import NetworkExplorers from 'ui/shared/NetworkExplorers'; import NetworkExplorers from 'ui/shared/NetworkExplorers';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination'; import Pagination from 'ui/shared/pagination/Pagination';
...@@ -189,7 +188,7 @@ const TokenPageContent = () => { ...@@ -189,7 +188,7 @@ const TokenPageContent = () => {
return ( return (
<> <>
<span>Contract</span> <span>Contract</span>
<Icon as={ iconSuccess } boxSize="14px" color="green.500" ml={ 1 }/> <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
</> </>
); );
} }
...@@ -250,7 +249,7 @@ const TokenPageContent = () => { ...@@ -250,7 +249,7 @@ const TokenPageContent = () => {
{ verifiedInfoQuery.data?.tokenAddress && ( { verifiedInfoQuery.data?.tokenAddress && (
<Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }> <Tooltip label={ `Information on this token has been verified by ${ config.chain.name }` }>
<Box boxSize={ 6 }> <Box boxSize={ 6 }>
<Icon as={ iconVerifiedToken } color="green.500" boxSize={ 6 } cursor="pointer"/> <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
</Box> </Box>
</Tooltip> </Tooltip>
) } ) }
......
ui/pages/UnverifiedEmail.tsx
View file @ 1cfab7e7
import { Box, Text, Button, Heading, Icon, chakra } from '@chakra-ui/react'; import { Box, Text, Button, Heading, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import iconEmailSent from 'icons/email-sent.svg';
import useApiFetch from 'lib/api/useApiFetch'; import useApiFetch from 'lib/api/useApiFetch';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import getErrorObjPayload from 'lib/errors/getErrorObjPayload'; import getErrorObjPayload from 'lib/errors/getErrorObjPayload';
import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode'; import getErrorObjStatusCode from 'lib/errors/getErrorObjStatusCode';
import useToast from 'lib/hooks/useToast'; import useToast from 'lib/hooks/useToast';
import * as mixpanel from 'lib/mixpanel/index'; import * as mixpanel from 'lib/mixpanel/index';
import IconSvg from 'ui/shared/IconSvg';
interface Props { interface Props {
email?: string; // TODO: obtain email from API email?: string; // TODO: obtain email from API
...@@ -77,7 +77,7 @@ const UnverifiedEmail = ({ email }: Props) => { ...@@ -77,7 +77,7 @@ const UnverifiedEmail = ({ email }: Props) => {
return ( return (
<Box> <Box>
<Icon as={ iconEmailSent } width="180px" height="auto" mt="52px"/> <IconSvg name="email-sent" width="180px" height="auto" mt="52px"/>
<Heading mt={ 6 } size="2xl">Verify your email address</Heading> <Heading mt={ 6 } size="2xl">Verify your email address</Heading>
<Text variant="secondary" mt={ 3 }> <Text variant="secondary" mt={ 3 }>
<span>Please confirm your email address to use the My Account feature. A confirmation email was sent to </span> <span>Please confirm your email address to use the My Account feature. A confirmation email was sent to </span>
......
ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx
View file @ 1cfab7e7
import type { InputProps } from '@chakra-ui/react'; import type { InputProps } from '@chakra-ui/react';
import { IconButton, Icon, Flex } from '@chakra-ui/react'; import { IconButton, Flex } from '@chakra-ui/react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form'; import type { ControllerRenderProps, Control, FieldError } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import MinusIcon from 'icons/minus.svg';
import PlusIcon from 'icons/plus.svg';
import { ADDRESS_REGEXP } from 'lib/validations/address'; import { ADDRESS_REGEXP } from 'lib/validations/address';
import AddressInput from 'ui/shared/AddressInput'; import AddressInput from 'ui/shared/AddressInput';
import IconSvg from 'ui/shared/IconSvg';
import type { Inputs } from './PublicTagsForm'; import type { Inputs } from './PublicTagsForm';
...@@ -60,7 +59,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, erro ...@@ -60,7 +59,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, erro
w="30px" w="30px"
h="30px" h="30px"
onClick={ onRemoveFieldClick(index) } onClick={ onRemoveFieldClick(index) }
icon={ <Icon as={ MinusIcon } w="20px" h="20px"/> } icon={ <IconSvg name="minus" w="20px" h="20px"/> }
/> />
) } ) }
{ index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && ( { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
...@@ -70,7 +69,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, erro ...@@ -70,7 +69,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, erro
w="30px" w="30px"
h="30px" h="30px"
onClick={ onAddFieldClick } onClick={ onAddFieldClick }
icon={ <Icon as={ PlusIcon } w="20px" h="20px"/> } icon={ <IconSvg name="plus" w="20px" h="20px"/> }
/> />
) } ) }
</Flex> </Flex>
......
ui/searchResults/SearchResultListItem.tsx
View file @ 1cfab7e7
import { Flex, Grid, Icon, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react'; import { Flex, Grid, Image, Box, Text, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import xss from 'xss'; import xss from 'xss';
...@@ -6,9 +6,6 @@ import type { SearchResultItem } from 'types/api/search'; ...@@ -6,9 +6,6 @@ import type { SearchResultItem } from 'types/api/search';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import labelIcon from 'icons/publictags_slim.svg';
import iconSuccess from 'icons/status/success.svg';
import verifiedToken from 'icons/verified_token.svg';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText'; import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index'; import * as mixpanel from 'lib/mixpanel/index';
...@@ -18,6 +15,7 @@ import * as BlockEntity from 'ui/shared/entities/block/BlockEntity'; ...@@ -18,6 +15,7 @@ import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity'; import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
import LinkExternal from 'ui/shared/LinkExternal'; import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal'; import LinkInternal from 'ui/shared/LinkInternal';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
...@@ -68,7 +66,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -68,7 +66,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
textOverflow="ellipsis" textOverflow="ellipsis"
/> />
</LinkInternal> </LinkInternal>
{ data.is_verified_via_admin_panel && <Icon as={ verifiedToken } boxSize={ 4 } ml={ 1 } color="green.500"/> } { data.is_verified_via_admin_panel && <IconSvg name="verified_token" boxSize={ 4 } ml={ 1 } color="green.500"/> }
</Flex> </Flex>
); );
} }
...@@ -107,7 +105,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -107,7 +105,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
case 'label': { case 'label': {
return ( return (
<Flex alignItems="center"> <Flex alignItems="center">
<Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/> <IconSvg name="publictags_slim" boxSize={ 6 } mr={ 2 } color="gray.500"/>
<LinkInternal <LinkInternal
href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) } href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
fontWeight={ 700 } fontWeight={ 700 }
...@@ -214,7 +212,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -214,7 +212,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
<Text whiteSpace="nowrap" overflow="hidden"> <Text whiteSpace="nowrap" overflow="hidden">
<HashStringShortenDynamic hash={ data.address } isTooltipDisabled/> <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
</Text> </Text>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> } { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
</Skeleton> </Skeleton>
<Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }> <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.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
...@@ -245,7 +243,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -245,7 +243,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
<Box overflow="hidden"> <Box overflow="hidden">
<HashStringShortenDynamic hash={ data.address }/> <HashStringShortenDynamic hash={ data.address }/>
</Box> </Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> } { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
</Flex> </Flex>
); );
} }
......
ui/searchResults/SearchResultTableItem.tsx
View file @ 1cfab7e7
import { Tr, Td, Text, Flex, Icon, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react'; import { Tr, Td, Text, Flex, Image, Box, Skeleton, useColorMode, Tag } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import xss from 'xss'; import xss from 'xss';
...@@ -6,9 +6,6 @@ import type { SearchResultItem } from 'types/api/search'; ...@@ -6,9 +6,6 @@ import type { SearchResultItem } from 'types/api/search';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import labelIcon from 'icons/publictags_slim.svg';
import iconSuccess from 'icons/status/success.svg';
import verifiedToken from 'icons/verified_token.svg';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import highlightText from 'lib/highlightText'; import highlightText from 'lib/highlightText';
import * as mixpanel from 'lib/mixpanel/index'; import * as mixpanel from 'lib/mixpanel/index';
...@@ -18,6 +15,7 @@ import * as BlockEntity from 'ui/shared/entities/block/BlockEntity'; ...@@ -18,6 +15,7 @@ import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import * as TxEntity from 'ui/shared/entities/tx/TxEntity'; import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
import LinkExternal from 'ui/shared/LinkExternal'; import LinkExternal from 'ui/shared/LinkExternal';
import LinkInternal from 'ui/shared/LinkInternal'; import LinkInternal from 'ui/shared/LinkInternal';
import type { SearchResultAppItem } from 'ui/shared/search/utils'; import type { SearchResultAppItem } from 'ui/shared/search/utils';
...@@ -68,7 +66,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -68,7 +66,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }} dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}
/> />
</LinkInternal> </LinkInternal>
{ data.is_verified_via_admin_panel && <Icon as={ verifiedToken } boxSize={ 4 } ml={ 1 } color="green.500"/> } { data.is_verified_via_admin_panel && <IconSvg name="verified_token" boxSize={ 4 } ml={ 1 } color="green.500"/> }
</Flex> </Flex>
</Td> </Td>
<Td fontSize="sm" verticalAlign="middle"> <Td fontSize="sm" verticalAlign="middle">
...@@ -76,7 +74,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -76,7 +74,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }> <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
<HashStringShortenDynamic hash={ data.address }/> <HashStringShortenDynamic hash={ data.address }/>
</Box> </Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> } { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
</Skeleton> </Skeleton>
</Td> </Td>
<Td fontSize="sm" verticalAlign="middle" isNumeric> <Td fontSize="sm" verticalAlign="middle" isNumeric>
...@@ -165,7 +163,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -165,7 +163,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<> <>
<Td fontSize="sm"> <Td fontSize="sm">
<Flex alignItems="center"> <Flex alignItems="center">
<Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/> <IconSvg name="publictags_slim" boxSize={ 6 } mr={ 2 } color="gray.500"/>
<LinkInternal <LinkInternal
href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) } href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
fontWeight={ 700 } fontWeight={ 700 }
...@@ -182,7 +180,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => { ...@@ -182,7 +180,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
<Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }> <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-28px)' : 'unset' }>
<HashStringShortenDynamic hash={ data.address }/> <HashStringShortenDynamic hash={ data.address }/>
</Box> </Box>
{ data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/> } { data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/> }
</Flex> </Flex>
</Td> </Td>
<Td></Td> <Td></Td>
......
ui/shared/NetworkAddToWallet.tsx
View file @ 1cfab7e7
import { Button, Icon } from '@chakra-ui/react'; import { Button } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import config from 'configs/app'; import config from 'configs/app';
...@@ -7,6 +7,7 @@ import * as mixpanel from 'lib/mixpanel/index'; ...@@ -7,6 +7,7 @@ import * as mixpanel from 'lib/mixpanel/index';
import useAddOrSwitchChain from 'lib/web3/useAddOrSwitchChain'; import useAddOrSwitchChain from 'lib/web3/useAddOrSwitchChain';
import useProvider from 'lib/web3/useProvider'; import useProvider from 'lib/web3/useProvider';
import { WALLETS_INFO } from 'lib/web3/wallets'; import { WALLETS_INFO } from 'lib/web3/wallets';
import IconSvg from 'ui/shared/IconSvg';
const feature = config.features.web3Wallet; const feature = config.features.web3Wallet;
...@@ -55,7 +56,7 @@ const NetworkAddToWallet = () => { ...@@ -55,7 +56,7 @@ const NetworkAddToWallet = () => {
return ( return (
<Button variant="outline" size="sm" onClick={ handleClick }> <Button variant="outline" size="sm" onClick={ handleClick }>
<Icon as={ WALLETS_INFO[wallet].icon } boxSize={ 5 } mr={ 2 }/> <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 5 } mr={ 2 }/>
Add { config.chain.name } Add { config.chain.name }
</Button> </Button>
); );
......
ui/shared/address/AddressAddToWallet.tsx
View file @ 1cfab7e7
import { Box, chakra, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react'; import { Box, chakra, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token'; import type { TokenInfo } from 'types/api/token';
...@@ -9,6 +9,7 @@ import * as mixpanel from 'lib/mixpanel/index'; ...@@ -9,6 +9,7 @@ import * as mixpanel from 'lib/mixpanel/index';
import useAddOrSwitchChain from 'lib/web3/useAddOrSwitchChain'; import useAddOrSwitchChain from 'lib/web3/useAddOrSwitchChain';
import useProvider from 'lib/web3/useProvider'; import useProvider from 'lib/web3/useProvider';
import { WALLETS_INFO } from 'lib/web3/wallets'; import { WALLETS_INFO } from 'lib/web3/wallets';
import IconSvg from 'ui/shared/IconSvg';
const feature = config.features.web3Wallet; const feature = config.features.web3Wallet;
...@@ -97,7 +98,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico ...@@ -97,7 +98,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico
size="sm" size="sm"
px="6px" px="6px"
onClick={ handleClick } onClick={ handleClick }
icon={ <Icon as={ WALLETS_INFO[wallet].icon } boxSize={ 6 }/> } icon={ <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ 6 }/> }
flexShrink={ 0 } flexShrink={ 0 }
/> />
</Tooltip> </Tooltip>
...@@ -107,7 +108,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico ...@@ -107,7 +108,7 @@ const AddressAddToWallet = ({ className, token, isLoading, variant = 'icon', ico
return ( return (
<Tooltip label={ `Add token to ${ WALLETS_INFO[wallet].name }` }> <Tooltip label={ `Add token to ${ WALLETS_INFO[wallet].name }` }>
<Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick } flexShrink={ 0 }> <Box className={ className } display="inline-flex" cursor="pointer" onClick={ handleClick } flexShrink={ 0 }>
<Icon as={ WALLETS_INFO[wallet].icon } boxSize={ iconSize }/> <IconSvg name={ WALLETS_INFO[wallet].icon } boxSize={ iconSize }/>
</Box> </Box>
</Tooltip> </Tooltip>
); );
......
ui/shared/verificationSteps/VerificationStep.tsx
View file @ 1cfab7e7
import { Text, Icon, HStack } from '@chakra-ui/react'; import { Text, HStack } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { Step } from './types'; import type { Step } from './types';
import arrowIcon from 'icons/arrows/east.svg'; import IconSvg from 'ui/shared/IconSvg';
import finalizedIcon from 'icons/finalized.svg';
import unfinalizedIcon from 'icons/unfinalized.svg';
type Props = { type Props = {
step: Step; step: Step;
...@@ -18,9 +16,9 @@ const VerificationStep = ({ step, isLast, isPassed }: Props) => { ...@@ -18,9 +16,9 @@ const VerificationStep = ({ step, isLast, isPassed }: Props) => {
return ( return (
<HStack gap={ 2 } color={ stepColor }> <HStack gap={ 2 } color={ stepColor }>
<Icon as={ isPassed ? finalizedIcon : unfinalizedIcon } boxSize={ 5 }/> <IconSvg name={ isPassed ? 'finalized' : 'unfinalized' } boxSize={ 5 }/>
<Text color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Text> <Text color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Text>
{ !isLast && <Icon as={ arrowIcon } boxSize={ 5 }/> } { !isLast && <IconSvg name="arrows/east" boxSize={ 5 }/> }
</HStack> </HStack>
); );
}; };
......
ui/stats/StatsDropdownMenu.tsx
View file @ 1cfab7e7
import { Box, Button, Icon, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, Text } from '@chakra-ui/react'; import { Box, Button, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, Text } from '@chakra-ui/react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import eastMiniArrowIcon from 'icons/arrows/east-mini.svg'; import IconSvg from 'ui/shared/IconSvg';
type Props<T extends string> = { type Props<T extends string> = {
items: Array<{id: T; title: string}>; items: Array<{id: T; title: string}>;
...@@ -39,7 +39,7 @@ export function StatsDropdownMenu<T extends string>({ items, selectedId, onSelec ...@@ -39,7 +39,7 @@ export function StatsDropdownMenu<T extends string>({ items, selectedId, onSelec
> >
{ selectedCategory?.title } { selectedCategory?.title }
</Text> </Text>
<Icon transform="rotate(-90deg)" ml="auto" as={ eastMiniArrowIcon } w={ 5 } h={ 5 }/> <IconSvg transform="rotate(-90deg)" ml="auto" name="arrows/east-mini" w={ 5 } h={ 5 }/>
</Box> </Box>
</MenuButton> </MenuButton>
......
ui/token/TokenProjectInfo/Content.tsx
View file @ 1cfab7e7
...@@ -3,20 +3,6 @@ import React from 'react'; ...@@ -3,20 +3,6 @@ import React from 'react';
import type { TokenVerifiedInfo } from 'types/api/token'; import type { TokenVerifiedInfo } from 'types/api/token';
import iconCoinGecko from 'icons/social/coingecko.svg';
import iconCoinMarketCap from 'icons/social/coinmarketcap.svg';
import iconDefiLlama from 'icons/social/defi_llama.svg';
import iconDiscord from 'icons/social/discord_filled.svg';
import iconFacebook from 'icons/social/facebook_filled.svg';
import iconGithub from 'icons/social/github_filled.svg';
import iconLinkedIn from 'icons/social/linkedin_filled.svg';
import iconMedium from 'icons/social/medium_filled.svg';
import iconOpenSea from 'icons/social/opensea_filled.svg';
import iconReddit from 'icons/social/reddit_filled.svg';
import iconSlack from 'icons/social/slack_filled.svg';
import iconTelegram from 'icons/social/telegram_filled.svg';
import iconTwitter from 'icons/social/twitter_filled.svg';
import DocsLink from './DocsLink'; import DocsLink from './DocsLink';
import type { Props as ServiceLinkProps } from './ServiceLink'; import type { Props as ServiceLinkProps } from './ServiceLink';
import ServiceLink from './ServiceLink'; import ServiceLink from './ServiceLink';
...@@ -27,22 +13,22 @@ interface Props { ...@@ -27,22 +13,22 @@ interface Props {
} }
const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [ const SOCIAL_LINKS: Array<Omit<ServiceLinkProps, 'href'>> = [
{ field: 'github', icon: iconGithub, title: 'Github' }, { field: 'github', icon: 'social/github_filled', title: 'Github' },
{ field: 'twitter', icon: iconTwitter, title: 'Twitter' }, { field: 'twitter', icon: 'social/twitter_filled', title: 'Twitter' },
{ field: 'telegram', icon: iconTelegram, title: 'Telegram' }, { field: 'telegram', icon: 'social/telegram_filled', title: 'Telegram' },
{ field: 'openSea', icon: iconOpenSea, title: 'OpenSea' }, { field: 'openSea', icon: 'social/opensea_filled', title: 'OpenSea' },
{ field: 'linkedin', icon: iconLinkedIn, title: 'LinkedIn' }, { field: 'linkedin', icon: 'social/linkedin_filled', title: 'LinkedIn' },
{ field: 'facebook', icon: iconFacebook, title: 'Facebook' }, { field: 'facebook', icon: 'social/facebook_filled', title: 'Facebook' },
{ field: 'discord', icon: iconDiscord, title: 'Discord' }, { field: 'discord', icon: 'social/discord_filled', title: 'Discord' },
{ field: 'medium', icon: iconMedium, title: 'Medium' }, { field: 'medium', icon: 'social/medium_filled', title: 'Medium' },
{ field: 'slack', icon: iconSlack, title: 'Slack' }, { field: 'slack', icon: 'social/slack_filled', title: 'Slack' },
{ field: 'reddit', icon: iconReddit, title: 'Reddit' }, { field: 'reddit', icon: 'social/reddit_filled', title: 'Reddit' },
]; ];
const PRICE_TICKERS: Array<Omit<ServiceLinkProps, 'href'>> = [ const PRICE_TICKERS: Array<Omit<ServiceLinkProps, 'href'>> = [
{ field: 'coinGeckoTicker', icon: iconCoinGecko, title: 'CoinGecko' }, { field: 'coinGeckoTicker', icon: 'social/coingecko', title: 'CoinGecko' },
{ field: 'coinMarketCapTicker', icon: iconCoinMarketCap, title: 'CoinMarketCap' }, { field: 'coinMarketCapTicker', icon: 'social/coinmarketcap', title: 'CoinMarketCap' },
{ field: 'defiLlamaTicker', icon: iconDefiLlama, title: 'DefiLlama' }, { field: 'defiLlamaTicker', icon: 'social/defi_llama', title: 'DefiLlama' },
]; ];
export function hasContent(data: TokenVerifiedInfo): boolean { export function hasContent(data: TokenVerifiedInfo): boolean {
......
ui/token/TokenProjectInfo/DocsLink.tsx
View file @ 1cfab7e7
import { Icon, Link } from '@chakra-ui/react'; import { Link } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import iconDocs from 'icons/docs.svg'; import IconSvg from 'ui/shared/IconSvg';
interface Props { interface Props {
href: string; href: string;
...@@ -16,7 +16,7 @@ const DocsLink = ({ href }: Props) => { ...@@ -16,7 +16,7 @@ const DocsLink = ({ href }: Props) => {
alignItems="center" alignItems="center"
columnGap={ 1 } columnGap={ 1 }
> >
<Icon as={ iconDocs } boxSize={ 6 } color="text_secondary"/> <IconSvg name="docs" boxSize={ 6 } color="text_secondary"/>
<span>Documentation</span> <span>Documentation</span>
</Link> </Link>
); );
......
ui/token/TokenProjectInfo/ServiceLink.tsx
View file @ 1cfab7e7
import { Link, Icon } from '@chakra-ui/react'; import { Link } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenVerifiedInfo } from 'types/api/token'; import type { TokenVerifiedInfo } from 'types/api/token';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
export interface Props { export interface Props {
field: keyof TokenVerifiedInfo; field: keyof TokenVerifiedInfo;
icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; icon: IconName;
title: string; title: string;
href?: string; href?: string;
} }
...@@ -20,7 +23,7 @@ const ServiceLink = ({ href, title, icon }: Props) => { ...@@ -20,7 +23,7 @@ const ServiceLink = ({ href, title, icon }: Props) => {
display="inline-flex" display="inline-flex"
alignItems="center" alignItems="center"
> >
<Icon as={ icon } boxSize={ 5 } mr={ 2 } color="text_secondary"/> <IconSvg name={ icon } boxSize={ 5 } mr={ 2 } color="text_secondary"/>
<span>{ title }</span> <span>{ title }</span>
</Link> </Link>
); );
......
ui/token/TokenProjectInfo/SupportLink.tsx
View file @ 1cfab7e7
import { Icon, Link } from '@chakra-ui/react'; import { Link } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import iconEmail from 'icons/email.svg'; import IconSvg from 'ui/shared/IconSvg';
import iconLink from 'icons/link.svg';
interface Props { interface Props {
url: string; url: string;
...@@ -11,7 +10,6 @@ interface Props { ...@@ -11,7 +10,6 @@ interface Props {
const SupportLink = ({ url }: Props) => { const SupportLink = ({ url }: Props) => {
const isEmail = url.includes('@'); const isEmail = url.includes('@');
const href = isEmail ? `mailto:${ url }` : url; const href = isEmail ? `mailto:${ url }` : url;
const icon = isEmail ? iconEmail : iconLink;
return ( return (
<Link <Link
...@@ -21,7 +19,7 @@ const SupportLink = ({ url }: Props) => { ...@@ -21,7 +19,7 @@ const SupportLink = ({ url }: Props) => {
alignItems="center" alignItems="center"
columnGap={ 1 } columnGap={ 1 }
> >
<Icon as={ icon } boxSize={ 6 } color="text_secondary"/> <IconSvg name={ isEmail ? 'email' : 'link' } boxSize={ 6 } color="text_secondary"/>
<span>{ url }</span> <span>{ url }</span>
</Link> </Link>
); );
......
ui/token/TokenProjectInfo/TriggerButton.tsx
View file @ 1cfab7e7
import { Button, Icon } from '@chakra-ui/react'; import { Button } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import arrowIcon from 'icons/arrows/east-mini.svg'; import IconSvg from 'ui/shared/IconSvg';
import rocketIcon from 'icons/rocket.svg';
interface Props { interface Props {
onClick: () => void; onClick: () => void;
...@@ -22,9 +21,9 @@ const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLB ...@@ -22,9 +21,9 @@ const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLB
px={ 2 } px={ 2 }
h="32px" h="32px"
> >
<Icon as={ rocketIcon } boxSize={ 5 } mr={ 1 }/> <IconSvg name="rocket" boxSize={ 5 } mr={ 1 }/>
<span>Info</span> <span>Info</span>
<Icon as={ arrowIcon } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 1 }/> <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 } ml={ 1 }/>
</Button> </Button>
); );
}; };
......
ui/token/TokenTransfer/TokenTransferListItem.tsx
View file @ 1cfab7e7
...@@ -3,14 +3,13 @@ import React from 'react'; ...@@ -3,14 +3,13 @@ import React from 'react';
import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { TokenTransfer } from 'types/api/tokenTransfer';
import eastArrowIcon from 'icons/arrows/east.svg';
import getCurrencyValue from 'lib/getCurrencyValue'; import getCurrencyValue from 'lib/getCurrencyValue';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Icon from 'ui/shared/chakra/Icon';
import Tag from 'ui/shared/chakra/Tag'; import Tag from 'ui/shared/chakra/Tag';
import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter'; import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
import NftEntity from 'ui/shared/entities/nft/NftEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TruncatedValue from 'ui/shared/TruncatedValue'; import TruncatedValue from 'ui/shared/TruncatedValue';
...@@ -62,7 +61,7 @@ const TokenTransferListItem = ({ ...@@ -62,7 +61,7 @@ const TokenTransferListItem = ({
width="50%" width="50%"
fontWeight="500" fontWeight="500"
/> />
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/> <IconSvg name="arrows/east-mini" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
<AddressEntityWithTokenFilter <AddressEntityWithTokenFilter
address={ to } address={ to }
isLoading={ isLoading } isLoading={ isLoading }
......
ui/token/TokenTransfer/TokenTransferTableItem.tsx
View file @ 1cfab7e7
...@@ -3,14 +3,13 @@ import React from 'react'; ...@@ -3,14 +3,13 @@ import React from 'react';
import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { TokenTransfer } from 'types/api/tokenTransfer';
import eastArrowIcon from 'icons/arrows/east.svg';
import getCurrencyValue from 'lib/getCurrencyValue'; import getCurrencyValue from 'lib/getCurrencyValue';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import Icon from 'ui/shared/chakra/Icon';
import Tag from 'ui/shared/chakra/Tag'; import Tag from 'ui/shared/chakra/Tag';
import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter'; import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
import NftEntity from 'ui/shared/entities/nft/NftEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean } type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }
...@@ -71,7 +70,7 @@ const TokenTransferTableItem = ({ ...@@ -71,7 +70,7 @@ const TokenTransferTableItem = ({
</Td> </Td>
<Td px={ 0 }> <Td px={ 0 }>
<Box my="3px"> <Box my="3px">
<Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading }/> <IconSvg name="arrows/east-mini" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
</Box> </Box>
</Td> </Td>
<Td> <Td>
......
ui/tokenInfo/fields/TokenInfoFieldSocialLink.tsx
View file @ 1cfab7e7
import { FormControl, Icon, Input, InputRightElement, InputGroup } from '@chakra-ui/react'; import { FormControl, Input, InputRightElement, InputGroup } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { Control, ControllerProps } from 'react-hook-form'; import type { Control, ControllerProps } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import type { Fields, SocialLinkFields } from '../types'; import type { Fields, SocialLinkFields } from '../types';
import iconDiscord from 'icons/social/discord_filled.svg';
import iconFacebook from 'icons/social/facebook_filled.svg';
import iconGithub from 'icons/social/github_filled.svg';
import iconLinkedIn from 'icons/social/linkedin_filled.svg';
import iconMedium from 'icons/social/medium_filled.svg';
import iconOpenSea from 'icons/social/opensea_filled.svg';
import iconReddit from 'icons/social/reddit_filled.svg';
import iconSlack from 'icons/social/slack_filled.svg';
import iconTelegram from 'icons/social/telegram_filled.svg';
import iconTwitter from 'icons/social/twitter_filled.svg';
import { validator } from 'lib/validations/url'; import { validator } from 'lib/validations/url';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
interface Item { interface Item {
icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; icon: IconName;
label: string; label: string;
color: string; color: string;
} }
const SETTINGS: Record<keyof SocialLinkFields, Item> = { const SETTINGS: Record<keyof SocialLinkFields, Item> = {
github: { label: 'GitHub', icon: iconGithub, color: 'inherit' }, github: { label: 'GitHub', icon: 'social/github_filled', color: 'inherit' },
telegram: { label: 'Telegram', icon: iconTelegram, color: 'telegram' }, telegram: { label: 'Telegram', icon: 'social/telegram_filled', color: 'telegram' },
linkedin: { label: 'LinkedIn', icon: iconLinkedIn, color: 'linkedin' }, linkedin: { label: 'LinkedIn', icon: 'social/linkedin_filled', color: 'linkedin' },
discord: { label: 'Discord', icon: iconDiscord, color: 'discord' }, discord: { label: 'Discord', icon: 'social/discord_filled', color: 'discord' },
slack: { label: 'Slack', icon: iconSlack, color: 'slack' }, slack: { label: 'Slack', icon: 'social/slack_filled', color: 'slack' },
twitter: { label: 'Twitter', icon: iconTwitter, color: 'twitter' }, twitter: { label: 'Twitter', icon: 'social/twitter_filled', color: 'twitter' },
opensea: { label: 'OpenSea', icon: iconOpenSea, color: 'opensea' }, opensea: { label: 'OpenSea', icon: 'social/opensea_filled', color: 'opensea' },
facebook: { label: 'Facebook', icon: iconFacebook, color: 'facebook' }, facebook: { label: 'Facebook', icon: 'social/facebook_filled', color: 'facebook' },
medium: { label: 'Medium', icon: iconMedium, color: 'inherit' }, medium: { label: 'Medium', icon: 'social/medium_filled', color: 'inherit' },
reddit: { label: 'Reddit', icon: iconReddit, color: 'reddit' }, reddit: { label: 'Reddit', icon: 'social/reddit_filled', color: 'reddit' },
}; };
interface Props { interface Props {
...@@ -55,7 +47,7 @@ const TokenInfoFieldSocialLink = ({ control, isReadOnly, name }: Props) => { ...@@ -55,7 +47,7 @@ const TokenInfoFieldSocialLink = ({ control, isReadOnly, name }: Props) => {
/> />
<InputPlaceholder text={ SETTINGS[name].label } error={ fieldState.error }/> <InputPlaceholder text={ SETTINGS[name].label } error={ fieldState.error }/>
<InputRightElement h="100%"> <InputRightElement h="100%">
<Icon as={ SETTINGS[name].icon } boxSize={ 6 } color={ field.value ? SETTINGS[name].color : '#718096' }/> <IconSvg name={ SETTINGS[name].icon } boxSize={ 6 } color={ field.value ? SETTINGS[name].color : '#718096' }/>
</InputRightElement> </InputRightElement>
</InputGroup> </InputGroup>
</FormControl> </FormControl>
......
ui/tokens/TokensTable.tsx
View file @ 1cfab7e7
import { Icon, Link, Table, Tbody, Th, Tr } from '@chakra-ui/react'; import { Link, Table, Tbody, Th, Tr } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { TokenInfo } from 'types/api/token'; import type { TokenInfo } from 'types/api/token';
import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens'; import type { TokensSortingField, TokensSortingValue } from 'types/api/tokens';
import rightArrowIcon from 'icons/arrows/east.svg'; import IconSvg from 'ui/shared/IconSvg';
import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue'; import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue';
import { default as Thead } from 'ui/shared/TheadSticky'; import { default as Thead } from 'ui/shared/TheadSticky';
...@@ -41,19 +41,19 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) => ...@@ -41,19 +41,19 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) =>
<Th w="50%">Token</Th> <Th w="50%">Token</Th>
<Th isNumeric w="15%"> <Th isNumeric w="15%">
<Link onClick={ sort('fiat_value') } display="flex" justifyContent="end"> <Link onClick={ sort('fiat_value') } display="flex" justifyContent="end">
{ sorting?.includes('fiat_value') && <Icon as={ rightArrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> } { sorting?.includes('fiat_value') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> }
Price Price
</Link> </Link>
</Th> </Th>
<Th isNumeric w="20%"> <Th isNumeric w="20%">
<Link onClick={ sort('circulating_market_cap') } display="flex" justifyContent="end"> <Link onClick={ sort('circulating_market_cap') } display="flex" justifyContent="end">
{ sorting?.includes('circulating_market_cap') && <Icon as={ rightArrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> } { sorting?.includes('circulating_market_cap') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> }
On-chain market cap On-chain market cap
</Link> </Link>
</Th> </Th>
<Th isNumeric w="15%"> <Th isNumeric w="15%">
<Link onClick={ sort('holder_count') } display="flex" justifyContent="end"> <Link onClick={ sort('holder_count') } display="flex" justifyContent="end">
{ sorting?.includes('holder_count') && <Icon as={ rightArrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> } { sorting?.includes('holder_count') && <IconSvg name="arrows/east-mini" boxSize={ 4 } transform={ sortIconTransform }/> }
Holders Holders
</Link> </Link>
</Th> </Th>
......
ui/verifiedAddresses/VerifiedAddressesListItem.tsx
View file @ 1cfab7e7
...@@ -3,11 +3,10 @@ import React from 'react'; ...@@ -3,11 +3,10 @@ import React from 'react';
import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account'; import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
import editIcon from 'icons/edit.svg';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import IconSvg from 'ui/shared/IconSvg';
import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
import VerifiedAddressesStatus from './VerifiedAddressesStatus'; import VerifiedAddressesStatus from './VerifiedAddressesStatus';
...@@ -71,7 +70,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading ...@@ -71,7 +70,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading
borderRadius="none" borderRadius="none"
flexShrink={ 0 } flexShrink={ 0 }
onClick={ handleEditClick } onClick={ handleEditClick }
icon={ <Icon as={ editIcon }/> } icon={ <IconSvg name="edit"/> }
/> />
</Tooltip> </Tooltip>
</> </>
......
ui/verifiedAddresses/VerifiedAddressesTableItem.tsx
View file @ 1cfab7e7
...@@ -3,11 +3,10 @@ import React from 'react'; ...@@ -3,11 +3,10 @@ import React from 'react';
import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account'; import type { TokenInfoApplication, VerifiedAddress } from 'types/api/account';
import editIcon from 'icons/edit.svg';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import Icon from 'ui/shared/chakra/Icon';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import IconSvg from 'ui/shared/IconSvg';
import VerifiedAddressesStatus from './VerifiedAddressesStatus'; import VerifiedAddressesStatus from './VerifiedAddressesStatus';
...@@ -87,7 +86,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin ...@@ -87,7 +86,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
borderRadius="none" borderRadius="none"
flexShrink={ 0 } flexShrink={ 0 }
onClick={ handleEditClick } onClick={ handleEditClick }
icon={ <Icon as={ editIcon }/> } icon={ <IconSvg name="edit"/> }
/> />
</Tooltip> </Tooltip>
) : null } ) : null }
......
ui/verifiedContracts/VerifiedContractsListItem.tsx
View file @ 1cfab7e7
...@@ -5,14 +5,11 @@ import React from 'react'; ...@@ -5,14 +5,11 @@ import React from 'react';
import type { VerifiedContract } from 'types/api/contracts'; import type { VerifiedContract } from 'types/api/contracts';
import config from 'configs/app'; import config from 'configs/app';
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 dayjs from 'lib/date/dayjs';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShorten from 'ui/shared/HashStringShorten';
import IconSvg from 'ui/shared/IconSvg';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
interface Props { interface Props {
...@@ -61,19 +58,19 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => { ...@@ -61,19 +58,19 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
<Flex columnGap={ 3 }> <Flex columnGap={ 3 }>
<Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Optimization</Skeleton> <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Optimization</Skeleton>
{ data.optimization_enabled ? { data.optimization_enabled ?
<Icon as={ iconCheck } boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> : <IconSvg name="check" boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> :
<Icon as={ iconCross } boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> } <IconSvg name="cross" boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> }
</Flex> </Flex>
<Flex columnGap={ 3 }> <Flex columnGap={ 3 }>
<Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Constructor args</Skeleton> <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Constructor args</Skeleton>
{ data.has_constructor_args ? { data.has_constructor_args ?
<Icon as={ iconCheck } boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> : <IconSvg name="check" boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> :
<Icon as={ iconCross } boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> } <IconSvg name="cross" boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> }
</Flex> </Flex>
<Flex columnGap={ 3 }> <Flex columnGap={ 3 }>
<Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Verified</Skeleton> <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Verified</Skeleton>
<Flex alignItems="center" columnGap={ 2 }> <Flex alignItems="center" columnGap={ 2 }>
<Icon as={ iconSuccess } boxSize={ 4 } color="green.500" isLoading={ isLoading }/> <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } color="text_secondary"> <Skeleton isLoaded={ !isLoading } color="text_secondary">
<span>{ dayjs(data.verified_at).fromNow() }</span> <span>{ dayjs(data.verified_at).fromNow() }</span>
</Skeleton> </Skeleton>
......
ui/verifiedContracts/VerifiedContractsTable.tsx
View file @ 1cfab7e7
import { Table, Tbody, Tr, Th, Link, Icon } from '@chakra-ui/react'; import { Table, Tbody, Tr, Th, Link } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { VerifiedContract } from 'types/api/contracts'; import type { VerifiedContract } from 'types/api/contracts';
import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts'; import type { VerifiedContractsSorting, VerifiedContractsSortingField, VerifiedContractsSortingValue } from 'types/api/verifiedContracts';
import config from 'configs/app'; import config from 'configs/app';
import arrowIcon from 'icons/arrows/east.svg'; import IconSvg from 'ui/shared/IconSvg';
import getNextSortValue from 'ui/shared/sort/getNextSortValue'; import getNextSortValue from 'ui/shared/sort/getNextSortValue';
import { default as Thead } from 'ui/shared/TheadSticky'; import { default as Thead } from 'ui/shared/TheadSticky';
import { SORT_SEQUENCE } from 'ui/verifiedContracts/utils'; import { SORT_SEQUENCE } from 'ui/verifiedContracts/utils';
...@@ -34,13 +34,13 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) => ...@@ -34,13 +34,13 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
<Th width="50%">Contract</Th> <Th width="50%">Contract</Th>
<Th width="130px" isNumeric> <Th width="130px" isNumeric>
<Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('balance') } columnGap={ 1 }> <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('balance') } columnGap={ 1 }>
{ sort?.includes('balance') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> } { sort?.includes('balance') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
Balance { config.chain.currency.symbol } Balance { config.chain.currency.symbol }
</Link> </Link>
</Th> </Th>
<Th width="130px" isNumeric> <Th width="130px" isNumeric>
<Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('txs_count') } columnGap={ 1 }> <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ isLoading ? undefined : onSortToggle('txs_count') } columnGap={ 1 }>
{ sort?.includes('txs_count') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> } { sort?.includes('txs_count') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
Txs Txs
</Link> </Link>
</Th> </Th>
......
ui/verifiedContracts/VerifiedContractsTableItem.tsx
View file @ 1cfab7e7
...@@ -5,14 +5,11 @@ import React from 'react'; ...@@ -5,14 +5,11 @@ import React from 'react';
import type { VerifiedContract } from 'types/api/contracts'; import type { VerifiedContract } from 'types/api/contracts';
import config from 'configs/app'; import config from 'configs/app';
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 dayjs from 'lib/date/dayjs';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import HashStringShorten from 'ui/shared/HashStringShorten'; import HashStringShorten from 'ui/shared/HashStringShorten';
import IconSvg from 'ui/shared/IconSvg';
interface Props { interface Props {
data: VerifiedContract; data: VerifiedContract;
...@@ -63,21 +60,21 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => { ...@@ -63,21 +60,21 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
<Tooltip label={ isLoading ? undefined : 'Optimization' }> <Tooltip label={ isLoading ? undefined : 'Optimization' }>
<chakra.span display="inline-block"> <chakra.span display="inline-block">
{ data.optimization_enabled ? { data.optimization_enabled ?
<Icon as={ iconCheck } boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> : <IconSvg name="check" boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> :
<Icon as={ iconCross } boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> } <IconSvg name="cross" boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> }
</chakra.span> </chakra.span>
</Tooltip> </Tooltip>
<Tooltip label={ isLoading ? undefined : 'Constructor args' }> <Tooltip label={ isLoading ? undefined : 'Constructor args' }>
<chakra.span display="inline-block" ml={ 2 }> <chakra.span display="inline-block" ml={ 2 }>
{ data.has_constructor_args ? { data.has_constructor_args ?
<Icon as={ iconCheck } boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> : <IconSvg name="check" boxSize={ 6 } color="green.500" cursor="pointer" isLoading={ isLoading }/> :
<Icon as={ iconCross } boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> } <IconSvg name="cross" boxSize={ 6 } color="red.600" cursor="pointer" isLoading={ isLoading }/> }
</chakra.span> </chakra.span>
</Tooltip> </Tooltip>
</Td> </Td>
<Td> <Td>
<Flex alignItems="center" columnGap={ 2 } my={ 1 }> <Flex alignItems="center" columnGap={ 2 } my={ 1 }>
<Icon as={ iconSuccess } boxSize={ 4 } color="green.500" isLoading={ isLoading }/> <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } color="text_secondary"> <Skeleton isLoaded={ !isLoading } color="text_secondary">
<span>{ dayjs(data.verified_at).fromNow() }</span> <span>{ dayjs(data.verified_at).fromNow() }</span>
</Skeleton> </Skeleton>
......
ui/watchlist/WatchlistTable/WatchListAddressItem.tsx
View file @ 1cfab7e7
...@@ -5,14 +5,12 @@ import React from 'react'; ...@@ -5,14 +5,12 @@ import React from 'react';
import type { WatchlistAddress } from 'types/api/account'; import type { WatchlistAddress } from 'types/api/account';
import config from 'configs/app'; import config from 'configs/app';
import TokensIcon from 'icons/tokens.svg';
import WalletIcon from 'icons/wallet.svg';
import getCurrencyValue from 'lib/getCurrencyValue'; import getCurrencyValue from 'lib/getCurrencyValue';
import { nbsp } from 'lib/html-entities'; import { nbsp } from 'lib/html-entities';
import Icon from 'ui/shared/chakra/Icon';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity'; import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import IconSvg from 'ui/shared/IconSvg';
const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isLoading?: boolean }) => { const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isLoading?: boolean }) => {
const nativeTokenData = React.useMemo(() => ({ const nativeTokenData = React.useMemo(() => ({
...@@ -51,7 +49,7 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL ...@@ -51,7 +49,7 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
</Flex> </Flex>
{ item.tokens_count && ( { item.tokens_count && (
<HStack spacing={ 2 } fontSize="sm" pl={ 7 }> <HStack spacing={ 2 } fontSize="sm" pl={ 7 }>
<Icon as={ TokensIcon } boxSize={ 5 } isLoading={ isLoading } borderRadius="sm"/> <IconSvg name="tokens" boxSize={ 5 } isLoading={ isLoading } borderRadius="sm"/>
<Skeleton isLoaded={ !isLoading } display="inline-flex"> <Skeleton isLoaded={ !isLoading } display="inline-flex">
<span>{ `Tokens:${ nbsp }` + item.tokens_count + (item.tokens_overflow ? '+' : '') }</span> <span>{ `Tokens:${ nbsp }` + item.tokens_count + (item.tokens_overflow ? '+' : '') }</span>
<Text variant="secondary" fontWeight={ 400 }>{ `${ nbsp }($${ BigNumber(item.tokens_fiat_value).toFormat(2) })` }</Text> <Text variant="secondary" fontWeight={ 400 }>{ `${ nbsp }($${ BigNumber(item.tokens_fiat_value).toFormat(2) })` }</Text>
...@@ -60,7 +58,7 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL ...@@ -60,7 +58,7 @@ const WatchListAddressItem = ({ item, isLoading }: { item: WatchlistAddress; isL
) } ) }
{ item.tokens_fiat_value && ( { item.tokens_fiat_value && (
<HStack spacing={ 2 } fontSize="sm" pl={ 7 }> <HStack spacing={ 2 } fontSize="sm" pl={ 7 }>
<Icon boxSize={ 5 } as={ WalletIcon } isLoading={ isLoading }/> <IconSvg boxSize={ 5 } name="wallet" isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } display="inline-flex"> <Skeleton isLoaded={ !isLoading } display="inline-flex">
<Text>{ `Net worth:${ nbsp }` } <Text>{ `Net worth:${ nbsp }` }
{ {
......
ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx
View file @ 1cfab7e7
...@@ -8,16 +8,15 @@ import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches'; ...@@ -8,16 +8,15 @@ import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
import clockIcon from 'icons/clock.svg';
import type { ResourceError } from 'lib/api/resources'; import type { ResourceError } from 'lib/api/resources';
import dayjs from 'lib/date/dayjs'; import dayjs from 'lib/date/dayjs';
import Icon from 'ui/shared/chakra/Icon';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
import DetailsInfoItem from 'ui/shared/DetailsInfoItem'; import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/LinkInternal'; import LinkInternal from 'ui/shared/LinkInternal';
import PrevNext from 'ui/shared/PrevNext'; import PrevNext from 'ui/shared/PrevNext';
import TextSeparator from 'ui/shared/TextSeparator'; import TextSeparator from 'ui/shared/TextSeparator';
...@@ -92,7 +91,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => { ...@@ -92,7 +91,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
title="Timestamp" title="Timestamp"
isLoading={ isPlaceholderData } isLoading={ isPlaceholderData }
> >
<Icon as={ clockIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/> <IconSvg name="clock" boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
<Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }> <Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>
{ dayjs(data.timestamp).fromNow() } { dayjs(data.timestamp).fromNow() }
</Skeleton> </Skeleton>
......
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