Introduction

Prerequisites

• Have a basic understanding of Solana backend and have gone through the helloworld example here.
• A basic understanding of React.js is required.

Requirements

• Node.js version 14.18.1 or higher
• The Rust toolchain, which can be found at https://rustup.rs
• The Solana CLI, which can be found at https://docs.solana.com/cli/install-solana-cli-tools
• A Solana Wallet (like Phantom, Solflare, etc.), check out the Wallet guide here.

Create an empty Chakra App

npx create-react-app solana-boilerplate --template @chakra-ui
cd solana-boilerplate

• This creates a scaffolding for a simple web app with the main file of the application, src/App.js, containing a welcome message and a rotating Logo. We don't need that, so let's remove the existing contents of App.js and replace it with the following:

import React from "react";
import {
  ChakraProvider,
  Box,
  Text,
  VStack,
  Grid,
  theme,
} from "@chakra-ui/react";
import { ColorModeSwitcher } from "./ColorModeSwitcher";

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box textAlign="center" fontSize="xl">
        <Grid minH="100vh" p={3}>
          <ColorModeSwitcher justifySelf="flex-end" />
          <VStack spacing={8}>
            <Text>Hello world!</Text>
          </VStack>
        </Grid>
      </Box>
    </ChakraProvider>
  );
}

export default App;

Basic interaction with the Solana Network

• We begin by installing the package to the app

npm install --save @solana/web3.js

• Import the package in App.js

import * as web3 from "@solana/web3.js";

• We are not using wallets as of now (more on that in subsequent sections), so we will make a makeshift wallet; if a private key does not exist in local storage, generate a new one. So, we add this code to the global scope

// Making a connection with Solana devnet
const connection = new web3.Connection(
  web3.clusterApiUrl("devnet"),
  "confirmed"
);

// Access a localstorage item pvkey
const pvkey = localStorage.getItem("pvkey");
var wallet;
if (pvkey === null) {
  // if nothing is found
  // generate a new wallet keypair and store the private key in localstorage
  wallet = web3.Keypair.generate();
  localStorage.setItem("pvkey", wallet.secretKey);
} else {
  // if existing wallet is found, parse the wallet
  let arr = new Uint8Array(pvkey.replace(/, +/g, ",").split(",").map(Number));
  // and create a wallet object
  wallet = web3.Keypair.fromSecretKey(arr);
}

const [account, setAccount] = useState(null);

useEffect(() => {
  async function init() {
    // get account info from the network
    let acc = await connection.getAccountInfo(wallet.publicKey);
    setAccount(acc);
  }
  init();
}, []);

<Text>Wallet Public Key: {wallet.publicKey.toBase58()}</Text>
<Text>
  Balance:{' '}
  {account ? (account.lamports / web3.LAMPORTS_PER_SOL) + ' SOL' : 'Loading..'}
</Text>

Getting Airdrops

const toast = useToast();
const [airdropProcessing, setAirdropProcessing] = useState(false);

const getAirdrop = useCallback(async () => {
  setAirdropProcessing(true);
  try {
    var airdropSignature = await connection.requestAirdrop(
      wallet.publicKey,
      web3.LAMPORTS_PER_SOL
    );
    await connection.confirmTransaction(airdropSignature);
  } catch (error) {
    toast({ title: "Airdrop failed", description: error });
  }
  let acc = await connection.getAccountInfo(wallet.publicKey);
  setAccount(acc);
  setAirdropProcessing(false);
}, [toast]);

<Button onClick={getAirdrop} isLoading={airdropProcessing}>
  Get Airdrop of 1 SOL
</Button>

Get Transaction history

const [transactions, setTransactions] = useState(null);
...
  async function init() {
    let acc = await connection.getAccountInfo(wallet.publicKey);
    setAccount(acc);
    let transactions = await connection.getConfirmedSignaturesForAddress2(
      wallet.publicKey,
      {
        limit: 10,
      }
    );
    setTransactions(transactions);
  }

<Heading>Transactions</Heading>;
{
  transactions && (
    <VStack>
      {transactions.map((v, i, arr) => (
        <HStack key={"transaction-" + i}>
          <Text>Signature: </Text>
          <Code>{v.signature}</Code>
        </HStack>
      ))}
    </VStack>
  );
}

