setAvatar.jsx

import { ENS } from "@ensdomains/ensjs"; // 3.0.0-alpha.39
import { providers } from "ethers"; // 5.7.2

const client = new ENS();
const provider = new providers.Web3Provider(window.ethereum, "goerli");

async function setENSAvatar() {
  await client.setProvider(provider);

  await provider.send("eth_requestAccounts", []);
  const signer = provider.getSigner();
  const address = await signer.getAddress();
  console.log(address);
  const ens = await provider.lookupAddress(address);
  console.log(ens);
  const tx = await client.setRecords(ens, {
    records: {
      contentHash: "ar://tnLgkAg70wsn9fSr1sxJKG_qcka1gJtmUwXm_3_lDaI"
    }
  });
  await tx.wait();
}

export default function App() {
  return (
    <div>
      <h1>Hello there! Click to set your avatar</h1>
      <button
        onClick={() => {
          setENSAvatar();
        }}
      >
        Set avatar
      </button>
    </div>
  );
}