Perform a Multicall

Setup Requirements

1. Set up Inverter Network SDK: Refer to the Quick Start Guide for detailed instructions.

Performing the Multicall

We will demonstrate the multicall mutation hook with the aid of useWorkflow since we need some bytecode to batch into the multicall.

'use client'

import { useModuleMulticall } from '@inverter-network/react/client'
import type {
  MixedRequestedModules,
  GetDeployWorkflowArgs,
} from '@inverter-network/sdk'

import { Button } from '@/components/ui/button'

// Defined the modules to be used in the workflow in typesafe manner
const requestedModules = {
  fundingManager: 'FM_DepositVault_v1',
  paymentProcessor: 'PP_Simple_v1',
  authorizer: 'AUT_Roles_v1',
  optionalModules: ['LM_PC_Bounties_v1'],
} as const satisfies MixedRequestedModules

export default function Page() {
  const workflow = useWorkflow({
    orchestratorAddress: '<your_orchestrator_address>',
    requestedModules,
  })
  
  const { mutate, data, isPending } = useModuleMulticall({
    kind: 'write',
    orchestratorAddress: workflow.data!.orchestrator.address,
  })
  
  const { returnDatas, statuses, transactionHash } = data || {
    returnDatas: [],
    statuses: [],
    transactionHash: '',
  }

  // Return a simple ui to trigger the flow
  return (
    <form
      className="w-screen h-screen flex flex-col items-center justify-center gap-3"
      onSubmit={async (e) => {
        e.preventDefault()
        runDeployment.mutate({
          calls: [
            {
              address: workflow.data!.fundingManager.address,
              allowFailure: false,
              callData: await workflow.data!.fundingManager.bytecode.deposit.run('500'),
            },
            {
              address: workflow.fundingManager.address,
              allowFailure: false,
              callData: await workflow.data!.fundingManager.bytecode.deposit.run('500'),
            },
          ],
        })
      }}
    >
      <h1>Transaction Hash: {transactionHash}</h1>
    
      <h1>Statuses: {statuses.join(', ')}</h1>
      
      <h1>Return Datas: {returnDatas.map((i) => i.slice(0, 100)).join(', ')}</h1>

      <Button type="submit" loading={isPending}>
        Deploy
      </Button>
    </form>
  )
}