Merge branch 'main' into dependabot/github_actions/minor-and-patch-00a0d7aaea

Author: milosh86

.changeset/evm-stringent-abi-validation.md

@@ -0,0 +1,5 @@
+---
+"@aragon/gov-ui-kit": minor
+---
+
+Enforce EVM-stringent validation on `ProposalActionsDecoder` inputs: validate signed `int*` values (previously unvalidated), check that numeric values fit the bit-width of their type (e.g. `uint8` must be 0-255), verify EIP-55 address checksums (all-lowercase addresses are still accepted), and strip negative signs from unsigned number inputs. Adds `signedNumber` and `numberRange` messages to the `proposalActionsDecoder.validation` copy.

.changeset/giant-oranges-like.md

@@ -0,0 +1,5 @@
+---
+"@aragon/gov-ui-kit": patch
+---
+
+Fix SVG build config with missing `prefixIds` plugin

.storybook/main.ts

@@ -5,6 +5,7 @@ import type { RollupOptions } from 'rollup';
 import { mergeConfig } from 'vite';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import svgr from 'vite-plugin-svgr';
+import svgoConfig from '../svgo.config.js';
 
 const config: StorybookConfig = {
     stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.@(md|mdx)'],
@@ -24,7 +25,12 @@ const config: StorybookConfig = {
     viteFinal: (viteConfig) => {
         // Add source-map-js alias and plugins for importing svg files and copying fonts
         const plugins = [
-            svgr({ include: '**/*.svg' }),
+            // Run the same SVGO pass (including id namespacing, see svgo.config.js) as the
+            // published library build, so Storybook previews match production markup.
+            svgr({
+                include: '**/*.svg',
+                svgrOptions: { plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], svgoConfig },
+            }),
             viteStaticCopy({ targets: [{ src: './src/theme/fonts/*.ttf', dest: './fonts' }] }),
         ];
         const resolve = { alias: { 'source-map-js': 'source-map' } };

package.json

@@ -104,6 +104,8 @@
         "@rollup/plugin-typescript": "^12.3.0",
         "@storybook/addon-docs": "^10.4.6",
         "@storybook/react-vite": "^10.4.6",
+        "@svgr/plugin-jsx": "^8.1.0",
+        "@svgr/plugin-svgo": "^8.1.0",
         "@svgr/rollup": "^8.1.0",
         "@tailwindcss/postcss": "^4.3.1",
         "@tailwindcss/typography": "^0.5.20",
@@ -133,6 +135,7 @@
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-visualizer": "^7.0.1",
         "storybook": "^10.4.6",
+        "svgo": "^3.3.3",
         "tailwindcss": "^4.3.1",
         "ts-jest": "^29.4.11",
         "tslib": "^2.8.1",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ import svgr from '@svgr/rollup';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 import { visualizer } from 'rollup-plugin-visualizer';
+import svgoConfig from './svgo.config.js';
 
 const require = createRequire(import.meta.url);
 const tsConfig = require('./tsconfig.json');
@@ -52,19 +53,7 @@ export default [
                 ],
             }),
             images({ include: ['**/*.png', '**/*.jpg'] }),
-            svgr({
-                // Keep the viewBox so icons scale instead of getting clipped when
-                // rendered at a size other than their intrinsic 16px (e.g. size-3 in
-                // small buttons). SVGO's preset-default removes it by default.
-                svgoConfig: {
-                    plugins: [
-                        {
-                            name: 'preset-default',
-                            params: { overrides: { removeViewBox: false } },
-                        },
-                    ],
-                },
-            }),
+            svgr({ svgoConfig }),
             terser(),
         ],
     },

rollup.config.mjs

