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

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 useAppLogic() {
  const { acceptedTokens, account, token, isSyncing, ready, requests } = useAppState()
  const panelState = useSidePanel()

  const actions = {
    request: useRequestAction(panelState.requestClose),
    submit: useSubmitAction(panelState.requestClose),
    withdraw: useWithdrawAction(panelState.requestClose),
  }

  return {
    panelState,
    isSyncing: isSyncing || !ready,
    acceptedTokens,
    account,
    token,
    actions,
    requests,

function NewRequest({ network, panelOpened, onRequest }) {
  const { acceptedTokens, account, token, ready } = useAppState()
  const api = useApi()
  const isMainnet = network.type === 'main'

  const [selectedToken, setSelectedToken] = useState({ ...initialState.selectedToken })
  const [depositedAmount, setDepositedAmount] = useState({ ...initialState.amount })
  const [selectedTokenData, setSelectedTokenData] = useState({ ...initialState.selectedTokenData })
  const [requestedAmount, setRequestedAmount] = useState('')
  const [tokenBalanceMessage, setTokenBalanceMessage] = useState('')
  const [depositErrorMessage, setDepositErrorMessage] = useState(initialState.depositErrorMessage)
  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(initialState.submitButtonDisabled)
  const [isTokenSelected, setIsTokenSelected] = useState(initialState.isTokenSelected)
  const [orgToken, setOrgToken] = useState(initialState.orgToken)

  useEffect(() => {
    async function getSelectedTokenData() {
      const tokenData = await loadTokenData(selectedToken.value)

function Locks({ locks }) {
  const {
    lockAmount,
    lockDuration,
    numData,
    tokenAddress,
    tokenName,
    tokenSymbol,
    tokenDecimals,
  } = useAppState()

  return (
    }
      secondary={
        
      }
    />