Create Solana Signer From Connected Wallet Without Hooks A Step-by-Step Guide

Hey guys! Diving into the world of Web3 and Solana development can feel like stepping into a whole new universe, right? There's so much to learn, and sometimes the documentation assumes you already know a bunch of stuff. But don't worry, we're all in this together! So, you're trying to figure out how to create a signer from a connected wallet without using hooks, especially when you're brand new to this, and you're following the @solana/kit documentation. Let's break it down and make it super clear.

Understanding the Basics of Solana Transactions

Before we jump into the code, let's quickly cover what a transaction is in Solana. In essence, a transaction is a set of instructions that you want the Solana blockchain to execute. Think of it like a recipe: you have a list of steps, and the blockchain follows them. Each transaction needs a signer, which is essentially the person (or wallet) authorizing the transaction. This signer proves that they have the authority to make the changes specified in the transaction.

When starting with Solana development, understanding the fundamentals of transactions is crucial. A transaction in Solana is a bundle of instructions that you want the Solana blockchain to execute. These instructions can range from transferring tokens to interacting with smart contracts. Each transaction requires one or more signers to authorize it. The signer is a key pair that proves the transaction's originator has the authority to make the changes specified in the instructions. The signer's private key is used to digitally sign the transaction, which acts as a cryptographic signature verifying the transaction's authenticity. This signature ensures that the transaction cannot be tampered with and that only the authorized party can initiate it.

Transactions in Solana are composed of several key components:

• Instructions: These are the specific actions you want to perform on the blockchain. Each instruction specifies a program to interact with, the accounts involved, and any data needed for the action. Instructions are the building blocks of a transaction, and a single transaction can contain multiple instructions to perform complex operations.
• Signers: As mentioned earlier, signers are the wallets or accounts that authorize the transaction. Every transaction must have at least one signer, and some transactions may require multiple signers depending on the involved instructions and programs.
• Fee Payer: The fee payer is the account that will pay the transaction fees. In Solana, transaction fees are relatively low, but they are still a crucial aspect of the transaction. Typically, the signer is also the fee payer, but this can be configured differently if needed.
• Recent Blockhash: This is a hash of a recent block in the Solana blockchain. Including a recent blockhash in the transaction helps prevent replay attacks and ensures that the transaction is valid for a specific period. The blockhash acts as a form of timestamp, limiting the transaction's validity to a few blocks.

Understanding these components is key to constructing and sending transactions on the Solana network. When developing with Solana, you'll often use libraries like @solana/web3.js or @solana/kit to help you create and manage transactions. These libraries provide abstractions and utilities to simplify the process of building transactions and interacting with the Solana blockchain.

The Challenge: Creating a Signer Without Hooks

So, what's the deal with creating a signer without using hooks? Hooks, in the context of React (which is commonly used in Web3 development), are functions that let you “hook into” React state and lifecycle features from function components. They're super useful, but sometimes you want to do things a bit more manually, especially when you're learning the ropes. You might want to avoid hooks to get a clearer understanding of the underlying mechanisms or when you're working outside of a React component.

The main challenge when creating a signer without using hooks lies in managing the connection to the user's wallet and handling the signing of transactions. When using hooks, libraries like @solana/wallet-adapter-react provide a convenient way to access the connected wallet and its signer. However, without hooks, you need to handle these aspects manually. This involves interacting directly with the wallet adapter and constructing transactions in a way that the connected wallet can sign them.

To accomplish this, you'll need to use the wallet adapter to connect to the wallet, retrieve the public key of the connected account, and then use the wallet adapter's signTransaction or signAllTransactions methods to sign the transaction. This process requires a good understanding of how wallet adapters work and how to interact with them programmatically.

One common approach is to use the @solana/wallet-adapter-base library, which provides a set of base classes and interfaces for wallet adapters. This library allows you to connect to different wallets (e.g., Phantom, Solflare) in a consistent way. You can then use the adapter's methods to connect, disconnect, and sign transactions. Another library often used in conjunction with @solana/wallet-adapter-base is @solana/web3.js, which provides the core Solana web3 functionalities, such as constructing transactions and interacting with the Solana network.

