Merge pull request #5 from codingknite/explorer-pt3

chore: explorer changes pt3
weaveVM · Jul 1, 2024 · 09d8bd3 · 09d8bd3
2 parents 946e1fc + 5337c97
commit 09d8bd3
Show file tree

Hide file tree

Showing 21 changed files with 49 additions and 51 deletions.
diff --git a/configs/app/ui.ts b/configs/app/ui.ts
@@ -35,7 +35,8 @@ const defaultColorTheme = (() => {
 })();
 
 // 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 =
+  'radial-gradient(103.03% 103.03% at 0% 0%, rgba(0, 228, 146, 0.8) 0%, rgba(0, 150, 96, 0.8) 100%), var(--chakra-colors-green-700)';
 
 const UI = Object.freeze({
   sidebar: {

diff --git a/icons/networks/wvm-logo-dark-2.svg b/icons/networks/wvm-logo-dark-2.svg
diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts
@@ -90,6 +90,7 @@
 	| "networks/logo-placeholder"
 	| "networks/wvm-icon-dark"
 	| "networks/wvm-icon-light-2"
+	| "networks/wvm-logo-dark-2"
 	| "networks/wvm-logo-dark"
 	| "networks/wvm-logo-light"
 	| "nft_shield"

diff --git a/theme/components/Button/Button.ts b/theme/components/Button/Button.ts
@@ -51,15 +51,15 @@ const variantOutline = defineStyle((props) => {
   const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
   const activeColor = (() => {
     if (c === 'gray') {
-      return mode('blue.600', 'gray.50')(props);
+      return mode('brand.600', 'gray.50')(props);
     }
     if (c === 'gray-dark') {
-      return mode('blue.600', 'gray.50')(props);
+      return mode('brand.600', 'gray.50')(props);
     }
     if (c === 'blue') {
-      return mode('blue.600', 'gray.50')(props);
+      return mode('brand.600', 'gray.50')(props);
     }
-    return 'blue.600';
+    return 'brand.600';
   })();
 
   return {

diff --git a/theme/components/Menu.ts b/theme/components/Menu.ts
@@ -31,7 +31,7 @@ const baseStyleItem = defineStyle({
     },
   },
   _hover: {
-    [$bg.variable]: 'colors.blue.50',
+    [$bg.variable]: 'colors.brand.50',
     _dark: {
       [$bg.variable]: 'colors.whiteAlpha.100',
     },

diff --git a/theme/components/Tabs.ts b/theme/components/Tabs.ts
@@ -13,12 +13,12 @@ const variantSoftRounded = definePartsStyle((props) => {
     tab: {
       borderRadius: 'base',
       fontWeight: '600',
-      color: mode('blue.700', 'gray.400')(props),
+      color: mode('brand.700', 'gray.400')(props),
       _selected: {
-        color: mode('blue.700', 'gray.50')(props),
-        bg: mode('blue.50', 'gray.800')(props),
+        color: mode('brand.700', 'gray.50')(props),
+        bg: mode('brand.50', 'gray.800')(props),
         _hover: {
-          color: mode('blue.700', 'gray.50')(props),
+          color: mode('brand.700', 'gray.50')(props),
         },
       },
       _hover: {

diff --git a/theme/components/Tooltip/Tooltip.ts b/theme/components/Tooltip/Tooltip.ts
@@ -8,8 +8,8 @@ const $arrowBg = cssVar('popper-arrow-bg');
 
 const variantNav = defineStyle((props) => {
   return {
-    bg: mode('blue.50', 'gray.800')(props),
-    color: 'blue.400',
+    bg: mode('brand.50', 'gray.800')(props),
+    color: 'brand.400',
     padding: '15px 12px',
     minWidth: '120px',
     borderRadius: 'base',

diff --git a/theme/foundations/colors.ts b/theme/foundations/colors.ts
@@ -1,4 +1,16 @@
 const colors = {
+  brand: {
+    '50': '#edfff8',
+    '100': '#d5fff0',
+    '200': '#aeffe2',
+    '300': '#70ffcd',
+    '400': '#2bfdb1',
+    '500': '#00e492',
+    '600': '#00c076',
+    '700': '#009660',
+    '800': '#06754e',
+    '900': '#076042',
+  },
   green: {
     '100': '#C6F6D5',
     '400': '#48BB78',

diff --git a/theme/foundations/semanticTokens.ts b/theme/foundations/semanticTokens.ts
@@ -13,11 +13,11 @@ const semanticTokens = {
       _dark: 'gray.400',
     },
     link: {
-      'default': 'blue.600',
-      _dark: 'blue.300',
+      'default': 'brand.600',
+      _dark: 'brand.400',
     },
     link_hovered: {
-      'default': 'blue.400',
+      'default': 'brand.700',
     },
     error: {
       'default': 'red.400',

diff --git a/theme/globals/address-entity.ts b/theme/globals/address-entity.ts
@@ -16,10 +16,10 @@ const styles = (props: StyleFunctionProps) => {
           width: `100%`,
           height: '100%',
           borderRadius: 'base',
-          borderColor: mode('blue.200', 'blue.600')(props),
+          borderColor: mode('brand.200', 'brand.600')(props),
           borderWidth: '1px',
           borderStyle: 'dashed',
-          bgColor: mode('blue.50', 'blue.900')(props),
+          bgColor: mode('brand.50', 'brand.900')(props),
           zIndex: -1,
         },
       },

diff --git a/ui/address/contract/ContractCode.tsx b/ui/address/contract/ContractCode.tsx
@@ -114,6 +114,7 @@ const ContractCode = ({ addressHash, contractQuery, channel }: Props) => {
       ml={ data?.is_partially_verified ? 0 : 'auto' }
       flexShrink={ 0 }
       as="a"
+      colorScheme="brand"
       href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }
     >
         Verify & publish

diff --git a/ui/contractVerification/ContractVerificationForm.tsx b/ui/contractVerification/ContractVerificationForm.tsx
@@ -201,6 +201,7 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
             mt={ 12 }
             isLoading={ formState.isSubmitting }
             loadingText="Verify & publish"
+            colorScheme="brand"
           >
             Verify & publish
           </Button>

diff --git a/ui/home/StatsItem.tsx b/ui/home/StatsItem.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import breakpoints from 'theme/foundations/breakpoints';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
-import useThemeColors from 'ui/shared/monaco/utils/useThemeColors';
 
 type Props = {
   icon: IconName;
@@ -20,7 +19,6 @@ type Props = {
 const LARGEST_BREAKPOINT = '1240px';
 
 const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: Props) => {
-  const themeColors = useThemeColors();
 
   const sxContainer: SystemStyleObject = {
     [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { flexDirection: 'column' },
@@ -30,7 +28,7 @@ const StatsItem = ({ icon, title, value, className, tooltip, url, isLoading }: P
     [`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`]: { alignItems: 'center' },
   };
 
-  const bgColor = useColorModeValue(themeColors['primary.50'], 'whiteAlpha.100');
+  const bgColor = useColorModeValue('brand.50', 'whiteAlpha.100');
   const loadingBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (

diff --git a/ui/home/indicators/ChainIndicatorChart.tsx b/ui/home/indicators/ChainIndicatorChart.tsx
@@ -18,7 +18,7 @@ const CHART_MARGIN = { bottom: 5, left: 10, right: 10, top: 0 };
 
 const ChainIndicatorChart = ({ data }: Props) => {
   const overlayRef = React.useRef<SVGRectElement>(null);
-  const lineColor = useToken('colors', 'blue.500');
+  const lineColor = useToken('colors', 'brand.600');
 
   const axesConfig = React.useMemo(() => {
     return {

diff --git a/ui/shared/AppError/AppError.tsx b/ui/shared/AppError/AppError.tsx
@@ -84,6 +84,7 @@ const AppError = ({ error, className }: Props) => {
               variant="outline"
               as="a"
               href={ route({ pathname: '/' }) }
+              colorScheme="brand"
             >
                 Back to home
             </Button>

diff --git a/ui/shared/AppError/custom/AppErrorTxNotFound.tsx b/ui/shared/AppError/custom/AppErrorTxNotFound.tsx
@@ -59,6 +59,7 @@ const AppErrorTxNotFound = () => {
         variant="outline"
         as="a"
         href={ route({ pathname: '/' }) }
+        colorScheme="brand"
       >
         Back to home
       </Button>

diff --git 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: 'brand.500',
           borderRadius: 'full',
         }}
       />

diff --git a/ui/shared/monaco/utils/themes.ts b/ui/shared/monaco/utils/themes.ts
@@ -3,18 +3,6 @@ export const light = {
   inherit: true,
   rules: [],
   colors: {
-    // wvm color palette
-    'primary.50': '#edfff8',
-    'primary.100': '#d5fff0',
-    'primary.200': '#aeffe2',
-    'primary.300': '#70ffcd',
-    'primary.400': '#2bfdb1',
-    'primary.500': '#00e492',
-    'primary.600': '#00c076',
-    'primary.700': '#009660',
-    'primary.800': '#06754e',
-    'primary.900': '#076042',
-    'primary.950': '#003724',
     'editor.background': '#f5f5f6',
     'editorWidget.background': '#f5f5f6',
 
@@ -59,19 +47,6 @@ export const dark = {
   inherit: true,
   rules: [],
   colors: {
-    // wvm color palette
-    'primary.50': '#edfff8',
-    'primary.100': '#d5fff0',
-    'primary.200': '#aeffe2',
-    'primary.300': '#70ffcd',
-    'primary.400': '#2bfdb1',
-    'primary.500': '#00e492',
-    'primary.600': '#00c076',
-    'primary.700': '#009660',
-    'primary.800': '#06754e',
-    'primary.900': '#076042',
-    'primary.950': '#003724',
-
     'editor.background': '#1a1b1b',
     'editorWidget.background': '#1a1b1b',
 

diff --git a/ui/snippets/networkMenu/NetworkLogo.tsx b/ui/snippets/networkMenu/NetworkLogo.tsx
@@ -36,7 +36,7 @@ const LogoFallback = ({
 
   const logoPath =
     colorMode === 'light' ?
-      'networks/wvm-logo-dark' :
+      'networks/wvm-logo-dark-2' :
       'networks/wvm-logo-light';
 
   const display = isSmall ?

diff --git a/ui/snippets/profileMenu/ProfileMenuDesktop.tsx b/ui/snippets/profileMenu/ProfileMenuDesktop.tsx
@@ -87,7 +87,9 @@ const ProfileMenuDesktop = ({ isHomePage, className, fallbackIconSize }: Props)
               aria-label="profile menu"
               icon={ <UserAvatar size={ 20 } fallbackIconSize={ fallbackIconSize }/> }
               variant={ variant }
-              colorScheme="blue"
+              bg="brand.900"
+              _hover={{ bg: 'brand.800' }}
+              _active={{ bg: 'brand.800' }}
               boxSize="40px"
               flexShrink={ 0 }
               { ...iconButtonProps }

diff --git a/ui/snippets/walletMenu/WalletMenuDesktop.tsx b/ui/snippets/walletMenu/WalletMenuDesktop.tsx
@@ -39,7 +39,7 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
     const backgroundColor = isAutoConnectDisabled ? themedBackgroundOrange : themedBackground;
     const color = isAutoConnectDisabled ? themedColorForOrangeBg : themedColor;
     buttonStyles = {
-      bg: isHomePage ? 'blue.50' : backgroundColor,
+      bg: isHomePage ? 'brand.50' : backgroundColor,
       color: isHomePage ? 'blackAlpha.800' : color,
       _hover: {
         color: isHomePage ? 'blackAlpha.800' : color,
@@ -80,7 +80,9 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
             <Button
               className={ className }
               variant={ variant }
-              colorScheme="blue"
+              bg="brand.900"
+              _hover={{ bg: 'brand.800' }}
+              _active={{ bg: 'brand.800' }}
               flexShrink={ 0 }
               isLoading={ (isModalOpening || isModalOpen) && !isWalletConnected }
               loadingText="Connect wallet"