Solwall : Solana Wallet Adapter

A modern, user-friendly Solana wallet application built with React, TypeScript, and Vite. Features real-time balance tracking, SOL transfers, and crypto news integration.

🚀 Live Demo

Features

• 🔐 Wallet Integration

  • Multiple wallet support (Phantom, Solflare, Coinbase)
  • Real-time balance updates
  • Secure transaction handling

• 💸 Transaction Management

  • Send SOL to any Solana address
  • Input validation and error handling
  • Transaction status notifications

• 📰 Crypto News Feed

  • Real-time crypto news updates
  • Clickable news cards
  • Auto-refresh functionality

• 🎨 Modern UI/UX

  • Responsive design
  • Dark/light theme support
  • Loading states and animations

Tech Stack

• React + TypeScript
• Vite
• Tailwind CSS
• Solana Web3.js
• Solana Wallet Adapter
• Lucide React Icons

Project Structure

src/
├── components/           # React components
│   ├── wallet/          # Wallet-related components
│   │   ├── AirdropButton.tsx
│   │   ├── WalletBalance.tsx
│   │   └── WalletProvider.tsx
│   ├── transaction/     # Transaction components
│   │   └── TransactionForm.tsx
│   └── news/            # News components
│       ├── NewsCard.tsx
│       └── NewsFeed.tsx
├── utils/               # Utility functions
│   ├── api.ts          # API integration
│   └── validation.ts    # Input validation
└── main.tsx            # App entry point

Getting Started

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Development Guidelines

Code Organization

• Create small, focused components
• Extract reusable logic into utility functions
• Keep components under 200 lines
• Use TypeScript for type safety

Best Practices

1. Component Structure

   • One component per file
   • Clear component responsibilities
   • Props interface definitions

2. State Management

   • Use React hooks appropriately
   • Keep state close to where it's used
   • Avoid prop drilling

3. Error Handling

   • Proper error boundaries
   • User-friendly error messages
   • Graceful fallbacks

4. Performance

   • Memoize expensive calculations
   • Lazy load components
   • Optimize re-renders

Styling Guidelines

• Use Tailwind CSS classes
• Follow mobile-first approach
• Maintain consistent spacing
• Use design tokens

Features Documentation

Wallet Integration

// Example wallet connection
const { publicKey, sendTransaction } = useWallet();

• Handles wallet connection
• Manages wallet state
• Provides transaction methods

Transaction Management

// Example transaction
const transaction = new Transaction().add(
  SystemProgram.transfer({
    fromPubkey: publicKey,
    toPubkey: recipientPubKey,
    lamports: amount * LAMPORTS_PER_SOL,
  })
);

• Transaction building
• Fee calculation
• Confirmation handling

News Integration

// Example news fetch
const news = await fetch(
  'https://min-api.cryptocompare.com/data/v2/news/'
);

• Real-time news updates
• Error handling
• Data transformation

Security Considerations

• Input validation for all user inputs
• Secure wallet connection handling
• Transaction confirmation checks
• Error handling and user feedback

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT License - feel free to use this project for your own purposes.