The challenge also involves handling the asynchronous nature of wallet interactions. Connecting to a wallet and signing transactions are asynchronous operations, meaning they take time to complete. You need to use async/await or Promises to handle these operations correctly and ensure that your application doesn't block or behave unpredictably. This requires careful management of the asynchronous flow to ensure that transactions are signed and sent correctly.

Diving into @solana/kit and Building Transactions

The @solana/kit library is designed to simplify Solana development, providing a set of tools and utilities to help you build applications more efficiently. It offers abstractions for common tasks, such as connecting to wallets, creating transactions, and interacting with programs. When you're completely new to Solana development, @solana/kit can be a lifesaver.

One of the key features of @solana/kit is its ability to streamline the process of building and sending transactions. It provides methods for constructing transactions with specific instructions, handling signers, and sending the transaction to the Solana network. By using @solana/kit, you can avoid much of the boilerplate code typically associated with Solana development and focus on the core logic of your application.

The function you mentioned, async buildAndSendBasicTransactionWithSigner(...), is likely part of the @solana/kit library and is designed to help you build and send a basic transaction with a specified signer. This function would typically handle the details of constructing the transaction, adding the necessary instructions, and ensuring that the transaction is signed by the provided signer. By using this function, you can abstract away many of the complexities involved in creating and sending transactions.

However, when you're not using hooks, you need to manage the signer yourself. This means you need to connect to the wallet, obtain the signer, and pass it to the buildAndSendBasicTransactionWithSigner function. This process involves interacting with the wallet adapter directly and handling the asynchronous operations involved in connecting to the wallet and signing transactions.

To effectively use @solana/kit without hooks, you should first understand how to connect to a wallet using a wallet adapter. This typically involves using the @solana/wallet-adapter-base library and one of the wallet adapter implementations (e.g., @solana/wallet-adapter-phantom). Once you've connected to the wallet, you can retrieve the signer and use it to build and send transactions using @solana/kit. This approach allows you to leverage the benefits of @solana/kit while maintaining control over the wallet connection and signing process.

Step-by-Step: Creating a Signer and Sending a Transaction Without Hooks

Okay, let's get practical! Here’s a step-by-step guide on how to create a signer from a connected wallet and send a basic transaction without using hooks. We'll break it down into smaller, manageable steps.

Step 1: Install the Necessary Packages

First things first, you'll need to install the required packages. Make sure you have Node.js and npm (or yarn) installed on your system. Open your terminal and run the following command:

npm install @solana/web3.js @solana/wallet-adapter-base @solana/wallet-adapter-phantom @solana/kit

This command installs the following packages:

• @solana/web3.js: The core Solana JavaScript SDK for interacting with the Solana blockchain.
• @solana/wallet-adapter-base: Base classes and interfaces for wallet adapters.
• @solana/wallet-adapter-phantom: The Phantom wallet adapter.
• @solana/kit: The Solana Kit library for simplifying development.

Step 2: Set Up Your Imports

In your JavaScript or TypeScript file, import the necessary modules:

import { Connection, Transaction, SystemProgram, Keypair } from '@solana/web3.js';
import { PhantomWalletAdapter } from '@solana/wallet-adapter-phantom';
import { clusterApiUrl } from '@solana/web3.js';
import { createTransferInstruction } from '@solana/web3.js';

These imports provide the classes and functions needed to interact with the Solana blockchain, connect to a wallet, and create transactions. The Connection class is used to connect to a Solana cluster, Transaction is used to create transactions, and SystemProgram is used for basic system operations like transferring tokens.

Step 3: Connect to a Solana Cluster and Initialize the Phantom Wallet Adapter

Next, you need to connect to a Solana cluster and initialize the Phantom wallet adapter. This involves creating a Connection instance and a PhantomWalletAdapter instance:

const network = clusterApiUrl('devnet');
const connection = new Connection(network, 'processed');
const walletAdapter = new PhantomWalletAdapter();

