Dripnex is a minimalist Web3 wallet interface — built for real people in a real world.
It's designed to connect your wallet simply, privately, and fast — without clutter.
A clean, crypto-native frontend starter that lets you:
- Connect your wallet (RainbowKit + Wagmi)
- Use a minimal, responsive and glassmorphic UI
- Extend with your own on-chain logic
- Next.js
- Tailwind CSS
- PostCSS configured via
postcss.config.js(Tailwind CSS + Autoprefixer) - RainbowKit
- Wagmi
- Framer Motion
git clone https://github.com/yourusername/dripnex.git
cd dripnex
npm install
cp .env.example .env.local
npm run dev📝 Make sure to replace your
WalletConnectproject ID inwallet.ts. The.env.examplefile lists all variables needed for local development.
dripnex relies on a few environment variables for API keys and wallet
addresses. Copy .env.example to .env.local and fill in your values.
| Variable | Purpose |
|---|---|
NEXT_PUBLIC_SUPABASE_URL |
URL of your Supabase instance |
NEXT_PUBLIC_SUPABASE_ANON_KEY |
Supabase anon key used in the browser |
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID |
WalletConnect project ID |
NEXT_PUBLIC_ETHERSCAN_API_KEY |
Public API key for client Etherscan calls |
ETHERSCAN_API_KEY |
Private API key for server-side Etherscan requests |
NEXT_PUBLIC_LIFI_API_KEY |
API key for Li.Fi bridge quotes |
BREVO_API_KEY |
API key for the Brevo email service |
CSRF_SECRET |
Secret used to sign CSRF tokens |
NEXT_PUBLIC_ETH_WALLET |
Donation address for Ethereum |
NEXT_PUBLIC_BITCOIN_WALLET |
Donation address for Bitcoin |
NEXT_PUBLIC_SOLANA_WALLET |
Donation address for Solana |
NEXT_PUBLIC_LITECOIN_WALLET |
Donation address for Litecoin |
NEXT_PUBLIC_DOGECOIN_WALLET |
Donation address for Dogecoin |
UPSTASH_REDIS_REST_URL |
Optional Redis REST endpoint used in Docker |
UPSTASH_REDIS_REST_TOKEN |
Token for the Upstash REST API |
Variables prefixed with NEXT_PUBLIC_ are exposed to the browser.
Create a .env.local file with these values for local development and Docker.
Tests load variables from .env.test using the same keys.
The wallet can fetch cross-chain quotes using the Li.Fi API. Set
NEXT_PUBLIC_LIFI_API_KEY in your .env.local to enable requests. Then use the
BridgePanel component to select the source/target chains and token. The
panel will display the estimated amount received on the destination chain.
You can run the app in a container without installing Node locally. Build the image and start the server with:
docker build -t dripnex .
docker run --env-file .env.local -p 3000:3000 dripnexThe server will be available at http://localhost:3000.
If you want Supabase and Redis alongside the app, start everything with:
docker-compose updocker-compose reads the same .env.local file used for local development.
Start the Supabase container and apply the schema locally with:
docker-compose up -d supabase
PGPASSWORD=postgres psql -h localhost -p 54322 -U postgres -f supabase/schema.sqlThe command loads the tables, RLS settings and policies defined in
supabase/schema.sql.
-
Install dependencies if you haven't already:
npm install
-
Create a
.env.testfile with the same keys listed above. The tests will load this file automatically. -
Execute the test suite with:
npm test
Vitest will run all the unit and integration tests located under `src/**/__tests__`.
4. Run the linter to make sure your code follows the project's style rules:
```bash
npm run lint
.
├── app/
│ ├── page.tsx # Main layout
│ ├── components/
│ │ ├── Navbar.tsx
│ │ ├── Footer.tsx
│ │ ├── Hero.tsx
│ │ └── WalletButton.tsx
├── public/
│ └── logodripnex.svg
├── styles/
│ └── globals.css
The application sends several security headers defined in next.config.ts:
- Content-Security-Policy restricts asset loading to the same origin while allowing inline scripts required by Next.js.
- X-Frame-Options: DENY prevents embedding the site in iframes.
- X-Content-Type-Options: nosniff stops MIME type sniffing.
- Referrer-Policy: same-origin only sends referrer info for same-site requests.
- X-XSS-Protection: 1; mode=block enables basic XSS filtering in old browsers.
- CSRF Protection requires sending the
csrf-tokenheader with POST requests. The value comes from thecsrfTokencookie set by the server.
- GET
/healthz— returns200 OKwhen the server is running. - All POST requests require a CSRF token. The token is stored in the
_dripnex_csrfcookie and must be sent using theX-CSRF-Tokenheader.
The API provides a /healthz endpoint for health checks. All POST routes require a csrfToken header to mitigate CSRF attacks.
The API provides a /healthz endpoint for health checks. All POST routes require a csrfToken header to mitigate CSRF attacks.
Last updated: 2025-06-04
- Wallet connection using Wagmi
- ETH transfers via
useSendEth - Send/Receive panel with QR code generation
- Transaction history via Etherscan API
- Profile registration with Supabase
- DonateWidget with multichain placeholders
- Cross-chain quotes using Li.Fi
- Newsletter integration with Brevo
- Glassmorphism + responsive design
- Tailwind + Skeleton UI integration
- Wallet Dashboard: Profile + Transactions
- Markdown blog using Sanity + PortableText
- Real multichain support (Ethereum, Polygon, BSC, Arbitrum, Optimism)
- Display balance by token and network
- Transaction view by token/network
- Unified theming system (design tokens)
- Enhanced feedback (errors, confirmations, loading)
- Systematic visual improvements (accessibility, animations)
- Fiat value display (USD, ARS)
- Message signing support
- Frequent contact list
- Mobile UX improvements for Send/Receive panel
- NFT support
- Light/Dark theme toggle
- Accessibility enhancements (focus states, aria-labels)
-
README.mdwith vision and setup - Local development guide
- Folder structure & architecture overview
- Wallet and donations flow explained
- Guide: how to add new chains/tokens
- Supabase schema and usage
- Transaction format and display logic
- Fork the repo
- Create your feature branch (
git checkout -b feature/foo) - Commit your changes
- Push to the branch
- Open a Pull Request
For detailed guidelines see CONTRIBUTING.md.
MIT © tomymaritano