fix(APP-462): Disable decoded view for raw calldata actions and fix native transfer action rendering (#642)

Signed-off-by: Milos Dzepina <milos@aragon.org>

Author: milosh86

.changeset/fruity-pandas-report.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': patch
+---
+
+Fix native transfer action decoding

.changeset/six-plants-lick.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': patch
+---
+
+Disable decoded view for raw calldata actions

pnpm-lock.yaml

@@ -194,4 +194,40 @@ describe('<ProposalActionsDecoder /> component', () => {
         );
         expect(() => render(createTestComponent({ action, view, mode }))).not.toThrow();
     });
+
+    it('displays no params message for write actions without parameters in decoded view', () => {
+        const view = ProposalActionsDecoderView.DECODED;
+        const mode = ProposalActionsDecoderMode.WATCH;
+        const action = generateProposalAction({
+            inputData: { function: 'withdraw', contract: '', parameters: [], stateMutability: 'nonpayable' },
+        });
+        render(createTestComponent({ action, view, mode }));
+        expect(screen.getByText(modulesCopy.proposalActionsDecoder.noParametersMessage)).toBeInTheDocument();
+    });
+
+    it('pre-populates data field with function selector for write actions without parameters in decoded edit view', () => {
+        const view = ProposalActionsDecoderView.DECODED;
+        const mode = ProposalActionsDecoderMode.EDIT;
+        const action = generateProposalAction({
+            data: '0x',
+            inputData: { function: 'withdraw', contract: '', parameters: [], stateMutability: 'nonpayable' },
+        });
+        const setValueSpy = jest.fn();
+        const getValuesSpy = jest.fn().mockReturnValue('0x');
+        const watch = () => {
+            return { unsubscribe: jest.fn() };
+        };
+        // Mock encodeFunctionData to return a function selector
+        encodeFunctionDataSpy.mockReturnValue('0x12345678');
+        useFormContextSpy.mockReturnValue(
+            generateFormContext({
+                setValue: setValueSpy,
+                getValues: getValuesSpy,
+                watch: watch as unknown as ModuleHooks.UseFormContextReturn['watch'],
+            }),
+        );
+        render(createTestComponent({ action, view, mode }));
+        // Verify that setValue was called to pre-populate the data field with the encoded function selector
+        expect(setValueSpy).toHaveBeenCalledWith(expect.stringContaining('data'), '0x12345678');
+    });
 });

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

