A feature-rich, interactive Stellar tipping application designed for content creators. Built with React and Stellar SDK, seamlessly bridging the gap between creators and their supporters.
Ye section Yellow Belt Level 2 ke liye newly added code/features ka summary hai.
- Multi-wallet integration: Freighter, Albedo, xBull support via StellarWalletsKit.
- Contract integration: Frontend se Soroban smart contract invocation (
record_tip) add kiya gaya. - On-chain contract read: Contract total tips read/sync support.
- Real-time event sync: Contract events poll/stream karke analytics me live dikhaya ja raha hai.
- Transaction lifecycle tracking:
pending -> success/failedstatus flow implement. - Status visibility in UI: Transaction history badges + progress message panel.
- Improved receipt details: Receipt me payment hash, contract hash, wallet name, error details.
- 3 required error types handled:
- Wallet not found
- Wallet rejected
- Insufficient balance
- User wallet select/connect karta hai.
- Payment transaction build + sign + submit hota hai.
- Contract transaction build + sign + submit hota hai.
- Transaction status pending se success/failed me update hota hai.
- Contract event stream analytics data refresh karta hai.
src/utils/wallet.js: Multi-wallet abstraction + error normalization.src/utils/contract.js: Soroban read/write + event stream utilities.src/utils/storage.js: In-place transaction update helper (updateTransaction).src/utils/stellar.js: Insufficient balance specific handling.src/App.jsx: End-to-end orchestration for wallet + payment + contract + status + events.src/components/WalletConnect.jsx: Wallet selector based connect UX.src/components/TransactionHistory.jsx: Pending/success/failed transaction visualization.src/components/Receipt.jsx: Contract hash/wallet/error details.contracts/tipjar/src/lib.rs: Soroban contract source.contracts/tipjar/README.md: Contract build/deploy instructions..env.example: Contract config template.WALLETCONNECT_USAGE.md: Multi-wallet usage notes.
Create .env and configure:
VITE_TIP_CONTRACT_ID=YOUR_TESTNET_CONTRACT_ID
VITE_TIP_CONTRACT_READ_METHOD=get_total_tips
VITE_TIP_CONTRACT_WRITE_METHOD=record_tip
VITE_TIP_READER_PUBLIC_KEY=YOUR_TESTNET_PUBLIC_KEY| Requirement | Implemented |
|---|---|
| 3 error types handled | Yes |
| Contract deployed on testnet | Contract source + deploy guide added |
| Contract called from frontend | Yes |
| Transaction status visible | Yes |
| Multi-wallet support | Yes |
| Real-time event sync | Yes |
Final submission se pehle ye values fill/attach karo:
- Deployed contract ID
- Verified contract-call transaction hash
- Wallet options screenshot
Build check:
npm run build- Seamless Wallet Connection: Supports Freighter wallet integration.
- Instant Tips: Quick tip amounts (1, 5, 10 XLM) or custom values.
- Real-time Price: Updates USD/XLM conversion rates automatically.
- ๐ฅ Tip Streaks: Track daily support streaks with tiered badges (Bronze, Silver, Gold, Platinum).
- ๐ Milestones: Unlock achievements for total tips sent (10, 25, 50, 100, 500+).
- ๐ Leaderboard: Visualize top supporters and contribution rankings.
- โจ Interactive Feedback: Confetti explosions and custom sound effects on successful tips.
- In-Depth Dashboard: Filter transaction history by 7 days, 30 days, or All Time.
- Export Options: Download transaction history as CSV or styled PDF reports.
- Visual Charts: Track tip volume trends over time using Chart.js.
- ๐ฑ QR Code Generator: Real, scannable QR codes (Powered by
qrcode.react) with instant download and copy options. - ๐ Embed Widget: Generate an iframe widget to accept tips on personal websites/blogs.
- ๐งพ Shareable Receipts: Generate receipt links or share directly to Twitter/X.
- Dark Mode: Fully supported dark/light themes with persistence.
- Responsive Design: Mobile-friendly layout optimized for all devices.
- Standardized Icons: Clean SVG icons for a polished, consistent look.
| Feature | Preview |
|---|---|
| Home Dashboard Instant tipping & Wallet status |
 |
| ) | |
| Analytics Pivot Charts & Leaderboards |
 |
|
| ![Chart]<img width="1919" height="910" alt="image" src="https://github.com/user-attachments/assets/9a6b7eef-5db7-4d76-bd73-9c24db8803d6" />
|
| Interactive Elements
QR Code & Confetti | 
) |
- Node.js (v18+)
- Stellar Freighter Wallet (Optional for Demo Mode)
-
Clone the repository (or download source)
cd stellar-tip-jar -
Install Dependencies
npm install
-
Run Development Server
npm run dev
-
Open Browser Visit
http://localhost:5173
The app supports two modes via src/utils/wallet.js:
For transactions on the Stellar Testnet.
- Wallet: Connects to your real Freighter Wallet extension.
- Transactions: Submits real XDR to Stellar Testnet Horizon.
- Network Badge: Displays "๐ข TESTNET" in the header.
- Setup:.
- Ensure your Freighter wallet is installed and set to Testnet.
- Ensure your Creator Address in
App.jsxis active/funded on Testnet.
stellar-tip-jar/
โโโ public/ # Static assets (Favicons, Screenshots)
โโโ src/
โ โโโ components/ # Reusable UI components
โ โ โโโ Analytics.jsx # Charts & Data visualization
โ โ โโโ QRCode.jsx # Real QR generation
โ โ โโโ StreakBadge.jsx # Gamification logic
โ โ โโโ Icons.jsx # SVG Icon system
โ โ โโโ ...
โ โโโ utils/ # Helper functions
โ โ โโโ wallet.js # Freighter integration & Mode logic
โ โ โโโ stellar.js # Stellar SDK interactions
โ โ โโโ storage.js # LocalStorage persistence
โ โโโ App.jsx # Main application controller
โ โโโ App.css # Global design system & variables
โ โโโ main.jsx # Entry point
โโโ README.md # Documentation
- Frontend: React, Vite
- Blockchain: Stellar SDK
- Styling: Vanilla CSS (Handcrafted variables & themes)
- Utilities:
chart.js(Analytics)jspdf(PDF Reporting)qrcode.react(QR Generation)canvas-confetti(Visual Effects)
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. Built with โค๏ธ for the Stellar ecosystem.