© 2026 Della Group. All Rights Reserved.
Okay, before you even think about fancy UIs, grab @solana/wallet adapter react. It's the one thing that makes connecting Phantom or Backpack wallets dead simple in your React app. Why? Because users bail if they can't sign in with their wallet in under 10 seconds. I usually npm install it right after npx create react app my solana dapp. Boom, you're halfway to a working frontend.
The thing is, Solana dApps live or die by wallet integration. No fluff. This lib handles the UI modals, auto detects installed wallets, and throws up a nice connect button. In my experience, skipping it leads to hours of debugging why "window.solana" is undefined. Sound familiar?
Solana's blazing fast - think 65k TPS, fees like 0.000005 SOL per tx. That's pennies. For dApps, it means your frontend doesn't lag waiting for confirmations. But here's the catch: you need the right libs to tap that speed without Rust headaches on the frontend side.
Look, if you're coming from Ethereum, forget Ethers.js vibes. Solana's JS ecosystem is leaner, TypeScript heavy, and wallet focused. We'll hit the top ones: Wallet Adapter, Solana Web3.js, @solana/ui for components, and a few gems like Ant Design Web3. I'll show you code snippets, steps, and gotchas. Ready?
npx create next app@latest my dapp --typescript --tailwind --eslint. Next.js? Yeah, it's SSR magic for better UX, and Solana plays nice.
import { ConnectionProvider, WalletProvider } from '@solana/wallet adapter react';
import { WalletModalProvider } from '@solana/wallet adapter react ui';
import { PhantomWalletAdapter } from '@solana/wallet adapter wallets';
// ..
<ConnectionProvider endpoint="https://api.mainnet beta.solana.com">
<WalletProvider wallets={[new PhantomWalletAdapter()]} autoConnect>
<WalletModalProvider>
<App />
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
Pro tip: Use Helius or QuickNode for that endpoint instead of public RPCs. Public ones throttle at 100 reqs/sec and crash your app during hype. Helius free tier gives 3M requests - plenty for dev.
This is the official JS SDK. Handles accounts, tx signing, RPC calls. Basically, everything that touches the chain. GitHub stars? Over 1,900 last I checked. It's TypeScript native, so IntelliSense saves your butt.
Why does this matter? Without it, you're raw dogging JSON RPC. With it, sending a token transfer is like 5 lines. But watch for the gotcha: always use Connection.confirmTransaction or you'll think txs succeeded when they didn't. Solana's fast finality is ms, but networks hiccup.
In my experience, pair it with Wallet Adapter. Here's a quick send SOL button:
const { publicKey, signTransaction } = useWallet();
const sendSOL = async () => {
if (!publicKey) return;
const connection = new Connection('https://api.devnet.solana.com');
const tx = new Transaction().add(
SystemProgram.transfer({
fromPubkey: publicKey,
toPubkey: new PublicKey('RECIPIENT_HERE'),
lamports: 1000000, // 0.001 SOL
})
);
const sig = await sendTransaction(tx, connection);
await connection.confirmTransaction(sig);
};
Short, right? Test on devnet first - airdrop SOL with solana airdrop 1. Issues? If "Transaction simulation failed," check lamports (1 SOL = 1e9 lamports). Fixed that one too many times.
useWallet(), useConnection()Okay, setup's a breeze after the providers. Drop <WalletMultiButton /> anywhere. Users click, pick wallet, sign. Done. What's next? Fetch balance:
const { publicKey } = useWallet();
const balance = useQuery(() => publicKey && connection.getBalance(publicKey)); // With TanStack Query for caching
The thing is, without caching, you're spamming RPCs. Use SWR or React Query. Fees stay low - ~0.000005 SOL per balance check.
Potential issue: Mobile wallets. iOS Safari blocks some. Solution? Add window.solana.connect() fallback. I usually test on Brave Mobile first.
Solana Labs' own UI kit. Buttons, cards, modals tuned for Web3. Not as bloated as Antd, but prettier than raw Tailwind. Install: npm i @solana/ui.
Look, building a tx history table from scratch? Nah. Their TransactionList pulls recent sigs via Web3.js. Mix with Tailwind for custom vibes. In my experience, it's perfect for dashboards - NFT galleries, DeFi portfolios.
No steps here. Just import and use. But tweak CSS vars for branding. Dark theme by default - users love it.
Ant Design's Web3 extension. 700+ GitHub stars. React components for wallets, chains, tokens. Supports Solana out the box. Why pick it? If your dApp's enterprise y, like a DEX or yield farm. Tables, forms, all Web3-ready.
| Lib | Best For | Stars | Wallet Support |
|---|---|---|---|
| Wallet Adapter | Any Solana dApp | High | 20+ |
| @solana/ui | Dashboards | Official | Basic |
| Ant Design Web3 | Complex UIs | 731 | Multi chain |
Setup? Same as Wallet Adapter, plus npm i ant design web3. Drop <Web3Modal />. Pro: Built in token balances, NFT grids. Con: Heavier bundle. Lazy load if perf matters.
Honestly, I used it for a memecoin launcher. Users loved the pro look without me designing squat.
/dashboard.getParsedTokenAccountsByOwner from Web3.js.Full code? Imagine this snippet:
const tokenAccounts = await connection.getParsedTokenAccountsByOwner(publicKey, {
programId: TOKENPROGRAMID,
});
tokenAccounts.value.map(acc => acc.account.data.parsed.info.tokenAmount.uiAmount);
Gotcha: Token accounts are ATAs (Associated Token Accounts). Create 'em first with createAssociatedTokenAccountInstruction or users see 0 balances. Common noob trap.
Don't sleep on Next.js boilerplates. There's create dapp solana nextjs on GitHub - 345 stars. Scaffolds TS, Tailwind, DaisyUI, Wallet Adapter. Clone, npm i, npm run dev. You're live in 2 mins.
Why Next.js? API routes for server side RPC calls. Keeps frontend light, secrets safe. index token prices server side with Helius webhooks. Fees? Negligible since SSR batches.
But SSR gotchas: Hydration mismatches if wallet state changes. Use dynamic imports for client only components. Fixed that in my last project - smooth now.
Scaling tip: Use QuickNode add ons for MEV protection. Your swap dApp won't get sandwiched. Starts at $49/mo, worth it for mainnet.
360 stars. Plug and play for auth, balances, NFTs. Solana support's solid. Install @moralisweb3/solana api. Why bother? If you hate raw Web3.js queries.
Example: const balance = await Moralis.SolApi.account.getBalance({ address });. Boom. Handles RPC under the hood. Free tier generous.
In my experience, great for MVPs. But for prod, switch to Helius - Moralis caps at scale. Hybrid: Moralis dev, Helius prod.
If NFTs are your jam, this is it. 349 stars. Interacts with Metaplex programs - mint, list, burn. Pairs with Wallet Adapter.
Quick mint:
import { Metaplex } from '@metaplex foundation/js';
const metaplex = Metaplex.make(connection).use(walletAdapterIdentity());
const { nft } = await metaplex.nfts().create({ uri: 'your metadata.json' });
Issues? Metadata uploads to Arweave cost ~0.01 SOL. Use bundlr for batching. Candy Machine for drops - but that's backend territory.
| Use Case | Top Libs | Tx Fee Est. | Setup Time |
|---|---|---|---|
| DEX/Wallet | Web3.js + Wallet Adapter | 0.000005 SOL | 1hr |
| NFT Marketplace | Metaplex JS + @solana/ui | 0.01 SOL (mint) | 2hrs |
| DeFi Dashboard | Ant Web3 + Moralis | 0.000005 SOL | 30min |
| Simple Game | Next.js Boiler + Web3.js | ~0.0001 SOL | 45min |
Pick based on needs. Simple? Web3.js core. Fancy? Layer Antd. Speed matters most on Solana.
Now, debugging. Tx fails? Log sig, check solscan.io. "Blockhash not found"? Refetch recent blockhash. Common. Use connection.getLatestBlockhash().
Rate limits kill deploys. Pick RPC wisely:
Cache everything - Vercel Edge for balances. WebSockets for real time txs via RPC. In my experience, unsub after 10s inactivity or you leak connections.
Mobile? PWA it. Add to homescreen prompt. Solana Pay integration next level - QR payments, 1.4k stars.
That's your toolkit. Start small, iterate. Hit snags? Discord Solana devs. You'll ship faster than you think. Go build.
© 2026 Della Group. All Rights Reserved.