lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrate snippets

Browse Source
This commit is contained in:
tom
2023-12-20 12:37:30 +04:00
parent d93fdba02d
commit 01588f5670
24 changed files with 133 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/hooks/useNavItems.tsx
+43 -55
View File
@@ -4,28 +4,6 @@ import React from 'react';
import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation-items';
import config from 'configs/app';
import abiIcon from 'icons/ABI.svg';
import apiKeysIcon from 'icons/API.svg';
import appsIcon from 'icons/apps.svg';
import withdrawalsIcon from 'icons/arrows/north-east.svg';
import depositsIcon from 'icons/arrows/south-east.svg';
import blocksIcon from 'icons/block.svg';
import gearIcon from 'icons/gear.svg';
import globeIcon from 'icons/globe-b.svg';
import graphQLIcon from 'icons/graphQL.svg';
import outputRootsIcon from 'icons/output_roots.svg';
import privateTagIcon from 'icons/privattags.svg';
import publicTagIcon from 'icons/publictags.svg';
import apiDocsIcon from 'icons/restAPI.svg';
import rpcIcon from 'icons/RPC.svg';
import statsIcon from 'icons/stats.svg';
import tokensIcon from 'icons/token.svg';
import topAccountsIcon from 'icons/top-accounts.svg';
import transactionsIcon from 'icons/transactions.svg';
import txnBatchIcon from 'icons/txn_batches.svg';
import verifiedIcon from 'icons/verified.svg';
import verifyContractIcon from 'icons/verify-contract.svg';
import watchlistIcon from 'icons/watchlist.svg';
import { rightLineArrow } from 'lib/html-entities';
import UserAvatar from 'ui/shared/UserAvatar';
@@ -50,35 +28,43 @@ export default function useNavItems(): ReturnType {
return React.useMemo(() => {
let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
const topAccounts = !config.UI.views.address.hiddenViews?.top_accounts ? {
const topAccounts: NavItem | null = !config.UI.views.address.hiddenViews?.top_accounts ? {
text: 'Top accounts',
nextRoute: { pathname: '/accounts' as const },
icon: topAccountsIcon,
icon: 'top-accounts',
isActive: pathname === '/accounts',
} : null;
const blocks = {
const blocks: NavItem | null = {
text: 'Blocks',
nextRoute: { pathname: '/blocks' as const },
icon: blocksIcon,
icon: 'block',
isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]',
};
const txs = {
const txs: NavItem | null = {
text: 'Transactions',
nextRoute: { pathname: '/txs' as const },
icon: transactionsIcon,
icon: 'transactions',
isActive: pathname === '/txs' || pathname === '/tx/[hash]',
};
const verifiedContracts =
// eslint-disable-next-line max-len
{ text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified-contracts' };
const verifiedContracts: NavItem | null =
{
text: 'Verified contracts',
nextRoute: { pathname: '/verified-contracts' as const },
icon: 'verified',
isActive: pathname === '/verified-contracts',
};
if (config.features.zkEvmRollup.isEnabled) {
blockchainNavItems = [
[
txs,
blocks,
// eslint-disable-next-line max-len
{ text: 'Txn batches', nextRoute: { pathname: '/zkevm-l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/zkevm-l2-txn-batches' || pathname === '/zkevm-l2-txn-batch/[number]' },
{
text: 'Txn batches',
nextRoute: { pathname: '/zkevm-l2-txn-batches' as const },
icon: 'txn_batches',
isActive: pathname === '/zkevm-l2-txn-batches' || pathname === '/zkevm-l2-txn-batch/[number]',
},
],
[
topAccounts,
@@ -90,16 +76,16 @@ export default function useNavItems(): ReturnType {
[
txs,
// eslint-disable-next-line max-len
{ text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: depositsIcon, isActive: pathname === '/l2-deposits' },
{ text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/l2-deposits' },
// eslint-disable-next-line max-len
{ text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/l2-withdrawals' },
{ text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/l2-withdrawals' },
],
[
blocks,
// eslint-disable-next-line max-len
{ text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/l2-txn-batches' },
{ text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: 'txn_batches', isActive: pathname === '/l2-txn-batches' },
// eslint-disable-next-line max-len
{ text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/l2-output-roots' },
{ text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: 'output_roots', isActive: pathname === '/l2-output-roots' },
],
[
topAccounts,
@@ -115,7 +101,7 @@ export default function useNavItems(): ReturnType {
config.features.beaconChain.isEnabled && {
text: 'Withdrawals',
nextRoute: { pathname: '/withdrawals' as const },
icon: withdrawalsIcon,
icon: 'arrow/north-east',
isActive: pathname === '/withdrawals',
},
].filter(Boolean);
@@ -125,23 +111,23 @@ export default function useNavItems(): ReturnType {
config.features.restApiDocs.isEnabled ? {
text: 'REST API',
nextRoute: { pathname: '/api-docs' as const },
icon: apiDocsIcon,
icon: 'restAPI',
isActive: pathname === '/api-docs',
} : null,
config.features.graphqlApiDocs.isEnabled ? {
text: 'GraphQL',
nextRoute: { pathname: '/graphiql' as const },
icon: graphQLIcon,
icon: 'graphQL',
isActive: pathname === '/graphiql',
} : null,
!config.UI.sidebar.hiddenLinks?.rpc_api && {
text: 'RPC API',
icon: rpcIcon,
icon: 'RPC',
url: 'https://docs.blockscout.com/for-users/api/rpc-endpoints',
},
!config.UI.sidebar.hiddenLinks?.eth_rpc_api && {
text: 'Eth RPC API',
icon: rpcIcon,
icon: 'RPC',
url: ' https://docs.blockscout.com/for-users/api/eth-rpc',
},
].filter(Boolean);
@@ -149,42 +135,42 @@ export default function useNavItems(): ReturnType {
const mainNavItems: ReturnType['mainNavItems'] = [
{
text: 'Blockchain',
icon: globeIcon,
icon: 'globe-b',
isActive: blockchainNavItems.flat().some(item => isInternalItem(item) && item.isActive),
subItems: blockchainNavItems,
},
{
text: 'Tokens',
nextRoute: { pathname: '/tokens' as const },
icon: tokensIcon,
icon: 'token',
isActive: pathname.startsWith('/token'),
},
config.features.marketplace.isEnabled ? {
text: 'Apps',
nextRoute: { pathname: '/apps' as const },
icon: appsIcon,
icon: 'apps',
isActive: pathname.startsWith('/app'),
} : null,
config.features.stats.isEnabled ? {
text: 'Charts & stats',
nextRoute: { pathname: '/stats' as const },
icon: statsIcon,
icon: 'stats',
isActive: pathname === '/stats',
} : null,
apiNavItems.length > 0 && {
text: 'API',
icon: apiDocsIcon,
icon: 'restAPI',
isActive: apiNavItems.some(item => isInternalItem(item) && item.isActive),
subItems: apiNavItems,
},
{
text: 'Other',
icon: gearIcon,
icon: 'gear',
subItems: [
{
text: 'Verify contract',
nextRoute: { pathname: '/contract-verification' as const },
icon: verifyContractIcon,
icon: 'verify-contract',
isActive: pathname.startsWith('/contract-verification'),
},
...config.UI.sidebar.otherLinks,
@@ -196,35 +182,37 @@ export default function useNavItems(): ReturnType {
{
text: 'Watch list',
nextRoute: { pathname: '/account/watchlist' as const },
icon: watchlistIcon,
icon: 'watchlist',
isActive: pathname === '/account/watchlist',
},
{
text: 'Private tags',
nextRoute: { pathname: '/account/tag-address' as const },
icon: privateTagIcon,
icon: 'privattags',
isActive: pathname === '/account/tag-address',
},
{
text: 'Public tags',
nextRoute: { pathname: '/account/public-tags-request' as const },
icon: publicTagIcon, isActive: pathname === '/account/public-tags-request',
icon: 'publictags',
isActive: pathname === '/account/public-tags-request',
},
{
text: 'API keys',
nextRoute: { pathname: '/account/api-key' as const },
icon: apiKeysIcon, isActive: pathname === '/account/api-key',
icon: 'API',
isActive: pathname === '/account/api-key',
},
{
text: 'Custom ABI',
nextRoute: { pathname: '/account/custom-abi' as const },
icon: abiIcon,
icon: 'ABI',
isActive: pathname === '/account/custom-abi',
},
config.features.addressVerification.isEnabled && {
text: 'Verified addrs',
nextRoute: { pathname: '/account/verified-addresses' as const },
icon: verifiedIcon,
icon: 'verified',
isActive: pathname === '/account/verified-addresses',
},
].filter(Boolean);
types/client/navigation-items.ts
+3 -1
View File
@@ -2,8 +2,10 @@ import type React from 'react';
import type { Route } from 'nextjs-routes';
import type { IconName } from 'ui/shared/IconSvg';
type NavIconOrComponent = {
icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
icon?: IconName;
} | {
iconComponent?: React.FC<{size?: number}>;
};
ui/shared/IconSvg.tsx
+5 -5
View File
@@ -1,3 +1,4 @@
import type { HTMLChakraProps } from '@chakra-ui/react';
import { Skeleton, chakra } from '@chakra-ui/react';
import { type IconName } from 'public/icons/name';
import React from 'react';
@@ -6,15 +7,14 @@ export const href = '/icons/sprite.svg';
export { IconName };
interface Props {
interface Props extends HTMLChakraProps<'div'> {
name: IconName;
isLoading?: boolean;
className?: string;
}
const IconSvg = ({ name, isLoading, className }: Props) => {
const IconSvg = ({ name, isLoading, ...props }: Props) => {
return (
<Skeleton isLoaded={ !isLoading } className={ className }>
<Skeleton isLoaded={ !isLoading } display="inline-block" { ...props }>
<chakra.svg w="100%" h="100%">
<use href={ `${ href }#${ name }` }/>
</chakra.svg>
@@ -22,4 +22,4 @@ const IconSvg = ({ name, isLoading, className }: Props) => {
);
};
export default chakra(IconSvg);
export default IconSvg;
ui/snippets/footer/Footer.tsx
+7 -14
View File
@@ -6,13 +6,6 @@ import React from 'react';
import type { CustomLinksGroup } from 'types/footerLinks';
import config from 'configs/app';
import discussionsIcon from 'icons/discussions.svg';
import donateIcon from 'icons/donate.svg';
import editIcon from 'icons/edit.svg';
import cannyIcon from 'icons/social/canny.svg';
import discordIcon from 'icons/social/discord.svg';
import gitIcon from 'icons/social/git.svg';
import twitterIcon from 'icons/social/tweet.svg';
import type { ResourceError } from 'lib/api/resources';
import useApiQuery from 'lib/api/useApiQuery';
import useFetch from 'lib/hooks/useFetch';
@@ -39,43 +32,43 @@ const Footer = () => {
const issueUrl = useIssueUrl(backendVersionData?.backend_version);
const BLOCKSCOUT_LINKS = [
{
icon: editIcon,
icon: 'edit' as const,
iconSize: '16px',
text: 'Submit an issue',
url: issueUrl,
},
{
icon: cannyIcon,
icon: 'social/canny' as const,
iconSize: '20px',
text: 'Feature request',
url: 'https://blockscout.canny.io/feature-requests',
},
{
icon: gitIcon,
icon: 'social/git' as const,
iconSize: '18px',
text: 'Contribute',
url: 'https://github.com/blockscout/blockscout',
},
{
icon: twitterIcon,
icon: 'social/tweet' as const,
iconSize: '18px',
text: 'Twitter',
url: 'https://www.twitter.com/blockscoutcom',
},
{
icon: discordIcon,
icon: 'social/discord' as const,
iconSize: '24px',
text: 'Discord',
url: 'https://discord.gg/blockscout',
},
{
icon: discussionsIcon,
icon: 'discussions' as const,
iconSize: '20px',
text: 'Discussions',
url: 'https://github.com/orgs/blockscout/discussions',
},
{
icon: donateIcon,
icon: 'donate' as const,
iconSize: '20px',
text: 'Donate',
url: 'https://github.com/sponsors/blockscout',
ui/snippets/footer/FooterLinkItem.tsx
+6 -3
View File
@@ -1,8 +1,11 @@
import { Center, Icon, Link, Skeleton } from '@chakra-ui/react';
import { Center, Link, Skeleton } from '@chakra-ui/react';
import React from 'react';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
type Props = {
icon?: React.FC<React.SVGAttributes<SVGElement>>;
icon?: IconName;
iconSize?: string;
text: string;
url: string;
@@ -18,7 +21,7 @@ const FooterLinkItem = ({ icon, iconSize, text, url, isLoading }: Props) => {
<Link href={ url } display="flex" alignItems="center" h="30px" variant="secondary" target="_blank" fontSize="xs">
{ icon && (
<Center minW={ 6 } mr={ 2 }>
<Icon boxSize={ iconSize || 5 } as={ icon }/>
<IconSvg boxSize={ iconSize || 5 } name={ icon }/>
</Center>
) }
{ text }
ui/snippets/footer/IntTxsIndexingStatus.tsx
+3 -3
View File
@@ -1,15 +1,15 @@
import { IconButton, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
import { IconButton, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
import { useQueryClient } from '@tanstack/react-query';
import React from 'react';
import type { SocketMessage } from 'lib/socket/types';
import type { IndexingStatus } from 'types/api/indexingStatus';
import infoIcon from 'icons/info.svg';
import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
import { apos, nbsp, ndash } from 'lib/html-entities';
import useSocketChannel from 'lib/socket/useSocketChannel';
import useSocketMessage from 'lib/socket/useSocketMessage';
import IconSvg from 'ui/shared/IconSvg';
const IntTxsIndexingStatus = () => {
@@ -72,7 +72,7 @@ const IntTxsIndexingStatus = () => {
<IconButton
colorScheme="none"
aria-label="hint"
icon={ <Icon as={ infoIcon } boxSize={ 5 }/> }
icon={ <IconSvg name="info" boxSize={ 5 }/> }
boxSize={ 6 }
variant="simple"
/>
ui/snippets/header/Burger.tsx
+5 -6
View File
@@ -1,9 +1,8 @@
import { Icon, Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
import { Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useColorModeValue, useDisclosure } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
import burgerIcon from 'icons/burger.svg';
import testnetIcon from 'icons/testnet.svg';
import IconSvg from 'ui/shared/IconSvg';
import NavigationMobile from 'ui/snippets/navigation/NavigationMobile';
import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
@@ -31,8 +30,8 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
return (
<>
<Box padding={ 2 } onClick={ onOpen } cursor="pointer">
<Icon
as={ burgerIcon }
<IconSvg
name="burger"
boxSize={ 6 }
display="block"
color={ iconColor }
@@ -48,7 +47,7 @@ const Burger = ({ isMarketplaceAppPage }: Props) => {
<DrawerOverlay/>
<DrawerContent maxWidth="260px">
<DrawerBody p={ 6 } display="flex" flexDirection="column">
{ config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" alignSelf="flex-start"/> }
{ config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="37px" color="red.400" alignSelf="flex-start"/> }
<Flex alignItems="center" justifyContent="space-between">
<NetworkLogo onClick={ handleNetworkLogoClick }/>
{ config.UI.sidebar.featuredNetworks ? (
ui/snippets/navigation/NavLink.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp, Icon } from '@chakra-ui/react';
import { Link, Text, HStack, Tooltip, Box, useBreakpointValue, chakra, shouldForwardProp } from '@chakra-ui/react';
import NextLink from 'next/link';
import React from 'react';
@@ -6,9 +6,9 @@ import type { NavItem } from 'types/client/navigation-items';
import { route } from 'nextjs-routes';
import arrowIcon from 'icons/arrows/north-east.svg';
import useIsMobile from 'lib/hooks/useIsMobile';
import { isInternalItem } from 'lib/hooks/useNavItems';
import IconSvg from 'ui/shared/IconSvg';
import NavLinkIcon from './NavLinkIcon';
import useColors from './useColors';
@@ -63,7 +63,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => {
<NavLinkIcon item={ item }/>
<Text { ...styleProps.textProps }>
<span>{ item.text }</span>
{ !isInternalLink && <Icon as={ arrowIcon } boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
{ !isInternalLink && <IconSvg name="arrows/north-east" boxSize={ 4 } color="text_secondary" verticalAlign="middle"/> }
</Text>
</HStack>
</Tooltip>
ui/snippets/navigation/NavLinkGroupDesktop.tsx
+3 -4
View File
@@ -1,5 +1,4 @@
import {
Icon,
Text,
HStack,
Box,
@@ -14,7 +13,7 @@ import React from 'react';
import type { NavGroupItem } from 'types/client/navigation-items';
import chevronIcon from 'icons/arrows/east-mini.svg';
import IconSvg from 'ui/shared/IconSvg';
import NavLink from './NavLink';
import NavLinkIcon from './NavLinkIcon';
@@ -53,8 +52,8 @@ const NavLinkGroupDesktop = ({ item, isCollapsed }: Props) => {
>
{ item.text }
</Text>
<Icon
as={ chevronIcon }
<IconSvg
name="arrows/east-mini"
position="absolute"
right="7px"
transform="rotate(180deg)"
ui/snippets/navigation/NavLinkGroupMobile.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import {
Icon,
Text,
HStack,
Flex,
@@ -9,7 +8,7 @@ import React from 'react';
import type { NavGroupItem } from 'types/client/navigation-items';
import chevronIcon from 'icons/arrows/east-mini.svg';
import IconSvg from 'ui/shared/IconSvg';
import NavLinkIcon from './NavLinkIcon';
import useNavLinkStyleProps from './useNavLinkStyleProps';
@@ -40,7 +39,7 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
{ item.text }
</Text>
</HStack>
<Icon as={ chevronIcon } transform="rotate(180deg)" boxSize={ 6 }/>
<IconSvg name="arrows/east-mini" transform="rotate(180deg)" boxSize={ 6 }/>
</Flex>
</Box>
</Box>
ui/snippets/navigation/NavLinkIcon.tsx
+4 -3
View File
@@ -1,11 +1,12 @@
import { Icon } from '@chakra-ui/react';
import React from 'react';
import type { NavItem, NavGroupItem } from 'types/client/navigation-items';
import IconSvg from 'ui/shared/IconSvg';
const NavLinkIcon = ({ item }: { item: NavItem | NavGroupItem}) => {
if ('icon' in item) {
return <Icon as={ item.icon } boxSize="30px"/>;
if ('icon' in item && item.icon) {
return <IconSvg name={ item.icon } boxSize="30px" flexShrink={ 0 }/>;
}
if ('iconComponent' in item && item.iconComponent) {
const IconComponent = item.iconComponent;
ui/snippets/navigation/NavigationDesktop.tsx
+5 -6
View File
@@ -1,14 +1,13 @@
import { Flex, Box, VStack, Icon, useColorModeValue } from '@chakra-ui/react';
import { Flex, Box, VStack, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import config from 'configs/app';
import chevronIcon from 'icons/arrows/east-mini.svg';
import testnetIcon from 'icons/testnet.svg';
import { useAppContext } from 'lib/contexts/app';
import * as cookies from 'lib/cookies';
import useHasAccount from 'lib/hooks/useHasAccount';
import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
import IconSvg from 'ui/shared/IconSvg';
import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
@@ -65,7 +64,7 @@ const NavigationDesktop = () => {
},
}}
>
{ config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
{ config.chain.isTestnet && <IconSvg name="testnet" h="14px" w="49px" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
<Box
as="header"
display="flex"
@@ -101,8 +100,8 @@ const NavigationDesktop = () => {
</VStack>
</Box>
) }
<Icon
as={ chevronIcon }
<IconSvg
name="arrows/east-mini"
width={ 6 }
height={ 6 }
border="1px"
ui/snippets/navigation/NavigationMobile.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
import { Box, Flex, Text, Icon, VStack, useColorModeValue } from '@chakra-ui/react';
import { Box, Flex, Text, VStack, useColorModeValue } from '@chakra-ui/react';
import { animate, motion, useMotionValue } from 'framer-motion';
import React, { useCallback } from 'react';
import chevronIcon from 'icons/arrows/east-mini.svg';
import useHasAccount from 'lib/hooks/useHasAccount';
import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
import IconSvg from 'ui/shared/IconSvg';
import NavLink from 'ui/snippets/navigation/NavLink';
import NavLinkGroupMobile from './NavLinkGroupMobile';
@@ -96,7 +96,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
key="sub"
>
<Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
<Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
<IconSvg name="arrows/east-mini" boxSize={ 6 } mr={ 2 } color={ iconColor }/>
<Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
</Flex>
<Box
ui/snippets/networkMenu/NetworkLogo.tsx
+4 -5
View File
@@ -1,11 +1,10 @@
import { Icon, Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
import React from 'react';
import { route } from 'nextjs-routes';
import config from 'configs/app';
import iconPlaceholder from 'icons/networks/icon-placeholder.svg';
import logoPlaceholder from 'icons/networks/logo-placeholder.svg';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
isCollapsed?: boolean;
@@ -31,8 +30,8 @@ const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall
}
return (
<Icon
as={ isSmall ? iconPlaceholder : logoPlaceholder }
<IconSvg
name={ isSmall ? 'networks/icon-placeholder' : 'networks/logo-placeholder' }
width="auto"
height="100%"
color={ logoColor }
ui/snippets/networkMenu/NetworkMenuButton.tsx
+4 -4
View File
@@ -1,8 +1,8 @@
import { Icon, useColorModeValue, Button, forwardRef, chakra } from '@chakra-ui/react';
import { useColorModeValue, Button, forwardRef, chakra } from '@chakra-ui/react';
import React from 'react';
import networksIcon from 'icons/networks.svg';
import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
isMobile?: boolean;
@@ -30,8 +30,8 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, re
aria-label="Network menu"
aria-roledescription="menu"
>
<Icon
as={ networksIcon }
<IconSvg
name="networks"
width="36px"
height="36px"
padding="10px"
ui/snippets/networkMenu/NetworkMenuLink.tsx
+6 -7
View File
@@ -1,10 +1,9 @@
import { Box, Flex, Icon, Text, Image, useColorModeValue } from '@chakra-ui/react';
import { Box, Flex, Text, Image, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import type { FeaturedNetwork } from 'types/networks';
import checkIcon from 'icons/check.svg';
import placeholderIcon from 'icons/networks/icon-placeholder.svg';
import IconSvg from 'ui/shared/IconSvg';
import useColors from './useColors';
@@ -21,8 +20,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
const iconEl = icon ? (
<Image w="30px" h="30px" src={ icon } alt={ `${ title } network icon` } style={ style }/>
) : (
<Icon
as={ placeholderIcon }
<IconSvg
name="networks/icon-placeholder"
boxSize="30px"
color={ colors.iconPlaceholder.default }
/>
@@ -54,8 +53,8 @@ const NetworkMenuLink = ({ title, icon, isActive, isMobile, url, invertIconInDar
{ title }
</Text>
{ isActive && (
<Icon
as={ checkIcon }
<IconSvg
name="check"
boxSize="24px"
marginLeft="auto"
/>
ui/snippets/searchBar/SearchBarInput.tsx
+3 -3
View File
@@ -1,12 +1,12 @@
import { InputGroup, Input, InputLeftElement, Icon, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react';
import { InputGroup, Input, InputLeftElement, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react';
import throttle from 'lodash/throttle';
import React from 'react';
import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
import searchIcon from 'icons/search.svg';
import { useScrollDirection } from 'lib/contexts/scrollDirection';
import useIsMobile from 'lib/hooks/useIsMobile';
import ClearButton from 'ui/shared/ClearButton';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
onChange: (value: string) => void;
@@ -86,7 +86,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
>
<InputGroup size={{ base: isHomepage ? 'md' : 'sm', lg: 'md' }}>
<InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
<Icon as={ searchIcon } boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
<IconSvg name="search" boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
</InputLeftElement>
<Input
pl={{ base: isHomepage ? '50px' : '38px', lg: '50px' }}
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx
+4 -4
View File
@@ -1,11 +1,11 @@
import { Icon, Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
import { Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
import NextLink from 'next/link';
import React from 'react';
import type { MarketplaceAppOverview } from 'types/client/marketplace';
import arrowIcon from 'icons/arrows/north-east.svg';
import highlightText from 'lib/highlightText';
import IconSvg from 'ui/shared/IconSvg';
import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
@@ -42,7 +42,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
>
<span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
</Text>
{ data.external && <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle"/> }
{ data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle"/> }
</Flex>
<Text
variant="secondary"
@@ -81,7 +81,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
>
{ data.description }
</Text>
{ data.external && <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle" color="text_secondary"/> }
{ data.external && <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="text_secondary"/> }
</Flex>
);
})();
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx
+4 -5
View File
@@ -1,12 +1,11 @@
import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
import { Grid, Text, Flex } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultLabel } from 'types/api/search';
import labelIcon from 'icons/publictags_slim.svg';
import iconSuccess from 'icons/status/success.svg';
import highlightText from 'lib/highlightText';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
data: SearchResultLabel;
@@ -15,7 +14,7 @@ interface Props {
}
const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
const icon = <Icon as={ labelIcon } boxSize={ 5 } color="gray.500"/>;
const icon = <IconSvg name="publictags_slim" boxSize={ 5 } color="gray.500"/>;
const name = (
<Text
@@ -38,7 +37,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
</Text>
);
const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
const isContractVerified = data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500"/>;
if (isMobile) {
return (
ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx
+4 -5
View File
@@ -1,13 +1,12 @@
import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
import { Grid, Text, Flex } from '@chakra-ui/react';
import React from 'react';
import type { SearchResultToken } from 'types/api/search';
import iconSuccess from 'icons/status/success.svg';
import verifiedToken from 'icons/verified_token.svg';
import highlightText from 'lib/highlightText';
import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
interface Props {
data: SearchResultToken;
@@ -17,7 +16,7 @@ interface Props {
const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
const icon = <TokenEntity.Icon token={{ ...data, type: data.token_type }}/>;
const verifiedIcon = <Icon as={ verifiedToken } boxSize={ 4 } color="green.500" ml={ 1 }/>;
const verifiedIcon = <IconSvg name="verified_token" boxSize={ 4 } color="green.500" ml={ 1 }/>;
const name = (
<Text
fontWeight={ 700 }
@@ -35,7 +34,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
</Text>
);
const contractVerifiedIcon = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;
const contractVerifiedIcon = data.is_smart_contract_verified && <IconSvg name="status/success" color="green.500" ml={ 1 }/>;
const additionalInfo = (
<Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
{ data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
ui/snippets/topBar/ColorModeSwitch.tsx
+2 -2
View File
@@ -1,6 +1,5 @@
import {
IconButton,
Icon,
Popover,
PopoverTrigger,
PopoverContent,
@@ -12,6 +11,7 @@ import {
import React from 'react';
import * as cookies from 'lib/cookies';
import IconSvg from 'ui/shared/IconSvg';
import ColorModeSwitchTheme from './ColorModeSwitchTheme';
import { COLOR_THEMES } from './utils';
@@ -79,7 +79,7 @@ const ColorModeSwitch = () => {
variant="simple"
colorScheme="blue"
aria-label="color mode switch"
icon={ <Icon as={ activeTheme.icon } boxSize={ 5 }/> }
icon={ <IconSvg name={ activeTheme.icon } boxSize={ 5 }/> }
boxSize={ 5 }
onClick={ onToggle }
/>
ui/snippets/topBar/ColorModeSwitchTheme.tsx
+3 -2
View File
@@ -1,11 +1,12 @@
import {
Icon,
Flex,
useColorModeValue,
useToken,
} from '@chakra-ui/react';
import React from 'react';
import IconSvg from 'ui/shared/IconSvg';
import ColorModeSwitchSample from './ColorModeSwitchSample';
import type { ColorTheme } from './utils';
@@ -43,7 +44,7 @@ const ColorModeSwitchTheme = ({ icon, name, colors, onClick, activeHex }: Props)
fontWeight={ 500 }
borderRadius="base"
>
<Icon as={ icon } boxSize={ 5 } mr={ 2 }/>
<IconSvg name={ icon } boxSize={ 5 } mr={ 2 }/>
<span>{ name }</span>
<Flex columnGap={ 2 } ml="auto" alignItems="center">
{ colors.map((sample) => <ColorModeSwitchSample key={ sample.hex } { ...sample } onClick={ onClick } isActive={ activeHex === sample.hex }/>) }
ui/snippets/topBar/utils.ts
+4 -6
View File
@@ -1,12 +1,10 @@
import moonWithStarIcon from 'icons/moon-with-star.svg';
import moonIcon from 'icons/moon.svg';
import sunIcon from 'icons/sun.svg';
import type { IconName } from 'ui/shared/IconSvg';
export const COLOR_THEMES = [
{
name: 'Light',
colorMode: 'light',
icon: sunIcon,
icon: 'sun' as IconName,
colors: [
{ hex: '#FFFFFF', sampleBg: 'linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)' },
],
@@ -14,7 +12,7 @@ export const COLOR_THEMES = [
{
name: 'Dim',
colorMode: 'dark',
icon: moonWithStarIcon,
icon: 'moon-with-star' as IconName,
colors: [
{ hex: '#232B37', sampleBg: 'linear-gradient(152deg, #232B37 50%, rgba(255, 255, 255, 0.00) 290.71%)' },
{ hex: '#1B2E48', sampleBg: 'linear-gradient(150deg, #1B2E48 50%, rgba(255, 255, 255, 0.00) 312.75%)' },
@@ -23,7 +21,7 @@ export const COLOR_THEMES = [
{
name: 'Dark',
colorMode: 'dark',
icon: moonIcon,
icon: 'moon' as IconName,
colors: [
{ hex: '#101112', sampleBg: 'linear-gradient(161deg, #000 9.37%, #383838 92.52%)' },
],
ui/snippets/walletMenu/WalletMenuMobile.tsx
+3 -3
View File
@@ -1,8 +1,8 @@
import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton, Icon } from '@chakra-ui/react';
import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconButton } from '@chakra-ui/react';
import React from 'react';
import walletIcon from 'icons/wallet.svg';
import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
import IconSvg from 'ui/shared/IconSvg';
import useWallet from 'ui/snippets/walletMenu/useWallet';
import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
@@ -21,7 +21,7 @@ const WalletMenuMobile = () => {
aria-label="wallet menu"
icon={ isWalletConnected ?
<AddressIdenticon size={ 20 } hash={ address }/> :
<Icon as={ walletIcon } boxSize={ 6 }/>
<IconSvg name="wallet" boxSize={ 6 }/>
}
variant={ isWalletConnected ? 'subtle' : 'outline' }
colorScheme="gray"