How to make a transaction on the frontend side

Question

    {
      "name": "helloWorld",
      "accounts": [
        {
          "name": "authority",
          "isMut": false,
          "isSigner": false
        },
        {
          "name": "helloQueue",
          "isMut": false,
          "isSigner": true
        }
      ],
      "args": [],
      "returns": {
        "defined": "clockwork_sdk::queue_program::accounts::CrankResponse"
      }
    }

From the above IDL, I am gonna run the helloWorld function. What I tried is:

const helloworldProgram: anchor.Program<HelloClockwork> =
      new anchor.Program(IDL, HELLO_CLOCKWORK_PROGRAM_ID, anchorProvider);

      const something = await helloworldProgram.methods.helloWorld.apply({
        accounts: {
          authority: wallet.publicKey,
          helloQueue: wallet.publicKey,
        },
        signers: [wallet],
      });

Any solutions?

Answer 1

// create transaction
const transaction = await helloworldProgram.methods
  .helloWorld()
  .accounts({
    authority: wallet.publicKey,
    helloQueue: wallet.publicKey,
  })
  .transaction()

if you have a wallet adapter set up to send the transaction, then can do something like the following:

import { useConnection, useWallet } from "@solana/wallet-adapter-react"

const { connection } = useConnection()
const { sendTransaction } = useWallet()

and then send the transaction, which will prompt the connected wallet to approve

sendTransaction(transaction, connection)

Answer 2

Assuming your Anchor provider is correct:

// first pass the args it requires and then options object
const something = await helloworldProgram.rpc.helloWorld({
    accounts: {
      authority: wallet.publicKey,
      helloQueue: wallet.publicKey,
    },
    signers: [wallet],
});