#191 Upgrade Chakra UI to v3 #221

nevendyulgerov · 2025-05-12T19:54:28Z

I upgraded chakra from v2 to v3. This required major changes in the UI code base in order for us to utilize the v3 components. Summary of the changes:

Removed v2 theme configs for components and replaced them with v3 recipes.
Remove obsolete npm packages.
Updated all pages to utilize the new v3 components.
Tweaked some chakra v3 components so they match the UI we used before (this includes local changes as well as global recipes).
Added npm script chakra-types for generating TS types for custom variants that we use in our codebase.
Added step in the CI build and Vercel build for running the chakra-types script.
Removed unused components and related unit tests and stories for them.
Added comments in the PR where additional context may be required for the reviewer to understand some changes.

vercel · 2025-05-12T19:54:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
staking	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2025 8:01pm

socket-security · 2025-05-12T19:55:48Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License

View full report

nevendyulgerov · 2025-05-12T19:59:51Z

.github/workflows/build.yml

@@ -16,6 +16,9 @@ jobs:
            - name: Install Dependencies
              run: yarn install --frozen-lockfile

+            - name: Install chakra-ui types


This step generates the custom chakra-ui variants. This is a prerequisite for a successful build as otherwise we'll get ts errors for invalid variants which will fail the build.

nevendyulgerov · 2025-05-12T20:00:14Z

__tests__/components/CTSIText.test.tsx


 describe('CTSI Text component', () => {
    it('Should render the formatted amount of CTSI', () => {
-        render(<CTSIText value="5000100000000000000000000" />);
+        render(<Component value="5000100000000000000000000" />);


I had to refactor some of the tested component so that they are always augmented with the chakra-ui context. Otherwise those tests were failing.

nevendyulgerov · 2025-05-12T20:00:38Z

__tests__/components/Card.test.tsx

+            userEvent.hover(icon);
+        });
+
+        await screen.findByText(tooltip);


The userEvent package is useful for interacting with tooltips, number inputs and similar composite components. The fireEvent api from react testing library doesn't trigger mouseover / change events for those components correctly.

nevendyulgerov · 2025-05-12T20:02:02Z

__tests__/components/Notification.test.tsx

        );

        expect(screen.getByText('Wallet is disconnected')).toBeInTheDocument();
        expect(screen.getByText('Connect To Wallet')).toBeInTheDocument();
    });
-
-    it('should display default accent colour and different accents based on status', () => {


This test was tightly coupled with the alert styles and was flaky between chakra v2 and v3. Also, it was just testing if chakra was correctly styling the Alert component based on the passed status. We can trust chakra to do its thing without us testing it. That's why I removed it.

nevendyulgerov · 2025-05-12T20:03:24Z

jest.config.js

@@ -38,7 +38,7 @@ module.exports = {
        '<rootDir>/.vscode/',
        '<rootDir>/public/',
    ],
-    testEnvironment: 'jsdom',
+    testEnvironment: './fixJSDOMEnvironment.ts',


This was required because jsdom was failing with errors for missing structuredClone function (introduced in node v17). The error caused all unit tests to fail.

nevendyulgerov · 2025-05-12T20:03:44Z

package.json

@@ -6,8 +6,8 @@
        "dev": "run-s db:dev:migrate next:dev",
        "build": "run-s db:prod:migrate next:build",
        "start": "next start",
-        "next:build": "next build",
-        "next:dev": "next dev",
+        "next:build": "npm run chakra-types && next build",


Running the chakra-types npm script is a requirement for the next build to succeed. I added it to the dev script also so that no ts errors, related to custom variants, are produced when you start your local dev environment.

nevendyulgerov · 2025-05-12T20:04:18Z

src/components/BigNumberTextV2.tsx

@@ -154,11 +154,11 @@ const BigNumberTextV2: FC<BigNumberTextV2Props> = (props) => {
                >
                    {valueLabel}
                </Heading>
-                {unit && value && (
+                {unitLabel !== '' && unit && value && (


This fixed an issue with short-circuiting that was causing unitLabels with 0 value to appear in this part of the UI.

nevendyulgerov · 2025-05-12T20:04:49Z

src/components/Card.tsx

@@ -118,7 +126,7 @@ export const Card = ({
                    <Button
                        data-testid="card-action-button"
                        ml={{ base: 0, lg: 2 }}
-                        colorScheme={colorScheme}
+                        colorPalette={colorScheme}


colorScheme is not replaced by colorPalette for all instances in the code.

nevendyulgerov · 2025-05-12T20:06:22Z

src/components/stake/StakePoolCommissions.tsx

-                ...lastValue,
-                ...data.stakingPoolFeeHistories,
-            ]);
+            setList((lastValue) =>


I noticed an issue with the fee histories when you disconnected and then reconnected your wallet. In this case the fee histories were being duplicated. This fixes the issue.

nevendyulgerov · 2025-05-12T20:06:43Z

src/styles/recipes/alert.ts

+import { defineSlo
8000
tRecipe } from '@chakra-ui/react';
+import { alertAnatomy } from '@chakra-ui/react/anatomy';
+
+export const alertRecipe = defineSlotRecipe({


I added a recipe for alerts so that the UI matches the one we used before.

nevendyulgerov · 2025-05-12T20:07:02Z

src/styles/recipes/radioGroup.ts

+import { defineSlotRecipe } from '@chakra-ui/react';
+import { radioGroupAnatomy } from '@chakra-ui/react/anatomy';
+
+export const radioGroupRecipe = defineSlotRecipe({


I added a recipe for radio inputs to match the UI we used before.

nevendyulgerov added 2 commits May 12, 2025 22:50

feat: Upgrade codebase to chakra v3

f9aa33f

feat: Update storybook stories

177148d

nevendyulgerov commented May 12, 2025

View reviewed changes

vercel bot deployed to Preview May 12, 2025 20:01 View deployment

nevendyulgerov commented May 12, 2025

View reviewed changes

nevendyulgerov requested review from brunomenezes and tuler May 12, 2025 20:08

nevendyulgerov self-assigned this May 12, 2025

nevendyulgerov added the type:feature new feature or improvement over an existing feature label May 12, 2025

nevendyulgerov marked this pull request as ready for review May 13, 2025 08:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#191 Upgrade Chakra UI to v3 #221

#191 Upgrade Chakra UI to v3 #221

#191 Upgrade Chakra UI to v3 #221

Are you sure you want to change the base?

#191 Upgrade Chakra UI to v3 #221

Conversation

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment