Interacting with Wallets in Solana dApps

·

Blockchain technology has revolutionized how we think about digital ownership, identity, and trust. At the heart of this transformation are cryptographic wallets—the essential tools users rely on to securely manage their assets and interact with decentralized applications (dApps). Whether you're building a simple token transfer interface or a complex DeFi platform, understanding how to integrate wallet functionality is crucial.

This guide walks you through the fundamentals of wallet integration in Solana-based dApps, focusing on secure interactions, user experience, and practical implementation using modern development tools.

Understanding Digital Wallets

In blockchain systems like Solana, a wallet is not a place where tokens are stored—it's a tool that manages your cryptographic key pair: a public key (your address) and a private key (your secret access code). The private key must remain confidential at all times, as anyone who gains access to it can control your funds and sign transactions on your behalf.

There are two primary types of wallets:

👉 Discover how secure crypto interactions power next-gen dApps

Most developers building for web3 today focus on software wallets, especially browser extensions like Phantom, which provide seamless integration between users and dApps. These wallets allow websites to:

Crucially, the website never sees the private key. Instead, all signing operations happen inside the wallet app, ensuring user security.

Why Phantom Wallet?

Phantom is one of the most widely used software wallets in the Solana ecosystem. It supports major browsers (Chrome, Brave, Firefox, Edge) and offers a mobile app for on-the-go access. Its clean interface and strong developer support make it an ideal choice for both users and builders.

While your dApp may eventually support multiple wallets, starting with Phantom simplifies development without sacrificing real-world relevance.

Simplifying Integration with Solana’s Wallet Adapter

Manually handling wallet connections across different providers would be time-consuming and error-prone. Fortunately, Solana provides the Wallet Adapter library—a modular set of tools that standardizes wallet integration.

The core packages include:

Thanks to the Wallet Standard, most modern Solana wallets work out of the box, reducing the need for custom adapters.

Installing Required Dependencies

To add wallet support to a React-based dApp, install these core packages:

npm install @solana/wallet-adapter-base \
 @solana/wallet-adapter-react \
 @solana/wallet-adapter-react-ui \
 @solana/web3.js

These libraries enable you to manage connections, detect wallet states, and render user-friendly interfaces with minimal effort.

Setting Up Wallet Context Providers

To maintain consistent wallet and connection states across your app, wrap your components with context providers from the Wallet Adapter.

Create a WalletContextProvider.tsx file:

import { FC, ReactNode } from "react";
import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import * as web3 from "@solana/web3.js";
require("@solana/wallet-adapter-react-ui/styles.css");

const WalletContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const endpoint = web3.clusterApiUrl("devnet");
  const wallets = [] as any[];

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets}>
        <WalletModalProvider>
          {children}
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
};

export default WalletContextProvider;

Wrap your main app component with this provider to ensure all child components have access to wallet and connection data.

Adding a Connect Wallet Button

Now that the context is set up, integrate a ready-to-use connection button. Import WalletMultiButton into your navigation bar or header component:

import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";

export const AppBar: FC = () => {
  return (
    <div>
      <h2>My dApp</h2>
      <WalletMultiButton />
    </div>
  );
};

This single component handles:

Users with Phantom installed will see it as an option and can connect with one click.

👉 See how top dApps streamline user onboarding with smart wallet integration

Accessing User Account Information

Once connected, use the useWallet and useConnection hooks to retrieve user data.

Here's an example of a balance display component:

import { useConnection, useWallet } from "@solana/wallet-adapter-react";
import { LAMPORTS_PER_SOL } from "@solana/web3.js";
import { FC, useEffect, useState } from "react";

export const BalanceDisplay: FC = () => {
  const [balance, setBalance] = useState(0);
  const { connection } = useConnection();
  const { publicKey } = useWallet();

  useEffect(() => {
    if (!connection || !publicKey) return;

    connection.onAccountChange(publicKey, (updatedInfo) => {
      setBalance(updatedInfo.lamports / LAMPORTS_PER_SOL);
    });

    connection.getAccountInfo(publicKey).then((info) => {
      if (info) setBalance(info.lamports / LAMPORTS_PER_SOL);
    });
  }, [connection, publicKey]);

  return <p>{publicKey ? `Balance: ${balance} SOL` : ""}</p>;
};