@@ -69,6 +69,8 @@ export const modulesCopy = {
             address: (label: string) => `${label} is not a valid address.`,
             bytes: (label: string) => `${label} is not a valid bytes value.`,
             unsignedNumber: (label: string) => `${label} is not a valid uint value.`,
+            signedNumber: (label: string) => `${label} is not a valid int value.`,
+            numberRange: (label: string, type: string) => `${label} is out of range for ${type}.`,
         },
     },
     proposalActionChangeMembers: {

src/modules/assets/copy/modulesCopy.ts

@@ -61,6 +61,26 @@ describe('<ProposalActionsDecoderBooleanField /> component', () => {
         expect(useControllerSpy).toHaveBeenCalledWith(expect.objectContaining({ name: `${formPrefix}.${fieldName}` }));
     });
 
+    it('normalises string field values to booleans to support transaction data encoding', () => {
+        const onChange = jest.fn();
+        useControllerSpy.mockReturnValue({
+            fieldState: { error: undefined },
+            field: { value: 'true', onBlur: jest.fn(), onChange, ref: jest.fn() },
+        } as unknown as ReactHookForm.UseControllerReturn);
+        render(createTestComponent());
+        expect(onChange).toHaveBeenCalledWith(true);
+    });
+
+    it('does not update the field value when it is already a boolean', () => {
+        const onChange = jest.fn();
+        useControllerSpy.mockReturnValue({
+            fieldState: { error: undefined },
+            field: { value: false, onBlur: jest.fn(), onChange, ref: jest.fn() },
+        } as unknown as ReactHookForm.UseControllerReturn);
+        render(createTestComponent());
+        expect(onChange).not.toHaveBeenCalled();
+    });
+
     it('renders the parameter name, type and notice as field labels', () => {
         const parameter = { name: 'tryExecute', notice: 'description', type: 'bool', value: undefined };
         render(createTestComponent({ parameter }));

src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderBooleanField/proposalActionsDecoderBooleanField.test.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useController } from 'react-hook-form';
 import { Radio, RadioGroup } from '../../../../../../core';
 import { useGukModulesContext } from '../../../../gukModulesProvider';
@@ -39,13 +40,23 @@ export const ProposalActionsDecoderBooleanField: React.FC<IProposalActionsDecode
     const { error } = fieldState;
     const alert = error?.message == null ? undefined : { message: error.message, variant: 'critical' as const };
 
+    const { value, onChange } = field;
+
+    useEffect(() => {
+        // Normalise string values ("true" / "false") seeded by the application to booleans as the transaction data
+        // encoding only accepts boolean values for bool types.
+        if (typeof value === 'string' && proposalActionsDecoderUtils.validateBoolean(value)) {
+            onChange(value === 'true');
+        }
+    }, [value, onChange]);
+
     const label = hideLabels ? undefined : (
         <>
             {name} <span className="text-neutral-500">({type})</span>
         </>
     );
 
-    const handleValueChange = (value: string) => field.onChange(value === 'true');
+    const handleValueChange = (newValue: string) => onChange(newValue === 'true');
 
     return (
         <RadioGroup
@@ -56,7 +67,7 @@ export const ProposalActionsDecoderBooleanField: React.FC<IProposalActionsDecode
             onBlur={field.onBlur}
             onValueChange={handleValueChange}
             ref={field.ref}
-            value={field.value?.toString() ?? ''}
+            value={value?.toString() ?? ''}
         >
             <Radio label={copy.proposalActionsDecoder.booleanTrue} value="true" />
             <Radio label={copy.proposalActionsDecoder.booleanFalse} value="false" />

src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderBooleanField/proposalActionsDecoderBooleanField.tsx

@@ -130,7 +130,7 @@ describe('<ProposalActionsDecoderTextFieldEdit /> component', () => {
         expect(onChange).toHaveBeenCalledWith('tru');
     });
 
-    it('triggers the onChange callback removing the non-numberic values when type is a number', async () => {
+    it('triggers the onChange callback removing the non-numeric values and negative signs when type is an unsigned number', async () => {
         const onChange = jest.fn();
         const parameter = { name: 'uintParam', type: 'uint32', value: undefined };
         const controllerReturn = {
@@ -143,6 +143,22 @@ describe('<ProposalActionsDecoderTextFieldEdit /> component', () => {
         } as useFormContext.UseFormContextReturn);
         render(createTestComponent({ parameter }));
         await userEvent.type(screen.getByRole('textbox'), '1');
+        expect(onChange).toHaveBeenCalledWith('321');
+    });
+
+    it('triggers the onChange callback keeping one leading negative sign when type is a signed number', async () => {
+        const onChange = jest.fn();
+        const parameter = { name: 'intParam', type: 'int32', value: undefined };
+        const controllerReturn = {
+            fieldState: { error: undefined },
+            field: { value: 'ab--32.', onChange },
+        } as unknown as ReactHookForm.UseControllerReturn;
+        useControllerSpy.mockReturnValue(controllerReturn);
+        useFormContextSpy.mockReturnValue({
+            watch: () => controllerReturn.field.value as unknown,
+        } as useFormContext.UseFormContextReturn);
+        render(createTestComponent({ parameter }));
+        await userEvent.type(screen.getByRole('textbox'), '1');
         expect(onChange).toHaveBeenCalledWith('-321');
     });