@@ -118,6 +118,7 @@ export const ProposalActionsDecoder: React.FC<IProposalActionsDecoderProps> = (p
                 mode={mode}
                 formPrefix={formPrefix}
                 parameter={{ name: 'data', value: data, type: 'bytes' }}
+                // Render the data field as hidden on decoded view to register the field on the form on EDIT mode
                 className={view === ProposalActionsDecoderView.DECODED ? 'hidden' : undefined}
                 component="textarea"
             />

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

@@ -1,6 +1,9 @@
 import type { ComponentType } from 'react';
 import type { IWeb3ComponentProps } from '../../../types';
 
+/**
+ * Proposal action types for which the basic view is available.
+ */
 export enum ProposalActionType {
     WITHDRAW_TOKEN = 'WITHDRAW_TOKEN',
     ADD_MEMBERS = 'ADD_MEMBERS',
@@ -12,6 +15,14 @@ export enum ProposalActionType {
     UPDATE_PLUGIN_METADATA = 'UPDATE_PLUGIN_METADATA',
 }
 
+/**
+ * Proposal action types for which the basic view is NOT available.
+ * This is not a list of all available types, but only the ones that are relevant in ui-kit context.
+ */
+export enum ProposalActionTypeNoBasicView {
+    RAW_CALLDATA = 'RAW_CALLDATA',
+}
+
 export interface IProposalActionInputDataParameter {
     /**
      * The name of the parameter being passed.

src/modules/components/proposal/proposalActions/proposalActionsDefinitions.ts

@@ -352,4 +352,31 @@ describe('<ProposalActionsItem /> component', () => {
         await userEvent.click(screen.getByRole('menuitem', { name: modulesCopy.proposalActionsItem.menu.RAW }));
         expect(screen.getByTestId('decoder-mock').dataset.mode).toEqual(ProposalActionsDecoderMode.WATCH);
     });
+
+    it('renders the raw-view in edit mode when editMode prop is true and action is RAW_CALLDATA', async () => {
+        const action = generateProposalAction({
+            type: 'RAW_CALLDATA',
+            inputData: { contract: '', function: '', parameters: [] },
+        });
+        isActionSupportedSpy.mockReturnValue(false);
+        render(createTestComponent({ action, editMode: true }));
+        await userEvent.click(screen.getByRole('button', { name: modulesCopy.proposalActionsItem.menu.dropdownLabel }));
+        await userEvent.click(screen.getByRole('menuitem', { name: modulesCopy.proposalActionsItem.menu.RAW }));
+        expect(screen.getByTestId('decoder-mock').dataset.view).toEqual(ProposalActionsDecoderView.RAW);
+        expect(screen.getByTestId('decoder-mock').dataset.mode).toEqual(ProposalActionsDecoderMode.EDIT);
+        expect(screen.queryByTestId('basic-view-mock')).not.toBeInTheDocument();
+    });
+
+    it('renders the basic-view and raw view in watch mode when editMode prop is true and action is native transfer', async () => {
+        const CustomComponent = () => 'custom';
+        const action = generateProposalAction({ value: '1000000000000000000', data: '0x' });
+
+        render(createTestComponent({ action, CustomComponent, editMode: true }));
+
+        expect(screen.getByTestId('basic-view-mock')).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('button', { name: modulesCopy.proposalActionsItem.menu.dropdownLabel }));
+        await userEvent.click(screen.getByRole('menuitem', { name: modulesCopy.proposalActionsItem.menu.RAW }));
+        expect(screen.getByTestId('decoder-mock').dataset.view).toEqual(ProposalActionsDecoderView.RAW);
+        expect(screen.getByTestId('decoder-mock').dataset.mode).toEqual(ProposalActionsDecoderMode.WATCH);
+    });
 });

src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItem.test.tsx

@@ -1,16 +1,19 @@
 import classNames from 'classnames';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFormContext, useWatch, type Control } from 'react-hook-form';
 import { formatUnits } from 'viem';
 import { mainnet } from 'viem/chains';
 import { useChains } from 'wagmi';
 import { Accordion, AlertCard, Button, Dropdown, IconType, Tooltip, invariant } from '../../../../../core';
 import { useGukModulesContext } from '../../../gukModulesProvider';
-import { SmartContractFunctionDataListItem } from '../../../smartContract/smartContractFunctionDataListItem';
+import { SmartContractFunctionDataListItem } from '../../../smartContract';
 import { useProposalActionsContext } from '../proposalActionsContext';
-import { ProposalActionsDecoder, ProposalActionsDecoderView } from '../proposalActionsDecoder';
-import { ProposalActionsDecoderMode } from '../proposalActionsDecoder/proposalActionsDecoder.api';
-import type { IProposalAction } from '../proposalActionsDefinitions';
+import {
+    ProposalActionsDecoder,
+    ProposalActionsDecoderMode,
+    ProposalActionsDecoderView,
+} from '../proposalActionsDecoder';
+import { ProposalActionTypeNoBasicView, type IProposalAction } from '../proposalActionsDefinitions';
 import type { IProposalActionsItemProps, ProposalActionsItemViewMode } from './proposalActionsItem.api';
 import { ProposalActionsItemBasicView } from './proposalActionsItemBasicView';
 import { proposalActionsItemUtils } from './proposalActionsItemUtils';
@@ -76,8 +79,19 @@ export const ProposalActionsItem = <TAction extends IProposalAction = IProposalA
     const shouldScrollRef = useRef(false);
     const supportsBasicView = CustomComponent != null || proposalActionsItemUtils.isActionSupported(action);
 
+    // View mode support depends on action type and ABI availability. Important cases:
+    // - Actions with a basic view: decoded and raw views enabled in "watch" mode (no edits)
+    // - Actions without a basic view (ABI is NOT present): decoded view disabled; raw view in edit mode
+    // - Actions without a basic view (ABI is present): decoded view enabled in edit mode; raw view in watch mode
+    //   - Exception: write actions without params show the "no params" message in decoded view; raw view in watch mode
+    //     with pre-populated data field with fn selector, because leaving the data field empty was confusing and could
+    //     cause a failure when the selector is not added manually
+    // - RAW_CALLDATA: no params case, but decoded view disabled; raw view enabled in edit mode for calldata input
+    // - Native transfer: basic view available; decoded view disabled; raw view in watch mode
     const isAbiAvailable = action.inputData != null;
-    const supportsDecodedView = isAbiAvailable;
+    const isRawCalldataAction = action.type === (ProposalActionTypeNoBasicView.RAW_CALLDATA as string);
+    const isNativeTransfer = action.data === '0x';
+    const supportsDecodedView = isAbiAvailable && !isRawCalldataAction && !isNativeTransfer;
 
     const [activeViewMode, setActiveViewMode] = useState<ProposalActionsItemViewMode>(
         supportsBasicView
@@ -152,8 +166,23 @@ export const ProposalActionsItem = <TAction extends IProposalAction = IProposalA
     ];
 
     const { EDIT, WATCH, READ } = ProposalActionsDecoderMode;
-    const decodedViewMode = editMode && !supportsBasicView ? EDIT : editMode ? WATCH : READ;
-    const rawViewMode = editMode && !supportsDecodedView ? EDIT : editMode ? WATCH : READ;
+
+    const decodedViewMode = useMemo(() => {
+        if (!editMode) {
+            return READ;
+        }
+
+        return supportsBasicView ? WATCH : EDIT;
+    }, [EDIT, READ, WATCH, editMode, supportsBasicView]);
+
+    const rawViewMode = useMemo(() => {
+        if (!editMode) {
+            return READ;
+        }
+
+        // There is a case when basic view is supported but not decoded view, i.e., native transfer
+        return supportsDecodedView || supportsBasicView ? WATCH : EDIT;
+    }, [EDIT, READ, WATCH, editMode, supportsBasicView, supportsDecodedView]);
 
     return (
         <Accordion.Item value={value ?? index.toString()} ref={itemRef}>