Connect a Solana wallet in Next.js to start building dApps effortlessly.

Connect a Solana wallet in Next.js to start building dApps effortlessly.

posted 3 min read

Creating Your First Solana Program: A Beginner’s Perspective

Solana is a blockchain known for its speed, scalability, and developer-friendly ecosystem. Whether you're building decentralized finance (DeFi) apps, non-fungible tokens (NFTs), or on-chain games, Solana offers tools to bring your ideas to life.

This guide helps you start by integrating wallet functionality into your app using Next.js. Then, we’ll discuss building a Solana program with Rust.


Why Start with Wallet Connection?

Connecting a wallet is foundational in blockchain applications. It allows users to authenticate, manage funds, and interact with on-chain programs. For Solana, popular wallets like Phantom or Solflare are commonly used.


Setting Up Your Project

Step 1: Create a Next.js App

Start by creating a new Next.js app:
`bash
npx create-next-app@latest my-solana-app
cd my-solana-app
`

Step 2: Install Dependencies

Install the necessary packages to interact with Solana and wallets:
`bash
yarn add @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets
`


Set Up Wallet Context

Step 1: Create a WalletContextProvider Component

Create a WalletContextProvider.js file in the components folder.

    // components/WalletContextProvider.js

import React, { useMemo } from 'react';
import {
ConnectionProvider,
WalletProvider,
} from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import {
PhantomWalletAdapter,
SolflareWalletAdapter,
} from '@solana/wallet-adapter-wallets';

import '@solana/wallet-adapter-react-ui/styles.css'; // Prebuilt styles

const WalletContextProvider = ({ children }) => {
const endpoint = 'https://api.mainnet-beta.solana.com';

const wallets = useMemo(() => [new PhantomWalletAdapter(), new SolflareWalletAdapter()], []);

return (

<ConnectionProvider endpoint={endpoint}>
  <WalletProvider wallets={wallets} autoConnect>
    <WalletModalProvider>{children}</WalletModalProvider>
  </WalletProvider>
</ConnectionProvider>

);
};

export default WalletContextProvider;

Step 2: Wrap the App in the Provider

Update _app.js to include the wallet context provider.

`javascript
// pages/_app.js
import '../styles/globals.css';
import WalletContextProvider from '../components/WalletContextProvider';

export default function MyApp({ Component, pageProps }) {
return (

<WalletContextProvider>
  <Component {...pageProps} />
</WalletContextProvider>

);
}
`


Building the Wallet Connection Interface

Step 1: Create a Connect Button

Add a button for users to connect their wallets.

`javascript
// components/ConnectWalletButton.js
import { useWallet } from '@solana/wallet-adapter-react';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';

const ConnectWalletButton = () => {
const { connected, publicKey } = useWallet();

return (

<div>
  <WalletMultiButton />
  {connected && <p>Connected: {publicKey.toString()}</p>}
</div>

);
};

export default ConnectWalletButton;
`

Step 2: Use the Button in Your Main Page

`javascript
// pages/index.js
import ConnectWalletButton from '../components/ConnectWalletButton';

export default function Home() {
return (

<div>
  <h1>Welcome to My Solana App</h1>
  <ConnectWalletButton />
</div>

);
}
`


Interacting with Solana Programs

Once the wallet is connected, you can interact with Solana programs. Here’s a simple example of sending 1 SOL to another wallet address:

Step 1: Create a Transaction Function

Add a function for creating and sending transactions.

`javascript
import { Connection, PublicKey, Transaction, SystemProgram } from '@solana/web3.js';
import { useWallet } from '@solana/wallet-adapter-react';

const SendSolButton = () => {
const { publicKey, sendTransaction } = useWallet();

const sendSol = async () => {

if (!publicKey) return alert('Connect your wallet first!');

const connection = new Connection('https://api.mainnet-beta.solana.com');
const recipient = new PublicKey('YourRecipientWalletAddressHere');

const transaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: publicKey,
    toPubkey: recipient,
    lamports: 1_000_000_000, // 1 SOL
  })
);

const signature = await sendTransaction(transaction, connection);
alert(`Transaction sent: ${signature}`);

};

return ;
};

export default SendSolButton;
`

Step 2: Add the Button to Your Main Page

`javascript
// pages/index.js
import ConnectWalletButton from '../components/ConnectWalletButton';
import SendSolButton from '../components/SendSolButton';

export default function Home() {
return (

<div>
  <h1>Welcome to My Solana App</h1>
  <ConnectWalletButton />
  <SendSolButton />
</div>

);
}
`


Where to Go Next?

Now that you have:
1. Integrated wallet connection.
2. Added functionality for sending SOL.

You can:
- Write Solana programs in Rust.
- Use frameworks like Anchor to simplify Solana development.
- Explore advanced use cases like NFTs, DeFi, and GameFi.


Conclusion

Starting with wallet integration in Next.js simplifies your app’s user onboarding and prepares you for further development with Solana. Share your projects and feedback to inspire the community.

Resources:
- Solana Web3.js Documentation
- Phantom Wallet Documentation
- Solana Official Docs

Happy coding!

If you read this far, tweet to the author to show them you care. Tweet a Thanks
The code snippet is not formatted well. Nice article though.

More Posts

Setting Up Next.js Authentication with Supabase: A Complete Guide

Anuj Kumar Sharma - Jan 22

A Web App to Showcase all your GitHub Projects

2KAbhishek - May 6, 2024

Create your first SPL token on Solana with this step-by-step guide.

adewumi israel - Jan 25

How Open Source is Shaping My Journey as a Developer

Anuj Kumar Sharma - Jan 7

Solana Blockchain Data Analysis: A Guide to Using Solana Explorer for Transactions and Block

adewumi israel - Feb 4
chevron_left