Interact with the Contract(Frontend)

Please ensure that all necessary development environments and dependencies are properly installed and configured.

This section will guide you through interacting with your deployed smart contract from the frontend.

First, clone the hello-world example repository to your local machine. If you have already cloned, skip this and cd to the project directory.

git clone https://github.com/soonlabs/hello-world

Change into the project directory:

cd hello-world/front-end
pnpm i
pnpm dev

You can now access your front-end page through the local path. The default path in the code is set to the local environment: http://localhost:3000

The process is broken down as follows:

Wallet Connection: Ensure the user is connected to a Solana wallet using @solana/wallet-adapter-react.
Program Interaction: Use solana/web3.js to interact with the Solana blockchain, including creating accounts and sending transactions.
RPC Setup: Connect to the SOON Devnet via the RPC URL (https://rpc.devnet.soo.network/rpc).
User Interface: A simple button triggers the interaction, and feedback is displayed using the toast library for success or failure.

The following part walks through the code, explaining key sections for setting up your front end to interact with the contract.

useWallet: This hook allows you to connect and interact with the user's Solana wallet.
Connection: This object establishes the connection with the Solana blockchain via the SOON Devnet RPC URL.
PublicKey, Transaction, TransactionInstruction, SystemProgram: These are Solana web3.js components used to create, sign, and send transactions.

"use client";

import {
  Connection,
  PublicKey,
  SystemProgram,
  Transaction,
  TransactionInstruction,
} from "@solana/web3.js";
import { useWallet } from "@solana/wallet-adapter-react";
import { toast } from "react-toastify";

Connecting to SOON Devnet

In the Hero component, we establish a connection to the SOON Devnet:

const connection = new Connection("https://rpc.devnet.soo.network/rpc");
const programId = new PublicKey("7qhC7bD9cDV9LTwjgVmGJHs5rGtrMY4pSBw1KswuaBfk"); // Replace with your Program ID

Here, we connect to the SOON Devnet by specifying the RPC URL and the Program ID where the smart contract is deployed. Make sure to replace "7qhC7bD9cDV9LTwjgVmGJHs5rGtrMY4pSBw1KswuaBfk" with your actual program ID.

Function: `sayHello`

This function is triggered when the user clicks the "Say Hello" button. It creates the necessary account on-chain if it doesn't exist, and then sends a "Hello World" transaction.

async function sayHello(): Promise<void> {
  try {
    if (!publicKey) {
      toast.error("Please connect your wallet!");
      return;
    }

    console.log(`Using program ${programId.toBase58()}`);

    const GREETING_SEED = "hello";
    const greetedPubkey = await PublicKey.createWithSeed(
      publicKey,
      GREETING_SEED,
      programId
    );

Check Wallet Connection: The function first checks if the wallet is connected. If not, it prompts the user to connect.
Create Address (Public Key): The address for interacting with the program is derived from the user's public key and the program's seed ("hello").

Creating and Sending Transactions

If the greeting account doesn't exist, a new one is created. Otherwise, it proceeds to send the "Hello World" transaction.

if (greetedAccount === null) {
  const lamports = await connection.getMinimumBalanceForRentExemption(
    GREETING_SIZE
  );

  const transaction = new Transaction().add(
    SystemProgram.createAccountWithSeed({
      fromPubkey: publicKey,
      basePubkey: publicKey,
      seed: GREETING_SEED,
      newAccountPubkey: greetedPubkey,
      lamports,
      space: GREETING_SIZE,
      programId,
    })
  );

  const signature = await sendTransaction(transaction, connection);
  await connection.confirmTransaction(signature, "processed");

  toast.success("Account created successfully!");
}

Creating Account: If the account doesn't exist, the transaction creates it, allocating enough lamports to cover the minimum rent exemption.
Sending Transaction: Once the transaction is created, it is signed and sent to the blockchain.

Sending the "Hello" Instruction

const instruction = new TransactionInstruction({
  keys: [{ pubkey: greetedPubkey, isSigner: false, isWritable: true }],
  programId,
  data: Buffer.alloc(0), // All instructions are hellos
});

const signature = await sendTransaction(
  new Transaction().add(instruction),
  connection
);
await connection.confirmTransaction(signature, "processed");

toast.success("Hello sent successfully!");

Here, the instruction is sent to the program, indicating that the user is saying "Hello" to the program. After successfully sending the transaction, the function confirms it on-chain and displays a success message. Finally, the React component renders a button that triggers the sayHello function.