catkin network
Catkin Network lets merchants accept gasless crypto payments and manage products via 1inch Fusion.
Demo
About
Catkin Network Dashboard is a full-featured Web3 admin panel that enables merchants to manage and sell products online while accepting crypto payments in a seamless, gasless, and cross-chain experience. Built with Next.js 14 and FastAPI, this platform empowers merchants to: 🧾 Create, edit, and delete products via a modern UI 💵 Set product prices in USD (not in tokens or cents) 🔐 Authenticate securely using crypto wallets (WalletConnect + JWT) 💱 Let users pay with any token on any supported chain via 1inch Fusion, ensuring MEV protection and zero gas fees for buyers All product data is synced with a FastAPI backend, and payment details can be extended to support order tracking, delivery logic, or NFTs. The system is designed to be modular, developer-friendly, and customizable for both frontend and backend integrations. This is the merchant portal portion of the Catkin Network ecosystem – optimized for speed, developer ergonomics, and Web3-native commerce.
How it's made
The Catkin Network Dashboard is built using a modern full-stack Web3 stack, combining the best of frontend performance, backend robustness, and decentralized infrastructure. Here's how all the pieces come together: 🧩 Frontend Framework: Built with Next.js 14 using the App Router, offering server-side rendering and enhanced routing capabilities. UI/UX: Styled with Tailwind CSS and shadcn/ui, giving a clean and flexible design system. Web3 Integration: wagmi v2 + viem for Ethereum wallet interaction. WalletConnect used to trigger a login and sign-in flow. Once signed, a JWT token is stored in localStorage and used for authenticated API requests. Cross-chain Payments: Uses 1inch Fusion API to fetch swap quotes and simulate payments. It supports MEV protection and zero gas for the user. State Management: React’s built-in useState and useEffect handle most local state, with no external state library required. 🖥️ Backend FastAPI (Python) powers the backend: Exposes RESTful endpoints like POST /product/product, PUT /product/product/{id}, and GET /product/my-products. JWT authentication is enforced for all product-related endpoints using a Bearer token. Products are stored with price in USD (integer) for backend consistency (e.g. 41 represents $41). Authentication Flow: The user signs a SIWE (Sign-In With Ethereum) message. The backend verifies the signature and issues a JWT token. This token is stored in localStorage and sent on every authorized request. ⚙️ Hacky / Interesting Bits 💡 Instead of asking the user to select a token and network manually, we show a preview quote using 1inch Fusion — this makes payments feel smoother and chain-agnostic. 🧪 During development, product management was simulated with useState, and later migrated to full FastAPI backend integration. 🔒 Authentication leverages localStorage.setItem("token", "...") during development for quick testing. 🤝 Partner Technologies 1inch Fusion enabled seamless cross-chain payments, abstracting complexity from the merchant and buyer. WalletConnect allowed for simple and secure Web3 logins. shadcn/ui helped accelerate frontend development with beautifully pre-styled components.