Realtime account updates using polling and custom React Hooks

function useSolanaAccount() {
  const [account, setAccount] = useState(null);
  const [transactions, setTransactions] = useState(null);
  // updating logic here
  return { account, transactions };
}

function useSolanaAccount() {
  const [account, setAccount] = useState(null);
  const [transactions, setTransactions] = useState(null);

  async function init() {
    let acc = await connection.getAccountInfo(wallet.publicKey);
    setAccount(acc);
    let transactions = await connection.getConfirmedSignaturesForAddress2(
      wallet.publicKey,
      {
        limit: 10,
      }
    );
    setTransactions(transactions);
  }

  // more code here

  return { account, transactions };
}

function useSolanaAccount() {
  const [account, setAccount] = useState(null);
  const [transactions, setTransactions] = useState(null);

  async function init() {
    let acc = await connection.getAccountInfo(wallet.publicKey);
    setAccount(acc);
    let transactions = await connection.getConfirmedSignaturesForAddress2(
      wallet.publicKey,
      {
        limit: 10,
      }
    );
    setTransactions(transactions);
  }

  useEffect(() => {
    setInterval(init, 1000);
  }, []);

  return { account, transactions };
}

...
const { account, transactions } = useSolanaAccount();
const toast = useToast();
const [airdropProcessing, setAirdropProcessing] = useState(false);

...

Using an actual wallet

const connection = new web3.Connection(
  web3.clusterApiUrl("devnet"),
  "confirmed"
);

const pvkey = localStorage.getItem("pvkey");
var wallet;
if (pvkey === null) {
  wallet = web3.Keypair.generate();
  localStorage.setItem("pvkey", wallet.secretKey);
} else {
  let arr = new Uint8Array(pvkey.replace(/, +/g, ",").split(",").map(Number));
  wallet = web3.Keypair.fromSecretKey(arr);
}

• Start by installing the required packages

npm i @solana/wallet-adapter-wallets \
      @solana/wallet-adapter-base \
      @solana/wallet-adapter-react \
      @solana/wallet-adapter-react-ui

• Add the required imports just after the previous imports end. Note that the last import is done using require and would need to be after all the imports at all the times.

import {
  ConnectionProvider,
  WalletProvider,
  useConnection,
  useWallet,
} from "@solana/wallet-adapter-react";
import {
  getPhantomWallet,
  getSolflareWallet,
  getSolletWallet,
  getSolletExtensionWallet,
} from "@solana/wallet-adapter-wallets";
import {
  WalletModalProvider,
  WalletMultiButton,
} from "@solana/wallet-adapter-react-ui";
require("@solana/wallet-adapter-react-ui/styles.css");

• Inside the App component body, add

const network = "devnet";
const endpoint = web3.clusterApiUrl(network);
const wallets = useMemo(
  () => [
    getPhantomWallet(),
    getSolflareWallet(),
    getSolletWallet({ network }),
    getSolletExtensionWallet({ network }),
  ],
  [network]
);

return (
  <ChakraProvider theme={theme}>
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>{/* All the same elements */}</WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  </ChakraProvider>
);

function App() {
  const network = "devnet";
  const endpoint = web3.clusterApiUrl(network);
  const wallets = useMemo(
    () => [
      getPhantomWallet(),
      getSolflareWallet(),
      getSolletWallet({ network }),
      getSolletExtensionWallet({ network }),
    ],
    [network]
  );

  return (
    <ChakraProvider theme={theme}>
      <ConnectionProvider endpoint={endpoint}>
        <WalletProvider wallets={wallets} autoConnect>
          <WalletModalProvider>
            <Home></Home>
          </WalletModalProvider>
        </WalletProvider>
      </ConnectionProvider>
    </ChakraProvider>
  );
}