This component listens for real-time balance updates whenever a transaction affects the account.

Sending Transactions Securely

To send a transaction, use the sendTransaction function provided by useWallet. Here's how to send SOL:

const { publicKey, sendTransaction } = useWallet();
const { connection } = useConnection();

const sendSol = async (recipient: string) => {
  if (!publicKey) return;

  const transaction = new web3.Transaction();
  const recipientPubKey = new web3.PublicKey(recipient);

  const instruction = web3.SystemProgram.transfer({
    fromPubkey: publicKey,
    toPubkey: recipientPubKey,
    lamports: 0.1 * web3.LAMPORTS_PER_SOL,
  });

  transaction.add(instruction);
  const signature = await sendTransaction(transaction, connection);
  console.log("Transaction sent:", signature);
};

When executed, this triggers the user’s wallet (e.g., Phantom) to prompt for approval before signing and broadcasting.

Frequently Asked Questions

How does a wallet keep my private key safe?

Software wallets like Phantom store your private key locally in encrypted form within the browser or device. It never leaves the wallet environment, so even malicious websites cannot access it. Hardware wallets go further by isolating keys in secure physical chips.

Can I connect multiple wallets to my dApp?

Yes. The Solana Wallet Adapter supports connecting multiple compatible wallets. Users can switch between them via the wallet selection modal provided by WalletModal.

What is the difference between devnet and mainnet?

Devnet is a testing network where tokens have no real value. It allows developers to test features without risking actual funds. Mainnet-beta is the live network used for production applications and real transactions.

Why use useMemo for wallets array?

Wrapping the wallets array in useMemo prevents unnecessary re-renders caused by React treating empty arrays as new instances on each render. This ensures stable references and optimal performance.

Do I need to handle errors when sending transactions?

Yes. Always wrap transaction calls in try-catch blocks and inform users of failures due to insufficient balance, network issues, or rejected approvals.

Is it possible to customize the wallet modal?

Absolutely. While WalletMultiButton offers convenience, you can build custom modals using lower-level components like WalletModal, WalletModalButton, and WalletDisconnectButton for full design control.

Building a Practical Example: Ping Program Frontend

Let’s apply what we’ve learned by creating a frontend for a simple "ping" program deployed on Solana devnet.

  1. Set up Phantom in Devnet mode
    Switch Phantom to Devnet via Settings > Developer Settings.
  2. Install dependencies and configure providers
    Use the WalletContextProvider pattern shown earlier.
  3. Add the WalletMultiButton
    Let users connect their Phantom wallet directly from the UI.
  4. Implement the Ping Button
    Use useConnection and useWallet to create and send a transaction to the ping program:
const PROGRAM_ID = "ChT1B39WKLS8qUrkLvFDXMhEJ4F1XZzwUNHUt4AU9aVa";
const DATA_ACCOUNT = "Ah9K7dQ8EHaZqcAsgBW8w37yN2eAy3koFmUn4x3CJtod";

const instruction = new web3.TransactionInstruction({
  keys: [{ pubkey: new web3.PublicKey(DATA_ACCOUNT), isSigner: false, isWritable: true }],
  programId: new web3.PublicKey(PROGRAM_ID),
});

Upon clicking, Phantom will prompt for confirmation—just like any real transaction.

👉 Start building your own interactive dApp with secure wallet integration today

Final Thoughts

Integrating wallets into Solana dApps doesn’t have to be complex. With tools like Phantom and the Solana Wallet Adapter, developers can create secure, user-friendly experiences with minimal code. Focus on smooth onboarding, clear feedback, and intuitive design to build trust and engagement.

As you expand your skills, consider adding features like transaction history displays, Solana Explorer links, or support for NFTs and token swaps—each step bringing your dApp closer to production readiness.