index.js file for the react app example in the celo docs here: https://docs.celo.org/developer-guide/start/web-dapp

index.js

import React, { useCallback, useEffect, useState } from 'react'
import { useContractKit } from '@celo-tools/use-contractkit';
import { ContractKitProvider } from '@celo-tools/use-contractkit';
import '@celo-tools/use-contractkit/lib/styles.css';

function App () {
  const { address, connect } = useContractKit()

  return (
    <main>
      <h1>Celo Voting DApp</h1>
      <p>{address}</p>
      <button onClick={connect}>Click here to connect your wallet</button>
    </main>
  )
}

function GovernanceApp() {

  const { address, connect, kit, getConnectedKit } = useContractKit()
  const [proposals, setProposals] = useState([])
  
  const fetchProposals = useCallback(async () => {
    if (!address) {
      return
    }
  
    const governance = await kit.contracts.getGovernance()
    const dequeue = await governance.getDequeue()
  
    const fetchedProposals = await Promise.all(
      dequeue.map(async (id) => {
        const [record, voteRecord] = await Promise.all([
          governance.getProposalRecord(id),
          governance.getVoteRecord(address, id),
        ])
  
        return {
          id,
          ...record,
          vote: voteRecord ? voteRecord.value : undefined,
        }
      })
    )
    setProposals(fetchedProposals)
    console.log(fetchedProposals)
  }, [kit, address])

  useEffect(() => {
    fetchProposals()
  }, [fetchProposals])

  return (
    <div>
      <h1>Celo Voting DApp</h1>
      <p>{address}</p>
      <button onClick={connect}>Click here to connect your wallet</button>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Status</th>
            <th>Description URL</th>
            <th>Voted</th>
          </tr>
        </thead>
        <tbody>
          {proposals.map((proposal) => (
            <tr>
              <td>{proposal.id.toString()}</td>
              <td>{proposal.passed ? 'Passed' : proposal.approved ? 'Approved' : 'Not approved'}</td>
              <td>
                <a style={{ color: 'blue', textDecoration: 'underline' }} href={proposal.metadata.descriptionURL} target="_blank">
                  Link
                </a>
              </td>
              <td>{proposal.vote ?? 'No vote yet'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function WrappedApp() {
  return (
    <ContractKitProvider
      dapp={{
          name: "My awesome dApp",
          description: "My awesome description",
          url: "https://example.com",
        }}
    >
      <GovernanceApp />
    </ContractKitProvider>
  );
}
export default WrappedApp;