Deploy a Workflow

'use client'

import { useInverter } from '@inverter-network/react/client'
import { type RequestedModules, type GetUserArgs } from '@inverter-network/sdk'

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

export default function Page() {
    const inverter = useInverter()
    
    // Defined the modules to be deployed 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
    
    // Define the args for the modules in typesafe manner
    const args = {
        fundingManager: {
            orchestratorTokenAddress: <your_funding_token_address>,
        },
        authorizer: {
            initialAdmin: inverter.data?.walletClient.account.address,
        }
    } as const satisfies GetUserArgs<typeof requestedModules>
    
    // Setup a prep deployment query to init the process
    const prepDeployment = useQuery({
        queryKey: ['prepDeployment'],
        queryFn: async () => {
          if (!inverter) throw new Error('Inverter instance not found') 
    
          return await inverter.getDeploy({
            requestedModules,
            factoryType,
          })
        },
    })
  
    // Setup a deployment mutation to run the prepared deployment
    const runDeployment = useMutation({
      mutationFn: async () => {
        if (!prepDeployment.data) throw new Error('No prepared deploy data found')
  
        return await prepDeployment.data.run(args, {
          confirmations: 1,
        })
      }
    })
    
    // Return a simple ui to trigger the flow
    return (
        <div className="w-screen h-screen flex flex-col items-center justify-center">
            <h1>Orchestrator Address: {runDeployment.data?.orchestratorAddress}</h1>
            
            <h1>Transaction Hash: {runDeployment.data?.transactionHash}</h1>
            
            <Button 
                onClick=() => { runDeployment.mutate() } 
                loading={runDeployment.isPending}
            >Deploy<Button>
        </div>
    )
}