function Home() {
  const { connection } = useConnection();
  const { publicKey } = useWallet();
  const { account, transactions } = useSolanaAccount();
  const toast = useToast();
  const [airdropProcessing, setAirdropProcessing] = useState(false);

  const getAirdrop = useCallback(async () => {
    setAirdropProcessing(true);
    try {
      var airdropSignature = await connection.requestAirdrop(
        publicKey,
        web3.LAMPORTS_PER_SOL
      );
      await connection.confirmTransaction(airdropSignature);
    } catch (error) {
      console.log(error);
      toast({ title: "Airdrop failed", description: "unknown error" });
    }
    setAirdropProcessing(false);
  }, [toast, publicKey, connection]);

  return (
    <Box textAlign="center" fontSize="xl">
      <Grid minH="100vh" p={3}>
        <ColorModeSwitcher justifySelf="flex-end" />
        {publicKey && (
          <VStack spacing={8}>
            <Text>Wallet Public Key: {publicKey.toBase58()}</Text>
            <Text>
              Balance:{" "}
              {account
                ? account.lamports / web3.LAMPORTS_PER_SOL + " SOL"
                : "Loading.."}
            </Text>
            <Button onClick={getAirdrop} isLoading={airdropProcessing}>
              Get Airdrop of 1 SOL
            </Button>
            <Heading>Transactions</Heading>
            {transactions && (
              <VStack>
                {transactions.map((v, i, arr) => (
                  <HStack key={"transaction-" + i}>
                    <Text>Signature: </Text>
                    <Code>{v.signature}</Code>
                  </HStack>
                ))}
              </VStack>
            )}
          </VStack>
        )}
        {!publicKey && <WalletMultiButton />}
      </Grid>
    </Box>
  );
}

function useSolanaAccount() {
  const [account, setAccount] = useState(null);
  const [transactions, setTransactions] = useState(null);
  const { connection } = useConnection();
  const { publicKey } = useWallet();

  const init = useCallback(async () => {
    if (publicKey) {
      let acc = await connection.getAccountInfo(publicKey);
      setAccount(acc);
      let transactions = await connection.getConfirmedSignaturesForAddress2(
        publicKey,
        {
          limit: 10,
        }
      );
      setTransactions(transactions);
    }
  }, [publicKey, connection]);

  useEffect(() => {
    if (publicKey) {
      setInterval(init, 1000);
    }
  }, [init, publicKey]);

  return { account, transactions };
}

Sending transactions - Greeting yourself

• Clone the repository https://github.com/solana-labs/example-helloworld.
• While being inside the repository, run npm run build:program-rust to build the program.
• Deploy the program to devnet using solana program deploy --url https://api.devnet.solana.com dist/program/helloworld.so. This should print out a program ID. Please take a note of it. For me, it was FGbjtxeYmT5jUP7aNavo9k9mQ3rGQ815WdvwWndR7FF9, so I will use this in the following example.

import React from "react";
import { HStack, Button, Text } from "@chakra-ui/react";

export function Greet() {
  return (
    <HStack>
      <Text>Total greetings: {"0"}</Text>
      <Button>Greet Yourself</Button>
    </HStack>
  );
}

import { Greet } from "./Greet";

...
  <Button onClick={getAirdrop} isLoading={airdropProcessing}>
    Get Airdrop of 1 SOL
  </Button>
  <Greet />
...

1. Get the current number of greetings sent to you.
2. Greet yourself.

• Store the program id and a fixed seed as a global constant.

const programId = new PublicKey("FGbjtxeYmT5jUP7aNavo9k9mQ3rGQ815WdvwWndR7FF9");
const GREETING_SEED = "hello";

• To have a similar interface as in the Rust struct GreetingAccount, we create a similar global class in Javascript.

class GreetingAccount {
  counter = 0;
  constructor(fields) {
    if (fields) {
      this.counter = fields.counter;
    }
  }
}

• Now, accounts in Solana only store raw bytes. As we serialize/deserialize in the Rust code using borsh, we will do the same here using the borsh package. Deserializing using borsh requires a schema that tells the deserializing logic about the size of different fields. We create that schema next, along with the total size of the serialized class object (we need the size when we create a new greeting account and pay only for the size each greeting account needs).

const GreetingSchema = new Map([
  [GreetingAccount, { kind: "struct", fields: [["counter", "u32"]] }],
]);

const GREETING_SIZE = borsh.serialize(
  GreetingSchema,
  new GreetingAccount()
).length;

