Fast, Secure, and Modern Digital Payment PWA
Features • Tech Stack • Getting Started • Project Structure • Scripts
- QR Code Payments - Scan QR codes to make instant payments
- Wallet Management - Connect and manage multiple wallets
- Transaction History - View detailed transaction records
- Rewards Program - Earn points for every payment and climb the leaderboard
- PWA Support - Install as a native app on mobile devices
- Multi-Chain Support - Built on Somnia blockchain
- Secure Authentication - Powered by Privy for seamless Web3 auth
| Category | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS 4 |
| State Management | Zustand |
| Data Fetching | TanStack Query |
| Web3 | Wagmi + Viem |
| Authentication | Privy |
| Routing | React Router v7 |
| UI Components | Radix UI + Framer Motion |
| Code Quality | ESLint + Prettier |
- Node.js 18+
- npm or yarn or pnpm
- Clone the repository
git clone https://github.com/daslabs/dpay.git
cd dpay- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Set up environment variables
cp .env.example .envEdit .env with your configuration:
VITE_PRIVY_APP_ID=your_privy_app_id
VITE_PRIVY_CLIENT_ID=your_privy_client_id
VITE_TOKEN_CONTRACT_ADDRESS=0x...
VITE_TRANSFER_CONTRACT_ADDRESS=0x...
VITE_SOMNIA_CHAIN_ID=50312
VITE_SOMNIA_RPC_URL=https://dream-rpc.somnia.network
VITE_SOMNIA_EXPLORER_URL=https://somnia-devnet.socialscan.io
VITE_API_URL=https://api.dpay.com- Start development server
npm run dev- Open in browser
Navigate to http://localhost:5173
dpay/
├── public/ # Static assets
├── src/
│ ├── abis/ # Smart contract ABIs
│ ├── assets/ # Images, icons, fonts
│ ├── components/ # Reusable UI components
│ │ ├── home/ # Home page components
│ │ ├── popup/ # Modal/Drawer components
│ │ ├── profile/ # Profile page components
│ │ ├── scan/ # QR Scanner components
│ │ └── shared/ # Shared components (Button, Drawer, etc.)
│ ├── configs/ # App configuration
│ ├── hooks/ # Custom React hooks
│ ├── libs/ # Utility functions & helpers
│ ├── pages/ # Page components
│ ├── providers/ # Context providers
│ ├── routes/ # Route definitions
│ ├── services/ # API services
│ ├── stores/ # Zustand stores
│ ├── App.tsx # Root component
│ ├── App.css # Global styles
│ └── main.tsx # Entry point
├── .env.example # Environment variables template
├── index.html # HTML entry
├── manifest.json # PWA manifest
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite configuration
└── package.json # Dependencies & scripts
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build for production |
npm run preview |
Preview production build |
npm run lint |
Run ESLint |
npm run lint:fix |
Fix ESLint issues |
npm run format |
Format code with Prettier |
The app is configured to work with Somnia blockchain. Chain configuration can be found in src/configs/wagmi-config.ts.
Privy is used for wallet connection and authentication. Configure your Privy app ID in the environment variables.
DPay supports Progressive Web App (PWA) installation:
- Visit the app in Chrome
- Click "Install" when prompted or use the menu → "Install App"
- Open the app in Safari
- Tap the Share button
- Select "Add to Home Screen"
- Tap "Add"
# Build the app
npm run build
# Preview the build
npm run previewThe build output will be in the dist/ directory, ready for deployment.
The app can be deployed to any static hosting service:
- Vercel:
vercel deploy - Netlify:
netlify deploy - AWS S3: Upload
dist/to S3 bucket - Docker: Use the provided Dockerfile
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ by Daslabs
© 2025 DPay. All rights reserved.