fix: Normalise string boolean values in decoder to support data encoding

Author: thekidnamedkd

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

@@ -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.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" />