Merge pull request #1 from neobase-one/feature/can-754-tuber-colorsch…

…eme-updates [WIP] ui: update tuber color schema
neobase-one · Dec 9, 2023 · 86c8e6d · 86c8e6d
2 parents d775f44 + 209c3c1
commit 86c8e6d
Show file tree

Hide file tree

Showing 120 changed files with 533 additions and 305 deletions.
diff --git 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<Array<ChainIndicatorId>>(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
@@ -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) => <Layout>{ page }</Layout>);
+
+  return (
+    <>
+      <Head>
+        <link rel="icon" sizes="32x32" type="image/png" href={ `/static/favicon-32x32-${ colorMode }.png` }/>
+        <link rel="icon" sizes="16x16" type="image/png"href={ `/static/favicon-16x16-${ colorMode }.png` }/>
+        <link rel="apple-touch-icon" sizes="180x180" href={ `/static/apple-touch-icon-${ colorMode }.png` }/>
+      </Head>
+
+      { getLayout(<Component { ...pageProps }/>) }
+    </>
+
+  );
+}
+
+function AppWrapper({ pageProps, ...props }: AppPropsWithLayout) {
   const queryClient = useQueryClientConfig();
 
   const handleError = React.useCallback((error: Error) => {
     Sentry.captureException(error);
   }, []);
 
-  const getLayout = Component.getLayout ?? ((page) => <Layout>{ page }</Layout>);
-
   return (
     <ChakraProvider theme={ theme } cookies={ pageProps.cookies }>
+
       <AppErrorBoundary
         { ...ERROR_SCREEN_STYLES }
         onError={ handleError }
@@ -56,7 +74,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
           <QueryClientProvider client={ queryClient }>
             <ScrollDirectionProvider>
               <SocketProvider url={ `${ config.api.socket }${ config.api.basePath }/socket/v2` }>
-                { getLayout(<Component { ...pageProps }/>) }
+                <MyApp pageProps={ pageProps } { ...props }/>
               </SocketProvider>
             </ScrollDirectionProvider>
             <ReactQueryDevtools/>
@@ -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
@@ -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"
           />
-          <link rel="icon" sizes="32x32" type="image/png" href="/static/favicon-32x32.png"/>
-          <link rel="icon" sizes="16x16" type="image/png"href="/static/favicon-16x16.png"/>
-          <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
           <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5"/>
           <meta property="og:title" content="Canto EVM Explorer"/>
           <meta

diff --git a/public/static/apple-touch-icon-dark.png b/public/static/apple-touch-icon-dark.png
diff --git a/public/static/apple-touch-icon-light.png b/public/static/apple-touch-icon-light.png
diff --git a/public/static/apple-touch-icon.png b/public/static/apple-touch-icon.png
diff --git a/public/static/favicon-16x16-dark.png b/public/static/favicon-16x16-dark.png
diff --git a/public/static/favicon-16x16-light.png b/public/static/favicon-16x16-light.png
diff --git a/public/static/favicon-16x16.png b/public/static/favicon-16x16.png
diff --git a/public/static/favicon-32x32-dark.png b/public/static/favicon-32x32-dark.png
diff --git a/public/static/favicon-32x32-light.png b/public/static/favicon-32x32-light.png
diff --git a/public/static/favicon-32x32.png b/public/static/favicon-32x32.png
diff --git a/theme/components/Heading.ts b/theme/components/Heading.ts
@@ -5,7 +5,7 @@ import { mode } from '@chakra-ui/theme-tools';
 const baseStyle: SystemStyleInterpolation = (props) => {
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 (
-    <Tooltip isDisabled={ !isMobile } label="Download CSV">
+    <Tooltip isDisabled={ !isMobile } label="Download CSV" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
       <LinkInternal
         className={ className }
         display="inline-flex"

diff --git a/ui/address/AddressTokenTransfers.tsx b/ui/address/AddressTokenTransfers.tsx
@@ -4,8 +4,8 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
-import { AddressFromToFilterValues } from 'types/api/address';
 import type { AddressFromToFilter, AddressTokenTransferResponse } from 'types/api/address';
+import { AddressFromToFilterValues } from 'types/api/address';
 import type { TokenType } from 'types/api/token';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
@@ -235,7 +235,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
       <Flex alignItems="center" py={ 1 }>
         <TokenLogo data={ tokenData } boxSize={ 6 } mr={ 2 }/>
         { isMobile ? <HashStringShorten hash={ tokenFilter }/> : tokenFilter }
-        <Tooltip label="Reset filter">
+        <Tooltip label="Reset filter" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
           <Flex>
             <Icon
               as={ crossIcon }

diff --git a/ui/address/AddressTxsFilter.tsx b/ui/address/AddressTxsFilter.tsx
@@ -34,11 +34,17 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
           as="div"
         />
       </MenuButton>
-      <MenuList zIndex={ 2 }>
-        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
-          <MenuItemOption value="all">All</MenuItemOption>
-          <MenuItemOption value="from">From</MenuItemOption>
-          <MenuItemOption value="to">To</MenuItemOption>
+      <MenuList zIndex={ 2 } bgColor="bg_base" borderColor="divider">
+        <MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange } >
+          <MenuItemOption value="all" bgColor="inherit" _hover={{
+            bgColor: 'divider',
+          }}>All</MenuItemOption>
+          <MenuItemOption value="from" bgColor="inherit" _hover={{
+            bgColor: 'divider',
+          }} >From</MenuItemOption>
+          <MenuItemOption value="to" bgColor="inherit" _hover={{
+            bgColor: 'divider',
+          }}>To</MenuItemOption>
         </MenuOptionGroup>
       </MenuList>
     </Menu>

diff --git 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
@@ -108,7 +108,7 @@ const ContractExternalLibraries = ({ className, data }: Props) => {
       <PopoverTrigger>
         { button }
       </PopoverTrigger>
-      <PopoverContent w="400px">
+      <PopoverContent w="400px" borderColor="divider" bgColor="bg_base">
         <PopoverBody >
           { content }
         </PopoverBody>

diff --git a/ui/address/contract/ContractMethodFieldZeroes.tsx b/ui/address/contract/ContractMethodFieldZeroes.tsx
@@ -84,7 +84,7 @@ const ContractMethodFieldZeroes = ({ onClick, isDisabled }: Props) => {
           </Button>
         </PopoverTrigger>
         <Portal>
-          <PopoverContent w="110px">
+          <PopoverContent w="110px" borderColor="divider" bgColor="bg_base">
             <PopoverBody py={ 2 }>
               <List>
                 { [ 8, 12, 16, 18, 20 ].map((id) => (

diff --git a/ui/address/contract/ContractMethodsAccordionItem.tsx b/ui/address/contract/ContractMethodsAccordionItem.tsx
@@ -47,7 +47,8 @@ const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, ind
       <Element as="h2" name={ 'method_id' in data ? `method_${ data.method_id }` : '' }>
         <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }} wordBreak="break-all" textAlign="left">
           { 'method_id' in data && (
-            <Tooltip label={ hasCopied ? 'Copied!' : 'Copy link' } isOpen={ isOpen || hasCopied } onClose={ onClose }>
+            <Tooltip label={ hasCopied ? 'Copied!' : 'Copy link' } isOpen={ isOpen || hasCopied } onClose={ onClose }
+              bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
               <Box
                 boxSize={ 5 }
                 color="text_secondary"

diff --git a/ui/address/contract/ContractSourceCode.tsx b/ui/address/contract/ContractSourceCode.tsx
@@ -100,7 +100,7 @@ const ContractSourceCode = ({ address, implementationAddress }: Props) => {
   })();
 
   const diagramLink = diagramLinkAddress ? (
-    <Tooltip label="Visualize contract code using Sol2Uml JS library">
+    <Tooltip label="Visualize contract code using Sol2Uml JS library" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
       <LinkInternal
         href={ route({ pathname: '/visualize/sol2uml', query: { address: diagramLinkAddress } }) }
         ml={{ base: '0', lg: 'auto' }}

diff --git a/ui/address/details/AddressFavoriteButton.tsx b/ui/address/details/AddressFavoriteButton.tsx
@@ -1,4 +1,4 @@
-import { Icon, chakra, Tooltip, IconButton, useDisclosure } from '@chakra-ui/react';
+import { Icon, IconButton, Tooltip, chakra, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -54,7 +54,8 @@ const AddressFavoriteButton = ({ className, hash, watchListId }: Props) => {
 
   return (
     <>
-      <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }>
+      <Tooltip label={ `${ watchListId ? 'Remove address from Watch list' : 'Add address to Watch list' }` }
+        bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
         <IconButton
           isActive={ Boolean(watchListId) }
           className={ className }

diff --git a/ui/address/details/AddressQrCode.tsx b/ui/address/details/AddressQrCode.tsx
@@ -57,14 +57,16 @@ const AddressQrCode = ({ hash, className, isLoading }: Props) => {
 
   return (
     <>
-      <Tooltip label="Click to view QR code">
+      <Tooltip label="Click to view QR code" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
         <IconButton
           className={ className }
           aria-label="Show QR code"
           variant="outline"
           size="sm"
           pl="6px"
           pr="6px"
+          color="accent"
+          borderColor="accent"
           onClick={ onOpen }
           icon={ <Icon as={ qrCodeIcon } boxSize={ 5 }/> }
         />

diff --git a/ui/address/tokenSelect/TokenSelect.tsx b/ui/address/tokenSelect/TokenSelect.tsx
@@ -86,7 +86,7 @@ const TokenSelect = ({ onClick }: Props) => {
         <TokenSelectMobile data={ data } isLoading={ tokensIsFetching === 1 }/> :
         <TokenSelectDesktop data={ data } isLoading={ tokensIsFetching === 1 }/>
       }
-      <Tooltip label="Show all tokens">
+      <Tooltip label="Show all tokens" bgColor="bg_base" color="text" borderWidth="1px" borderColor="divider">
         <Box>
           <NextLink href={{ pathname: '/address/[hash]', query: { hash: addressHash, tab: 'tokens' } }} passHref legacyBehavior>
             <IconButton

diff --git a/ui/address/tokenSelect/TokenSelectDesktop.tsx b/ui/address/tokenSelect/TokenSelectDesktop.tsx
@@ -24,7 +24,7 @@ const TokenSelectDesktop = ({ data, isLoading }: Props) => {
       <PopoverTrigger>
         <TokenSelectButton isOpen={ isOpen } onClick={ onToggle } data={ result.data } isLoading={ isLoading }/>
       </PopoverTrigger>
-      <PopoverContent w="355px" maxH="450px" overflowY="scroll">
+      <PopoverContent w="355px" maxH="450px" overflowY="scroll" borderColor="divider" bgColor="bg_base">
         <PopoverBody px={ 4 } py={ 6 } bgColor={ bgColor } boxShadow="2xl" >
           <TokenSelectMenu { ...result }/>
         </PopoverBody>

diff --git 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 (
     <ListItemMobile rowGap={ 3 }>
       <Flex alignItems="center" justifyContent="space-between" w="100%">
         <Address maxW="100%" mr={ 8 }>
-          <AddressIcon address={ item } mr={ 2 } isLoading={ isLoading }/>
+          <AddressIcon bgColor={ iconBgColor } address={ item } mr={ 2 } isLoading={ isLoading }/>
           <AddressLink
             fontWeight={ 700 }
             flexGrow={ 1 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ const global = (props: StyleFunctionProps) => ({ @@
       },
       form: {
         w: '100%',
+        colorSchema: 'auto',
       },
       ...scrollbar(props),
     });
@@ Expand Down @@