piper-app is the primary user interface and frontend client for the Piper Protocol — enabling programmable, real-time payment streaming on the Sui blockchain.
This repository contains the production-ready Progressive Web App (PWA) built to interact with the Piper smart contracts via the @usepiper/sdk.
Piper changes payments from static, lump-sum transfers into fluid, live on-chain streams that settle every second. This frontend application provides a beautiful, consumer-friendly interface to create, manage, and visualize these streams in real-time.
- A high-performance, animated introduction to Piper.
- Visual comparisons between static transfers, escrow, and streaming.
- Built using
framer-motionfor kinetic, scroll-driven storytelling.
- A fully integrated, animated slide deck to present Piper's go-to-market strategy and value proposition directly from the application.
- Supports keyboard navigation and dynamic transitions.
- Embedded developer documentation for integrating the Piper SDK.
- Includes syntax-highlighted code blocks for Move and TypeScript implementations.
- The core interface for users to connect their wallets or use zkLogin (Google/Apple) for a seamless, passwordless Web3 experience.
- Interface to view and manage active streams.
- Fully installable on mobile devices with offline caching via
vite-plugin-pwaand Workbox, providing a native app-like experience.
This frontend is built for extreme performance, leveraging the best of the modern React ecosystem:
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite 6 |
| Routing | TanStack Router (File-based routing) |
| Styling | Tailwind CSS v4 + Radix UI Primitives |
| Animations | Framer Motion |
| State / Data | Zustand + TanStack Query (React Query) |
| Web3 Integration | @mysten/dapp-kit, @mysten/sui |
| Auth | @mysten/enoki (zkLogin) |
| Core Protocol | @usepiper/sdk |
- Node.js v18+
- npm, yarn, or pnpm
- A Sui wallet (for testing) or a Google account (for zkLogin)
- Clone the repository:
git clone https://github.com/piper-protocol/piper-app.git
cd piper-app- Install dependencies:
npm install- Environment Configuration:
Create a
.env.localfile in the root ofpiper-app:
VITE_PIPER_PACKAGE_ID=0xYOUR_PIPER_PACKAGE_ID
VITE_SUI_RPC_URL=https://fullnode.testnet.sui.io:443
VITE_ENOKI_API_KEY=your_enoki_api_key_here- Run the Development Server:
npm run devOpen http://localhost:5173 in your browser.
This application is ready to be deployed to Vercel, Netlify, or decentralized hosting solutions like Walrus Sites.
To build the production bundle:
npm run buildThis will generate optimized, static assets in the dist/ directory.
piper-sdk: The TypeScript SDK used by this app to build Piper PTBs.piper-move: Core Move smart contracts deployed on Sui.
Apache 2.0