Bump Chakra UI to v3.33.0 (#3292)

* Bump Chakra UI to v3.33.0

* disable typescript for ChakraCheckboxGroup ref prop

* fix button component

* change default value of SSR flag in useIsMobile hook

* some screenshot updates

* rollback screenshot

icons/navigation/ecosystems.svg

@@ -1,4 +1,4 @@
 <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.547 21.698c.65.545 1.38.996 2.171 1.334l-.165.54-.466 1.363A10.743 10.743 0 0 1 7.57 22.6l1.026-.22.056-.01.054-.018.078-.026.047-.015.047-.02a1.46 1.46 0 0 0 .668-.594Zm10.952.2c.346.587.84 1.077 1.428 1.42a10.723 10.723 0 0 1-2.716 1.616l-.467-1.363-.166-.54a8.72 8.72 0 0 0 1.92-1.133Zm5.225-8.712c.1.59.157 1.196.157 1.814 0 .46-.034.914-.09 1.36a3.96 3.96 0 0 0-1.657-.458l-.205-.004c-.031 0-.063 0-.094.002a8.816 8.816 0 0 0-.028-2.017l1.917-.697Zm-21.22.453c.443.235.935.389 1.458.442l.051.004.3.016h.053l.095-.001a8.846 8.846 0 0 0-.015 1.597l-1.973.421a10.835 10.835 0 0 1 .031-2.48Zm7.05-7.21.165.538A8.723 8.723 0 0 0 9.796 8.1 4.002 4.002 0 0 0 8.369 6.68c.815-.665 1.73-1.211 2.718-1.615l.466 1.365Zm7.657-1.364a10.734 10.734 0 0 1 3.088 1.933l-1.473.536c-.226.083-.42.216-.573.382a8.72 8.72 0 0 0-1.675-.95l.166-.536.467-1.365ZM16.842 21.766a.63.63 0 0 1 .525.268l.046.076.006.013.026.065.004.009.003.008.496 1.599.55 1.588.025.1a.626.626 0 0 1-.26.615l-1.386.966-1.353 1.003a.632.632 0 0 1-.664.054l-.087-.053-1.352-1.004-1.387-.966a.624.624 0 0 1-.234-.715l.549-1.588.497-1.599.006-.017.027-.065.006-.013a.628.628 0 0 1 .571-.344l1.692.024 1.694-.024Zm-1.664 1.682-.018.002h-.021l-.02-.002-.908-.013-.268.864-.002.004-.012.037v.002l-.296.854.747.52.004.001.03.023.002.002.732.543.733-.544.002-.001.031-.023.003-.002.745-.52-.294-.853v-.002l-.012-.037-.002-.004-.27-.864-.906.013Zm8.795-6.707c1.732 0 3.142 1.392 3.142 3.113v.01l-.015.298-.001.01c-.162 1.571-1.502 2.795-3.126 2.795h-.01l-.3-.015h-.01c-1.583-.16-2.822-1.485-2.822-3.098 0-1.72 1.409-3.112 3.142-3.113Zm-16.575-.377c.281-.003.539.19.601.477l.855 3.957.001.01.001.01.01.08.001.01v.011a.606.606 0 0 1-.365.559l-.009.004-.01.003-.078.025-.01.004-.01.002-3.996.846-.022.004-.082.007-.009.001h-.008a.612.612 0 0 1-.563-.362l-.004-.009-.003-.01-.025-.077-.003-.01-.002-.01-.855-3.955a.606.606 0 0 1 .47-.719l3.994-.846.011-.002h.01l.082-.01H7.398ZM23.973 18.4c-.814 0-1.47.652-1.47 1.453 0 .8.656 1.455 1.47 1.455s1.471-.654 1.471-1.455-.657-1.453-1.471-1.453Zm-19.303.223.408 1.895 1.918-.406-.408-1.894-1.918.405Zm20.435-11.67c.279-.04.56.116.662.392l1.397 3.8.003.01.003.011.02.08.002.008.001.01a.606.606 0 0 1-.284.605l-.008.005-.008.004-.074.035-.01.005-.01.004-3.839 1.384-.01.003-.009.002-.08.02-.01.003-.011.002a.612.612 0 0 1-.606-.282l-.006-.009-.004-.01-.035-.072-.004-.009-.004-.01-1.398-3.801a.604.604 0 0 1 .364-.776l3.84-1.383.008-.003.01-.002.079-.02.01-.004.011-.002Zm-18.783.079c1.733 0 3.142 1.391 3.143 3.112v.01l-.016.298v.01c-.162 1.571-1.502 2.795-3.127 2.795h-.01l-.3-.015-.01-.002c-1.582-.159-2.82-1.483-2.82-3.096 0-1.72 1.408-3.112 3.14-3.112Zm0 1.658c-.813 0-1.47.653-1.47 1.454l.008.148c.076.732.7 1.306 1.462 1.307.814 0 1.472-.654 1.472-1.455l-.008-.149a1.466 1.466 0 0 0-1.464-1.305Zm16.396.876.668 1.82 1.843-.663-.67-1.82-1.841.663ZM14.859 1.87a.632.632 0 0 1 .665.054l1.358 1.008 1.382.962c.227.16.325.45.234.715l-.55 1.589-.496 1.598-.003.009-.004.009-.026.064-.003.006-.004.007a.63.63 0 0 1-.57.345l-1.694-.027-1.692.027a.63.63 0 0 1-.571-.345l-.003-.006-.003-.007-.027-.064-.006-.018-.497-1.598-.55-1.59a.624.624 0 0 1 .235-.714l1.382-.962 1.357-1.008.086-.054Zm-.443 2.39-.002.001-.03.023-.004.002-.747.518.296.855.012.039.002.003.268.864.916-.013H15.17l.914.013.27-.864.002-.003.012-.038.294-.856-.745-.518-.003-.002-.031-.023h-.002l-.733-.546-.732.545Z" fill="currentColor"/>
+  <path d="M9.547 21.698c.65.545 1.38.996 2.171 1.334l-.165.54-.466 1.363A10.743 10.743 0 0 1 7.57 22.6l1.026-.22.056-.01.054-.018.078-.026.047-.015.047-.02a1.46 1.46 0 0 0 .668-.594Zm10.952.2c.346.587.84 1.077 1.428 1.42a10.723 10.723 0 0 1-2.716 1.616l-.467-1.363-.166-.54a8.72 8.72 0 0 0 1.92-1.133Zm5.225-8.712c.1.59.157 1.196.157 1.814 0 .46-.034.914-.09 1.36a3.96 3.96 0 0 0-1.657-.458l-.205-.004c-.031 0-.063 0-.094.002a8.816 8.816 0 0 0-.028-2.017l1.917-.697Zm-21.22.453c.443.235.935.389 1.458.442l.051.004.3.016h.053l.095-.001a8.846 8.846 0 0 0-.015 1.597l-1.973.421a10.835 10.835 0 0 1 .031-2.48Zm7.05-7.21.165.538A8.723 8.723 0 0 0 9.796 8.1a4.002 4.002 0 0 0-1.427-1.42 10.712 10.712 0 0 1 2.718-1.615l.466 1.365Zm7.657-1.364a10.734 10.734 0 0 1 3.088 1.933l-1.473.536c-.226.083-.42.216-.573.382a8.72 8.72 0 0 0-1.675-.95l.166-.536.467-1.365Zm-2.369 16.701a.63.63 0 0 1 .525.268l.046.076.006.013.026.065.004.009.003.008.496 1.599.55 1.588.025.1a.626.626 0 0 1-.26.615l-1.386.966-1.353 1.003a.632.632 0 0 1-.664.054l-.087-.053-1.352-1.004-1.387-.966a.624.624 0 0 1-.234-.715l.549-1.588.497-1.599.006-.017.027-.065.006-.013a.628.628 0 0 1 .571-.344l1.692.024 1.694-.024Zm-1.664 1.682-.018.002h-.021l-.02-.002-.908-.013-.268.864-.002.004-.012.037v.002l-.296.854.747.52.004.001.03.023.002.002.732.543.733-.544.002-.001.031-.023.003-.002.745-.52-.294-.853v-.002l-.012-.037-.002-.004-.27-.864-.906.013Zm8.795-6.707c1.732 0 3.142 1.392 3.142 3.113v.01l-.015.298-.001.01a3.134 3.134 0 0 1-3.126 2.795h-.01l-.3-.015h-.01c-1.583-.16-2.822-1.485-2.822-3.098 0-1.72 1.409-3.112 3.142-3.113Zm-16.575-.377a.608.608 0 0 1 .601.477l.855 3.957.001.01.001.01.01.08.001.01v.011a.606.606 0 0 1-.365.559l-.009.004-.01.003-.078.025-.01.004-.01.002-3.996.846-.022.004-.082.007-.009.001h-.008a.612.612 0 0 1-.563-.362l-.004-.009-.003-.01-.025-.077-.003-.01-.002-.01-.855-3.955a.606.606 0 0 1 .47-.719l3.994-.846.011-.002h.01l.082-.01h.018ZM23.973 18.4c-.814 0-1.47.652-1.47 1.453 0 .8.656 1.455 1.47 1.455s1.471-.654 1.471-1.455-.657-1.453-1.471-1.453Zm-19.303.223.408 1.895 1.918-.406-.408-1.894-1.918.405Zm20.435-11.67c.279-.04.56.116.662.392l1.397 3.8.003.01.003.011.02.08.002.008.001.01a.606.606 0 0 1-.284.605l-.008.005-.008.004-.074.035-.01.005-.01.004-3.839 1.384-.01.003-.009.002-.08.02-.01.003-.011.002a.612.612 0 0 1-.606-.282l-.006-.009-.004-.01-.035-.072-.004-.009-.004-.01-1.398-3.801a.604.604 0 0 1 .364-.776l3.84-1.383.008-.003.01-.002.079-.02.01-.004.011-.002Zm-18.783.079c1.733 0 3.142 1.391 3.143 3.112v.01l-.016.298v.01c-.162 1.571-1.502 2.795-3.127 2.795h-.01l-.3-.015-.01-.002c-1.582-.159-2.82-1.483-2.82-3.096 0-1.72 1.408-3.112 3.14-3.112Zm0 1.658c-.813 0-1.47.653-1.47 1.454l.008.148c.076.732.7 1.306 1.462 1.307.814 0 1.472-.654 1.472-1.455l-.008-.149A1.466 1.466 0 0 0 6.322 8.69Zm16.396.876.668 1.82 1.843-.663-.67-1.82-1.841.663ZM14.859 1.87a.632.632 0 0 1 .665.054l1.358 1.008 1.382.962c.227.16.325.45.234.715l-.55 1.589-.496 1.598-.003.009-.004.009-.026.064-.003.006-.004.007a.63.63 0 0 1-.57.345l-1.694-.027-1.692.027a.63.63 0 0 1-.571-.345l-.003-.006-.003-.007-.027-.064-.006-.018-.497-1.598-.55-1.59a.624.624 0 0 1 .235-.714l1.382-.962 1.357-1.008.086-.054Zm-.443 2.39-.002.001-.03.023-.004.002-.747.518.296.855.012.039.002.003.268.864.916-.013h.043l.914.013.27-.864.002-.003.012-.038.294-.856-.745-.518-.003-.002-.031-.023h-.002l-.733-.546-.732.545Z" fill="currentColor"/>
   <path d="M15.849 11.905a1.3 1.3 0 0 0 .739.307l1.11.089.09 1.111a1.3 1.3 0 0 0 .307.74l.722.848-.722.849a1.3 1.3 0 0 0-.295.637l-.012.102-.09 1.11-1.11.09a1.3 1.3 0 0 0-.66.243l-.08.064-.848.722-.849-.722-.08-.064a1.3 1.3 0 0 0-.659-.243l-1.111-.09-.09-1.11a1.3 1.3 0 0 0-.306-.74L11.182 15l.723-.849a1.3 1.3 0 0 0 .307-.739l.089-1.111 1.111-.09a1.3 1.3 0 0 0 .74-.306l.848-.723.849.723Z" stroke="currentColor" stroke-width="1.8"/>
 </svg>

lib/hooks/useIsMobile.tsx

@@ -1,5 +1,9 @@
 import { useBreakpointValue } from '@chakra-ui/react';
 
-export default function useIsMobile(ssr = true) {
+// The default behavior of useBreakpointValue was changed in the commit - https://github.com/chakra-ui/chakra-ui/commit/7f30a7b7eebae236b55fe639a202bbf354677143
+// So, with ssr = true during the initial render it will return base value
+// which can cause issues in some components (for example, in AdaptiveTabs while calculating tabs cut)
+// Since we don't use SSR in our project, the default value should be false
+export default function useIsMobile(ssr = false) {
   return useBreakpointValue({ base: true, lg: false }, { ssr });
 }

package.json

@@ -51,7 +51,7 @@
     "@blockscout/tac-operation-lifecycle-types": "0.0.1-alpha.6",
     "@blockscout/visualizer-types": "0.2.0",
     "@blockscout/zetachain-cctx-types": "^1.0.0-rc.6",
-    "@chakra-ui/react": "3.15.0",
+    "@chakra-ui/react": "3.33.0",
     "@dynamic-labs/ethereum": "4.52.2",
     "@dynamic-labs/sdk-react-core": "4.52.2",
     "@dynamic-labs/wagmi-connector": "4.52.2",
@@ -138,7 +138,7 @@
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "3.30.0",
+    "@chakra-ui/cli": "3.33.0",
     "@eslint/compat": "1.2.2",
     "@eslint/js": "9.14.0",
     "@next/eslint-plugin-next": "15.0.3",

toolkit/chakra/button.tsx

@@ -1,10 +1,7 @@
 import type { ButtonProps as ChakraButtonProps, ButtonGroupProps as ChakraButtonGroupProps } from '@chakra-ui/react';
 import {
-  AbsoluteCenter,
   Button as ChakraButton,
   ButtonGroup as ChakraButtonGroup,
-  Span,
-  Spinner,
 } from '@chakra-ui/react';
 import * as React from 'react';
 
@@ -24,31 +21,7 @@ export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, ref) {
-    const { loading, disabled, loadingText, children, expanded, selected, highlighted, loadingSkeleton = false, ...rest } = props;
-
-    const content = (() => {
-      if (loading && !loadingText) {
-        return (
-          <>
-            <AbsoluteCenter display="inline-flex">
-              <Spinner size="inherit" color="inherit"/>
-            </AbsoluteCenter>
-            <Span opacity={ 0 }>{ children }</Span>
-          </>
-        );
-      }
-
-      if (loading && loadingText) {
-        return (
-          <>
-            <Spinner size="inherit" color="inherit"/>
-            { loadingText }
-          </>
-        );
-      }
-
-      return children;
-    })();
+    const { loading, disabled, children, expanded, selected, highlighted, loadingSkeleton = false, ...rest } = props;
 
     return (
       <Skeleton loading={ loadingSkeleton } asChild ref={ ref as React.ForwardedRef<HTMLDivElement> }>
@@ -56,12 +29,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           { ...(expanded ? { 'data-expanded': true } : {}) }
           { ...(selected ? { 'data-selected': true } : {}) }
           { ...(highlighted ? { 'data-highlighted': true } : {}) }
-          { ...(loading ? { 'data-loading': true } : {}) }
           { ...(loadingSkeleton ? { 'data-loading-skeleton': true } : {}) }
           disabled={ !loadingSkeleton && (loading || disabled) }
+          loading={ loading }
           { ...rest }
         >
-          { content }
+          { children }
         </ChakraButton>
       </Skeleton>
     );

toolkit/chakra/checkbox.tsx

@@ -35,6 +35,7 @@ export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps
     const { children, orientation = 'vertical', ...rest } = props;
     return (
       <ChakraCheckboxGroup
+        // @ts-ignore: ChakraCheckboxGroup is not typed correctly
         ref={ ref }
         orientation={ orientation }
         display="flex"

toolkit/package/README.md

@@ -32,7 +32,7 @@ Ensure you have the following peer dependencies installed:
 {
   "dependencies": {
     "@blockscout/ui-toolkit": "latest",
-    "@chakra-ui/react": ">=3.15.0",
+    "@chakra-ui/react": ">=3.33.0",
     "@emotion/react": ">=11.14.0",
     "@uidotdev/usehooks": ">=2.4.1",
     "d3": ">=7.6.1",
@@ -46,7 +46,7 @@ Ensure you have the following peer dependencies installed:
     "react-hook-form": ">=7.52.1"
   },
   "devDependencies": {
-    "@chakra-ui/cli": ">=3.15.0",
+    "@chakra-ui/cli": ">=3.33.0",
     "@types/node": "^20",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",

toolkit/package/package.json

@@ -41,7 +41,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=3.15.0",
+    "@chakra-ui/react": ">=3.33.0",
     "@emotion/react": ">=11.14.0",
     "next": ">=15.2.3",
     "next-themes": ">=0.4.4",

ui/address/mud/AddressMudRecordsTable.tsx

@@ -49,7 +49,7 @@ const AddressMudRecordsTable = ({
   hash,
 }: Props) => {
   const totalColsCut = data.schema.key_names.length + data.schema.value_names.length;
-  const isMobile = useIsMobile(false);
+  const isMobile = useIsMobile();
   const [ colsCutCount, setColsCutCount ] = React.useState<number>(isMobile ? MIN_CUT_COUNT : 0);
   const [ isOpened, setIsOpened ] = React.useState(false);
   const [ hasCut, setHasCut ] = React.useState(isMobile ? totalColsCut > MIN_CUT_COUNT : true);

ui/shared/sort/Sort.tsx

@@ -14,7 +14,7 @@ export interface Props extends SelectRootProps {
 
 const Sort = (props: Props) => {
   const { collection, isLoading, ...rest } = props;
-  const isMobile = useIsMobile(false);
+  const isMobile = useIsMobile();
   const isInitialLoading = useIsInitialLoading(isLoading);
 
   const trigger = (() => {

ui/snippets/topBar/GetGasButton.tsx

@@ -11,7 +11,7 @@ import { Link } from 'toolkit/chakra/link';
 const getGasFeature = config.features.getGasButton;
 
 const GetGasButton = () => {
-  const isMobile = useIsMobile(false);
+  const isMobile = useIsMobile();
 
   const onGetGasClick = React.useCallback(() => {
     mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Get gas', Source: 'address' });