Boost Your Earnings, Accept Donations in Any Crypto, On Any Chain.
ShiftTip enables streamers to accept cryptocurrency donations in any token, on any blockchain, while automatically receiving payouts in their preferred stable token. Built for the SideShift Wavehack, ShiftTip eliminates the friction of multi-chain crypto donations with live alerts, TTS notifications, and seamless SideShift API integration.
- Multi-Chain Donations: Accept any cryptocurrency from any blockchain
- Automatic Conversion: Donors send any token, you receive your preferred token (USDC, ETH, etc.)
- Live Overlay Alerts: Real-time donation notifications with customizable overlays
- Text-to-Speech: Hear donation messages read aloud during streams
- QR Code Generation: Easy donation links and QR codes for viewers
- Donation Tracking: View recent donations and track earnings
- Zero Friction: Donors use whatever crypto they already own
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- API Integration: SideShift API for cross-chain swaps
- TTS: Browser speechSynthesis API
app/
├── (main)/
│ ├── dashboard/
│ │ └── page.tsx # Streamer dashboard
│ ├── donate/
│ │ └── page.tsx # Public donation page
│ └── layout.tsx
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx # Landing page
components/
├── dashboard/
│ ├── DonationLinks.tsx # Shareable donation links
│ ├── RecentDonations.tsx # Recent donations list
│ ├── SettingsForm.tsx # Streamer settings
│ ├── SetupForm.tsx # Initial setup
│ └── StatsCards.tsx # Donation statistics
├── donate/
│ ├── AmountMessageInput.tsx # Donation amount & message
│ ├── DonateHeader.tsx # Donation page header
│ ├── DonationForm.tsx # Main donation form
│ ├── DonationResult.tsx # Donation confirmation
│ ├── TokenSelector.tsx # Token selection dropdown
│ ├── useSideShift.ts # SideShift API hook
│ └── WalletInfo.tsx # Wallet display
├── overlay/
│ └── index.tsx # Stream overlay component
├── LandingPage.tsx # Landing page component
└── Navigation.tsx # Navigation component
lib/
├── fetchSideShiftTokens.ts # Fetch available tokens
├── fetchTokenBalance.ts # Get token balance
├── fetchWalletBalances.ts # Get wallet balances
└── utils.ts # Utility functions
- Node.js 18+ and npm/yarn/pnpm
- A crypto wallet address for receiving donations
- Clone the repository:
git clone https://github.com/yourusername/shifttip.git
cd shifttip- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 in your browser
- Navigate to the dashboard at
/dashboard - Complete the setup form with your:
- Wallet address
- Preferred payout token
- Stream settings
- Share your donation page URL with viewers
- Setup: Configure your wallet and preferred payout token in the dashboard
- Share: Send your donation page link to viewers
- Stream: Display the overlay URL in your streaming software (OBS, Streamlabs, etc.)
- Receive: Get donations automatically converted to your preferred token
- Visit the streamer's donation page
- Select any cryptocurrency you own
- Enter the amount and optional message
- Send the donation
- See your donation appear live on stream
- Viewer initiates donation: Selects token, amount, and message
- SideShift API integration: Creates a variable shift for token conversion
- Deposit address generation: Viewer receives a deposit address
- Token swap: SideShift automatically swaps to streamer's preferred token
- Live notification: Overlay displays donation with TTS message
- Confirmation: Both viewer and streamer see confirmation
ShiftTip uses the SideShift API for cross-chain token swaps:
- createVariableShift: Generates deposit address and swap parameters
- getShift: Checks swap status and confirms completion
No API key required for basic usage.
- OBS plugin for native overlay integration
- Recurring donation subscriptions
- Advanced analytics dashboard
- Multi-token payout options
- Donation badges and NFT rewards
- Mobile app for streamers
- Donation goal tracking
- Custom overlay themes
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- 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
This project is licensed under the MIT License - see the LICENSE file for details.
- Built for the SideShift Wavehack
- Powered by SideShift.ai for cross-chain swaps
- UI components from shadcn/ui
For questions or issues, please open an issue on GitHub or contact the maintainers.
Built with passion for the crypto streaming community.