Signing & Sending Transactions

Hello! Welcome to our next lesson on building client-side applications for Solana.

In our last lesson, we saw how the Anchor client provides a powerful, streamlined way to build and send transactions. We used program.methods...rpc() to interact with an on-chain program from a TypeScript script. However, all our transactions were signed automatically by a local, file-based keypair. This is great for testing and backend scripts, but it's not how a decentralized application (dApp) works.

Today, we'll bridge that gap. We are moving from a script-based environment to a user-facing dApp. The goal is to have the user, through their own browser wallet like Phantom or Solflare, approve and sign the transactions our application builds.

This lesson will cover how to:

• Integrate the Solana Wallet Adapter into a React application.
• Use React hooks to get the connected user's wallet information.
• Use the connected wallet to sign and send transactions that we build with the Anchor client.

1. The Solana Wallet Adapter: Your dApp's Gateway to Wallets

To interact with a user's wallet, we can't just access it directly. We need a standard, secure way to request actions like signing. This is where the Solana Wallet Adapter comes in. It's a suite of libraries that provide a modular and consistent interface for dApps to communicate with many different wallets.

For a web developer like yourself, you can think of it as a plug-in system. You install the core adapter libraries, and then you add "plugins" for each wallet you want to support (Phantom, Solflare, Coinbase Wallet, etc.). The adapter handles the complex discovery and communication logic, exposing a simple API to your application.

2. Setting Up the dApp Environment

To make wallet state (like the connection status and user's public key) available throughout our entire React application, the Wallet Adapter uses React's Context API. This is a standard pattern in React for managing global state, which should be familiar to you.

We need to wrap our main application component with a few Provider components.

Here’s a summary of the setup in a typical App.tsx file:

import { useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
    WalletModalProvider,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden
require('@solana/wallet-adapter-react-ui/styles.css');

export const App = () => {
    const network = WalletAdapterNetwork.Devnet;
    const endpoint = useMemo(() => clusterApiUrl(network), [network]);
    const wallets = useMemo(
        () => [
            new PhantomWalletAdapter(),
            new SolflareWalletAdapter(),
        ],
        [network]
    );

    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    {/* Your App's components go here */}
                    <div style={{ padding: '20px' }}>
                        <WalletMultiButton />
                        {/* We will add our transaction button here */}
                    </div>
                </WalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};

With this structure, any child component can now access the wallet's state. The WalletMultiButton is a pre-built component that handles the entire connect/disconnect UI flow for you.

3. Accessing the Wallet and Sending a Transaction

Once the providers are set up, we can use hooks provided by @solana/wallet-adapter-react to get the wallet's data and functions.

The two most important hooks are:

• useConnection(): Returns a @solana/web3.js Connection object for the currently configured RPC endpoint.
• useWallet(): Returns an object containing the wallet's state, including the user's publicKey, a boolean connected flag, and functions to sign and send transactions.

The key to this lesson is understanding how these hooks connect back to the Anchor client we learned about previously.

In the last lesson, we created our AnchorProvider like this:

// Previous lesson: using a file-based keypair
const wallet = new Wallet(payerKeypair);
const provider = new AnchorProvider(connection, wallet, opts);

Now, in our dApp, the useWallet hook gives us an object that acts as our wallet. This object has the necessary methods (signTransaction, signAllTransactions) that AnchorProvider needs. When these methods are called, the Wallet Adapter routes the request to the user's connected browser wallet, triggering the pop-up for approval.

Here is the new flow:

1. Inside your React component, get the connection from useConnection.
2. Get the wallet object and publicKey from useWallet.
3. When a user clicks a button to perform an action:
   a. Create an AnchorProvider using the connection and wallet from the hooks.
   b. Create your Program object using this new provider.
   c. Call program.methods.yourInstruction(...).rpc() exactly as before.

Because the provider is now configured with the user's wallet, the .rpc() call will automatically trigger the wallet pop-up for signing before sending the transaction.

Let's watch this entire flow in a detailed, practical example.

The user experience of this flow is the "magic" of a dApp. The frontend prepares a transaction, but the user remains in full control, using their private key (safely stored in their wallet) to authorize it.

4. .rpc() vs. sendTransaction

It's important to clarify one point. The useWallet hook also returns a function called sendTransaction. This function takes a complete, pre-built Transaction object and asks the wallet to sign and send it.

So, why do we use Anchor's .rpc() instead?

Anchor's .rpc() is a higher-level convenience method that does several things for you:

1. Builds the instruction from your program.methods call.
2. Fetches the latest blockhash.
3. Assembles a Transaction object, setting the user's wallet as the fee payer.
4. Calls the provider's wallet to sign the transaction (triggering the pop-up).
5. Sends the signed transaction to the network.
6. Waits for the transaction to be confirmed based on the provider's commitment level.

You could achieve the same result manually by building the instruction with .instruction(), creating a Transaction, and then passing it to the sendTransaction function from useWallet. However, when using the Anchor client, letting .rpc() handle this entire lifecycle is much simpler and less error-prone.

Conclusion

You've now connected the dots between building transactions with Anchor and having a real user sign them in a dApp. This is a fundamental skill for any Solana developer.

Key Takeaways:

• The Solana Wallet Adapter is the essential middleware that connects your dApp to various user wallets.
• Setup involves wrapping your app in ConnectionProvider and WalletProvider to make wallet state globally available.
• The useConnection and useWallet hooks are the entry points for accessing the connection and user wallet within your components.
• The wallet object from useWallet can be passed directly into an AnchorProvider, seamlessly integrating the user's wallet into the Anchor client workflow.
• Calling .rpc() on an Anchor program method will now automatically prompt the user to sign the transaction with their connected wallet.

In our next lesson, we will focus on what happens after you send a transaction. We'll explore how to confirm a transaction and handle different commitment levels (processed, confirmed, finalized), ensuring your dApp can reliably give feedback to the user about the status of their on-chain actions.