useNewProposal MUTATION

Hook for creating a vote on a TokenVoting plugin

import { useNewProposal } from '@daobox/use-aragon'

Usage

import { useNewProposal } from '@daobox/use-aragon'

function App() {
  const { mutate, proposalId, proposalStatus, proposalTxHash } = useNewProposal(
    {
      // required
      pluginAddress: '0x13c6e4f17bbe606fed867a5cd6389a504724e805',
      title: 'Some title',
      summary: 'Some summary',
      description: 'Some description',
      endDate: new Date(0) + 1000 * 60 * 60 * 24 * 7,

      // optional
      actions: [someEncodedAction],
      failSafeActions: [false],
      startDate: new Date(0),
      executeOnPass: true,
      creatorVote: VoteValues.YES,
      resources: [
        {
          name: 'Some link title',
          url: 'https://some-link.com',
        },
      ],
      media: [
        {
          header: 'Some link title',
          logo: 'https://some-link.com',
        },
      ],
    }
  )

  return (
    <>
      <button onClick={() => mutate?.()}>"Create New Proposal"</button>
      <p>{proposalStatus}</p>
      <p>{proposalTxHash}</p>
    </>
  )
}

Required Parameters

Name
pluginAddress
Type
string
Description
The address of the TokenVoting plugin.
Name
title
Type
string
Description
The title of the proposal.
Name
summary
Type
string
Description
The summary of the proposal.
Name
description
Type
string
Description
The description of the proposal.
Name
endDate
Type
Date
Description
the time the proposal will end expressed as a Date object

Optional Parameters

Name
actions
Type
DaoAction[]
Description
an array of encoded actions to be executed if the proposal passes. Defaults to an empty array
Name
failSafeActions
Type
boolean[]
Description
For every action item, denotes whether its execution could fail without aborting the whole proposal execution. Defaults to an empty array
Name
startDate
Type
Date
Description
the time the proposal will start expressed as a Date object. Defaults to the current time
Name
executeOnPass
Type
boolean
Description
whether the proposal should be executed automatically if it passes. Defaults to true
Name
creatorVote
Type
VoteValues
Description
whether the creator of the proposal should vote. Defaults to VoteValues.NO
Name
resources
Type
Array<{url: string; name: string}>
Description
an array of resources to be linked to the proposal. Defaults to an empty array
Name
creatorVote
Type
Array<{header: string; logo: string}>
Description
an array of media to be linked to the proposal. Defaults to an empty array
Name
onProposalTransaction
Type
function
Description
callback function that is called when the transaction is submitted but before it is mined

Additional mutation options

Return Values

{
  data: NewProposalReturnData | null,
  error: Error | null,
  proposalTxHash: string | null,
  isLoading: boolean,
  isSuccess: boolean,
  isError: boolean,
  reset: function,
  mutate: function,
  NewProposalStatus: 'idle' | 'pinningMetadata' | 'waitingForSigner' | 'creatingProposal' | 'confirmingTransaction' | 'success' |'error',
}

Examples

Using status flags and callbacks

callback function that is called when the transaction is submitted but before it is mined

{
  export function App() {
    const { mutate, proposalStatus } = useNewProposal({
      ...newPropsalParams,
      // called when the transaction is submitted but before it is mined
      onProposalTransaction: (txHash) => console.log('txHash', txHash),
      onSuccess () => alert("Proposal created!"),
      onError (error) => alert("Proposal creation failed: " + error.message),
    })

    return (
      <Stack>
        <Button
          onClick={() => mutate?.()}
          // disable the button while the proposal is being created
          disabled={!['idle', 'success', 'error'].includes(proposalStatus)}
          // show a loading indicator while the proposal is being created
          loading={!['idle', 'success'].includes(proposalStatus)}
        >
          // if there is no action then the button label displays "New Proposal" otherwise it displays the current status
          {['idle', 'success'].includes(proposalStatus)
            ? 'New Proposal'
            : proposalStatus}
        </Button>
      </Stack>
    )
  }
}