diff --git a/configs/app/ui.ts b/configs/app/ui.ts index 2c036c6f15..52b5836544 100644 --- a/configs/app/ui.ts +++ b/configs/app/ui.ts @@ -6,7 +6,7 @@ import * as views from './ui/views'; import { getEnvValue, parseEnvJson } from './utils'; // eslint-disable-next-line max-len -const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)'; +const HOMEPAGE_PLATE_BACKGROUND_DEFAULT = 'linear-gradient(-90deg, #68CFAA 0%, #00FF98 66.03%)'; const UI = Object.freeze({ sidebar: { @@ -30,7 +30,7 @@ const UI = Object.freeze({ charts: parseEnvJson>(getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_CHARTS)) || [], plate: { background: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND) || HOMEPAGE_PLATE_BACKGROUND_DEFAULT, - textColor: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR) || 'white', + textColor: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR) || 'text', }, showGasTracker: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER) === 'false' ? false : true, showAvgBlockTime: getEnvValue(process.env.NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME) === 'false' ? false : true, diff --git a/pages/_app.tsx b/pages/_app.tsx index 853ccf8d94..9d0a53c6fe 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,8 +1,9 @@ -import type { ChakraProps } from '@chakra-ui/react'; +import { useColorMode, type ChakraProps } from '@chakra-ui/react'; import * as Sentry from '@sentry/react'; import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import type { AppProps } from 'next/app'; +import Head from 'next/head'; import React from 'react'; import type { NextPageWithLayout } from 'nextjs/types'; @@ -37,17 +38,34 @@ const ERROR_SCREEN_STYLES: ChakraProps = { }; function MyApp({ Component, pageProps }: AppPropsWithLayout) { + const { colorMode } = useColorMode(); + const getLayout = Component.getLayout ?? ((page) => { page }); + + return ( + <> + + + + + + + { getLayout() } + + + ); +} + +function AppWrapper({ pageProps, ...props }: AppPropsWithLayout) { const queryClient = useQueryClientConfig(); const handleError = React.useCallback((error: Error) => { Sentry.captureException(error); }, []); - const getLayout = Component.getLayout ?? ((page) => { page }); - return ( + - { getLayout() } + @@ -68,4 +86,4 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { ); } -export default MyApp; +export default AppWrapper; diff --git a/pages/_document.tsx b/pages/_document.tsx index 936496184b..a81109f0f5 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -38,9 +38,6 @@ class MyDocument extends Document { href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" /> - - - { return { fontWeight: '500', - color: mode('blackAlpha.800', 'whiteAlpha.800')(props), + color: mode('text', 'text')(props), }; }; diff --git a/theme/components/Tabs.ts b/theme/components/Tabs.ts index e73668761a..2777087c55 100644 --- a/theme/components/Tabs.ts +++ b/theme/components/Tabs.ts @@ -13,16 +13,18 @@ const variantSoftRounded = definePartsStyle((props) => { tab: { borderRadius: 'base', fontWeight: '600', - color: mode('blue.700', 'gray.400')(props), + color: 'accent', _selected: { - color: mode('blue.700', 'gray.50')(props), - bg: mode('blue.50', 'gray.800')(props), + color: 'accent', + bg: mode('#E9FFF4', '#2C2C2C')(props), _hover: { - color: mode('blue.700', 'gray.50')(props), + color: 'accent', }, }, _hover: { - color: 'link_hovered', + color: 'accent', + bg: mode('#E9FFF4', '#2C2C2C')(props), + }, _focusVisible: { boxShadow: { base: 'none', lg: 'outline' }, diff --git a/theme/components/Text.ts b/theme/components/Text.ts index 435330bc3b..6064fcb0fd 100644 --- a/theme/components/Text.ts +++ b/theme/components/Text.ts @@ -1,13 +1,12 @@ import type { SystemStyleInterpolation } from '@chakra-ui/styled-system'; import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system'; -import { mode } from '@chakra-ui/theme-tools'; -const variantPrimary = defineStyle((props) => ({ - color: mode('blackAlpha.800', 'whiteAlpha.800')(props), +const variantPrimary = defineStyle(() => ({ + color: 'text', })); -const variantSecondary = defineStyle((props) => ({ - color: mode('gray.500', 'gray.400')(props), +const variantSecondary = defineStyle(() => ({ + color: 'text_secondary', })); const variantInherit = { diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts index 27ccd9f2a3..3a4349eda6 100644 --- a/theme/foundations/semanticTokens.ts +++ b/theme/foundations/semanticTokens.ts @@ -1,28 +1,39 @@ const semanticTokens = { colors: { divider: { - 'default': 'blackAlpha.200', - _dark: 'whiteAlpha.200', + 'default': '#F0F1F2', + _dark: '#2C2C2C', }, text: { - 'default': 'blackAlpha.800', - _dark: 'whiteAlpha.800', + 'default': '#171717', + _dark: '#FAFAFA', }, text_secondary: { - 'default': 'gray.500', - _dark: 'gray.400', + 'default': '#616B74', + _dark: '#A8A8A8', }, link: { - 'default': 'blue.600', - _dark: 'blue.300', + 'default': 'accent', }, link_hovered: { - 'default': 'blue.400', + 'default': 'accent', + }, + secondary_base: { + 'default': '#E2E8F0', + _dark: '#2C2C2C', }, error: { 'default': 'red.400', _dark: 'red.300', }, + accent: { + 'default': '#3CAD71', + _dark: '#07FC99', + }, + bg_base: { + 'default': 'white', + _dark: '#171717', + }, }, shadows: { action_bar: '0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)', diff --git a/theme/global.ts b/theme/global.ts index 5ddff6bcf7..fb83f2a964 100644 --- a/theme/global.ts +++ b/theme/global.ts @@ -21,6 +21,7 @@ const global = (props: StyleFunctionProps) => ({ }, form: { w: '100%', + colorSchema: 'auto', }, ...scrollbar(props), }); diff --git a/ui/address/AddressCsvExportLink.tsx b/ui/address/AddressCsvExportLink.tsx index 0bbcfa7497..fd3a586700 100644 --- a/ui/address/AddressCsvExportLink.tsx +++ b/ui/address/AddressCsvExportLink.tsx @@ -1,4 +1,4 @@ -import { chakra, Icon, Tooltip, Hide, Skeleton, Flex } from '@chakra-ui/react'; +import { Flex, Hide, Icon, Skeleton, Tooltip, chakra } from '@chakra-ui/react'; import React from 'react'; import type { CsvExportParams } from 'types/client/address'; @@ -38,7 +38,7 @@ const AddressCsvExportLink = ({ className, address, params, isLoading }: Props) } return ( - + { isMobile ? : tokenFilter } - + - - - All - From - To + + + All + From + To diff --git a/ui/address/contract/ContractCode.tsx b/ui/address/contract/ContractCode.tsx index d37304bb69..78dc8691bc 100644 --- a/ui/address/contract/ContractCode.tsx +++ b/ui/address/contract/ContractCode.tsx @@ -1,4 +1,4 @@ -import { Flex, Skeleton, Button, Grid, GridItem, Alert, Link, chakra, Box } from '@chakra-ui/react'; +import { Alert, Box, Button, chakra, Flex, Grid, GridItem, Link, Skeleton } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; @@ -93,6 +93,10 @@ const ContractCode = ({ addressHash, noSocket }: Props) => { size="sm" ml="auto" mr={ 3 } + bgColor="accent" + _hover={{ + bgColor: 'accent', + }} as="a" href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) } > diff --git a/ui/address/contract/ContractExternalLibraries.tsx b/ui/address/contract/ContractExternalLibraries.tsx index c45321f74f..43a7d4b828 100644 --- a/ui/address/contract/ContractExternalLibraries.tsx +++ b/ui/address/contract/ContractExternalLibraries.tsx @@ -108,7 +108,7 @@ const ContractExternalLibraries = ({ className, data }: Props) => { { button } - + { content } diff --git a/ui/address/contract/ContractMethodFieldZeroes.tsx b/ui/address/contract/ContractMethodFieldZeroes.tsx index bf078260f8..734025b929 100644 --- a/ui/address/contract/ContractMethodFieldZeroes.tsx +++ b/ui/address/contract/ContractMethodFieldZeroes.tsx @@ -84,7 +84,7 @@ const ContractMethodFieldZeroes = ({ onClick, isDisabled }: Props) => { - + { [ 8, 12, 16, 18, 20 ].map((id) => ( diff --git a/ui/address/contract/ContractMethodsAccordionItem.tsx b/ui/address/contract/ContractMethodsAccordionItem.tsx index 5578bacabb..0e88500c23 100644 --- a/ui/address/contract/ContractMethodsAccordionItem.tsx +++ b/ui/address/contract/ContractMethodsAccordionItem.tsx @@ -47,7 +47,8 @@ const ContractMethodsAccordionItem = ({ data, ind { 'method_id' in data && ( - + { })(); const diagramLink = diagramLinkAddress ? ( - + { return ( <> - + { return ( <> - + { size="sm" pl="6px" pr="6px" + color="accent" + borderColor="accent" onClick={ onOpen } icon={ } /> diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx index 314bb74918..901f4dcb48 100644 --- a/ui/address/tokenSelect/TokenSelect.tsx +++ b/ui/address/tokenSelect/TokenSelect.tsx @@ -86,7 +86,7 @@ const TokenSelect = ({ onClick }: Props) => { : } - + { - + diff --git a/ui/addresses/AddressesListItem.tsx b/ui/addresses/AddressesListItem.tsx index 7b0c59d762..1671d1ee19 100644 --- a/ui/addresses/AddressesListItem.tsx +++ b/ui/addresses/AddressesListItem.tsx @@ -1,4 +1,4 @@ -import { Flex, HStack, Skeleton } from '@chakra-ui/react'; +import { Flex, HStack, Skeleton, useColorModeValue } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -25,14 +25,14 @@ const AddressesListItem = ({ totalSupply, isLoading, }: Props) => { - + const iconBgColor = useColorModeValue('#F0F1F2', '#2C2C2C'); const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals)); return (
- + { - + const iconBgColor = useColorModeValue('#F0F1F2', '#2C2C2C'); const addressBalance = BigNumber(item.coin_balance).div(BigNumber(10 ** config.chain.currency.decimals)); const addressBalanceChunks = addressBalance.dp(8).toFormat().split('.'); @@ -39,7 +39,7 @@ const AddressesTableItem = ({
- + import('swagger-ui-react'), { ssr: false, }); -import { Box, useColorModeValue } from '@chakra-ui/react'; +import { Box, useColorModeValue, useToken } from '@chakra-ui/react'; import dynamic from 'next/dynamic'; import React from 'react'; @@ -54,6 +54,31 @@ const SwaggerUI = () => { '.swagger-ui .wrapper': { padding: 0, }, + + '.opblock-summary-control[aria-label~="get"] > .opblock-summary-method': { + backgroundColor: useToken('colors', 'accent'), + }, + + '.opblock-summary-control > .opblock-summary-method': { + color: useColorModeValue('text', '#171717'), + }, + + '.opblock': { + borderColor: useToken('colors', 'accent') + ' !important', + backgroundColor: 'unset !important', + }, + + '.tab-item.active h4 span::after': { + backgroundColor: useToken('colors', 'accent') + ' !important', + }, + + '.opblock .opblock-summary': { + borderColor: useToken('colors', 'accent') + ' !important', + }, + + '.opblock .try-out button': { + color: useToken('colors', 'text') + ' !important', + }, }; // eslint-disable-next-line @typescript-eslint/no-explicit-any diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx index 66d8736e80..117fed5da9 100644 --- a/ui/block/BlockDetails.tsx +++ b/ui/block/BlockDetails.tsx @@ -105,13 +105,13 @@ const BlockDetails = ({ query }: Props) => { return ( - + { staticReward.dividedBy(WEI).toFixed() } { !txFees.isEqualTo(ZERO) && ( <> { space }+{ space } - + { txFees.dividedBy(WEI).toFixed() } @@ -119,7 +119,7 @@ const BlockDetails = ({ query }: Props) => { { !burntFees.isEqualTo(ZERO) && ( <> { space }-{ space } - + { burntFees.dividedBy(WEI).toFixed() } @@ -317,7 +317,7 @@ const BlockDetails = ({ query }: Props) => { { burntFees.dividedBy(WEI).toFixed() } { config.chain.currency.symbol } { !txFees.isEqualTo(ZERO) && ( - + { Network utilization (last 50 blocks):{ nbsp } - + { statsQuery.data.network_utilization_percentage.toFixed(2) }% diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx index 83ae8fbccb..68106d349f 100644 --- a/ui/blocks/BlocksTableItem.tsx +++ b/ui/blocks/BlocksTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, Box, Tooltip, Skeleton, useColorModeValue } from '@chakra-ui/react'; +import { Box, Flex, Skeleton, Td, Tooltip, Tr, useColorModeValue } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import { motion } from 'framer-motion'; import React from 'react'; @@ -30,7 +30,6 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => { const burntFees = BigNumber(data.burnt_fees || 0); const txFees = BigNumber(data.tx_fees || 0); - const separatorColor = useColorModeValue('gray.200', 'gray.700'); const burntFeesIconColor = useColorModeValue('gray.500', 'inherit'); return ( @@ -44,7 +43,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => { > - + { type="address" alias={ data.miner.name } hash={ data.miner.hash } + color="text" + _hover={{ color: 'text', textDecoration: 'underline' }} truncation="constant" display="inline-flex" maxW="100%" @@ -92,7 +93,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => { { BigNumber(data.gas_used || 0).toFormat() } - + { { data.gas_target_percentage && ( <> - + ) } @@ -123,9 +124,9 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => { { burntFees.dividedBy(WEI).toFixed(8) } - + - + diff --git a/ui/graphQL/GraphQL.tsx b/ui/graphQL/GraphQL.tsx index 2587ec5439..e18c007185 100644 --- a/ui/graphQL/GraphQL.tsx +++ b/ui/graphQL/GraphQL.tsx @@ -1,22 +1,42 @@ -import { Box, useColorMode } from '@chakra-ui/react'; +import { Box, useColorMode, useColorModeValue, useToken } from '@chakra-ui/react'; import { createGraphiQLFetcher } from '@graphiql/toolkit'; import { GraphiQL } from 'graphiql'; import React from 'react'; import config from 'configs/app'; -import buildUrl from 'lib/api/buildUrl'; import 'graphiql/graphiql.css'; +import buildUrl from 'lib/api/buildUrl'; import isBrowser from 'lib/isBrowser'; const feature = config.features.graphqlApiDocs; -const graphQLStyle = { - '.graphiql-container': { - backgroundColor: 'unset', - }, -}; - const GraphQL = () => { + const graphQLStyle = { + '.graphiql-container': { + backgroundColor: 'unset', + }, + + '.graphiql-editor .cm-s-graphiql, .graphiql-query-editor,.graphiql-editor .CodeMirror-gutters,.graphiql-editor-tools,.graphiql-container .graphiql-editors': + { + backgroundColor: useToken('colors', useColorModeValue('white', 'black')) + ' !important', + }, + + '.graphiql-query-editor': { + borderRadius: '12px 12px 0 0 !important', + }, + + '.graphiql-editor-tools': { + borderRadius: '0 0 12px 12px !important', + }, + + '.graphiql-editor-tools button': { + color: 'rgba(59, 75, 104, 0.76) !important', + }, + + '.graphiql-execute-button': { + backgroundColor: '#D60590 !important', + }, + }; const { colorMode } = useColorMode(); diff --git a/ui/home/IndexingAlertBlocks.tsx b/ui/home/IndexingAlertBlocks.tsx index a8a8dbefcf..0bf2281386 100644 --- a/ui/home/IndexingAlertBlocks.tsx +++ b/ui/home/IndexingAlertBlocks.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertIcon, AlertTitle, chakra, Skeleton } from '@chakra-ui/react'; +import { Alert, AlertIcon, AlertTitle, chakra, Skeleton, useColorModeValue } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import React from 'react'; @@ -19,6 +19,7 @@ const IndexingAlertBlocks = ({ className }: { className?: string }) => { const appProps = useAppContext(); const cookiesString = appProps.cookies; const [ hasAlertCookie ] = React.useState(cookies.get(cookies.NAMES.INDEXING_ALERT, cookiesString) === 'true'); + const alertBgColor = useColorModeValue('#F0F1F3', '#2C2C2C'); const { data, isError, isLoading } = useApiQuery('homepage_indexing_status'); @@ -65,9 +66,9 @@ const IndexingAlertBlocks = ({ className }: { className?: string }) => { } return ( - - { !isMobile && } - + + { !isMobile && } + { `${ data.indexed_blocks_ratio && `${ Math.floor(Number(data.indexed_blocks_ratio) * 100) }% Blocks Indexed${ nbsp }${ ndash } ` } We're indexing this chain right now. Some of the counts may be inaccurate.` } diff --git a/ui/home/IndexingAlertIntTxs.tsx b/ui/home/IndexingAlertIntTxs.tsx index 517c20c9aa..caed03a74e 100644 --- a/ui/home/IndexingAlertIntTxs.tsx +++ b/ui/home/IndexingAlertIntTxs.tsx @@ -66,8 +66,7 @@ const IndexingAlertIntTxs = () => { borderRadius="base" alignItems="center" justifyContent="center" - color="green.400" - _hover={{ color: 'blue.400' }} + color="accent" > { { trigger } - + { hint } diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx index 260e362669..e43007470b 100644 --- a/ui/home/LatestBlocks.tsx +++ b/ui/home/LatestBlocks.tsx @@ -1,4 +1,4 @@ -import { Box, Heading, Flex, Text, VStack, Skeleton } from '@chakra-ui/react'; +import { Box, Flex, Heading, Skeleton, Text, VStack } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; import { AnimatePresence } from 'framer-motion'; import React from 'react'; @@ -87,7 +87,7 @@ const LatestBlocks = () => { Network utilization:{ nbsp } - + { statsQueryResult.data?.network_utilization_percentage.toFixed(2) }% @@ -105,7 +105,8 @@ const LatestBlocks = () => { - View all blocks + View all blocks ); diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx index a281cbb20d..40aeafd9eb 100644 --- a/ui/home/LatestBlocksItem.tsx +++ b/ui/home/LatestBlocksItem.tsx @@ -41,7 +41,7 @@ const LatestBlocksItem = ({ block, h, isLoading }: Props) => { w="100%" > - + { fontSize="sm" flexShrink={ 0 } ml={ 2 } + color="text_secondary" /> - Txn - { block.tx_count } + Txn + { block.tx_count } { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.nonce && ( <> - Reward - { totalReward.toFixed() } - { getNetworkValidatorTitle() } - + Reward + { totalReward.toFixed() } + { getNetworkValidatorTitle() } + ) } diff --git a/ui/home/LatestTxs.tsx b/ui/home/LatestTxs.tsx index d58f40c98b..c7eed4d198 100644 --- a/ui/home/LatestTxs.tsx +++ b/ui/home/LatestTxs.tsx @@ -52,7 +52,8 @@ const LatestTransactions = () => { ))) } - View all transactions + View all transactions ); diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx index 586a74bf1d..5f5976ede5 100644 --- a/ui/home/LatestTxsItem.tsx +++ b/ui/home/LatestTxsItem.tsx @@ -1,10 +1,10 @@ import { Box, Flex, - HStack, - Text, Grid, + HStack, Skeleton, + Text, } from '@chakra-ui/react'; import React from 'react'; @@ -57,7 +57,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { { type="transaction" fontWeight="700" isLoading={ isLoading } + color="text" + _hover={{ color: 'text', textDecoration: 'underline' }} />
{ tx.timestamp && ( @@ -82,7 +84,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { @@ -97,6 +99,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ml={ 2 } fontSize="sm" isLoading={ isLoading } + color="text" + _hover={{ color: 'text', textDecoration: 'underline' }} />
{ dataTo && ( @@ -110,6 +114,8 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ml={ 2 } fontSize="sm" isLoading={ isLoading } + color="text" + _hover={{ color: 'text', textDecoration: 'underline' }} /> ) } @@ -117,12 +123,12 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { - { config.chain.currency.symbol } - { getValueWithUnit(tx.value).dp(5).toFormat() } + { config.chain.currency.symbol } + { getValueWithUnit(tx.value).dp(5).toFormat() } - Fee - { getValueWithUnit(tx.fee.value).dp(5).toFormat() } + Fee + { getValueWithUnit(tx.fee.value).dp(5).toFormat() } diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index 83f42d2cb1..3dfd268b82 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -59,7 +59,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { as={ transactionIcon } boxSize="30px" mr={ 2 } - color="link" + color="text" isLoading={ isLoading } />
@@ -69,6 +69,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { fontWeight="700" truncation="constant" isLoading={ isLoading } + color="text" />
@@ -90,12 +91,13 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { truncation="constant" fontSize="sm" isLoading={ isLoading } + color="text" /> { dataTo && ( @@ -110,17 +112,18 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { truncation="constant" fontSize="sm" isLoading={ isLoading } + color="text" /> ) } - Value { config.chain.currency.symbol } - { getValueWithUnit(tx.value).dp(5).toFormat() } + Value { config.chain.currency.symbol } + { getValueWithUnit(tx.value).dp(5).toFormat() } - Fee { config.chain.currency.symbol } - { getValueWithUnit(tx.fee.value).dp(5).toFormat() } + Fee { config.chain.currency.symbol } + { getValueWithUnit(tx.fee.value).dp(5).toFormat() } ); diff --git a/ui/home/StatsGasPrices.tsx b/ui/home/StatsGasPrices.tsx index f5e8ce0ee7..aeff6f25b1 100644 --- a/ui/home/StatsGasPrices.tsx +++ b/ui/home/StatsGasPrices.tsx @@ -1,21 +1,24 @@ -import { Grid, GridItem, useColorModeValue } from '@chakra-ui/react'; +import { Grid, GridItem } from '@chakra-ui/react'; import React from 'react'; import type { GasPrices } from 'types/api/stats'; const StatsGasPrices = ({ gasPrices }: {gasPrices: GasPrices}) => { - const nameStyleProps = { - color: useColorModeValue('blue.100', 'blue.600'), + const labelStyleProps = { + color: 'accent', + }; + const contentStyleProps = { + color: 'text', }; return ( - - Slow - { `${ gasPrices.slow } Gacanto` } - Average - { `${ gasPrices.average } Gacanto` } - Fast - { `${ gasPrices.fast } Gacanto` } + + Slow + { `${ gasPrices.slow } Gacanto` } + Average + { `${ gasPrices.average } Gacanto` } + Fast + { `${ gasPrices.fast } Gacanto` } ); }; diff --git a/ui/home/StatsItem.tsx b/ui/home/StatsItem.tsx index ed5e8651f7..f52c6f411c 100644 --- a/ui/home/StatsItem.tsx +++ b/ui/home/StatsItem.tsx @@ -1,5 +1,5 @@ import type { SystemStyleObject, TooltipProps } from '@chakra-ui/react'; -import { Skeleton, Flex, useColorModeValue, chakra, LightMode } from '@chakra-ui/react'; +import { chakra, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import breakpoints from 'theme/foundations/breakpoints'; @@ -23,7 +23,6 @@ const TOOLTIP_PROPS: Partial = { borderRadius: 'md', placement: 'bottom-end', offset: [ 0, 0 ], - bgColor: 'blackAlpha.900', }; const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading }: Props) => { @@ -35,7 +34,7 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' }, }; - const bgColor = useColorModeValue('blue.50', 'blue.800'); + const bgColor = useColorModeValue('#F9F9F9', '#2C2C2C'); const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50'); const infoColor = useColorModeValue('gray.600', 'gray.400'); @@ -57,7 +56,7 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel, url, isLoading href: url, } : {}) } > - + { title } - + { value } { tooltipLabel && !isLoading && ( - - - + ) } ); diff --git a/ui/home/indicators/ChainIndicatorChart.tsx b/ui/home/indicators/ChainIndicatorChart.tsx index 023c79a892..3da28b62b9 100644 --- a/ui/home/indicators/ChainIndicatorChart.tsx +++ b/ui/home/indicators/ChainIndicatorChart.tsx @@ -1,4 +1,4 @@ -import { useToken } from '@chakra-ui/react'; +import { useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { TimeChartData } from 'ui/shared/chart/types'; @@ -20,7 +20,7 @@ const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 0 }; const ChainIndicatorChart = ({ data }: Props) => { const overlayRef = React.useRef(null); - const lineColor = useToken('colors', 'blue.500'); + const lineColor = useColorModeValue('#1ACD6E', '#07FC99'); const [ rect, ref ] = useClientRect(); const { innerWidth, innerHeight } = calculateInnerSize(rect, CHART_MARGIN); @@ -37,6 +37,7 @@ const ChainIndicatorChart = ({ data }: Props) => { data={ data[0].items } xScale={ xScale } yScale={ yScale } + color={ lineColor } /> { const queryResult = useFetchChartData(indicator); const statsQueryResult = useApiQuery('homepage_stats'); - const bgColorDesktop = useColorModeValue('white', 'gray.900'); + const bgColorDesktop = useColorModeValue('white', '#171717'); + const bgBoxShadowDesktop = useColorModeValue('0px 8px 16px -5px rgba(0, 0, 0, 0.10)', '0px 8px 16px -5px rgba(6, 252, 153, 0.10)'); + const indicatorTitleColor = useColorModeValue('#616B74', '#A8A8A8'); const bgColorMobile = useColorModeValue('white', 'black'); const listBgColorDesktop = useColorModeValue('gray.50', 'black'); const listBgColorMobile = useColorModeValue('gray.50', 'gray.900'); @@ -60,7 +62,7 @@ const ChainIndicators = () => { { > - { indicator?.title } - { indicator?.hint && } + { indicator?.title } + { indicator?.hint && } { valueTitle } diff --git a/ui/marketplace/MarketplaceCategoriesMenu.tsx b/ui/marketplace/MarketplaceCategoriesMenu.tsx index ad55bb7582..22b7841f1f 100644 --- a/ui/marketplace/MarketplaceCategoriesMenu.tsx +++ b/ui/marketplace/MarketplaceCategoriesMenu.tsx @@ -54,7 +54,7 @@ const MarketplaceCategoriesMenu = ({ selectedCategoryId, onSelect, categories, i - + { options.map((category: string) => ( { onClick={ handleSelection } display="flex" alignItems="center" + bgColor="bg_base" borderColor="divider" + _hover={{ + bgColor: 'divider', + }} > { id in ICONS && } { id } diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx index 0871c576bb..d1849a22ad 100644 --- a/ui/pages/Home.tsx +++ b/ui/pages/Home.tsx @@ -27,7 +27,7 @@ const Home = () => { size={{ base: 'md', lg: 'xl' }} lineHeight={{ base: '32px', lg: '50px' }} fontWeight={ 600 } - color={ config.UI.homepage.plate.textColor } + color="#171717" > Welcome to { config.chain.name } Blockscout diff --git a/ui/pages/Token.tsx b/ui/pages/Token.tsx index 1f7720b22c..37beabbf56 100644 --- a/ui/pages/Token.tsx +++ b/ui/pages/Token.tsx @@ -238,7 +238,8 @@ const TokenPageContent = () => { const titleContentAfter = ( <> { verifiedInfoQuery.data?.tokenAddress && ( - + diff --git a/ui/searchResults/SearchResultsInput.tsx b/ui/searchResults/SearchResultsInput.tsx index a50b82b4e4..a3aecf4fd0 100644 --- a/ui/searchResults/SearchResultsInput.tsx +++ b/ui/searchResults/SearchResultsInput.tsx @@ -1,6 +1,6 @@ -import { Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react'; +import { Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react'; import _debounce from 'lodash/debounce'; -import type { FormEvent, FocusEvent } from 'react'; +import type { FocusEvent, FormEvent } from 'react'; import React from 'react'; import useIsMobile from 'lib/hooks/useIsMobile'; @@ -87,7 +87,8 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange } value={ searchTerm } /> - + diff --git a/ui/shared/AdditionalInfoButton.tsx b/ui/shared/AdditionalInfoButton.tsx index 39352cd502..5ab246dd8f 100644 --- a/ui/shared/AdditionalInfoButton.tsx +++ b/ui/shared/AdditionalInfoButton.tsx @@ -42,8 +42,8 @@ const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props, ); diff --git a/ui/shared/AddressActions/Menu.tsx b/ui/shared/AddressActions/Menu.tsx index 3303dbd3a9..e1132fc1b6 100644 --- a/ui/shared/AddressActions/Menu.tsx +++ b/ui/shared/AddressActions/Menu.tsx @@ -36,7 +36,7 @@ const AddressActions = ({ isLoading }: Props) => { - + { isTokenPage && config.features.addressVerification.isEnabled && } diff --git a/ui/shared/AddressActions/TokenInfoMenuItem.tsx b/ui/shared/AddressActions/TokenInfoMenuItem.tsx index ad01af5243..b7981c5e12 100644 --- a/ui/shared/AddressActions/TokenInfoMenuItem.tsx +++ b/ui/shared/AddressActions/TokenInfoMenuItem.tsx @@ -1,4 +1,4 @@ -import { MenuItem, Icon, chakra, useDisclosure } from '@chakra-ui/react'; +import { Icon, MenuItem, chakra, useDisclosure } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import React from 'react'; @@ -65,7 +65,10 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => { const content = (() => { if (!verifiedAddressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress.toLowerCase() === hash.toLowerCase())) { return ( - + { icon } { tokenInfoQuery.data?.tokenAddress ? 'Update token info' : 'Add token info' } @@ -75,7 +78,10 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => { const hasApplication = applicationsQuery.data?.submissions.some(({ tokenAddress }) => tokenAddress.toLowerCase() === hash.toLowerCase()); return ( - + { icon } { diff --git a/ui/shared/ClearButton.tsx b/ui/shared/ClearButton.tsx index 614b3620a4..a291abc933 100644 --- a/ui/shared/ClearButton.tsx +++ b/ui/shared/ClearButton.tsx @@ -10,7 +10,6 @@ interface Props { } const ClearButton = ({ onClick, isDisabled, className }: Props) => { - const iconColor = useColorModeValue('gray.300', 'gray.600'); const iconColorHover = useColorModeValue('gray.200', 'gray.500'); return ( @@ -21,7 +20,7 @@ const ClearButton = ({ onClick, isDisabled, className }: Props) => { aria-label="Clear input" title="Clear input" boxSize={ 6 } - icon={ } + icon={ } size="sm" onClick={ onClick } /> diff --git a/ui/shared/ContentLoader.tsx b/ui/shared/ContentLoader.tsx index f0ba0a111a..16ec6aa9fd 100644 --- a/ui/shared/ContentLoader.tsx +++ b/ui/shared/ContentLoader.tsx @@ -27,7 +27,7 @@ const ContentLoader = ({ className, text }: Props) => { animation: `${ runnerAnimation } 700ms ease-in-out infinite alternate`, left: '100%', top: 0, - backgroundColor: 'blue.300', + backgroundColor: 'accent', borderRadius: 'full', }} /> diff --git a/ui/shared/CopyToClipboard.tsx b/ui/shared/CopyToClipboard.tsx index 557ad568a1..eca0e1eee5 100644 --- a/ui/shared/CopyToClipboard.tsx +++ b/ui/shared/CopyToClipboard.tsx @@ -1,4 +1,4 @@ -import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton } from '@chakra-ui/react'; +import { IconButton, Skeleton, Tooltip, chakra, useClipboard, useDisclosure } from '@chakra-ui/react'; import React, { useEffect, useState } from 'react'; import CopyIcon from 'icons/copy.svg'; @@ -28,14 +28,16 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => { } return ( - + } w="20px" h="20px" - color="gray.400" + color="text_secondary" variant="simple" + _hover={{ color: 'accent' }} display="inline-block" flexShrink={ 0 } onClick={ onCopy } diff --git a/ui/shared/CurrencyValue.tsx b/ui/shared/CurrencyValue.tsx index fa10cd09b3..23ca362bc7 100644 --- a/ui/shared/CurrencyValue.tsx +++ b/ui/shared/CurrencyValue.tsx @@ -1,4 +1,4 @@ -import { Box, Text, chakra, Skeleton } from '@chakra-ui/react'; +import { Box, Skeleton, Text, chakra } from '@chakra-ui/react'; import React from 'react'; import getCurrencyValue from 'lib/getCurrencyValue'; @@ -32,7 +32,7 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className return ( - + { valueResult }{ currency ? ` ${ currency }` : '' } { usdResult && (${ usdResult }) } diff --git a/ui/shared/DetailsInfoItem.tsx b/ui/shared/DetailsInfoItem.tsx index 18c64f6c2e..6c65de72c5 100644 --- a/ui/shared/DetailsInfoItem.tsx +++ b/ui/shared/DetailsInfoItem.tsx @@ -1,4 +1,4 @@ -import { GridItem, Flex, Text, Skeleton } from '@chakra-ui/react'; +import { Flex, GridItem, Skeleton, Text } from '@chakra-ui/react'; import type { HTMLChakraProps } from '@chakra-ui/system'; import React from 'react'; @@ -17,9 +17,9 @@ const DetailsInfoItem = ({ title, hint, note, children, id, isLoading, ...styles <> - + - + { title } { note && { note } } diff --git a/ui/shared/EntityTags.tsx b/ui/shared/EntityTags.tsx index caed74f5f7..5e1acc00f4 100644 --- a/ui/shared/EntityTags.tsx +++ b/ui/shared/EntityTags.tsx @@ -54,7 +54,7 @@ const EntityTags = ({ className, data, tagsBefore = [], tagsAfter = [], isLoadin +{ tags.length - 1 } - + { diff --git a/ui/shared/GasUsedToTargetRatio.tsx b/ui/shared/GasUsedToTargetRatio.tsx index 8bcecdbc35..92c2d4206b 100644 --- a/ui/shared/GasUsedToTargetRatio.tsx +++ b/ui/shared/GasUsedToTargetRatio.tsx @@ -8,7 +8,7 @@ type Props = { const GasUsedToTargetRatio = ({ value, isLoading }: Props) => { return ( - + { (value > 0 ? '+' : '') + value.toLocaleString(undefined, { maximumFractionDigits: 2 }) }% diff --git a/ui/shared/HashStringShorten.tsx b/ui/shared/HashStringShorten.tsx index b277e420b6..ac5b512479 100644 --- a/ui/shared/HashStringShorten.tsx +++ b/ui/shared/HashStringShorten.tsx @@ -14,7 +14,7 @@ const HashStringShorten = ({ hash, isTooltipDisabled }: Props) => { } return ( - + { shortenString(hash) } ); diff --git a/ui/shared/HashStringShortenDynamic.tsx b/ui/shared/HashStringShortenDynamic.tsx index 701ad9bee6..f062be0f76 100644 --- a/ui/shared/HashStringShortenDynamic.tsx +++ b/ui/shared/HashStringShortenDynamic.tsx @@ -93,7 +93,8 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled, if (isTruncated) { return ( - { content } + { content } ); } diff --git a/ui/shared/Hint.tsx b/ui/shared/Hint.tsx index 7a4908f8c6..8009c8c252 100644 --- a/ui/shared/Hint.tsx +++ b/ui/shared/Hint.tsx @@ -1,5 +1,5 @@ import type { TooltipProps } from '@chakra-ui/react'; -import { chakra, IconButton, Tooltip, useDisclosure, Skeleton } from '@chakra-ui/react'; +import { IconButton, Skeleton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react'; import React from 'react'; import InfoIcon from 'icons/info.svg'; @@ -30,6 +30,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => { placement="top" maxW="320px" isOpen={ isOpen } + bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider" { ...tooltipProps } > { } return ( - diff --git a/ui/shared/NetworkExplorers.tsx b/ui/shared/NetworkExplorers.tsx index ea4a8a5b25..bdf551d562 100644 --- a/ui/shared/NetworkExplorers.tsx +++ b/ui/shared/NetworkExplorers.tsx @@ -48,7 +48,7 @@ const NetworkExplorers = ({ className, type, pathParam, hideText }: Props) => { - + Verify with other explorers { if ('url' in props) { return ( - + { icon } @@ -44,7 +44,7 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => { } return ( - + { icon } @@ -109,6 +109,7 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa - + } @@ -45,7 +45,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is isDisabled={ isPrevDisabled } /> - + } diff --git a/ui/shared/SocketNewItemsNotice.tsx b/ui/shared/SocketNewItemsNotice.tsx index b5ca630f3d..6139907ba3 100644 --- a/ui/shared/SocketNewItemsNotice.tsx +++ b/ui/shared/SocketNewItemsNotice.tsx @@ -1,4 +1,4 @@ -import { Alert, Link, Text, chakra, useTheme, useColorModeValue, Skeleton, Tr, Td } from '@chakra-ui/react'; +import { Alert, Link, Skeleton, Td, Text, Tr, chakra, useColorModeValue, useTheme } from '@chakra-ui/react'; import { transparentize } from '@chakra-ui/theme-tools'; import React from 'react'; @@ -44,7 +44,8 @@ const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, typ return ( <> - { num.toLocaleString() } more { name }{ num > 1 ? 's' : '' } + { num.toLocaleString() } more { name }{ num > 1 ? 's' : '' } ha{ num > 1 ? 've' : 's' } come in ); diff --git a/ui/shared/TableItemActionButtons.tsx b/ui/shared/TableItemActionButtons.tsx index 869e177021..0cca23825c 100644 --- a/ui/shared/TableItemActionButtons.tsx +++ b/ui/shared/TableItemActionButtons.tsx @@ -25,7 +25,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props return ( - + - + - + { tabs.slice(tabsCut).map((tab, index) => ( diff --git a/ui/shared/monaco/CodeEditorMainFileIndicator.tsx b/ui/shared/monaco/CodeEditorMainFileIndicator.tsx index 53ba78b7ae..8e769121c0 100644 --- a/ui/shared/monaco/CodeEditorMainFileIndicator.tsx +++ b/ui/shared/monaco/CodeEditorMainFileIndicator.tsx @@ -9,7 +9,7 @@ interface Props { const CodeEditorMainFileIndicator = ({ className }: Props) => { return ( - + diff --git a/ui/shared/pagination/Pagination.tsx b/ui/shared/pagination/Pagination.tsx index 55fdfc1b14..01ced612b5 100644 --- a/ui/shared/pagination/Pagination.tsx +++ b/ui/shared/pagination/Pagination.tsx @@ -29,6 +29,13 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage size="sm" onClick={ resetPage } isDisabled={ page === 1 || isLoading } + borderColor="accent" + color="accent" + _hover={{ color: 'accent', borderColor: 'accent' }} + _active={{ + borderColor: 'accent', + color: 'accent', + }} > First @@ -39,6 +46,13 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage onClick={ onPrevPageClick } size="sm" aria-label="Prev page" + borderColor="accent" + color="accent" + _hover={{ color: 'accent', borderColor: 'accent' }} + _active={{ + borderColor: 'accent', + color: 'accent', + }} w="36px" icon={ } isDisabled={ !canGoBackwards || page === 1 || isLoading } @@ -49,6 +63,13 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage variant="outline" size="sm" isActive + color="accent" + borderColor="accent" + _hover={{ color: 'accent', borderColor: 'accent' }} + _active={{ + borderColor: 'accent', + color: 'accent', + }} borderWidth="1px" fontWeight={ 400 } h={ 8 } @@ -64,7 +85,13 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage onClick={ onNextPageClick } size="sm" aria-label="Next page" - w="36px" + w="36px" borderColor="accent" + color="accent" + _hover={{ color: 'accent', borderColor: 'accent' }} + _active={{ + borderColor: 'accent', + color: 'accent', + }} icon={ } isDisabled={ !hasNextPage || isLoading } /> diff --git a/ui/shared/sort/Sort.tsx b/ui/shared/sort/Sort.tsx index 37b378abf4..6794ade031 100644 --- a/ui/shared/sort/Sort.tsx +++ b/ui/shared/sort/Sort.tsx @@ -1,10 +1,10 @@ import { - chakra, Menu, MenuButton, + MenuItemOption, MenuList, MenuOptionGroup, - MenuItemOption, + chakra, useDisclosure, } from '@chakra-ui/react'; import React from 'react'; @@ -40,11 +40,14 @@ const Sort = ({ sort, setSort, options, isLoading }: Props< isLoading={ isLoading } /> - + { options.map((option) => ( - { option.title } diff --git a/ui/snippets/footer/Footer.tsx b/ui/snippets/footer/Footer.tsx index 9b12feaa1f..6dc893eb9b 100644 --- a/ui/snippets/footer/Footer.tsx +++ b/ui/snippets/footer/Footer.tsx @@ -100,18 +100,20 @@ const Footer = () => { - blockscout.com + blockscout.com Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks. - Powered By NeoBase + Powered By NeoBase { apiVersionUrl && ( - Backend: { backendVersionData?.backend_version } + Backend: { backendVersionData?.backend_version } ) } { (config.UI.footer.frontendVersion || config.UI.footer.frontendCommit) && ( diff --git a/ui/snippets/footer/FooterLinkItem.tsx b/ui/snippets/footer/FooterLinkItem.tsx index b203956a6d..0bdc3c0476 100644 --- a/ui/snippets/footer/FooterLinkItem.tsx +++ b/ui/snippets/footer/FooterLinkItem.tsx @@ -10,7 +10,8 @@ type Props = { const FooterLinkItem = ({ icon, iconSize, text, url }: Props) => { return ( - + { icon && (
diff --git a/ui/snippets/header/ColorModeToggler.tsx b/ui/snippets/header/ColorModeToggler.tsx index 5ba097948c..0751310385 100644 --- a/ui/snippets/header/ColorModeToggler.tsx +++ b/ui/snippets/header/ColorModeToggler.tsx @@ -1,17 +1,17 @@ import type { UseCheckboxProps } from '@chakra-ui/checkbox'; import { useCheckbox } from '@chakra-ui/checkbox'; -import { useColorMode, useColorModeValue, Icon } from '@chakra-ui/react'; +import { Icon, useColorMode, useColorModeValue } from '@chakra-ui/react'; import type { + HTMLChakraProps, SystemStyleObject, ThemingProps, - HTMLChakraProps, } from '@chakra-ui/system'; import { chakra, forwardRef, omitThemingProps, } from '@chakra-ui/system'; -import { dataAttr, __DEV__ } from '@chakra-ui/utils'; +import { __DEV__, dataAttr } from '@chakra-ui/utils'; import * as React from 'react'; import moonIcon from 'icons/moon.svg'; @@ -96,7 +96,7 @@ const ColorModeToggler = forwardRef((props, ref) margin={ 2 } zIndex="docked" as={ moonIcon } - color={ useColorModeValue('blue.300', 'blackAlpha.900') } + color={ state.isChecked ? 'accent' : 'black' } { ...transitionProps } /> ((props, ref) margin={ 1.5 } zIndex="docked" as={ sunIcon } - color={ useColorModeValue('blackAlpha.900', 'blue.300') } + color={ !state.isChecked ? 'accent' : 'black' } { ...transitionProps } /> diff --git a/ui/snippets/navigation/NavLink.tsx b/ui/snippets/navigation/NavLink.tsx index 4bf6131ea7..ca6961af62 100644 --- a/ui/snippets/navigation/NavLink.tsx +++ b/ui/snippets/navigation/NavLink.tsx @@ -45,6 +45,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => { { - + { item.text } diff --git a/ui/snippets/navigation/useColors.ts b/ui/snippets/navigation/useColors.ts index c0e293de80..9c5163954c 100644 --- a/ui/snippets/navigation/useColors.ts +++ b/ui/snippets/navigation/useColors.ts @@ -3,13 +3,13 @@ import { useColorModeValue } from '@chakra-ui/react'; export default function useColors() { return { text: { - 'default': useColorModeValue('gray.600', 'gray.400'), - active: useColorModeValue('blue.700', 'gray.50'), - hover: 'link_hovered', + 'default': useColorModeValue('#171717', '#FAFAFA'), + active: 'accent', + hover: 'accent', }, bg: { 'default': 'transparent', - active: useColorModeValue('blue.50', 'gray.800'), + active: useColorModeValue('#E9FFF4', '#2C2C2C'), }, border: { 'default': 'divider', diff --git a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx index 89db170903..8efa7fc627 100644 --- a/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx +++ b/ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx @@ -70,7 +70,7 @@ const NetworkMenuPopup = ({ items, tabs }: Props) => { ); return ( - + { content } diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx index feed722dc7..508d94fdc9 100644 --- a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx +++ b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx @@ -43,7 +43,7 @@ const ProfileMenuDesktop = () => { { hasMenu && ( - + diff --git a/ui/snippets/searchBar/SearchBar.tsx b/ui/snippets/searchBar/SearchBar.tsx index c222e37a6e..b9ba4ad21a 100644 --- a/ui/snippets/searchBar/SearchBar.tsx +++ b/ui/snippets/searchBar/SearchBar.tsx @@ -1,7 +1,7 @@ -import { Box, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, PopoverFooter } from '@chakra-ui/react'; +import { Box, Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverTrigger, useDisclosure } from '@chakra-ui/react'; import _debounce from 'lodash/debounce'; import { useRouter } from 'next/router'; -import type { FormEvent, FocusEvent } from 'react'; +import type { FocusEvent, FormEvent } from 'react'; import React from 'react'; import { Element } from 'react-scroll'; @@ -126,6 +126,7 @@ const SearchBar = ({ isHomepage }: Props) => { /> diff --git a/ui/snippets/searchBar/SearchBarInput.tsx b/ui/snippets/searchBar/SearchBarInput.tsx index 179a01a5cf..d9bd54dad4 100644 --- a/ui/snippets/searchBar/SearchBarInput.tsx +++ b/ui/snippets/searchBar/SearchBarInput.tsx @@ -1,7 +1,7 @@ -import { InputGroup, Input, InputLeftElement, Icon, chakra, useColorModeValue, forwardRef, InputRightElement } from '@chakra-ui/react'; +import { Icon, Input, InputGroup, InputLeftElement, InputRightElement, chakra, forwardRef, useColorModeValue } from '@chakra-ui/react'; import throttle from 'lodash/throttle'; +import type { ChangeEvent, FocusEvent, FormEvent } from 'react'; import React from 'react'; -import type { ChangeEvent, FormEvent, FocusEvent } from 'react'; import searchIcon from 'icons/search.svg'; import { useScrollDirection } from 'lib/contexts/scrollDirection'; @@ -85,7 +85,7 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid > - + { value && ( diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx index 255532b681..73c006ae3e 100644 --- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx +++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx @@ -1,7 +1,7 @@ import { Box, Tab, TabList, Tabs, Text, useColorModeValue } from '@chakra-ui/react'; import throttle from 'lodash/throttle'; import React from 'react'; -import { scroller, Element } from 'react-scroll'; +import { Element, scroller } from 'react-scroll'; import useIsMobile from 'lib/hooks/useIsMobile'; import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps'; @@ -116,7 +116,11 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props - { resultCategories.map((cat, index) => { cat.title }) } + { resultCategories.map((cat, index) => ( + { cat.title } + )) } diff --git a/ui/sol2uml/Sol2UmlDiagram.tsx b/ui/sol2uml/Sol2UmlDiagram.tsx index 6fd1423ba0..cb2c20f717 100644 --- a/ui/sol2uml/Sol2UmlDiagram.tsx +++ b/ui/sol2uml/Sol2UmlDiagram.tsx @@ -80,7 +80,7 @@ const Sol2UmlDiagram = ({ addressHash }: Props) => { } return ( - + ({ items, selectedId, onSelec - + ({ items, selectedId, onSelec { items.map((item) => ( { item.title } diff --git a/ui/token/TokenProjectInfo.tsx b/ui/token/TokenProjectInfo.tsx index 3a6bd3fee7..ae93af85d4 100644 --- a/ui/token/TokenProjectInfo.tsx +++ b/ui/token/TokenProjectInfo.tsx @@ -43,7 +43,7 @@ const TokenProjectInfo = ({ data }: Props) => { - + diff --git a/ui/tokens/Tokens.tsx b/ui/tokens/Tokens.tsx index 732a2c8512..0c1e4718f8 100644 --- a/ui/tokens/Tokens.tsx +++ b/ui/tokens/Tokens.tsx @@ -122,6 +122,7 @@ const Tokens = () => { onChange={ onSearchChange } placeholder="Token name or symbol" initialValue={ filter } + inputProps={{ borderColor: 'secondary_base' }} /> ); diff --git a/ui/tokens/TokensTable.tsx b/ui/tokens/TokensTable.tsx index 872a1796f6..e44923eb72 100644 --- a/ui/tokens/TokensTable.tsx +++ b/ui/tokens/TokensTable.tsx @@ -7,7 +7,7 @@ import rightArrowIcon from 'icons/arrows/east.svg'; import { default as getNextSortValueShared } from 'ui/shared/sort/getNextSortValue'; import { default as Thead } from 'ui/shared/TheadSticky'; -import type { TokensSortingValue, TokensSortingField } from './Tokens'; +import type { TokensSortingField, TokensSortingValue } from './Tokens'; import TokensTableItem from './TokensTableItem'; const SORT_SEQUENCE: Record> = { @@ -46,7 +46,8 @@ const TokensTable = ({ items, page, isLoading, sorting, setSorting }: Props) => - + { sorting?.includes('circulating_market_cap') && } On-chain market cap diff --git a/ui/tokens/TokensTableItem.tsx b/ui/tokens/TokensTableItem.tsx index 47913b69be..1fcadd3671 100644 --- a/ui/tokens/TokensTableItem.tsx +++ b/ui/tokens/TokensTableItem.tsx @@ -50,22 +50,25 @@ const TokensTableItem = ({ fontWeight={ 600 } mr={ 3 } minW="28px" + color="text" > { (page - 1) * PAGE_SIZE + index + 1 } - +
- +
- { type } + { type } @@ -88,6 +91,7 @@ const TokensTableItem = ({ lineHeight="24px" fontWeight={ 500 } display="inline-block" + color="text" > { Number(holders).toLocaleString() } diff --git a/ui/tx/TxDetails.tsx b/ui/tx/TxDetails.tsx index d24993980b..a0a40ce2fc 100644 --- a/ui/tx/TxDetails.tsx +++ b/ui/tx/TxDetails.tsx @@ -1,21 +1,21 @@ import { - Grid, - GridItem, - Text, + Alert, Box, + chakra, Icon as ChakraIcon, + Flex, + Grid, + GridItem, Link, + Skeleton, Spinner, - Flex, + Text, Tooltip, - chakra, useColorModeValue, - Skeleton, - Alert, } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; -import { scroller, Element } from 'react-scroll'; +import { Element, scroller } from 'react-scroll'; import { route } from 'nextjs-routes'; @@ -99,14 +99,14 @@ const TxDetails = () => { const actionsExist = data.actions && data.actions.length > 0; const executionSuccessBadge = toAddress?.is_contract && data.result === 'success' ? ( - + ) : null; const executionFailedBadge = toAddress?.is_contract && Boolean(data.status) && data.result !== 'success' ? ( - + @@ -174,14 +174,15 @@ const TxDetails = () => { { data.block === null ? Pending : ( - + { data.block } ) } { Boolean(data.confirmations) && ( <> - + { data.confirmations } Block confirmations @@ -194,11 +195,11 @@ const TxDetails = () => { hint="Date & time of transaction inclusion, including length of time for confirmation" isLoading={ isPlaceholderData } > - + { dayjs(data.timestamp).fromNow() } { dayjs(data.timestamp).format('llll') } - + { getConfirmationDuration(data.confirmation_duration) } @@ -223,8 +224,9 @@ const TxDetails = () => { >
- - + +
{ data.from.name && { data.from.name } } { addressFromTags.length > 0 && ( @@ -245,19 +247,20 @@ const TxDetails = () => { { data.to && data.to.hash ? (
- + { executionSuccessBadge } { executionFailedBadge } - +
) : ( [Contract - + created] { executionSuccessBadge } { executionFailedBadge } - + ) } { toAddress.name && } diff --git a/ui/tx/details/TxDetailsTokenTransfer.tsx b/ui/tx/details/TxDetailsTokenTransfer.tsx index dd15b1220e..3d2e839a45 100644 --- a/ui/tx/details/TxDetailsTokenTransfer.tsx +++ b/ui/tx/details/TxDetailsTokenTransfer.tsx @@ -1,7 +1,7 @@ import { Flex, Icon, Text } from '@chakra-ui/react'; import React from 'react'; -import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPayload, Erc1155TotalPayload } from 'types/api/tokenTransfer'; +import type { Erc1155TotalPayload, Erc20TotalPayload, Erc721TotalPayload, TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer'; import rightArrowIcon from 'icons/arrows/east.svg'; import { space } from 'lib/html-entities'; @@ -22,8 +22,8 @@ const TxDetailsTokenTransfer = ({ data }: Props) => { const total = data.total as Erc20TotalPayload; return ( - For:{ space } - + For:{ space } + { w="100%" > - - - + + + { content } diff --git a/ui/tx/state/utils.tsx b/ui/tx/state/utils.tsx index 7d727b57e3..37b7c85d5a 100644 --- a/ui/tx/state/utils.tsx +++ b/ui/tx/state/utils.tsx @@ -18,7 +18,8 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) { const tag = (() => { if (data.is_miner) { return ( - + { getNetworkValidatorTitle() } @@ -38,7 +39,8 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) { if (changeDirection) { const text = changeDirection === 'from' ? 'Mint' : 'Burn'; return ( - + { text } address ); diff --git a/ui/txs/TxAdditionalInfo.tsx b/ui/txs/TxAdditionalInfo.tsx index 8450dc7546..41622a04dd 100644 --- a/ui/txs/TxAdditionalInfo.tsx +++ b/ui/txs/TxAdditionalInfo.tsx @@ -1,11 +1,11 @@ import { Modal, - ModalContent, ModalCloseButton, + ModalContent, Popover, - PopoverTrigger, - PopoverContent, PopoverBody, + PopoverContent, + PopoverTrigger, useDisclosure, } from '@chakra-ui/react'; import React from 'react'; @@ -55,7 +55,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => { - + { content } diff --git a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx index fd03537a4b..baacc311b8 100644 --- a/ui/verifiedAddresses/VerifiedAddressesListItem.tsx +++ b/ui/verifiedAddresses/VerifiedAddressesListItem.tsx @@ -51,7 +51,7 @@ const VerifiedAddressesListItem = ({ item, application, onAdd, onEdit, isLoading return ( <> - + { item.metadata.tokenName && application && !isLoading ? ( - + { - const itemBgColor = useColorModeValue('blue.50', 'blue.800'); + const itemBgColor = useColorModeValue('#E9FFF4', '#2C2C2C'); return ( { { Number(total).toLocaleString() } { Number(new24) > 0 && ( <> - +{ Number(new24).toLocaleString() } + +{ Number(new24).toLocaleString() } (24h) ) } diff --git a/ui/verifiedContracts/VerifiedContractsFilter.tsx b/ui/verifiedContracts/VerifiedContractsFilter.tsx index 01915eca10..5fc55abf42 100644 --- a/ui/verifiedContracts/VerifiedContractsFilter.tsx +++ b/ui/verifiedContracts/VerifiedContractsFilter.tsx @@ -1,9 +1,9 @@ import { Menu, MenuButton, + MenuItemOption, MenuList, MenuOptionGroup, - MenuItemOption, useDisclosure, } from '@chakra-ui/react'; import React from 'react'; @@ -30,12 +30,20 @@ const VerifiedContractsFilter = ({ onChange, defaultValue, isActive }: Props) => as="div" /> - + - All - Solidity - Vyper - Yul + All + Solidity + Vyper + Yul diff --git a/ui/verifiedContracts/VerifiedContractsTable.tsx b/ui/verifiedContracts/VerifiedContractsTable.tsx index e485616dd4..491be6ae64 100644 --- a/ui/verifiedContracts/VerifiedContractsTable.tsx +++ b/ui/verifiedContracts/VerifiedContractsTable.tsx @@ -1,4 +1,4 @@ -import { Table, Tbody, Tr, Th, Link, Icon } from '@chakra-ui/react'; +import { Icon, Link, Table, Tbody, Th, Tr } from '@chakra-ui/react'; import React from 'react'; import type { VerifiedContract } from 'types/api/contracts'; @@ -26,13 +26,15 @@ const VerifiedContractsTable = ({ data, sort, onSortToggle, isLoading }: Props) Contract - + { sort?.includes('balance') && } Balance { config.chain.currency.symbol } - + { sort?.includes('txs') && } Txs diff --git a/ui/verifiedContracts/VerifiedContractsTableItem.tsx b/ui/verifiedContracts/VerifiedContractsTableItem.tsx index 657b629d0d..66e4c4e7f4 100644 --- a/ui/verifiedContracts/VerifiedContractsTableItem.tsx +++ b/ui/verifiedContracts/VerifiedContractsTableItem.tsx @@ -1,4 +1,4 @@ -import { Tr, Td, Flex, chakra, Tooltip, Skeleton } from '@chakra-ui/react'; +import { chakra, Flex, Skeleton, Td, Tooltip, Tr, useColorModeValue } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -21,6 +21,7 @@ interface Props { } const VerifiedContractsTableItem = ({ data, isLoading }: Props) => { + const iconBgColor = useColorModeValue('#F0F1F2', '#2C2C2C'); const balance = data.coin_balance && data.coin_balance !== '0' ? BigNumber(data.coin_balance).div(10 ** config.chain.currency.decimals).dp(6).toFormat() : '0'; @@ -29,9 +30,10 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => { - + - + @@ -60,24 +62,24 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => { - + { data.optimization_enabled ? - : + : } - + { data.has_constructor_args ? - : + : } - + { dayjs(data.verified_at).fromNow() }