A React application built with TypeScript and Vite that allows users to claim tokens from Streamflow Airdrops on the Solana Devnet.
- Wallet Connection: Supports Phantom and other Solana wallets via
@solana/wallet-adapter. - Airdrop Lookup: Users can enter a Distributor ID to fetch airdrop details.
- Allocation View: Displays unlocked, locked, and claimable token amounts.
- Claim Functionality: claiming tokens directly to the user's wallet.
- Real-time Feedback: React Query integration for efficient data fetching and caching.
- Success UI: Displays transaction details and success messages upon claiming.
- Frontend: React, TypeScript, Vite
- Styling: Tailwind CSS, Lucide React (Icons)
- Blockchain:
@solana/web3.js,@streamflow/distributorSDK - State Management: TanStack Query (React Query)
- Node.js (v18 or higher)
- Yarn package manager
- Solana Wallet (e.g., Phantom) configured for Devnet
- SOL on Devnet (for transaction fees)
-
Install Dependencies
yarn install
-
Run Development Server
yarn dev
-
Open in Browser
The app typically runs at
http://localhost:5173. When using ngrok, ensure you access the provided ngrok URL.
- Connect Wallet: Click the "Select Wallet" button in the top right to connect your Solana wallet. Ensure you are on Devnet.
- Enter Airdrop ID: Input a valid Streamflow Distributor Account address (Public Key) into the lookup field.
- View Details:
- If valid, the detailed token information (Mint, Total Amount, etc.) will appear.
- Your specific allocation (Claimable amount) will be shown below.
- Claim:
- Click "Claim Tokens" to initiate the transaction.
- Approve the transaction in your wallet.
- Upon success, a green banner will display the amount claimed and a link to the transaction on Solana Explorer.
- "Airdrop not found": Ensure the ID is a valid Streamflow Distributor address on Devnet.
- Transaction Failed: Check if you have enough Devnet SOL for gas fees.
- CORS/Network Issues: If accessing via ngrok, ensure
vite.config.tsallows the host (already configured).