Working example of Solana and Anchor on JavaScript Client - React

App.js

import './App.css';
import { useEffect } from 'react';
import {
  Program,
  Provider,
  BN,
  web3,
} from '@project-serum/anchor'
import {
  Connection,
  clusterApiUrl,
  PublicKey
} from '@solana/web3.js'

import idl from './idl.json'

const opts = {
  preflightCommitment: "recent",
};

const { SystemProgram } = web3
const programID = new PublicKey("FRs2XJmvEULEm4X1Y17nZ8rmKMU7R1EqJVLMZxCTez6Q")

function App() {
  useEffect(() => {
    window.solana.on("connect", () => {
      console.log('updated...')
    })
    return () => {
      window.solana.disconnect();
    }
  }, [])

  async function sendTransaction() {    
    const wallet = window.solana
    const network = clusterApiUrl("devnet")
    const connection = new Connection(network, opts.preflightCommitment);

    const provider = new Provider(
      connection, wallet, opts.preflightCommitment,
    )
    
    const program = new Program(idl, programID, provider);

    const localAccount = web3.Keypair.generate();

    await program.rpc.initialize(new BN(1234), {
      accounts: {
        myAccount: localAccount.publicKey,
        user: provider.wallet.publicKey,
        systemProgram: SystemProgram.programId,
      },
      signers: [localAccount],
    })
    
    const acc = await program.account.myAccount.fetch(localAccount.publicKey)
    console.log('acc: ', acc)
  }

  async function read() {
    try {
      const wallet = window.solana;
      const network = clusterApiUrl("devnet")
      const connection = new Connection(network);

      const provider = new Provider(
        connection, wallet, { commitment: "processed" },
      )
      
    } catch (err) {
      console.log('error: ', err)
    }
  }
  async function getWallet() {
    try {
      const wallet = typeof window !== 'undefined' && window.solana;
      await wallet.connect()
    } catch (err) {
      console.log('err: ', err)
    }
  }
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={getWallet}>getWallet</button>
        <button onClick={sendTransaction}>sendTransaction</button>
        <button onClick={read}>read</button>
      </header>
    </div>
  );
}

export default App;

Uncaught Error: Permission denied to access property "apply"
    onerror inpage_sol.js:32314
    y inpage_sol.js:32306
    g inpage_sol.js:32330
    u inpage_sol.js:33207
    b inpage_sol.js:31385
    <anonymous> inpage_sol.js:45878
    <anonymous> inpage_sol.js:49149
    <anonymous> inpage_sol.js:49151
[inpage_sol.js:formatted:32314](moz-extension://3043e620-b9cc-4efd-ac8a-f2cad7f23ff3/content_script/inpage_sol.js:formatted)
Uncaught Error: Permission denied to access property "apply"
    onunhandledrejection inpage_sol.js:32321
    y inpage_sol.js:32319
    g inpage_sol.js:32330
    u inpage_sol.js:33211
    b inpage_sol.js:31385
    <anonymous> inpage_sol.js:45878
    <anonymous> inpage_sol.js:49149
    <anonymous> inpage_sol.js:49151
[inpage_sol.js:formatted:32321](moz-extension://3043e620-b9cc-4efd-ac8a-f2cad7f23ff3/content_script/inpage_sol.js:formatted)
Uncaught (in promise) Error: Invalid arguments: acc not provided.
    validateAccounts @project-serum_anchor.js:6657
    validateAccounts @project-serum_anchor.js:6652
    ix @project-serum_anchor.js:10308
    txFn @project-serum_anchor.js:10388
    rpc2 @project-serum_anchor.js:10363
    sendTransaction App.jsx:48
    onClick App.jsx:87
    React 23
    <anonymous> main.jsx:6

I got this error

• I changed Provider to AnchorProvider

• I got the error while call the func sendTransaction

• https://github.com/coral-xyz/anchor/blob/master/examples/tutorial/basic-1/programs/basic-1/src/lib.rs

• I use this contract

• PLEASE HELP ME. I'm screwed up

use this command "npx create-solana-dapp@latest" when setting up your Dapp, this will help in terms of some errors that may occur due to wallet connections.