Operate a Workflow

Setup Requirements

• Set up Inverter Network SDK: Refer to the Quick Start guide for detailed instructions.

• Deploy a Workflow: Refer to the Deploy a Workflow guide for detailed instructions.

Retrieving a Workflow

We strongly recommend passing in a readonly requestedModules since this ensures that your workflow response will be strongly typed. Also you will have to pass in a orchestratorAddress in to the query.

'use client'

import { useWorkflow } from '@inverter-network/react/client'
import type { RequestedModules } from '@inverter-network/sdk'

import { Button } from '@inverter-network/react'
import { useMutation } from '@tanstack/react-query'

export default function Page() {
  // 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 RequestedModules

  const workflow = useWorkflow({
    orchestratorAddress: '<your_orchestrator_address>' as `0x${string}`,
    requestedModules,
  })

  // Setup a read mutation to run the workflow function
  const readTitle = useMutation({
    mutationFn: async () => {
      if (!workflow.data) throw new Error('No workflow instance found')

      return await workflow.data.fundingManager.read.title.run()
    },
  })
  
  // Setup a write mutation to run the workflow function
  const deposit = useMutation({
    mutationFn: async () => {
      if (!workflow.data) throw new Error('No workflow instance found')

      return await workflow.fundingManager.write.deposit.run('100', {
          confirmations: 1,
          onHash: (hash) => {console.log(hash)},
          onConfirmation: (receipt) => {console.log(receipt)},
          onApprove: (receipts) => {console.log(receipts)}
      })
    },
  })
  

  // 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={(e) => {
        e.preventDefault()
        readTitle.mutate()
        deposit.mutate()
      }}
    >
      <h1>Funding Manager Title: {readTitle?.data ?? 'No Data Yet...'}</h1>
      
      <h1>Deposit Transaction Hash: {deposit?.data ?? 'No Data Yet...'}</h1>

      <Button type="submit" loading={readTitle.isPending}>
        Read
      </Button>
    </form>
  )
}