Deploy a Contract

Setup Requirements

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

As we have some in house headless contracts and they can be used as dependancies to our Worfklow's we have a React SDK api for the deployment of contracts.

Deploying the Contract

'use client'

import { useDeploy } from '@inverter-network/react/client'
import { Button, FloatingLabelInput } from '@inverter-network/react'

export default function Page() {
  const { mutate, userArgs, handleSetUserArgs } = useDeploy({
    name: 'ERC20Issuance_Blacklist_v1', // Type safe names you can prompt intellisense
  })

  // Return a simple ui to trigger the flow
  return (
    <form
      className="w-screen h-screen flex flex-col items-center gap-3 justify-center"
      onSubmit={(e) => {
        e.preventDefault()
        mutate.mutate()
      }}
    >
      <h1>
        Transaction Hash: {mutate.data?.transactionHash ?? 'Not Deployed'}
      </h1>

      <h1>
        Contract Address: {mutate.data?.contractAddress ?? 'Not Deployed'}
      </h1>

      <FloatingLabelInput
        label="Token Name"
        name="name"
        value={userArgs.name}
        onChange={(e) => handleSetUserArgs('name', e.target.value)}
      />

      <FloatingLabelInput
        label="Token Symbol"
        name="symbol"
        value={userArgs.symbol}
        onChange={(e) => handleSetUserArgs('symbol', e.target.value)}
      />

      <FloatingLabelInput
        label="Token Decimals"
        name="decimals"
        value={userArgs.decimals}
        onChange={(e) => handleSetUserArgs('decimals', e.target.value)}
      />

      <FloatingLabelInput
        label="Token Max Supply"
        name="maxSupply"
        value={userArgs.maxSupply}
        onChange={(e) => handleSetUserArgs('maxSupply', e.target.value)}
      />

      <FloatingLabelInput
        label="Token Initial Admin"
        name="initialAdmin"
        value={userArgs.initialAdmin}
      />

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