• Whenever we fetch the account info from the blockchain, we get it as a form of AccountInfo. To directly fetch the counter from it, we define a straightforward function, which gets the data from AccountInfo, deserializes it, and returns the counter subobject.

function counterFromAccountInfo(accountInfo) {
  const data = borsh.deserialize(
    GreetingSchema,
    GreetingAccount,
    accountInfo.data
  );
  return data.counter;
}

• We now start writing out Greet component by adding the wallet and connection descriptors, along with a state variable containing the current counter of greetings and change the text that shows the counter.

const wallet = useWallet();
const { connection } = useConnection();
const [counter, setCounter] = useState(null);
...
<Text>Total greetings: {counter === null ? 'Loading..' : counter}</Text>

• First, we will write the logic that fetches the current number of greetings sent to you. What we need to do is, first on page load, get the current number of greetings sent to you, and then add a listener on changes made to the account for any new greetings (this time, we will use onAccountChange instead of polling). To get the current number of greetings, we will use connection.getAccountInfo on the generated program account inside useEffect to do it on load.

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

const currentAccountInfo = await connection.getAccountInfo(
  greetedPubkey,
  "confirmed"
);

if (currentAccountInfo === null) {
  setCounter(0);
} else {
  setCounter(counterFromAccountInfo(currentAccountInfo));
}

connection.onAccountChange(
  greetedPubkey,
  (accountInfo, _) => {
    setCounter(counterFromAccountInfo(accountInfo));
  },
  "confirmed"
);

useEffect(() => {
  async function addListener() {
    if (wallet.publicKey) {
      const greetedPubkey = await PublicKey.createWithSeed(
        wallet.publicKey,
        GREETING_SEED,
        programId
      );
      const currentAccountInfo = await connection.getAccountInfo(
        greetedPubkey,
        "confirmed"
      );
      if (currentAccountInfo === null) {
        setCounter(0);
      } else {
        setCounter(counterFromAccountInfo(currentAccountInfo));
      }
      connection.onAccountChange(
        greetedPubkey,
        (accountInfo, _) => {
          setCounter(counterFromAccountInfo(accountInfo));
        },
        "confirmed"
      );
    }
  }
  addListener();
}, [connection, wallet.publicKey]);

• Second thing that we want to implement is to greet ourselves when we click the button. For this, we create a new callback and pass it as the onClick for the button.

const greet = useCallback(async () => {
  // code goes here ..
});
...
<Button onClick={greet}>Greet Yourself</Button>

1. Generate program account public key using PublicKey.createWithSeed, if the account does not exist, pay for creating the account with the required storage space.
2. Send the program the public key to greet (in this case, our own program key).

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

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

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

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

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

const signature = await wallet.sendTransaction(
  new Transaction().add(instruction),
  connection
);

await connection.confirmTransaction(signature, "processed");

const greet = useCallback(async () => {
  const greetedPubkey = await PublicKey.createWithSeed(
    wallet.publicKey,
    GREETING_SEED,
    programId
  );

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

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

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

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

  const signature = await wallet.sendTransaction(
    new Transaction().add(instruction),
    connection
  );

  await connection.confirmTransaction(signature, "processed");
}, [connection, wallet]);

Greeting others

const greet = useCallback(
  async (publicKey) => {
    const recipient = new PublicKey(publicKey);
    const greetedPubkey = await PublicKey.createWithSeed(
      recipient,
      GREETING_SEED,
      programId
    );

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

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

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

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

    const signature = await wallet.sendTransaction(
      new Transaction().add(instruction),
      connection
    );

    await connection.confirmTransaction(signature, "processed");
  },
  [connection, wallet]
);

const greetYourself = useCallback(async () => {
  await greet(wallet.publicKey.toBase58());
}, [greet, wallet.publicKey]);

const [recipient, setRecipient] = useState("");
return (
  <VStack width="full">
    <HStack>
      <Text>Total greetings: {counter === null ? "Loading.." : counter}</Text>
      <Button onClick={greetYourself}>Greet Yourself</Button>
    </HStack>
    <HStack>
      <Text width="full">Greet Someone: </Text>
      <Input
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      ></Input>
      <Button
        onClick={() => {
          greet(recipient);
        }}
      >
        Greet
      </Button>
    </HStack>
  </VStack>
);

