Fix validation issues and proper display logic for send assets / airdrop actions

Author: mudrila

src/components/ProposalBuilder/ProposalActionCard.tsx

@@ -127,12 +127,14 @@ export function ProposalActionCard({
       ? getAddress(action.transactions[0].parameters[0].value)
       : zeroAddress;
     const transferAmount = BigInt(action.transactions[0].parameters[1].value || '0');
+
     if (!destinationAddress || !transferAmount) {
       return null;
     }
 
+    // TODO: This does not work for native asset
     const actionAsset = assetsFungible.find(
-      asset => getAddress(asset.tokenAddress) === destinationAddress,
+      asset => getAddress(asset.tokenAddress) === getAddress(action.transactions[0].targetAddress),
     );
 
     if (!actionAsset) {
@@ -158,8 +160,11 @@ export function ProposalActionCard({
     );
     const recipientsCount = action.transactions[1].parameters[1].value?.split(',').length || 0;
 
+    // First transaction in the airdrop proposal will be approval transaction, which is called on the token
+    // Thus we can find the asset by looking at the target address of the first transaction
+
     const actionAsset = assetsFungible.find(
-      asset => getAddress(asset.tokenAddress) === action.transactions[0].targetAddress,
+      asset => getAddress(asset.tokenAddress) === getAddress(action.transactions[0].targetAddress),
     );
 
     if (!actionAsset) {

src/components/ProposalBuilder/StepButtons.tsx

@@ -57,7 +57,9 @@ export default function StepButtons(props: StepButtonsProps) {
                 type="submit"
                 isDisabled={
                   !canUserCreateProposal ||
+                  !!proposalMetadataError ||
                   !!transactionsError ||
+                  !proposalMetadata.title ||
                   !!nonceError ||
                   pendingTransaction
                 }

src/hooks/DAO/useSendAssetsActionModal.tsx

@@ -28,17 +28,13 @@ export default function useSendAssetsActionModal() {
       return;
     }
     const isNative = isNativeAsset(sendAssetsData.asset);
-    const transactionData = prepareSendAssetsActionData({
-      transferAmount: sendAssetsData.transferAmount,
-      asset: sendAssetsData.asset,
-      destinationAddress: sendAssetsData.destinationAddress,
-    });
+    const transactionData = prepareSendAssetsActionData(sendAssetsData);
     addAction({
       actionType: ProposalActionType.TRANSFER,
       content: <></>,
       transactions: [
         {
-          targetAddress: transactionData.calldata,
+          targetAddress: transactionData.target,
           ethValue: {
             bigintValue: transactionData.value,
             value: transactionData.value.toString(),

src/hooks/utils/useCreateRoles.ts

@@ -1704,11 +1704,7 @@ export default function useCreateRoles() {
 
         // Add "send assets" actions to the proposal data
         values.actions.forEach(action => {
-          const actionData = prepareSendAssetsActionData({
-            transferAmount: action.transferAmount,
-            asset: action.asset,
-            destinationAddress: action.destinationAddress,
-          });
+          const actionData = prepareSendAssetsActionData(action);
           proposalData.targets.push(actionData.target);
           proposalData.values.push(actionData.value);
           proposalData.calldatas.push(actionData.calldata);

src/hooks/utils/useGetSafeName.ts

@@ -19,7 +19,7 @@ export const getSafeName = async (
 
   const mainnetPublicClient = createPublicClient({
     chain: mainnet.chain,
-    transport: http(mainnet.rpcEndpoint),
+    transport: http(mainnet.rpcEndpoint, { batch: true }),
   });
   const ensName = await mainnetPublicClient.getEnsName({ address });
   if (ensName) {

src/hooks/utils/useResolveENSName.ts

@@ -45,7 +45,7 @@ export const useResolveENSName = () => {
 
     const mainnetPublicClient = createPublicClient({
       chain: mainnet.chain,
-      transport: http(mainnet.rpcEndpoint),
+      transport: http(mainnet.rpcEndpoint, { batch: true }),
     });
     const resolvedAddress = await mainnetPublicClient.getEnsAddress({ name: normalizedName });
     if (resolvedAddress) {

src/pages/dao/proposals/actions/new/SafeProposalWithActionsCreatePage.tsx

@@ -1,6 +1,6 @@
 import * as amplitude from '@amplitude/analytics-browser';
 import { Center } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { ProposalBuilder } from '../../../../../components/ProposalBuilder';
 import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../../components/ui/loaders/BarLoader';
@@ -23,6 +23,7 @@ export function SafeProposalWithActionsCreatePage() {
 
   const { prepareProposal } = usePrepareProposal();
   const { getTransactions } = useProposalActionsStore();
+  const transactions = useMemo(() => getTransactions(), [getTransactions]);
 
   const HEADER_HEIGHT = useHeaderHeight();
 
@@ -38,7 +39,7 @@ export function SafeProposalWithActionsCreatePage() {
     <ProposalBuilder
       initialValues={{
         ...DEFAULT_PROPOSAL,
-        transactions: getTransactions(),
+        transactions,
         nonce: safe.nextNonce,
       }}
       mode={ProposalBuilderMode.PROPOSAL_WITH_ACTIONS}

src/providers/NetworkConfig/web3-modal.config.ts

@@ -24,7 +24,7 @@ export const transportsReducer = (
   accumulator: Record<string, HttpTransport>,
   network: NetworkConfig,
 ) => {
-  accumulator[network.chain.id] = http(network.rpcEndpoint);
+  accumulator[network.chain.id] = http(network.rpcEndpoint, { batch: true });
   return accumulator;
 };
 

src/utils/dao/prepareSendAssetsActionData.ts

@@ -32,7 +32,7 @@ export const prepareSendAssetsActionData = ({
   }
 
   const actionData = {
-    target: target,
+    target,
     value: isNative ? transferAmount : 0n,
     calldata,
   };