feat(APP-4476): Remove calculation of function selectors internally (#549)

Author: milosh86

.changeset/vast-socks-carry.md

@@ -0,0 +1,6 @@
+---
+'@aragon/gov-ui-kit': patch
+---
+
+**BREAKING CHANGE:** Update `ProposalActionsItem` and `SmartContractFunctionDataListItemStructure` to accept
+`functionSelector` as a prop, instead of calculating it internally

src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItem.api.ts

@@ -26,6 +26,10 @@ export interface IProposalActionsItemProps<TAction extends IProposalAction = IPr
      * Proposal action to be rendered.
      */
     action: TAction;
+    /**
+     * Function selector of the action to be displayed optionally.
+     */
+    actionFunctionSelector?: string;
     /**
      * Index of the action injected by the <ProposalActions.Container /> component.
      */

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

@@ -78,6 +78,7 @@ export const VerifiedDecoded: Story = {
                 ],
             },
         }),
+        actionFunctionSelector: '0x7ff36ab5',
     },
 };
 
@@ -98,6 +99,7 @@ export const VerifiedRaw: Story = {
                 parameters: [],
             },
         }),
+        actionFunctionSelector: '0x7ff36ab5',
     },
 };
 

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

@@ -22,6 +22,7 @@ export const ProposalActionsItem = <TAction extends IProposalAction = IProposalA
 ) => {
     const {
         action,
+        actionFunctionSelector,
         index,
         value,
         CustomComponent,
@@ -81,10 +82,10 @@ export const ProposalActionsItem = <TAction extends IProposalAction = IProposalA
         <Accordion.Item value={value ?? index.toString()} ref={itemRef}>
             <Accordion.ItemHeader className="min-w-0">
                 <SmartContractFunctionDataListItem.Structure
-                    functionName={action.inputData?.function}
                     contractName={action.inputData?.contract}
                     contractAddress={action.to}
-                    functionParameters={action.inputData?.parameters}
+                    functionName={action.inputData?.function}
+                    functionSelector={actionFunctionSelector}
                     chainId={chainId}
                     className="w-full bg-transparent"
                     asChild={true}

src/modules/components/smartContract/smartContractFunctionDataListItem/smartContractFunctionDataListItemStructure/smartContractFunctionDataListItemStructure.stories.tsx

@@ -36,17 +36,14 @@ export const Unverified: Story = {
 };
 
 /**
- * Usage example of the SmartContractFunctionDataListItem.Structure component with a function signature.
+ * Usage example of the SmartContractFunctionDataListItem.Structure component with a function selector.
  */
-export const WithFunctionSignature: Story = {
+export const WithFunctionSelector: Story = {
     args: {
         contractAddress: '0x1234567890abcdef1234567890abcdef12345678',
         contractName: 'Uniswap V2 Router',
         functionName: 'addLiquidity',
-        functionParameters: [
-            { name: 'tokenA', type: 'address', value: 0 },
-            { name: 'tokenB', type: 'address', value: 0 },
-        ],
+        functionSelector: '0x7ff36ab5',
     },
 };
 

src/modules/components/smartContract/smartContractFunctionDataListItem/smartContractFunctionDataListItemStructure/smartContractFunctionDataListItemStructure.test.tsx

@@ -28,6 +28,12 @@ describe('<SmartContractFunctionDataListItem.Structure /> component', () => {
         expect(screen.getByText(functionName)).toBeInTheDocument();
     });
 
+    it('renders the function selector when smart contract is verified', () => {
+        const functionSelector = '0xFunSelector';
+        render(createTestComponent({ functionSelector }));
+        expect(screen.getByText(functionSelector)).toBeInTheDocument();
+    });
+
     it('renders a not-verified label for function name and contract name when smart contract is not verified', () => {
         render(createTestComponent());
         expect(

src/modules/components/smartContract/smartContractFunctionDataListItem/smartContractFunctionDataListItemStructure/smartContractFunctionDataListItemStructure.tsx

@@ -1,7 +1,5 @@
 import classNames from 'classnames';
-import { toFunctionSelector } from 'viem';
 import { mainnet } from 'viem/chains';
-import type { IProposalActionInputDataParameter } from '../../..';
 import {
     Button,
     DataList,
@@ -30,9 +28,9 @@ export type ISmartContractFunctionDataListItemProps = IDataListItemProps & {
      */
     contractAddress: string;
     /**
-     * The parameters to pass to the function.
+     * Function selector of the given smart contract function.
      */
-    functionParameters?: IProposalActionInputDataParameter[];
+    functionSelector?: string;
     /**
      * Callback when function is removed.
      */
@@ -58,7 +56,7 @@ export const SmartContractFunctionDataListItemStructure: React.FC<ISmartContract
 ) => {
     const {
         functionName,
-        functionParameters,
+        functionSelector,
         contractName,
         contractAddress,
         chainId = mainnet.id,
@@ -77,13 +75,6 @@ export const SmartContractFunctionDataListItemStructure: React.FC<ISmartContract
     const functionLabel = functionName ?? copy.smartContractFunctionDataListItemStructure.notVerified.function;
     const contractLabel = contractName ?? copy.smartContractFunctionDataListItemStructure.notVerified.contract;
 
-    const functionSignature =
-        functionName && functionParameters
-            ? `${functionName}(${functionParameters.map((param) => param.type).join(',')})`
-            : undefined;
-
-    const functionSelector = functionSignature ? toFunctionSelector(functionSignature) : undefined;
-
     const hasVerifiedNames = !!functionName && !!contractName;
     const displayWarningFeedback = displayWarning || !hasVerifiedNames;