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