Organizing things

return (
  <Box textAlign="center" fontSize="xl">
    <Grid minH="100vh" p={3}>
      <Tabs variant="soft-rounded" colorScheme="green">
        <TabList width="full">
          <HStack justify="space-between" width="full">
            <HStack>
              <Tab>Home</Tab>
              <Tab>Transaction History</Tab>
            </HStack>
            <ColorModeSwitcher justifySelf="flex-end" />
          </HStack>
        </TabList>
        <TabPanels>
          <TabPanel>
            {publicKey && (
              <VStack spacing={8}>
                <Text>Wallet Public Key: {publicKey.toBase58()}</Text>
                <Text>
                  Balance:{" "}
                  {account
                    ? account.lamports / web3.LAMPORTS_PER_SOL + " SOL"
                    : "Loading.."}
                </Text>
                <Button onClick={getAirdrop} isLoading={airdropProcessing}>
                  Get Airdrop of 1 SOL
                </Button>
                <Greet />
              </VStack>
            )}
            {!publicKey && <WalletMultiButton />}
          </TabPanel>
          <TabPanel>
            {publicKey && (
              <VStack spacing={8}>
                <Heading>Transactions</Heading>
                {transactions && (
                  <VStack>
                    {transactions.map((v, i, arr) => (
                      <HStack key={"transaction-" + i}>
                        <Text>Signature: </Text>
                        <Code>{v.signature}</Code>
                      </HStack>
                    ))}
                  </VStack>
                )}
              </VStack>
            )}
            {!publicKey && <WalletMultiButton />}
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Grid>
  </Box>
);

<HStack justify="space-between" width="full">
  <HStack>
    <Tab>Home</Tab>
    <Tab>Transaction History</Tab>
  </HStack>
  <HStack>
    {publicKey && <WalletDisconnectButton bg="green" />}
    <ColorModeSwitcher justifySelf="flex-end" />
  </HStack>
</HStack>

function WalletNotConnected() {
  return (
    <VStack height="70vh" justify="space-around">
      <VStack>
        <Text fontSize="2xl">
          {" "}
          Looks like your wallet is not connnected. Connect a wallet to get started!
        </Text>
        <WalletMultiButton />
      </VStack>
    </VStack>
  );
}

<SimpleGrid columns={2} spacing={10}>
  <VStack spacing={8} borderRadius={10} borderWidth={2} p={10}>
    <FormControl id="pubkey">
      <FormLabel>Wallet Public Key</FormLabel>
      <Input type="text" value={publicKey.toBase58()} readOnly />
    </FormControl>
    <FormControl id="balance">
      <FormLabel>Balance</FormLabel>
      <Input
        type="text"
        value={
          account
            ? account.lamports / web3.LAMPORTS_PER_SOL + " SOL"
            : "Loading.."
        }
        readOnly
      />
    </FormControl>
    <Button onClick={getAirdrop} isLoading={airdropProcessing}>
      Get Airdrop of 1 SOL
    </Button>
  </VStack>
  <VStack>
    <Greet />
  </VStack>
</SimpleGrid>

return (
  <>
    <VStack width="full" spacing={8} borderRadius={10} borderWidth={2} p={10}>
      <FormControl id="greetings">
        <FormLabel>No. of greetings recieved</FormLabel>
        <Input
          type="text"
          value={counter === null ? "Loading.." : counter}
          readOnly
        />
      </FormControl>
      <HStack>
        <Button onClick={greetYourself}>Greet Yourself</Button>
      </HStack>
    </VStack>
    <VStack width="full" spacing={8} borderRadius={10} borderWidth={2} p={10}>
      <FormControl id="send">
        <FormLabel>Send greeting to public key</FormLabel>
        <Input
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
        ></Input>
      </FormControl>
      <Button
        onClick={() => {
          greet(recipient);
        }}
      >
        Greet
      </Button>
    </VStack>
  </>
);

Conclusion

About the author

References

• Solana example-helloworld repository
• Chakra UI Documentation