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!