How to use @aragon/api-react - 10 common examples

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)

function useLocks() {
  const { locks } = useAppState()
  const now = useNow()

  const lockStatus = (locks || []).map(lock => isUnlocked(lock.unlockTime, now))
  const lockStatusKey = lockStatus.join('')

  return useMemo(
    () =>
      (locks || []).map((lock, index) => ({
        ...lock,
        unlocked: lockStatus[index],
      })),
    [locks, lockStatusKey] // eslint-disable-line react-hooks/exhaustive-deps
  )
}

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]
  )
}

const RequestTable = React.memo(({ requests, token, onSubmit, onWithdraw, ownRequests, onSelectRequest }) => {
  const connectedAccount = useConnectedAccount()
  const theme = useTheme()

  const handleSelectRequest = useCallback(
    requestId => {
      onSelectRequest(requestId)
    },
    [onSelectRequest]
  )

  const handleSubmit = useCallback(
    requestId => {
      onSubmit(requestId)
    },
    [onSubmit]
  )

export default function usePathSegments() {
  const [ path, requestPath ] = usePath()
  const [ , selectedTab, selectedIssueId ] = path.match(PATH_REGEX) || []
  const [ , search ] = path.match(SEARCH_REGEX) || []

  const selectIssue = useCallback(issueId => {
    requestPath && requestPath(`/issues/${issueId || ''}`)
  }, [requestPath])

  const query = useMemo(() => {
    if (!search) return {}

    return search.split('&').reduce(
      (acc, param) => {
        const [ , key, value ] = param.match(SEARCH_PARAM_REGEX)
        acc[key] = value
        return acc
      },

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, {})