fix(APP-3384): Fix action encoding for OSx updates

Author: cgero-eth

src/containers/createProposalDialog/createProposalDialog.tsx

@@ -1,6 +1,6 @@
 import {ModalProps} from '@aragon/ods-old';
 import {TransactionDialog} from 'containers/transactionDialog';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {CreateProposalDialogSteps} from './createProposalDialogSteps';
 import {useTranslation} from 'react-i18next';
 import {useDaoDetailsQuery} from 'hooks/useDaoDetails';
@@ -29,6 +29,7 @@ import {toDisplayEns} from 'utils/library';
 import {CreateProposalDialogGaslessSteps} from './createProposalDialogGaslessSteps';
 import {useCreateVocdoniProposalTransaction} from './hooks/useCreateVocdoniProposalTransaction';
 import {ICreateProposalParams} from './utils/createProposalUtils';
+import {useProtocolVersion} from 'services/aragon-sdk/queries/use-protocol-version';
 
 export interface ICreateProposalDialogProps extends ModalProps {}
 
@@ -59,18 +60,11 @@ export const CreateProposalDialog: React.FC<
   const pluginClient = usePluginClient(pluginType);
   const {data: votingSettings} = useVotingSettings({pluginAddress, pluginType});
 
+  const {data: versions} = useProtocolVersion(daoDetails?.address as string);
+
   const [metadataCid, setMetadataCid] = useState<string>();
 
-  const {data: encodedActions} = useEncodeActions({
-    actions,
-    network,
-    pluginClient,
-    votingSettings,
-    client,
-    pluginAddress,
-    t,
-    daoAddress: daoDetails?.address,
-  });
+  const {data: encodedActions, mutate: encodeActions} = useEncodeActions();
 
   const createProposalParams = createProposalUtils.buildCreateProposalParams({
     values: formValues as CreateProposalFormData,
@@ -132,6 +126,33 @@ export const CreateProposalDialog: React.FC<
     onClose?.();
   };
 
+  useEffect(() => {
+    if (client && pluginClient && pluginAddress && daoDetails) {
+      encodeActions({
+        actions,
+        network,
+        pluginClient,
+        votingSettings,
+        client,
+        pluginAddress,
+        t,
+        daoAddress: daoDetails?.address,
+        versions,
+      });
+    }
+  }, [
+    client,
+    pluginClient,
+    encodeActions,
+    actions,
+    network,
+    votingSettings,
+    pluginAddress,
+    t,
+    daoDetails,
+    versions,
+  ]);
+
   return (
     <TransactionDialog
       title={t('createProposalDialog.title')}

src/services/actionEncoder/actionEncoderService.api.ts

@@ -5,13 +5,13 @@ import {SupportedNetworks} from 'utils/constants';
 import {Action, SupportedVotingSettings} from 'utils/types';
 
 export interface IEncodeActionParams {
-  client?: Client;
-  pluginClient?: PluginClient;
-  pluginAddress?: string;
+  client: Client;
+  pluginClient: PluginClient;
+  pluginAddress: string;
   actions: Action[];
   t: TFunction;
   network: SupportedNetworks;
-  daoAddress?: string;
+  daoAddress: string;
   versions?: [number, number, number];
   votingSettings?: SupportedVotingSettings | null;
 }

src/services/actionEncoder/actionEncoderService.ts

@@ -30,9 +30,7 @@ import {
 } from '@aragon/osx-commons-configs';
 
 class ActionEncoderService {
-  encodeActions = async (
-    params: IEncodeActionParams
-  ): Promise<DaoAction[] | null> => {
+  encodeActions = async (params: IEncodeActionParams): Promise<DaoAction[]> => {
     const {
       actions,
       network,
@@ -45,15 +43,6 @@ class ActionEncoderService {
       t,
     } = params;
 
-    if (
-      client == null ||
-      pluginClient == null ||
-      pluginAddress == null ||
-      daoAddress == null
-    ) {
-      return null;
-    }
-
     const validActions = getNonEmptyActions(
       actions,
       isMultisigVotingSettings(votingSettings) ? votingSettings : undefined,

src/services/actionEncoder/queries/useEncodeActions.ts

@@ -1,16 +1,14 @@
-import {UseQueryOptions, useQuery} from '@tanstack/react-query';
-import {actionEncoderQueryKeys} from '../queryKeys';
+import {UseMutationOptions, useMutation} from '@tanstack/react-query';
 import {IEncodeActionParams} from '../actionEncoderService.api';
 import {actionEncoderService} from '../actionEncoderService';
 import {DaoAction} from '@aragon/sdk-client-common';
 
 export const useEncodeActions = (
-  params: IEncodeActionParams,
-  options?: Omit<UseQueryOptions<DaoAction[] | null>, 'queryKey'>
+  options?: UseMutationOptions<DaoAction[], unknown, IEncodeActionParams>
 ) => {
-  return useQuery({
-    queryKey: actionEncoderQueryKeys.encodeActions(params),
-    queryFn: () => actionEncoderService.encodeActions(params),
+  return useMutation({
+    mutationFn: (params: IEncodeActionParams) =>
+      actionEncoderService.encodeActions(params),
     ...options,
   });
 };