+
+ );
+}
+
+export default App;
+```
+
+##### Option 2: Next.js (For Advanced Features)
+
+```bash
+npx create-next-app@latest solana-explorer --typescript
+cd solana-explorer
+npm install gill
+npm run dev
+```
+
+##### Option 3: CLI Tool (Alternative to Web App)
+
+See Lab Exercise 3 for detailed CLI implementation.
+
+---
+
+#### Testing Your Application
+
+**Test Cases:**
+
+1. **System Account (Wallet)**
+ ```
+ Use your own devnet wallet address from Lesson 1
+ Expected: System Account, has SOL balance
+ ```
+
+2. **Non-existent Account**
+ ```
+ Use a randomly generated valid address
+ Expected: "Account not found" message
+ ```
+
+3. **Invalid Address Format**
+ ```
+ Input: "invalid-address-123"
+ Expected: Validation error before querying
+ ```
+
+4. **Program Account**
+ ```
+ Use: TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA (Token Program)
+ Expected: Program type, executable = true
+ ```
+
+5. **Edge Cases**
+ ```
+ • Empty input
+ • Address with whitespace
+ • Very long invalid string
+ • Network timeout (disconnect internet)
+ ```
+
+---
+
+#### Submission Requirements
+
+**Deliverables:**
+
+- [ ] Working application (web or CLI)
+- [ ] Source code (well-commented)
+- [ ] README.md with:
+ - Setup instructions
+ - How to run
+ - Features implemented
+ - Technologies used
+ - Screenshots
+- [ ] Handles all error cases gracefully
+- [ ] TypeScript with no type errors
+- [ ] Clean, formatted code
-- Use gill for all RPC calls
-- Implement proper error handling
-- Display loading states
-- Format SOL amounts correctly (lamports to SOL)
+**README.md Template:**
-**Implementation Guide:**
+```markdown
+# Solana Account Explorer
-- Validate Solana addresses using gill utilities
-- Create reusable functions for account queries
-- Implement proper error handling
-- Format data for user display
+A web application for exploring Solana accounts on devnet.
+
+## Features
+
+- Query any Solana address on devnet
+- Display comprehensive account information
+- Validate addresses before querying
+- Error handling for edge cases
+- [List your bonus features]
+
+## Setup
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+## Usage
+
+1. Enter a Solana address in the search box
+2. Click "Search"
+3. View detailed account information
+
+## Technologies
+
+- React + TypeScript
+- Gill (Solana client library)
+- Vite (build tool)
+- [Other libraries you used]
+
+## Example Addresses
+
+- System Account: [your devnet wallet]
+- Token Program: TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA
+
+## Screenshots
+
+[Add screenshots here]
+\`\`\`
+
+---
## Additional Resources
### Required Reading
-- [Gill Library Documentation](https://github.com/solana-foundation/gill)
-- [Solana Account Model](https://docs.solana.com/developing/programming-model/accounts)
-- [Understanding Transactions](https://docs.solana.com/developing/programming-model/transactions)
+- [Gill Library Documentation](https://gillsdk.com)
+ - Getting started guide
+ - API reference
+ - Example projects
+
+- [Solana Core Concepts: Accounts](https://solana.com/docs/core/accounts)
+ - Account structure and types
+ - Ownership model
+ - Rent exemption
+
+- [Solana Core Concepts: Transactions](https://solana.com/docs/core/transactions)
+ - Transaction anatomy
+ - Instructions and atomicity
+ - Blockhash expiration
+
+- [Solana Core Concepts: PDAs](https://solana.com/docs/core/pda)
+ - What PDAs are and why they exist
+ - Derivation process
+ - Use cases
+
+- [Anza Wallet Adapter Documentation](https://github.com/anza-xyz/wallet-adapter)
+ - APP.md - Integration guide for applications
+ - BUILD.md - Building from source
+ - WALLET.md - Wallet developer guide
### Supplementary Materials
-- [Solana Cookbook - Getting Started](https://solanacookbook.com/getting-started/installation.html)
+- [Solana Installation Guide](https://solana.com/docs/intro/installation)
+ - One-line installer for all tools
+ - Platform-specific instructions
+ - Troubleshooting
+
+- [Solana Transaction Fees](https://solana.com/docs/core/fees)
+ - Base fees and priority fees
+ - Compute units
+ - Fee optimization
+
+- [Solana Cookbook](https://solanacookbook.com/)
+ - Practical recipes for common tasks
+ - Code examples across multiple languages
+ - Best practices
+
+- [Wallet Adapter Demo](https://anza-xyz.github.io/wallet-adapter/example/)
+ - Live example application
+ - Test wallet integration
+ - See UI components in action
-- **[TypeScript for Solana Development](https://solana.com/docs/clients/javascript)**
- The official TypeScript/JavaScript SDK documentation for Solana, covering @solana/web3.js, wallet integration, and full-stack client usage.
+- [Turborepo Documentation](https://turbo.build/repo/docs)
+ - Understanding monorepo architecture
+ - Build pipeline optimization
+ - Caching strategies
-### Practice Exercises
+### Video Tutorials (Optional)
-1. Modify the account explorer to support multiple clusters
-2. Add a "copy address" button with user feedback
-3. Implement address validation with helpful error messages
-4. Create a cluster switcher component
+- [Solana Bytes: Accounts](https://www.youtube.com/watch?v=1DRBpUpcX3w) (YouTube)
+- [Solana Bytes: Transactions](https://www.youtube.com/watch?v=3jRYQWPhSLk) (YouTube)
+- [Wallet Adapter Overview](https://www.youtube.com/results?search_query=solana+wallet+adapter+tutorial)
+
+---
## Common Issues and Solutions
### Issue: "Cannot find module 'gill'"
-**Solution:** Ensure gill is properly installed in your project dependencies.
+**Solution:** Ensure gill is properly installed:
+
+```bash
+npm install gill --save
+# or
+pnpm add gill
+```
+
+If using TypeScript, ensure `node_modules` is in your module resolution path.
+
+---
### Issue: RPC rate limiting
-**Solution:** Implement request throttling or use a dedicated RPC provider with higher rate limits.
+**Symptoms:**
+- Requests fail with 429 error
+- "Too many requests" message
+- Intermittent timeouts
+
+**Solutions:**
+
+1. **Use localhost for development:**
+ ```bash
+ # Terminal 1: Start local validator
+ solana-test-validator
+
+ # Terminal 2: In your code
+ createSolanaClient({ urlOrMoniker: 'localnet' })
+ ```
+
+2. **Add request throttling:**
+ ```typescript
+ // Simple throttle: wait between requests
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ ```
+
+3. **Use a dedicated RPC provider:**
+ - [Helius](https://helius.dev) - Free tier: 100 req/sec
+ - [QuickNode](https://quicknode.com) - Free tier available
+ - [Alchemy](https://alchemy.com) - Generous free tier
+
+---
+
+### Issue: pnpm command not found
+
+**Symptoms:**
+```
+command not found: pnpm
+```
+
+**Solution:**
+
+```bash
+# Enable pnpm via Corepack (built into Node 16+)
+corepack enable
+corepack prepare pnpm@9.1.0 --activate
+
+# Verify
+pnpm --version
+```
+
+---
+
+### Issue: wallet-adapter build fails
+
+**Symptoms:**
+- TypeScript errors during build
+- "Cannot find module" errors
+- Out of memory errors
+
+**Solutions:**
+
+1. **Check Node version:**
+ ```bash
+ node --version # Should be 18+ or 20+
+ ```
+
+2. **Clean install:**
+ ```bash
+ rm -rf node_modules
+ rm pnpm-lock.yaml
+ pnpm install
+ ```
+
+3. **Increase memory:**
+ ```bash
+ NODE_OPTIONS="--max-old-space-size=4096" pnpm build
+ ```
+
+---
+
+### Issue: "Blockhash not found" or "Transaction expired"
+
+**Symptoms:**
+- Transaction fails after delay
+- "Blockhash not found" error
+
+**Cause:** Blockhash expired (older than ~60-90 seconds)
+
+**Solution:** Fetch fresh blockhash immediately before signing:
+
+```typescript
+// ❌ BAD: Blockhash might expire
+const { value: blockhash } = await rpc.getLatestBlockhash().send();
+await doSomethingTimeConsuming(); // 2 minutes pass
+const tx = createTransaction({ latestBlockhash: blockhash, ... });
+
+// ✅ GOOD: Fresh blockhash
+const tx = createTransaction({
+ latestBlockhash: (await rpc.getLatestBlockhash().send()).value,
+ ...
+});
+```
+
+---
### Issue: CORS errors in browser
-**Solution:** Use a proxy or ensure the RPC endpoint supports CORS
+**Symptoms:**
+```
+Access to fetch at 'https://api.devnet.solana.com' from origin 'http://localhost:3000'
+has been blocked by CORS policy
+```
+
+**Solutions:**
+
+1. **Use a CORS-enabled RPC endpoint** (most dedicated providers support this)
+
+2. **Use a proxy in development:**
+ ```javascript
+ // vite.config.ts
+ export default {
+ server: {
+ proxy: {
+ '/rpc': {
+ target: 'https://api.devnet.solana.com',
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/rpc/, '')
+ }
+ }
+ }
+ }
+ ```
+
+3. **Use a dedicated RPC provider** (Helius, QuickNode, etc. - have CORS configured)
+
+---
+
+### Issue: "Invalid address format"
+
+**Symptoms:**
+- Address validation fails
+- Error creating address object
+
+**Common causes:**
+
+1. **Extra whitespace:**
+ ```typescript
+ const cleaned = addressInput.trim();
+ const addr = checkedAddress(cleaned);
+ ```
+
+2. **Wrong format (hex instead of base58):**
+ ```
+ ❌ 0x7a89b3f... (hex - Ethereum style)
+ ✅ 7xJ9qH5Gq... (base58 - Solana style)
+ ```
+
+3. **Truncated address:**
+ ```
+ Solana addresses are 32-44 characters (base58 encoded)
+ If shorter, it's truncated for display
+ ```
+
+---
## Week 1 Quiz Questions
-1. What advantages does gill offer over traditional Web3.js?
-2. Explain the difference between a Solana account and a wallet
-3. What is the purpose of the `pipe` function in gill?
-4. How do you convert lamports to SOL?
-5. What information does `getAccountInfo` return?
+Test your understanding with these questions:
+
+1. **What advantages does gill offer over Web3.js?**
+ Solana Account Explorer
+Explore accounts on Solana Devnet
+ +
+ setAddressInput(e.target.value)}
+ disabled={loading}
+ style={{
+ width: '100%',
+ padding: '0.75rem',
+ fontSize: '1rem',
+ border: '2px solid #ddd',
+ borderRadius: '8px',
+ }}
+ />
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {accountData && (
+
+
+ )}
+ Account Information
+ +
+ Address:
+
+
+
+ {accountData.address}
+
+
+ Balance:
+
+
+ {accountData.balanceSol} SOL
+
+ Balance (lamports):
+
+
+ {accountData.balance.toLocaleString()}
+
+ Account Type:
+
+
+ {accountData.accountType}
+
+ Owner:
+
+
+
+ {accountData.owner}
+
+
+ Executable:
+
+
+ {accountData.executable ? 'Yes' : 'No'}
+
+ Data Size:
+
+
+ {accountData.dataSize.toLocaleString()} bytes
+
+ Rent Epoch:
+
+
+
+ {accountData.rentEpoch.toString()}
+
+
+
+2. **Explain the difference between a Solana account and a wallet**
+ Answer
+ + - Smaller bundle sizes through tree-shaking + - TypeScript-first with full type safety + - Modern JavaScript patterns and API design + - Modular architecture (import only what you need) + - Built on next-gen @solana/kit foundation + - Quality-of-life improvements like `createTransaction()` + - Better developer experience with cleaner APIs + - One-to-one compatibility with @solana/kit + +
+
+
+3. **What is the purpose of the `.send()` method in Gill?**
+ Answer
+ + **Account:** A data structure on Solana containing address, lamports, data, owner, and executable flag. Accounts store all on-chain information (balances, program code, user data, etc.). + + **Wallet:** A software/hardware tool that manages keypairs (private/public keys) and signs transactions. A wallet controls one or more accounts but is not stored on the blockchain itself. + + **Analogy:** Account = bank account (stored at the bank), Wallet = ATM card/app to access it (you hold the keys) + +
+
+
+4. **How do you convert lamports to SOL? Provide the formula.**
+ Answer
+ + The `.send()` method executes RPC requests. Gill uses **lazy evaluation** - calling an RPC method like `rpc.getSlot()` creates a request object but doesn't execute it until `.send()` is called. + + **Benefits:** + - **Composability** - Pass requests around as values + - **Testability** - Build requests without network calls + - **Consistency** - All RPC methods use same pattern + - **Deferred execution** - Control exactly when network request happens + +
+
+
+5. **What information does `getAccountInfo()` return?**
+ Answer
+ + **Formula:** `SOL = lamports / 1,000,000,000` + + **In code:** + ```typescript + import { lamportsToSol, LAMPORTS_PER_SOL } from 'gill'; + + // Option 1: Using utility function (recommended) + const sol = lamportsToSol(2_000_000_000); // 2 + + // Option 2: Manual calculation + const sol = 2_000_000_000 / LAMPORTS_PER_SOL; // 2 + ``` + + **Reverse (SOL to lamports):** `lamports = SOL * 1,000,000,000` + ```typescript + const lamports = 2 * LAMPORTS_PER_SOL; // 2,000,000,000 + ``` + +
+
+
+6. **What is atomicity in Solana transactions?**
+ Answer
+ + Returns an object containing: + + ```typescript + { + value: { + lamports: bigint; // Account balance in lamports + owner: Address; // Program that owns this account + data: Uint8Array; // Account data bytes + executable: boolean; // True if account is a program + rentEpoch: bigint; // Epoch when rent is due (historical) + } | null // null if account doesn't exist + } + ``` + + If account doesn't exist, returns `{ value: null }` + +
+
+
+7. **How long is a blockhash valid?**
+ Answer
+ + **Atomicity** means transactions are "all or nothing": + + - If **all** instructions succeed → transaction confirmed ✅ + - If **any** instruction fails → **entire** transaction reverted ❌ + + No partial state changes persist. This ensures **consistency** - the blockchain never ends up in an invalid state due to partial execution. + + **Example:** Transaction with 3 instructions - if instruction #2 fails, changes from instruction #1 are reverted and instruction #3 doesn't execute. The blockchain state remains unchanged as if the transaction never happened. + +
+
+
+8. **What are the 5 fields in every Solana account?**
+ Answer
+ + **~60-90 seconds** (approximately 150 blocks at 400ms per block) + + Blockhashes are used to prevent transaction replay attacks. Once expired, transactions using that blockhash will be rejected by the network. + + **Best practice:** Fetch a fresh blockhash immediately before signing and sending transactions. Don't build transactions far in advance. + + **Check expiration:** + ```typescript + const { value: latestBlockhash } = await rpc.getLatestBlockhash().send(); + console.log('Expires at block:', latestBlockhash.lastValidBlockHeight); + ``` + +
+
+
+9. **What is a Program Derived Address (PDA)?**
+ Answer
+ + 1. **Address** - Unique 32-byte public key (shown as base58 string) + 2. **Lamports** - Balance in smallest unit (bigint) + 3. **Data** - Arbitrary byte array (0 bytes to 10MB max) + 4. **Owner** - Program ID that controls this account + 5. **Executable** - Boolean indicating if account contains program code + +
+
+
+10. **What is the base transaction fee on Solana?**
+ Answer
+ + A **Program Derived Address** is: + + - An address **without a corresponding private key** + - Derived **deterministically** from a program ID and seeds + - Intentionally falls **off the Ed25519 elliptic curve** (no valid keypair exists) + - Only the deriving program can "sign" for this address + + **Key characteristics:** + - Deterministic (same inputs always produce same PDA) + - No private key (cannot be compromised) + - Program-controlled (only that program can authorize operations) + + **Use cases:** + - User-specific data accounts (`["user-profile", userWallet]`) + - Program-controlled vaults (`["token-vault", programId]`) + - Escrow accounts (`["escrow", tradeId]`) + + **Example:** + ```typescript + const [profilePDA] = await getProgramDerivedAddress({ + programAddress: myProgram, + seeds: ['user-profile', userWallet], + }); + // Frontend can derive this without blockchain query! + ``` + +
+
+
+---
## Looking Ahead
-Next week covers wallet integration using the wallet-ui patterns, including:
+**Next Week: Wallet Integration and Building Solana Web Applications**
+
+In Week 2, you'll learn to build full-stack Solana applications with wallet integration:
+
+- Integrating wallet-adapter into React applications
+- Building wallet connection UI components
+- Handling multiple wallet types (Phantom, Solflare, Backpack, etc.)
+- Implementing wallet-based authentication
+- Signing and sending transactions from the browser
+- Building a complete Solana dApp from scratch
+- Best practices for wallet UX and error handling
+
+**Prerequisites for next week:**
+
+1. ✅ Complete this week's assignments (environment setup, wallet-ui exploration, Gill program)
+2. 📱 Install at least one browser wallet extension:
+ - [Phantom](https://phantom.app/) (recommended for beginners)
+ - [Solflare](https://solflare.com/)
+ - [Backpack](https://backpack.app/)
+3. 💰 Fund your wallet with devnet SOL using the wallet's built-in faucet
+4. ✨ Familiarize yourself with wallet interfaces (connect, disconnect, sign, send SOL)
+5. 🔍 Explore the wallet-adapter example we ran in Lesson 1
+
+**Preparation task:** Create a new wallet in Phantom, switch it to devnet, request an airdrop, and successfully send 0.1 SOL to a friend's wallet. Bring any questions about the wallet experience to next week's session!
+
+---
+
+## Feedback and Support
+
+**Questions?**
+- Review the Required Reading materials above
+- Re-watch any referenced video tutorials
+- Explore the wallet-adapter codebase we cloned
+- Post questions in the course discussion forum
+- Attend office hours (schedule TBA)
+
+**Found an error in this module?**
+- Submit an issue with the `content-bug` label
+- Include the section reference and suggested correction
+- Screenshots are helpful for clarity
+
+**Completed the assignment?**
+- Submit via the course platform
+- Include README with setup instructions
+- Ensure code runs without errors
+- Add screenshots of working application
+
+**Want to go deeper?**
+- Explore other packages in the wallet-adapter monorepo
+- Try building a custom wallet adapter
+- Read the Solana source code on GitHub
+- Join the Solana Discord community
+
+---
-- Set up wallet providers
-- Build wallet connection UI
-- Handle multiple wallet adapters
-- Implement wallet-based authentication
+**Course Maintenance Note:** This module was last updated for Solana 1.18, Anchor 0.32, Gill 1.x, and wallet-adapter 0.19+. Toolchain versions and APIs may change - consult the official documentation for the latest information.
-_Prerequisites for next week: at least one browser wallet installed (Phantom, Solflare, or Backpack)._
\ No newline at end of file
+**Acknowledgments:** This curriculum is built on the excellent work of the Solana Foundation, Anza (formerly Solana Labs), and the broader Solana developer community. Special thanks to all contributors to the wallet-adapter, gill, and Solana documentation projects.
diff --git a/courses/web-for-solana-development-101/modules/week-2-wallet-integration-fundamentals.md b/courses/web-for-solana-development-101/modules/week-2-wallet-integration-fundamentals.md
index 41aeee5..7a4049b 100644
--- a/courses/web-for-solana-development-101/modules/week-2-wallet-integration-fundamentals.md
+++ b/courses/web-for-solana-development-101/modules/week-2-wallet-integration-fundamentals.md
@@ -14,92 +14,3209 @@ Learning outcomes for this week include:
4. Support multiple wallet adapters (Phantom, Solflare, Backpack)
5. Implement auto-connect and wallet persistence features
+---
+
## Lessons
-### Lesson 1: Setting Up Wallet Providers
+### Lesson 1: Setting Up Wallet Providers
+
+#### Introduction
+
+Wallet integration is fundamental to Solana web applications. Unlike traditional web apps where users authenticate with email and password, blockchain applications rely on cryptographic wallets to identify users and authorize transactions. The Solana wallet adapter provides a standardized way to integrate multiple wallet types into a single React application.
+
+In this lesson, you'll learn about the wallet adapter architecture, set up provider components that manage wallet state, configure cluster connections, and understand how React Context enables wallet functionality throughout your application.
+
+**Note on Terminology:** Throughout this course, when we refer to `wallet-ui` or `@wallet-ui/react`, we're referring to the Solana Wallet Adapter packages (`@solana/wallet-adapter-react` and `@solana/wallet-adapter-react-ui`). The wallet adapter provides the UI components and React integration for wallet management.
+
+#### Topics Covered
+
+- Understanding the wallet adapter architecture
+- Configuring `WalletUi` provider
+- Cluster management with wallet-ui
+- Storage patterns for wallet preferences
+- Provider composition in React
+
+---
+
+#### Part 1: Understanding Wallet Adapter Architecture
+
+##### The Wallet Adapter Ecosystem
+
+The Solana wallet adapter is a modular TypeScript system that provides:
+
+1. **Standardized wallet interfaces** - Common API across 37+ wallet implementations
+2. **React integration** - Context providers and hooks for wallet state management
+3. **UI components** - Pre-built buttons and modals for wallet interaction
+4. **Automatic wallet discovery** - Detects installed wallets without explicit configuration
+
+##### Core Packages
+
+**@solana/wallet-adapter-base**
+- Defines the `WalletAdapter` interface
+- Provides error types (`WalletError`, `WalletNotConnectedError`, etc.)
+- Includes `WalletReadyState` enum for wallet detection
+
+**@solana/wallet-adapter-react**
+- Exports `ConnectionProvider`, `WalletProvider` for state management
+- Provides hooks: `useWallet()`, `useConnection()`, `useAnchorWallet()`
+- Handles wallet lifecycle (connection, disconnection, errors)
+
+**@solana/wallet-adapter-react-ui**
+- Pre-built components: `WalletMultiButton`, `WalletDisconnectButton`
+- Modal system for wallet selection
+- Customizable CSS styles
+
+**@solana/wallet-adapter-wallets**
+- Meta-package bundling all individual wallet adapters
+- Supports tree-shaking for optimal bundle size
+- Alternative to importing individual wallet packages
+
+##### Wallet Ready States
+
+Every wallet adapter reports its availability through `WalletReadyState`:
+
+| State | Description | Example |
+|-------|-------------|---------|
+| `Installed` | Wallet extension is installed and ready | Phantom installed in Chrome |
+| `NotDetected` | Wallet not installed in browser | User doesn't have Solflare |
+| `Loadable` | Wallet can be loaded (usually mobile) | Wallet Connect on mobile |
+| `Unsupported` | Wallet doesn't support this environment | Hardware wallet on mobile |
+
+**Code Example:**
+
+```typescript
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+
+// Check if wallet is ready to use
+if (wallet.readyState === WalletReadyState.Installed) {
+ // Wallet is available
+ await wallet.connect();
+} else if (wallet.readyState === WalletReadyState.NotDetected) {
+ // Show installation instructions
+ window.open(wallet.url, '_blank');
+}
+```
+
+##### The Provider Hierarchy
+
+Wallet adapter uses three nested React Context providers:
+
+```
+ConnectionProvider (RPC connection)
+ └─ WalletProvider (wallet state management)
+ └─ WalletModalProvider (UI modal state)
+ └─ Your App Components
+```
+
+**Why this order matters:**
+- `ConnectionProvider` establishes blockchain connection (needed by wallet operations)
+- `WalletProvider` manages wallet state (depends on connection for transactions)
+- `WalletModalProvider` handles UI state (depends on wallet provider for available wallets)
+
+---
+
+#### Part 2: Installing Dependencies
+
+##### Required Packages
+
+Install the wallet adapter packages and Solana web3.js:
+
+```bash
+npm install \
+ @solana/web3.js \
+ @solana/wallet-adapter-base \
+ @solana/wallet-adapter-react \
+ @solana/wallet-adapter-react-ui \
+ @solana/wallet-adapter-wallets
+```
+
+**Package Purposes:**
+
+- `@solana/web3.js` - Core Solana blockchain interaction library
+- `@solana/wallet-adapter-base` - Base interfaces and types
+- `@solana/wallet-adapter-react` - React hooks and providers
+- `@solana/wallet-adapter-react-ui` - Pre-built UI components
+- `@solana/wallet-adapter-wallets` - Bundled wallet adapters
+
+##### Individual Wallet Adapters (Optional)
+
+Instead of the wallets meta-package, you can install specific wallet adapters:
+
+```bash
+npm install \
+ @solana/wallet-adapter-phantom \
+ @solana/wallet-adapter-solflare \
+ @solana/wallet-adapter-coinbase
+```
+
+**When to use individual adapters:**
+- You only support a few specific wallets
+- You need maximum bundle size optimization
+- You want explicit version control for each wallet
+
+**When to use @solana/wallet-adapter-wallets:**
+- You want to support many wallets easily
+- Bundle size is not a primary concern (tree-shaking helps)
+- You want automatic updates for all wallet adapters
+
+##### TypeScript Support
+
+TypeScript definitions are included. No additional `@types` packages needed for wallet adapter.
+
+---
+
+#### Part 3: Setting Up ConnectionProvider
+
+##### Understanding Solana Clusters
+
+Solana operates multiple independent networks:
+
+| Cluster | Purpose | Endpoint | Tokens |
+|---------|---------|----------|--------|
+| **Devnet** | Development and testing | `https://api.devnet.solana.com` | Free (airdrop) |
+| **Testnet** | Stress testing new features | `https://api.testnet.solana.com` | Free (airdrop) |
+| **Mainnet Beta** | Production environment | `https://api.mainnet-beta.solana.com` | Real SOL |
+| **Localhost** | Local validator | `http://127.0.0.1:8899` | Developer-controlled |
+
+**For this course, we'll use Devnet** - it behaves like mainnet but uses free test tokens.
+
+##### Creating the Connection Provider
+
+**Basic Setup:**
+
+```typescript
+import React from 'react';
+import { ConnectionProvider } from '@solana/wallet-adapter-react';
+import { clusterApiUrl } from '@solana/web3.js';
+
+export default function App() {
+ // Use devnet for development
+ const endpoint = clusterApiUrl('devnet');
+
+ return (
+ Answer
+ + **5,000 lamports per signature** (0.000005 SOL) + + **Distribution:** + - 50% burned (removed from supply) 🔥 + - 50% paid to validator who processed the transaction 💰 + + **Example calculation:** + - Transaction with 1 signature = 5,000 lamports + - Transaction with 2 signatures = 10,000 lamports (0.00001 SOL) + + **Additional costs:** + - **Priority fees** (optional) - Speed up processing + - **Rent** (one-time) - For creating new accounts + + At $100/SOL, a typical transaction costs ~$0.0005 (half a cent) + +
+({} as ClusterContextState);
+
+export function useCluster(): ClusterContextState {
+ return useContext(ClusterContext);
+}
+
+export function ClusterProvider({ children }: { children: ReactNode }) {
+ const [cluster, setCluster] = useLocalStorage(
+ 'solana-cluster',
+ WalletAdapterNetwork.Devnet
+ );
+
+ const value = useMemo(
+ () => ({ cluster, setCluster }),
+ [cluster, setCluster]
+ );
+
+ return (
+
+ {children}
+
+ );
+}
+```
+
+**components/providers/AppProviders.tsx:**
+
+```typescript
+'use client';
+
+import React, { FC, ReactNode, useMemo } from 'react';
+import {
+ ConnectionProvider,
+ WalletProvider,
+} from '@solana/wallet-adapter-react';
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
+import { clusterApiUrl } from '@solana/web3.js';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ClusterProvider, useCluster } from './ClusterProvider';
+
+import '@solana/wallet-adapter-react-ui/styles.css';
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 60 * 1000, // 1 minute
+ refetchOnWindowFocus: false,
+ },
+ },
+});
+
+function WalletContextProvider({ children }: { children: ReactNode }) {
+ const { cluster } = useCluster();
+
+ const endpoint = useMemo(() => clusterApiUrl(cluster), [cluster]);
+
+ // Empty array enables auto-detection of standard wallets
+ const wallets = useMemo(() => [], []);
+
+ return (
+
+
+
+ {children}
+
+
+
+ );
+}
+
+export const AppProviders: FC<{ children: ReactNode }> = ({ children }) => {
+ return (
+
+
+
+ {children}
+
+
+
+ );
+};
+```
+
+
+
+##### Testing Checklist
+
+- [ ] Providers are nested in correct order
+- [ ] CSS stylesheet is imported
+- [ ] Cluster persists to localStorage
+- [ ] Auto-connect works on page reload
+- [ ] No console errors when mounting providers
+- [ ] `useWallet()` hook works in child components
+
+---
+
+#### Key Concepts
+
+- Provider hierarchy and context
+- Cluster configuration and switching
+- Wallet auto-detection
+- Storage abstraction for preferences
+
+#### Common Pitfalls
+
+1. **Missing CSS Import**
+ - **Error:** Modal doesn't display or looks broken
+ - **Solution:** Import `@solana/wallet-adapter-react-ui/styles.css`
+
+2. **Wrong Provider Order**
+ - **Error:** "useWallet must be used within WalletProvider"
+ - **Solution:** Ensure WalletProvider wraps components using useWallet()
+
+3. **Forgetting useMemo**
+ - **Error:** Excessive re-renders, poor performance
+ - **Solution:** Memoize endpoint and wallets array
+
+4. **Using 'mainnet' instead of 'mainnet-beta'**
+ - **Error:** Invalid cluster name
+ - **Solution:** Use `WalletAdapterNetwork.Mainnet` or `'mainnet-beta'`
+
+---
+
+### Lesson 2: Building Wallet Connection UI
+
+#### Introduction
+
+With wallet providers configured, you're ready to build user-facing components for wallet connection. A great wallet connection experience is fast, intuitive, and handles errors gracefully. Users should be able to connect in 2-3 clicks, see clear connection status, and understand what's happening at each step.
+
+In this lesson, you'll learn to use wallet adapter hooks, build custom connection UI components, create wallet selection modals, and handle all connection states professionally.
+
+#### Topics Covered
+
+- Using wallet-ui hooks: `useWallets`, `useWalletUi`
+- Creating wallet selection modal
+- Responsive wallet button design
+- Handling connection loading states
+- Accessibility considerations
+
+---
+
+#### Part 1: Understanding Wallet Adapter Hooks
+
+##### useWallet() - Core Wallet State
+
+The `useWallet()` hook provides everything you need to interact with connected wallets:
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+
+function MyComponent() {
+ const {
+ // State
+ publicKey, // PublicKey | null - Connected wallet's public key
+ connected, // boolean - Is wallet connected?
+ connecting, // boolean - Is connection in progress?
+ disconnecting, // boolean - Is disconnection in progress?
+ wallet, // Wallet | null - Selected wallet adapter
+ wallets, // Wallet[] - All available wallet adapters
+
+ // Methods
+ select, // (walletName: string | null) => void
+ connect, // () => PromiseClick to reveal solution
+ +**components/providers/ClusterProvider.tsx:** + +```typescript +import React, { createContext, useContext, useMemo, ReactNode } from 'react'; +import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; +import { useLocalStorage } from '@solana/wallet-adapter-react'; + +interface ClusterContextState { + cluster: WalletAdapterNetwork; + setCluster: (cluster: WalletAdapterNetwork) => void; +} + +const ClusterContext = createContext
+ {connected ? (
+
+ );
+}
+```
+
+##### Connection States
+
+Your UI should handle all possible wallet states:
+
+| State | Condition | Display |
+|-------|-----------|---------|
+| **No Wallet Selected** | `!wallet && !connected` | "Select Wallet" button |
+| **Wallet Selected** | `wallet && !connected && !connecting` | "Connect" button |
+| **Connecting** | `connecting` | "Connecting..." with spinner |
+| **Connected** | `connected && publicKey` | Address with disconnect option |
+| **Disconnecting** | `disconnecting` | "Disconnecting..." with spinner |
+| **Error** | Caught exception | Error message with retry option |
+
+##### useConnection() - Blockchain Interaction
+
+Access the Solana RPC connection for querying blockchain data:
+
+```typescript
+import { useConnection } from '@solana/wallet-adapter-react';
+import { LAMPORTS_PER_SOL } from '@solana/web3.js';
+
+function BalanceDisplay() {
+ const { connection } = useConnection();
+ const { publicKey } = useWallet();
+ const [balance, setBalance] = useStateConnected: {publicKey?.toBase58()}
+ ) : ( +Not connected
+ )} +{balance.toFixed(4)} SOL
;
+}
+```
+
+##### useWalletModal() - Modal Control
+
+Control the wallet selection modal from any component:
+
+```typescript
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+
+function ConnectButton() {
+ const { setVisible } = useWalletModal();
+ const { connected } = useWallet();
+
+ if (connected) return null;
+
+ return (
+
+ );
+}
+```
+
+---
+
+#### Part 2: Building a Custom Connect Button
+
+##### Basic Connect Button
+
+Start with a simple button showing connection status:
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+
+export function ConnectButton() {
+ const { publicKey, connect, disconnect, connecting, wallet } = useWallet();
+ const { setVisible } = useWalletModal();
+
+ // No wallet selected - show wallet selection
+ if (!wallet) {
+ return (
+
+ );
+ }
+
+ // Wallet selected but not connected
+ if (!publicKey) {
+ return (
+
+ );
+ }
+
+ // Connected - show address
+ return (
+
+
+ {publicKey.toBase58().slice(0, 4)}...
+ {publicKey.toBase58().slice(-4)}
+
+
+
+ );
+}
+```
+
+##### Enhanced Connect Button with States
+
+Add loading indicators and error handling:
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+import { useState, useCallback } from 'react';
+
+export function EnhancedConnectButton() {
+ const {
+ publicKey,
+ wallet,
+ connect,
+ disconnect,
+ connecting,
+ disconnecting
+ } = useWallet();
+ const { setVisible } = useWalletModal();
+ const [error, setError] = useState
+
+ );
+ }
+
+ // No wallet selected
+ if (!wallet) {
+ return (
+
+ );
+ }
+
+ // Wallet selected but not connected
+ if (!publicKey) {
+ return (
+
+ );
+ }
+
+ // Connected - show address with disconnect
+ return (
+ {error}
+
+
+ {wallet.adapter.icon && (
+ 
+ )}
+
+ {publicKey.toBase58().slice(0, 4)}...
+ {publicKey.toBase58().slice(-4)}
+
+
+
+ );
+}
+
+// Simple spinner component
+function Spinner() {
+ return (
+
+ );
+}
+```
+
+##### Copy Address Functionality
+
+Add a button to copy the wallet address:
+
+```typescript
+import { useState, useCallback } from 'react';
+
+function CopyAddressButton({ address }: { address: string }) {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = useCallback(async () => {
+ try {
+ await navigator.clipboard.writeText(address);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+ }, [address]);
+
+ return (
+
+ );
+}
+
+// Usage in ConnectButton
+{publicKey && (
+
+
+ {publicKey.toBase58().slice(0, 4)}...
+ {publicKey.toBase58().slice(-4)}
+
+
+)}
+```
+
+---
+
+#### Part 3: Creating a Custom Wallet Selection Modal
+
+##### Custom Modal Component
+
+Build a modal that lists available wallets:
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+import { useCallback, useEffect, useState } from 'react';
+
+interface WalletModalProps {
+ visible: boolean;
+ onClose: () => void;
+}
+
+export function WalletModal({ visible, onClose }: WalletModalProps) {
+ const { wallets, select, connect } = useWallet();
+ const [connecting, setConnecting] = useState(false);
+
+ const handleSelectWallet = useCallback(async (walletName: string) => {
+ try {
+ setConnecting(true);
+ select(walletName);
+ await connect();
+ onClose();
+ } catch (err) {
+ console.error('Failed to connect:', err);
+ } finally {
+ setConnecting(false);
+ }
+ }, [select, connect, onClose]);
+
+ // Close modal on escape key
+ useEffect(() => {
+ if (!visible) return;
+
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') onClose();
+ };
+
+ window.addEventListener('keydown', handleEscape);
+ return () => window.removeEventListener('keydown', handleEscape);
+ }, [visible, onClose]);
+
+ if (!visible) return null;
+
+ // Sort wallets: installed first, then loadable, then not detected
+ const sortedWallets = [...wallets].sort((a, b) => {
+ const aReady = a.readyState === WalletReadyState.Installed ? 0 :
+ a.readyState === WalletReadyState.Loadable ? 1 : 2;
+ const bReady = b.readyState === WalletReadyState.Installed ? 0 :
+ b.readyState === WalletReadyState.Loadable ? 1 : 2;
+ return aReady - bReady;
+ });
+
+ return (
+
+
+ );
+}
+```
+
+##### Using the Custom Modal
+
+```typescript
+import { useState } from 'react';
+import { WalletModal } from './WalletModal';
+
+function App() {
+ const [modalVisible, setModalVisible] = useState(false);
+
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+ Connect Wallet
+ +
+ {sortedWallets.map((wallet) => {
+ const isInstalled = wallet.readyState === WalletReadyState.Installed;
+ const isLoadable = wallet.readyState === WalletReadyState.Loadable;
+ const isAvailable = isInstalled || isLoadable;
+
+ return (
+
+ );
+ })}
+
+
+ {connecting && (
+
+ Connecting to wallet...
+
+ )}
+
+
+
+ setModalVisible(false)}
+ />
+
+ );
+}
+```
+
+---
+
+#### Part 4: Using Pre-Built UI Components
+
+##### WalletMultiButton
+
+The easiest way to add wallet connection:
+
+```typescript
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
+
+function Header() {
+ return (
+ My Solana App
+
+
+ );
+}
+```
+
+---
+
+#### Part 5: Responsive Design Patterns
+
+##### Mobile-First Wallet Button
+
+Adapt UI based on screen size:
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+
+export function ResponsiveWalletButton() {
+ const { publicKey, disconnect } = useWallet();
+ const { setVisible } = useWalletModal();
+
+ if (!publicKey) {
+ return (
+
+ );
+ }
+
+ return (
+ Welcome to My Solana App
+
+ {/* Full address on desktop, truncated on mobile */}
+
+ {publicKey.toBase58()}
+
+
+ {publicKey.toBase58().slice(0, 4)}...
+ {publicKey.toBase58().slice(-4)}
+
+
+
+ );
+}
+```
+
+##### Dropdown Menu for Mobile
+
+Show wallet info in a dropdown on small screens:
+
+```typescript
+import { useState, useRef, useEffect } from 'react';
+import { useWallet } from '@solana/wallet-adapter-react';
+
+export function MobileWalletMenu() {
+ const { publicKey, wallet, disconnect } = useWallet();
+ const [isOpen, setIsOpen] = useState(false);
+ const menuRef = useRef
+
+
+ {isOpen && (
+
+ );
+}
+```
+
+---
+
+#### Part 6: Accessibility Considerations
+
+##### Keyboard Navigation
+
+Ensure all interactive elements are keyboard accessible:
+
+```typescript
+export function AccessibleConnectButton() {
+ const { publicKey, connect, disconnect, connecting } = useWallet();
+ const { setVisible } = useWalletModal();
+
+ if (!publicKey) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+```
+
+##### ARIA Labels and Roles
+
+Add screen reader support:
+
+```typescript
+export function AccessibleWalletButton() {
+ const { publicKey, wallet, connecting } = useWallet();
+
+ return (
+
+
+ )}
+
+
+
+
+
+ Wallet
+ {wallet?.adapter.name}
+
+
+
+
+
+
+ Address
+
+ {publicKey.toBase58()}
+
+
+ {connecting && (
+
+ );
+}
+```
+
+##### Focus Management
+
+Manage focus when opening/closing modals:
+
+```typescript
+import { useEffect, useRef } from 'react';
+
+export function AccessibleWalletModal({ visible, onClose }: WalletModalProps) {
+ const closeButtonRef = useRef
+ Connecting to {wallet?.adapter.name}...
+
+ )}
+
+ {publicKey && (
+
+ Wallet connected. Address:
+
+ {publicKey.toBase58().slice(0, 4)}...
+ {publicKey.toBase58().slice(-4)}
+
+
+ )}
+
+
+ );
+}
+```
+
+---
+
+#### Lab Exercise: Building Wallet Connection UI
+
+**Objective:** Create a WalletButton component that:
+
+- Uses wallet-ui hooks to access wallet state and functions
+- Displays different UI based on connection status:
+ - When connected: Shows truncated public key with disconnect option
+ - When disconnected: Shows "Connect Wallet" button
+- Implements modal pattern for wallet selection
+- Handles wallet connection through modal selection
+- Applies appropriate styling for different states
+- Manages modal visibility with local state
+
+##### Starter Code
+
+Create `src/components/WalletButton.tsx`:
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useWalletModal } from '@solana/wallet-adapter-react-ui';
+import { useState } from 'react';
+
+export function WalletButton() {
+ // TODO: Destructure needed values from useWallet()
+ // TODO: Get setVisible from useWalletModal()
+ // TODO: Add local state for errors
+
+ // TODO: Implement handleConnect with error handling
+
+ // TODO: Implement handleDisconnect with error handling
+
+ // TODO: Handle no wallet selected state
+
+ // TODO: Handle wallet selected but not connected state
+
+ // TODO: Handle connected state with address display
+
+ return
+
+
+
+ {/* Wallet list */}
+ + Connect Wallet +
+ +TODO: Implement wallet button
;
+}
+```
+
+##### Implementation Steps
+
+1. Use `useWallet()` to get wallet state
+2. Use `useWalletModal()` to control modal visibility
+3. Implement three UI states:
+ - No wallet: Show "Select Wallet" button
+ - Wallet selected: Show "Connect" button
+ - Connected: Show truncated address with disconnect button
+4. Add loading indicators for connecting/disconnecting states
+5. Add error handling with user-friendly messages
+6. Style components with Tailwind CSS or your preferred method
+
+##### Bonus Challenges
+
+1. Add copy address functionality
+2. Show wallet icon when connected
+3. Add fade-in animations for state transitions
+4. Implement keyboard navigation
+5. Add ARIA labels for accessibility
+
+##### Solution
+
+
+(null);
+ const [copied, setCopied] = useState(false);
+
+ const handleConnect = useCallback(async () => {
+ setError(null);
+ try {
+ await connect();
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Connection failed');
+ }
+ }, [connect]);
+
+ const handleDisconnect = useCallback(async () => {
+ setError(null);
+ try {
+ await disconnect();
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Disconnection failed');
+ }
+ }, [disconnect]);
+
+ const handleCopy = useCallback(async () => {
+ if (!publicKey) return;
+ try {
+ await navigator.clipboard.writeText(publicKey.toBase58());
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+ }, [publicKey]);
+
+ // Error state
+ if (error) {
+ return (
+
+
+---
+
+#### Key Concepts
+
+- Conditional rendering based on wallet state
+- User-friendly address display
+- Modal patterns for wallet selection
+- Loading and error states
+
+#### Common Pitfalls
+
+1. **Not Handling All States**
+ - **Error:** UI breaks in edge cases
+ - **Solution:** Always handle: no wallet, wallet selected, connecting, connected, disconnecting, error
+
+2. **Missing Loading Indicators**
+ - **Error:** User doesn't know connection is in progress
+ - **Solution:** Show spinners and disable buttons during async operations
+
+3. **Poor Error Messages**
+ - **Error:** Generic "Error occurred" doesn't help users
+ - **Solution:** Display specific, actionable error messages
+
+4. **Forgetting Mobile Users**
+ - **Error:** UI works on desktop but breaks on mobile
+ - **Solution:** Test on small screens, use responsive design patterns
+
+---
+
+### Lesson 3: Advanced Wallet Features
+
+#### Introduction
+
+Basic wallet connection is just the starting point. Professional Solana applications implement advanced features like auto-connect (remembering the user's wallet), handling wallet events (disconnect, account change), supporting multiple wallets simultaneously, and following security best practices.
+
+In this lesson, you'll implement auto-connect functionality, persist wallet preferences across sessions, handle wallet events properly, and learn security considerations for wallet integration.
+
+#### Topics Covered
+
+- Auto-connect implementation
+- Wallet persistence with localStorage
+- Handling wallet events
+- Multi-wallet support patterns
+- Security considerations
+
+---
+
+#### Part 1: Auto-Connect Implementation
+
+##### Understanding Auto-Connect
+
+Auto-connect automatically reconnects to a user's previously used wallet when they return to your app. This improves UX by eliminating repeated wallet selection.
+
+**How auto-connect works:**
+1. User connects to a wallet
+2. Wallet name is saved to localStorage
+3. On next page load, app reads saved wallet name
+4. App attempts to reconnect automatically
+
+##### Built-in Auto-Connect
+
+Enable auto-connect with the `autoConnect` prop:
+
+```typescript
+Click to reveal solution
+ +```typescript +import { useWallet } from '@solana/wallet-adapter-react'; +import { useWalletModal } from '@solana/wallet-adapter-react-ui'; +import { useState, useCallback } from 'react'; + +export function WalletButton() { + const { + publicKey, + wallet, + connect, + disconnect, + connecting, + disconnecting + } = useWallet(); + const { setVisible } = useWalletModal(); + const [error, setError] = useState
+
+ );
+ }
+
+ // No wallet selected
+ if (!wallet) {
+ return (
+
+ );
+ }
+
+ // Wallet selected but not connected
+ if (!publicKey) {
+ return (
+
+ );
+ }
+
+ // Connected - show address
+ return (
+ {error}
+
+
+ {wallet.adapter.icon && (
+
+ )}
+
+
+ );
+}
+```
+
+
+ {wallet.adapter.name}
+
+ {publicKey.toBase58().slice(0, 4)}...
+ {publicKey.toBase58().slice(-4)}
+
+
+
+
+
+
+ Your app content
;
+}
+```
+
+---
+
+#### Part 2: Wallet Persistence Patterns
+
+##### Persisting Wallet Selection
+
+The default persistence stores the wallet name:
+
+```typescript
+// Automatic when user connects
+localStorage.setItem('walletName', 'Phantom');
+
+// Read in WalletProvider
+const savedWalletName = localStorage.getItem('walletName');
+```
+
+**Custom storage key:**
+
+```typescript
+
+
+
+
+
+
+
+ );
+}
+```
+
+##### Persisting Recently Used Wallets
+
+Track wallet connection history:
+
+```typescript
+import { useLocalStorage } from '@solana/wallet-adapter-react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useEffect } from 'react';
+
+interface WalletHistory {
+ name: string;
+ lastUsed: number;
+}
+
+export function useWalletHistory() {
+ const { wallet, connected } = useWallet();
+ const [history, setHistory] = useLocalStorage
+
+ );
+}
+```
+
+---
+
+#### Part 3: Handling Wallet Events
+
+##### Wallet Adapter Events
+
+Wallet adapters emit events for various lifecycle changes. While the wallet adapter handles most events internally, you can listen to them for custom logic:
+
+**Available events:**
+- `connect` - Wallet successfully connected
+- `disconnect` - Wallet disconnected
+- `error` - Error occurred
+- `readyStateChange` - Wallet ready state changed
+- `accountChange` - Active account changed (some wallets)
+
+##### Listening to Events
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useEffect } from 'react';
+
+export function useWalletEvents() {
+ const { wallet } = useWallet();
+
+ useEffect(() => {
+ if (!wallet) return;
+
+ const adapter = wallet.adapter;
+
+ // Connect event
+ const onConnect = () => {
+ console.log('Wallet connected:', adapter.publicKey?.toBase58());
+ // Show success notification
+ };
+
+ // Disconnect event
+ const onDisconnect = () => {
+ console.log('Wallet disconnected');
+ // Show info notification
+ };
+
+ // Error event
+ const onError = (error: Error) => {
+ console.error('Wallet error:', error);
+ // Show error notification
+ };
+
+ adapter.on('connect', onConnect);
+ adapter.on('disconnect', onDisconnect);
+ adapter.on('error', onError);
+
+ return () => {
+ adapter.off('connect', onConnect);
+ adapter.off('disconnect', onDisconnect);
+ adapter.off('error', onError);
+ };
+ }, [wallet]);
+}
+```
+
+##### Account Change Detection
+
+Some wallets emit `accountChange` events when the user switches accounts:
+
+```typescript
+import { useWallet, useConnection } from '@solana/wallet-adapter-react';
+import { useEffect, useState } from 'react';
+import { LAMPORTS_PER_SOL } from '@solana/web3.js';
+
+export function useAccountChange() {
+ const { wallet, publicKey } = useWallet();
+ const { connection } = useConnection();
+ const [balance, setBalance] = useStateRecently Used
+
+ {history.map((item) => {
+ const wallet = wallets.find((w) => w.adapter.name === item.name);
+ if (!wallet) return null;
+
+ return (
+
+ );
+ })}
+
+ Protected content
;
+}
+```
+
+---
+
+#### Part 4: Multi-Wallet Support Patterns
+
+##### Supporting All Standard Wallets
+
+The easiest approach - let wallet standard handle detection:
+
+```typescript
+const wallets = useMemo(() => [], []);
+
+
+
+
+
+ );
+}
+```
+
+##### Clear Sensitive Data on Disconnect
+
+```typescript
+export function useSecureDisconnect() {
+ const { disconnect, publicKey } = useWallet();
+
+ const secureDisconnect = useCallback(async () => {
+ // Clear all stored data
+ localStorage.removeItem('walletName');
+ localStorage.removeItem('walletPrefs');
+ sessionStorage.clear();
+
+ // Clear any in-memory sensitive data
+ // (if you're storing any)
+
+ // Disconnect wallet
+ await disconnect();
+
+ console.log('Secure disconnect complete');
+ }, [disconnect]);
+
+ return secureDisconnect;
+}
+```
+
+##### Rate Limiting Connections
+
+Prevent auto-connect loops and abuse:
+
+```typescript
+import { useRef } from 'react';
+
+export function useRateLimitedConnect() {
+ const { connect } = useWallet();
+ const lastAttemptRef = useRef
+(0);
+ const MAX_ATTEMPTS = 3;
+
+ useEffect(() => {
+ // Skip if already attempted
+ if (hasAttempted.current) return;
+
+ // Skip if already connected or connecting
+ if (connected || connecting) {
+ hasAttempted.current = true;
+ return;
+ }
+
+ // Skip if no wallet selected
+ if (!wallet) {
+ // Try to restore wallet from localStorage
+ const savedWalletName = localStorage.getItem('walletName');
+ if (savedWalletName) {
+ select(savedWalletName);
+ // Don't mark as attempted - let it try after selection
+ return;
+ }
+ hasAttempted.current = true;
+ return;
+ }
+
+ // Check if wallet is ready
+ const isWalletReady =
+ wallet.readyState === WalletReadyState.Installed ||
+ wallet.readyState === WalletReadyState.Loadable;
+
+ if (!isWalletReady) {
+ console.log('Wallet not ready:', wallet.adapter.name, wallet.readyState);
+ hasAttempted.current = true;
+ return;
+ }
-**Topics Covered:**
+ // Check attempt limit
+ if (connectionAttemptRef.current >= MAX_ATTEMPTS) {
+ console.log('Max auto-connect attempts reached');
+ hasAttempted.current = true;
+ return;
+ }
-- Auto-connect implementation
-- Wallet persistence with localStorage
-- Handling wallet events
-- Multi-wallet support patterns
-- Security considerations
+ // Attempt auto-connect
+ hasAttempted.current = true;
+ connectionAttemptRef.current += 1;
-**Lab Exercise: Implementing Auto-Connect**
-Build a custom hook for auto-connect functionality that:
+ console.log(`Auto-connect attempt ${connectionAttemptRef.current} for ${wallet.adapter.name}`);
-- Checks if user is already connected to avoid redundant attempts
-- Retrieves saved wallet preference from localStorage
-- Finds the saved wallet in available wallets list
-- Verifies wallet is installed before attempting connection
-- Automatically connects to previously used wallet on page load
-- Saves wallet preference when user connects manually
-- Uses proper React effect dependencies
-- Handles edge cases gracefully
+ connect().catch((err) => {
+ console.log('Auto-connect failed:', err.message);
-**Key Concepts:**
+ // Allow retry if under max attempts
+ if (connectionAttemptRef.current < MAX_ATTEMPTS) {
+ hasAttempted.current = false;
+ }
+ });
+ }, [wallet, connect, connected, connecting, select]);
-- Browser storage strategies
-- Wallet ready states
-- Event handling patterns
-- Security best practices
+ // Save wallet name when connected
+ useEffect(() => {
+ if (connected && wallet) {
+ localStorage.setItem('walletName', wallet.adapter.name);
+ }
+ }, [connected, wallet]);
+}
+```
+
+**Enhanced version with preferences:**
+
+```typescript
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useLocalStorage } from '@solana/wallet-adapter-react';
+import { useEffect, useRef } from 'react';
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+
+export function useEnhancedAutoConnect() {
+ const { wallet, connect, connected, connecting, select } = useWallet();
+ const [autoConnectEnabled] = useLocalStorage('autoConnect', true);
+ const hasAttempted = useRef(false);
+
+ useEffect(() => {
+ // Skip if auto-connect is disabled
+ if (!autoConnectEnabled) {
+ hasAttempted.current = true;
+ return;
+ }
+
+ // Skip if already attempted
+ if (hasAttempted.current) return;
+
+ // Skip if already connected or connecting
+ if (connected || connecting) {
+ hasAttempted.current = true;
+ return;
+ }
+
+ // Try to restore wallet from localStorage
+ if (!wallet) {
+ const savedWalletName = localStorage.getItem('walletName');
+ if (savedWalletName) {
+ select(savedWalletName);
+ return;
+ }
+ hasAttempted.current = true;
+ return;
+ }
+
+ // Check if wallet is ready
+ if (wallet.readyState !== WalletReadyState.Installed &&
+ wallet.readyState !== WalletReadyState.Loadable) {
+ hasAttempted.current = true;
+ return;
+ }
+
+ // Attempt connection
+ hasAttempted.current = true;
+
+ connect().catch((err) => {
+ console.log('Auto-connect failed:', err.message);
+ hasAttempted.current = false; // Allow retry
+ });
+ }, [wallet, connect, connected, connecting, select, autoConnectEnabled]);
+}
+```
+
+
+
+---
+
+#### Key Concepts
+
+- Browser storage strategies
+- Wallet ready states
+- Event handling patterns
+- Security best practices
+
+#### Common Pitfalls
+
+1. **Auto-Connect Loops**
+ - **Error:** App repeatedly attempts connection
+ - **Solution:** Use ref to track attempts, implement max retry limit
+
+2. **Ignoring Ready State**
+ - **Error:** Connecting before wallet is ready
+ - **Solution:** Check `WalletReadyState` before attempting connection
+
+3. **Not Clearing Storage on Disconnect**
+ - **Error:** Stale data persists after disconnect
+ - **Solution:** Clear localStorage when user explicitly disconnects
+
+4. **Missing Error Handling**
+ - **Error:** Silent failures confuse users
+ - **Solution:** Log errors, show user-friendly messages, allow retry
+
+---
## Practical Assignment
@@ -131,77 +3248,842 @@ Create a wallet integration feature that includes:
**Requirements:**
-- Use wallet-ui patterns from examples
-- Implement proper error handling
-- Add loading states for all async operations
-- Ensure mobile responsiveness
-- Include accessibility features (ARIA labels, keyboard navigation)
+- Use wallet-ui patterns from examples
+- Implement proper error handling
+- Add loading states for all async operations
+- Ensure mobile responsiveness
+- Include accessibility features (ARIA labels, keyboard navigation)
**Implementation Guidelines:**
1. **WalletProvider Component**
- - Configure wallet-ui with appropriate settings
- - Add error boundary for graceful error handling
- - Implement auto-connect functionality
- - Set up proper provider hierarchy
+ - Configure wallet-ui with appropriate settings
+ - Add error boundary for graceful error handling
+ - Implement auto-connect functionality
+ - Set up proper provider hierarchy
2. **WalletConnect Component**
- - Build intuitive connection UI
- - Handle all connection states (disconnected, connecting, connected, error)
- - Add smooth animations for state transitions
- - Ensure responsive design for all screen sizes
+ - Build intuitive connection UI
+ - Handle all connection states (disconnected, connecting, connected, error)
+ - Add smooth animations for state transitions
+ - Ensure responsive design for all screen sizes
3. **WalletInfo Component**
- - Display complete wallet information (address, balance, cluster)
- - Implement copy-to-clipboard for public key
- - Show real-time SOL balance
- - Add disconnect functionality
- - Include visual indicators for connection status
+ - Display complete wallet information (address, balance, cluster)
+ - Implement copy-to-clipboard for public key
+ - Show real-time SOL balance
+ - Add disconnect functionality
+ - Include visual indicators for connection status
+
+### Starter Template
+
+**Project Structure:**
+```
+src/
+├── components/
+│ ├── providers/
+│ │ ├── AppProviders.tsx
+│ │ └── ClusterProvider.tsx
+│ ├── wallet/
+│ │ ├── WalletButton.tsx
+│ │ ├── WalletModal.tsx
+│ │ └── WalletInfo.tsx
+│ └── ui/
+│ └── Spinner.tsx
+├── hooks/
+│ ├── useAutoConnect.ts
+│ ├── useWalletPreferences.ts
+│ └── useWalletHistory.ts
+└── App.tsx
+```
+
+### Implementation Steps
+
+1. **Set up providers** (from Lesson 1 lab)
+2. **Build WalletButton** (from Lesson 2 lab)
+3. **Create custom WalletModal** (from Lesson 2 examples)
+4. **Implement auto-connect** (from Lesson 3 lab)
+5. **Build WalletInfo component:**
+
+```typescript
+import { useWallet, useConnection } from '@solana/wallet-adapter-react';
+import { LAMPORTS_PER_SOL } from '@solana/web3.js';
+import { useEffect, useState } from 'react';
+import { useCluster } from '@/components/providers/ClusterProvider';
+
+export function WalletInfo() {
+ const { publicKey, wallet, disconnect } = useWallet();
+ const { connection } = useConnection();
+ const { cluster } = useCluster();
+ const [balance, setBalance] = useStateClick to reveal solution
+ +```typescript +import { useWallet } from '@solana/wallet-adapter-react'; +import { useEffect, useRef } from 'react'; +import { WalletReadyState } from '@solana/wallet-adapter-base'; + +export function useAutoConnect() { + const { wallet, connect, connected, connecting, select } = useWallet(); + const hasAttempted = useRef(false); + const connectionAttemptRef = useRef
+ {/* Implementation here - see full solution */}
+
+ );
+}
+```
+
+### Testing Checklist
+
+- [ ] Connect to wallet successfully
+- [ ] Auto-connect works on page reload
+- [ ] Can switch between different wallets
+- [ ] Balance updates when receiving SOL
+- [ ] Copy address works
+- [ ] Disconnect clears stored data
+- [ ] Mobile responsive
+- [ ] Keyboard accessible
+- [ ] Error states display properly
+- [ ] Loading states show during async operations
+
+### Evaluation Criteria
+
+**Functionality (40%)**
+- All features work as specified
+- Error handling is comprehensive
+- Edge cases are handled
+
+**User Experience (30%)**
+- Intuitive interface
+- Clear feedback for all actions
+- Smooth transitions
+- Mobile-friendly
+
+**Code Quality (20%)**
+- Clean, readable code
+- Proper TypeScript types
+- Reusable components
+- Good separation of concerns
+
+**Accessibility (10%)**
+- Keyboard navigation
+- Screen reader support
+- ARIA labels
+- Focus management
+
+---
## Additional Resources
### Required Reading
-- [Wallet Adapter Documentation](https://github.com/anza-xyz/wallet-adapter)
-- [Wallet Standard](https://github.com/wallet-standard/wallet-standard)
+- [Wallet Adapter Documentation](https://github.com/anza-xyz/wallet-adapter)
+- [Wallet Standard](https://github.com/wallet-standard/wallet-standard)
### Practice Exercises
-1. Add wallet switching without disconnecting
-2. Implement a "recently used wallets" section
-3. Create wallet connection analytics
-4. Build a mini wallet dashboard
+1. Add wallet switching without disconnecting
+2. Implement a "recently used wallets" section
+3. Create wallet connection analytics
+4. Build a mini wallet dashboard
+
+### Recommended Libraries
+
+- **@tanstack/react-query** - Data fetching and caching
+- **zustand** - Lightweight state management
+- **framer-motion** - Animations for transitions
+- **sonner** - Toast notifications for wallet events
+
+---
## Common Issues and Solutions
### Issue: Wallet not detected
-**Solution:**
-- Check wallet ready state before attempting connection
-- If wallet is not detected, provide installation link
-- Open wallet download page in new tab
-- Show helpful message to user about installing wallet
+**Solution:**
+- Check wallet ready state before attempting connection
+- If wallet is not detected, provide installation link
+- Open wallet download page in new tab
+- Show helpful message to user about installing wallet
+
+**Code Example:**
+
+```typescript
+import { WalletReadyState } from '@solana/wallet-adapter-base';
+
+const handleConnect = async (wallet: Wallet) => {
+ if (wallet.readyState === WalletReadyState.NotDetected) {
+ // Wallet not installed
+ const confirmed = window.confirm(
+ `${wallet.adapter.name} is not installed. Would you like to install it?`
+ );
+ if (confirmed) {
+ window.open(wallet.adapter.url, '_blank');
+ }
+ return;
+ }
+
+ // Wallet is installed, proceed with connection
+ await connect();
+};
+```
### Issue: Auto-connect loops
-**Solution:**
-- Implement connection attempt tracking with state
-- Add guards to prevent multiple connection attempts
-- Use debouncing techniques for connection logic
-- Track connection history to avoid infinite loops
+**Solution:**
+- Implement connection attempt tracking with state
+- Add guards to prevent multiple connection attempts
+- Use debouncing techniques for connection logic
+- Track connection history to avoid infinite loops
+
+**Code Example:**
+
+```typescript
+const attemptCountRef = useRef(0);
+const MAX_ATTEMPTS = 3;
+
+useEffect(() => {
+ if (attemptCountRef.current >= MAX_ATTEMPTS) {
+ console.log('Max auto-connect attempts reached');
+ return;
+ }
+
+ // Attempt logic here
+ attemptCountRef.current += 1;
+}, []);
+```
### Issue: Wallet disconnects on page refresh
-**Solution:**
-- Implement proper persistence and re-connection logic
+**Solution:**
+- Implement proper persistence and re-connection logic
+
+**Code Example:**
+
+```typescript
+// Enable auto-connect
+{publicKey?.toBase58()}
+ {publicKey?.toBase58()}
;
+}
+
+function App() {
+ return (
+
+
+
+---
+
+### 2. How do you handle multiple wallet types in a single interface?
+
+Click to reveal answer
+ +The wallet adapter pattern provides a **standardized interface** for integrating multiple wallet types into a single application without writing wallet-specific code for each one. + +**Key purposes:** + +1. **Abstraction** - Hide wallet-specific implementation details behind a common API +2. **Extensibility** - Add new wallet support without changing existing code +3. **Consistency** - All wallets work through the same interface (connect, disconnect, signTransaction, etc.) +4. **Maintenance** - Wallet updates are handled by individual adapters, not your app code +5. **User Choice** - Let users choose their preferred wallet without forcing a specific one + +**Example:** + +```typescript +// Without adapter pattern - need wallet-specific code +if (walletType === 'phantom') { + await window.phantom.solana.connect(); +} else if (walletType === 'solflare') { + await window.solflare.connect(); +} +// ... etc for each wallet + +// With adapter pattern - same code for all wallets +await wallet.adapter.connect(); +``` + +The pattern is based on the **Adapter design pattern** from software engineering, which allows incompatible interfaces to work together. +
+
+ {children}
+
+```
+
+**2. Use the `useWallet()` hook to access all wallets:**
+
+```typescript
+const { wallet, wallets, select, connect } = useWallet();
+
+// List all available wallets
+wallets.map((w) => (
+
+))
+```
+
+**3. Check ready state before allowing connection:**
+
+```typescript
+const isAvailable =
+ wallet.readyState === WalletReadyState.Installed ||
+ wallet.readyState === WalletReadyState.Loadable;
+
+if (!isAvailable) {
+ // Show "Install" button instead
+ window.open(wallet.adapter.url, '_blank');
+}
+```
+
+**4. Let Wallet Standard handle automatic detection:**
+
+```typescript
+// Empty array enables auto-detection
+const wallets = useMemo(() => [], []);
+```
+
+This detects all wallets implementing the Wallet Standard automatically without explicit configuration.
+
+**Best practices:**
+- Sort wallets by availability (installed first)
+- Show clear indicators for wallet status
+- Provide installation links for missing wallets
+- Remember user's last-used wallet
+
+
+---
+
+### 3. Explain the wallet ready states and their meanings
+
+Click to reveal answer
+ +Handle multiple wallet types by: + +**1. Configure wallet adapters in WalletProvider:** + +```typescript +const wallets = useMemo( + () => [ + new PhantomWalletAdapter(), + new SolflareWalletAdapter(), + new CoinbaseWalletAdapter(), + ], + [] +); + +
+
+
+---
+
+### 4. What security considerations apply to auto-connect features?
+
+Click to reveal answer
+ +Wallet adapters report their availability through `WalletReadyState` enum: + +**1. `WalletReadyState.Installed`** +- **Meaning:** Wallet extension is installed and ready to use +- **Example:** User has Phantom extension installed in their browser +- **Action:** Can connect immediately + +```typescript +if (wallet.readyState === WalletReadyState.Installed) { + // Show "Connect" button + await wallet.adapter.connect(); +} +``` + +**2. `WalletReadyState.NotDetected`** +- **Meaning:** Wallet is not installed in the current environment +- **Example:** User doesn't have Solflare extension +- **Action:** Show installation prompt + +```typescript +if (wallet.readyState === WalletReadyState.NotDetected) { + // Show "Install" button + window.open(wallet.adapter.url, '_blank'); +} +``` + +**3. `WalletReadyState.Loadable`** +- **Meaning:** Wallet can be loaded on demand (usually on mobile) +- **Example:** Wallet Connect, mobile wallet adapters +- **Action:** Can attempt connection (may open app) + +```typescript +if (wallet.readyState === WalletReadyState.Loadable) { + // Can connect - may trigger app redirect on mobile + await wallet.adapter.connect(); +} +``` + +**4. `WalletReadyState.Unsupported`** +- **Meaning:** Wallet doesn't work in current environment +- **Example:** Hardware wallet on mobile device +- **Action:** Show "Not Supported" message + +```typescript +if (wallet.readyState === WalletReadyState.Unsupported) { + // Disable connection + returnThis wallet is not supported on mobile
;
+}
+```
+
+**UI Implementation:**
+
+```typescript
+function WalletButton({ wallet }: { wallet: Wallet }) {
+ switch (wallet.readyState) {
+ case WalletReadyState.Installed:
+ return ;
+
+ case WalletReadyState.NotDetected:
+ return (
+
+ );
+
+ case WalletReadyState.Loadable:
+ return ;
+
+ case WalletReadyState.Unsupported:
+ return Not Supported
;
+ }
+}
+```
+
+
+
+---
+
+### 5. How can you improve wallet connection UX for mobile users?
+
+Click to reveal answer
+ +**Security considerations for auto-connect:** + +**1. Never Store Private Keys** +- Auto-connect should ONLY save the wallet name (e.g., "Phantom") +- Never save seed phrases, private keys, or sensitive credentials +- Wallet adapters handle key management securely + +```typescript +// ✅ Safe to store +localStorage.setItem('walletName', 'Phantom'); + +// ❌ NEVER store these +localStorage.setItem('privateKey', ...); // DANGEROUS! +localStorage.setItem('seedPhrase', ...); // DANGEROUS! +``` + +**2. Rate Limiting** +- Prevent infinite auto-connect loops +- Limit connection attempts to prevent abuse +- Add cooldown periods between attempts + +```typescript +const MAX_ATTEMPTS = 3; +const attemptCount = useRef(0); + +if (attemptCount.current >= MAX_ATTEMPTS) { + console.log('Max attempts reached'); + return; +} +``` + +**3. User Consent** +- Make auto-connect opt-in, not forced +- Provide UI toggle to disable auto-connect +- Clear indication when auto-connecting + +```typescript +const [autoConnectEnabled, setAutoConnectEnabled] = + useLocalStorage('autoConnect', false); // Default: false + +// Show toggle in settings + +``` + +**4. Clear Data on Explicit Disconnect** +- When user manually disconnects, clear auto-connect data +- Don't auto-reconnect after explicit user action +- Respect user intent + +```typescript +const handleDisconnect = async () => { + await disconnect(); + + // Clear auto-connect data + localStorage.removeItem('walletName'); + localStorage.removeItem('autoConnect'); +}; +``` + +**5. Validate Wallet Before Connecting** +- Check wallet ready state before auto-connect +- Verify wallet is still installed +- Handle missing wallets gracefully + +```typescript +const isWalletReady = + wallet.readyState === WalletReadyState.Installed || + wallet.readyState === WalletReadyState.Loadable; + +if (!isWalletReady) { + console.log('Wallet no longer available'); + localStorage.removeItem('walletName'); + return; +} +``` + +**6. HTTPS Only** +- Always use HTTPS in production +- Wallet adapters may refuse insecure connections +- Prevents man-in-the-middle attacks + +**7. Session Timeouts** +- Consider implementing session timeouts +- Require re-authentication after inactivity +- Clear sensitive session data + +```typescript +const SESSION_TIMEOUT = 30 * 60 * 1000; // 30 minutes + +useEffect(() => { + const lastActivity = localStorage.getItem('lastActivity'); + if (lastActivity) { + const elapsed = Date.now() - parseInt(lastActivity); + if (elapsed > SESSION_TIMEOUT) { + disconnect(); + localStorage.removeItem('walletName'); + } + } +}, []); +``` + +**8. Transparent Logging** +- Log auto-connect attempts for debugging +- Help users understand what's happening +- Don't hide connection activity + +```typescript +console.log('Attempting auto-connect to', savedWalletName); +``` +
+
+
+---
## Hands-On Challenge
@@ -209,26 +4091,73 @@ Create a wallet integration feature that includes:
Build a wallet connection interface with these constraints:
-- Must connect in under 3 clicks
-- Should remember last used wallet
-- Must work on mobile devices
-- Include visual feedback for all states
-- Handle errors gracefully
+- Must connect in under 3 clicks
+- Should remember last used wallet
+- Must work on mobile devices
+- Include visual feedback for all states
+- Handle errors gracefully
**Bonus Points:**
-- Add wallet balance display
-- Implement ENS/SNS domain resolution
-- Create custom wallet icons
-- Add connection animations
+- Add wallet balance display
+- Implement ENS/SNS domain resolution
+- Create custom wallet icons
+- Add connection animations
+
+### Challenge Steps
+
+1. **One-Click Connect (for returning users)**
+ - Auto-connect on page load if wallet was previously used
+ - Show "Connect" button that immediately opens last-used wallet
+
+2. **Two-Click Connect (for new users)**
+ - First click: Open wallet selection modal
+ - Second click: Select and connect to wallet
+
+3. **Three-Click Maximum (for wallet installation)**
+ - First click: Open wallet selection modal
+ - Second click: Click "Install" for missing wallet
+ - Third click: Return and connect after installation
+
+**Evaluation:**
+- Count clicks from landing to connected state
+- Test on desktop and mobile
+- Verify auto-connect works
+- Check error handling
+
+---
## Looking Ahead
Next week covers message signing and transaction patterns, including:
-- Message signing for authentication
-- Transaction signing workflows
-- Building transaction preview UIs
-- Implementing approval patterns
+- Message signing for authentication
+- Transaction signing workflows
+- Building transaction preview UIs
+- Implementing approval patterns
Prerequisites for next week include having devnet SOL available for transaction exercises. Free devnet SOL is available from the [Solana Faucet](https://faucet.solana.com/).
+
+---
+
+## Summary
+
+This week you learned to:
+
+1. **Set up wallet providers** using the Solana wallet adapter architecture
+2. **Build custom wallet UI** with hooks and components
+3. **Implement auto-connect** for improved user experience
+4. **Handle wallet events** and state management
+5. **Follow security best practices** for wallet integration
+
+**Key takeaways:**
+
+- Use `ConnectionProvider` → `WalletProvider` → `WalletModalProvider` hierarchy
+- Leverage `useWallet()` and `useConnection()` hooks for wallet interactions
+- Handle all wallet ready states appropriately
+- Implement auto-connect with localStorage persistence
+- Never store private keys - only wallet names
+- Provide great mobile UX with responsive design
+- Add loading states and error handling for all async operations
+
+You're now ready to build production-quality wallet connection experiences for Solana applications!
Click to reveal answer
+ +**Mobile wallet UX improvements:** + +**1. Responsive Button Design** + +```typescript +export function MobileWalletButton() { + const { publicKey } = useWallet(); + + return ( + + ); +} +``` + +**2. Bottom Sheet for Wallet Selection** + +```typescript +// Use bottom sheet instead of centered modal on mobile +
+ {/* Wallet list */}
+
+```
+
+**3. Larger Touch Targets**
+
+```typescript
+// Minimum 44px height for touch targets
+
+```
+
+**4. Mobile Wallet Deep Links**
+
+```typescript
+// Detect mobile and use deep links
+const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+if (isMobile && wallet.adapter.name === 'Phantom') {
+ // Open Phantom mobile app
+ window.location.href = 'phantom://connect';
+}
+```
+
+**5. Swipe to Close Modals**
+
+```typescript
+// Add swipe gesture for mobile
+const handleTouchEnd = (e: TouchEvent) => {
+ const swipeDistance = e.changedTouches[0].clientY - touchStart;
+ if (swipeDistance > 100) {
+ onClose(); // Close modal on swipe down
+ }
+};
+```
+
+**6. Loading States Optimized for Mobile**
+
+```typescript
+// Full-screen loading on mobile
+{connecting && (
+
+
+)}
+```
+
+**7. Persistent Connection Indicator**
+
+```typescript
+// Show connection status in a fixed position
+
+
+ Connecting to {wallet?.adapter.name}...
+
+ Connected to {wallet?.adapter.name}
+
+```
+
+**8. Simplified Mobile UI**
+
+```typescript
+function MobileWalletInfo() {
+ return (
+
+ {/* Show only essential info on mobile */}
+
+ );
+}
+```
+
+**9. Auto-Detect Mobile Wallets**
+
+```typescript
+// Prioritize mobile-optimized wallets on mobile
+const wallets = useMemo(() => {
+ const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+ if (isMobile) {
+ return [
+ // Mobile-first wallets
+ new SolanaMobileWalletAdapter(),
+ new PhantomWalletAdapter(),
+ new SolflareWalletAdapter(),
+ ];
+ }
+
+ return [
+ // Desktop wallets
+ new PhantomWalletAdapter(),
+ new SolflareWalletAdapter(),
+ new LedgerWalletAdapter(),
+ ];
+}, []);
+```
+
+**10. Haptic Feedback**
+
+```typescript
+// Add vibration feedback for mobile
+const handleConnect = async () => {
+ if ('vibrate' in navigator) {
+ navigator.vibrate(50); // Short vibration
+ }
+ await connect();
+};
+```
+
+**11. Reduced Motion**
+
+```typescript
+// Respect prefers-reduced-motion
+const prefersReducedMotion = window.matchMedia(
+ '(prefers-reduced-motion: reduce)'
+).matches;
+
+
+ {publicKey?.toBase58().slice(0, 4)}...
+ {publicKey?.toBase58().slice(-4)}
+
+ {balance} SOL
+
+ {/* Full address in expandable section */}
+
+
+ Full Address
+{publicKey?.toBase58()}
+
+ {/* Content */}
+
+```
+
+**12. Install Prompts for Mobile**
+
+```typescript
+// Show mobile-specific install instructions
+if (wallet.readyState === WalletReadyState.NotDetected && isMobile) {
+ return (
+
+
+ );
+}
+```
+Install {wallet.adapter.name} on your mobile device
+ + Download from App Store + +