Here, we're connecting to the devnet cluster, which is a test network for Solana development. You can also connect to mainnet-beta for the main Solana network or use a local cluster for development. The PhantomWalletAdapter is initialized to allow interaction with the Phantom wallet.

Step 4: Connect to the Wallet

Now, you need to connect to the user's wallet. This is an asynchronous operation, so you'll need to use async/await:

async function connectWallet() {
  try {
    await walletAdapter.connect();
    console.log('Wallet connected:', walletAdapter.publicKey.toBase58());
  } catch (error) {
    console.error('Failed to connect wallet:', error);
  }
}

connectWallet();

This function attempts to connect to the wallet using walletAdapter.connect(). If successful, it logs the public key of the connected wallet. If an error occurs, it logs the error message.

Step 5: Build a Basic Transaction

Now, let's build a basic transaction. For this example, we'll create a simple token transfer transaction:

async function buildAndSendBasicTransaction(destinationPublicKey) {
  try {
    const publicKey = walletAdapter.publicKey;
    if (!publicKey) {
      console.error('Wallet not connected');
      return;
    }

    const transaction = new Transaction().add(
        SystemProgram.transfer({
            fromPubkey: publicKey,
            toPubkey: destinationPublicKey,
            lamports: 1000, // 1000 lamports = 0.000001 SOL
        })
    );

    transaction.recentBlockhash = (await connection.getLatestBlockhash('confirmed')).blockhash;
    transaction.feePayer = publicKey;

    const signedTransaction = await walletAdapter.signTransaction(transaction);
    const signature = await connection.sendRawTransaction(signedTransaction.serialize());

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

    console.log('Transaction sent:', signature);

  } catch (error) {
    console.error('Failed to send transaction:', error);
  }
}

In this function:

• We first ensure that the wallet is connected by checking if walletAdapter.publicKey exists.
• We create a new Transaction and add a SystemProgram.transfer instruction to it. This instruction specifies the sender (fromPubkey), the recipient (toPubkey), and the amount of lamports (the smallest unit of SOL) to transfer.
• We set the transaction's recentBlockhash and feePayer. The recentBlockhash is used to prevent replay attacks, and the feePayer is the account that will pay the transaction fees.
• We use walletAdapter.signTransaction(transaction) to sign the transaction. This method uses the connected wallet to sign the transaction.
• We then send the signed transaction to the Solana network using connection.sendRawTransaction(signedTransaction.serialize()) and confirm the transaction using connection.confirmTransaction(signature, 'processed').
• If the transaction is sent successfully, we log the transaction signature. If an error occurs, we log the error message.

Step 6: Call the Function

Finally, call the buildAndSendBasicTransaction function with the recipient's public key:

const destinationPublicKey = new PublicKey('RECIPIENT_PUBLIC_KEY'); // Replace with the recipient's public key
buildAndSendBasicTransaction(destinationPublicKey);

Remember to replace RECIPIENT_PUBLIC_KEY with the actual public key of the recipient.

Best Practices and Tips

• Error Handling: Always include proper error handling in your code. Web3 interactions can fail for various reasons (e.g., network issues, wallet disconnections), so it’s essential to handle these cases gracefully.
• User Experience: Provide feedback to the user about what’s happening (e.g., “Connecting to wallet…”, “Transaction pending…”). This makes the application more user-friendly.
• Security: Keep your private keys secure. Never hardcode them in your application and always use secure methods for storing and accessing them.
• Testing: Test your code thoroughly, especially when dealing with transactions. Use test networks (like devnet) for development and testing before deploying to the main network.

Conclusion

So there you have it! Creating a signer from a connected wallet and sending a transaction without using hooks might seem daunting at first, but once you break it down into smaller steps, it becomes much more manageable. Remember, the key is to understand the underlying concepts and the tools you're using. Don't be afraid to experiment, make mistakes, and learn from them. You're on your way to becoming a Solana development wizard! Keep up the great work, and happy coding!

If you found this guide helpful, give it a thumbs up and share it with your fellow Web3 newbies. Let’s build this awesome Solana community together!