How to use the @aragon/api-react.useAragonApi function in @aragon/api-react

export function ConvictionChart({ proposal }) {
  const { stakes, threshold } = getStakesAndThreshold(proposal)
  const currentBlock = useBlockNumber()
  const { connectedAccount } = useAragonApi()
  const { alpha } = getGlobalParams()
  const theme = useTheme()

  const lines = [
    getConvictionHistory(stakes, currentBlock + 25, alpha),
    getConvictionHistoryByEntity(
      stakes,
      connectedAccount,
      currentBlock + 25,
      alpha
    ),
  ]

  // Divides all the numbers of an array of arrays by the biggest in the arrays
  const normalize = (lines, n) => {
    const max = Math.max(...lines.flat(), n)

export function useWithdrawAction(onDone) {
  const { api } = useAragonApi()

  return useCallback(
    requestId => {
      try {
        api.refundTokenRequest(requestId).toPromise()

        onDone()
      } catch (error) {
        console.error(error)
      }
    },
    [api, onDone]
  )
}

export function useSubmitAction(onDone) {
  const { api } = useAragonApi()

  return useCallback(
    requestId => {
      try {
        api.finaliseTokenRequest(requestId).toPromise()

        onDone()
      } catch (error) {
        console.error(error)
      }
    },
    [api, onDone]
  )
}

function getStakesAndThreshold(proposal = {}) {
  const { appState } = useAragonApi()
  const { convictionStakes, stakeToken, requestToken } = appState
  const { maxRatio, weight } = getGlobalParams()
  const { requestedAmount } = proposal
  const stakes = convictionStakes.filter(
    stake => stake.proposal === parseInt(proposal.id)
  )
  const { totalTokensStaked } = [...stakes].pop() || { totalTokensStaked: 0 }
  const threshold = calculateThreshold(
    requestedAmount,
    requestToken.amount || 0,
    stakeToken.tokenSupply || 0,
    maxRatio,
    weight
  )
  const max = getMaxConviction(stakeToken.tokenSupply || 0)
  return { stakes, totalTokensStaked, threshold, max }

function getGlobalParams() {
  const {
    appState: { globalParams },
  } = useAragonApi()
  return globalParams
}

export function ConvictionButton({ proposal, onStake, onWithdraw, onExecute }) {
  const { alpha } = getGlobalParams()
  const blockNumber = useBlockNumber()
  const { connectedAccount } = useAragonApi()
  const { stakes, threshold } = getStakesAndThreshold(proposal)
  const conviction = getCurrentConviction(stakes, blockNumber, alpha)
  const myStakes = stakes.filter(({ entity }) => entity === connectedAccount)
  const didIStaked = myStakes.length > 0 && [...myStakes].pop().tokensStaked > 0
  return conviction >= threshold ? (
    <button mode="strong">
      Execute proposal
    </button>
  ) : didIStaked ? (
    <button>
      Withdraw support
    </button>
  ) : (
    <button mode="strong">
      Support this proposal
    </button>

function App() {
  const { api, appState, connectedAccount } = useAragonApi()
  const { syncing } = appState

  const [text, setText] = useState('')
  const [id, setId] = useState(-1)

  const post = async () => {
    const discussionPost = {
      author: connectedAccount,
      mentions: [],
      type: 'Post',
      text,
    }

    try {
      if (id === -1) throw new Error('must enter iD')
      const result = await ipfs.dag.put(discussionPost, {})

function App() {
  const { api, appState, connectedAccount } = useAragonApi()
  const { proposals, convictionStakes, requestToken } = appState
  const activeProposals = proposals.filter(({ executed }) => !executed)

  const [proposalPanel, setProposalPanel] = useState(false)
  const onProposalSubmit = ({ title, link, amount, beneficiary }) => {
    const decimals = parseInt(requestToken.decimals)
    const decimalAmount = toDecimals(amount.trim(), decimals).toString()
    api.addProposal(title, toHex(link), decimalAmount, beneficiary).toPromise()
    setProposalPanel(false)
  }

  const myStakes =
    (convictionStakes &&
      convictionStakes.filter(({ entity }) => entity === connectedAccount)) ||
    []