Skip to main content
This guide walks you through using the template which uses Next.js, Serwist (offline capabilities), and Privy smart wallet (authentication and transaction sponsorship) to build a Progressive Web Application (PWA) on Monad.

​
Prerequisites

  1. Create your Privy app: Create your app Select “Web” as the platform. Then, click “Create app”. Name your app On the next screen, make sure to save your App ID.
  2. Set up login methods: Set up login methods
  3. Disable External Wallets: Disable external wallets
  4. Scroll down and enable “Automatically create embedded wallets on login” and select “EVM Wallets”: Create wallets automatically
You can enable “Test Accounts” for testing purposes:Test accounts
  1. Sign up for a Pimlico account and go to “API Keys” Pimlico API Keys
  2. Create a new API key: Pimlico Create API Key
  3. Click on RPC URLs, then Select “Monad Testnet”, and copy the RPC URL: Pimlico RPC URLs
  4. Copy the RPC URL and save it to your .env.local file as NEXT_PUBLIC_PIMLICO_BUNDLER_URL.

​
Setup

  1. Clone the repository: 
    git clone https://github.com/monad-developers/next-serwist-privy-smart-wallet.git
  2. cd into the project directory: 
    cd next-serwist-privy-smart-wallet
  3. Install dependencies: 
    npm install
  4. Create a .env.local file in the root directory: 
    cp .env.example .env.local
  5. Start adding your environment variables to the .env.local file: 
    # Privy 
NEXT_PUBLIC_PRIVY_APP_ID=your_privy_app_id_here
NEXT_PUBLIC_PRIVY_CLIENT_ID= # optional, you can leave this empty

# Web Push
WEB_PUSH_EMAIL=user@example.com
WEB_PUSH_PRIVATE_KEY=your_vapid_private_key
NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY=your_vapid_public_key

# Pimlico
NEXT_PUBLIC_PIMLICO_BUNDLER_URL=your_pimlico_bundler_url
    If you lost your Privy App ID, you can find it in the Privy dashboard.
  6. Generate VAPID keys for web push notifications: 
    npx web-push generate-vapid-keys --json
    Copy the generated keys to your .env.local file (replace the placeholder values from step 5).
  7. Running the Application: Development Mode: 
    npm run dev
    The application will be available at http://localhost:3000. Production Mode: For full PWA functionality (including install prompts): 
    npm run build && npm run start

​
Send sponsored transactions

Below is an example of how to use the useSmartWallet hook to send sponsored transactions. You can either modify the code to send your own transactions or integrate it into your existing project. 
// Use `useSmartWallet` hook
const { smartAccountAddress, smartAccountClient, smartAccountReady } = useSmartWallet();

// Send sponsored transaction
const txHash = await smartAccountClient?.sendTransaction({
  account: smartAccountClient?.account,
  chain: monadTestnet, // Import this from `viem/chains`
  to: NFT_CONTRACT_ADDRESS,
  data,
});

​
Send batch sponsored transactions

You can also send batches of sponsored transactions: 
const txHash = await smartAccountClient?.sendTransaction({
  calls: [
    {
      to: NFT_CONTRACT_ADDRESS,
      data,
    },
    {
      to: NFT_CONTRACT_ADDRESS,
      data,
    },
  ],
});
This example uses the Kernel smart account with Entrypoint v7. See useSmartWallet.tsx to inspect the implementation details.

​
Folder structure of the template

next-serwist-privy-smart-wallet/
├── app/
│   ├── components/         # React components
│   │   ├── InstallPWA.tsx  # PWA install prompt
│   │   └── ...
│   ├── hooks/                  # Custom React hooks
│   │   └── useSmartWallet.tsx  # Smart wallet management hook
│   ├── ~offline/           # Offline page
│   └── ...
├── public/                 # Static assets
└── ...

​
Changing the app name

  • Edit public/manifest.json:
    • Change the name and short_name fields
  • Run npm run build to update the app

​
Notification Setup

To receive push notifications from this app, you need to enable notifications in your browser and/or system settings:

​
Browser Settings

  1. Click the lock icon 🔒 in the address bar
  2. Set “Notifications” to “Allow”
  3. Or go to Settings → Privacy and security → Site Settings → Notifications
  1. Click the shield icon 🛡️ in the address bar
  2. Turn off “Enhanced Tracking Protection” for this site (if needed)
  3. Allow notifications when prompted
  4. Or go to Settings → Privacy & Security → Permissions → Notifications
  1. Go to Safari → Settings → Websites → Notifications
  2. Find your site and set it to “Allow”

​
System Settings

  1. System Preferences → Notifications & Focus
  2. Find your browser and ensure notifications are enabled
  3. Check “Allow notifications from websites” in browser settings
  1. Settings → System → Notifications & actions
  2. Ensure your browser can send notifications
  3. Check browser notification settings
  1. Settings → Notifications → [Your Browser]
  2. Enable “Allow Notifications”
  3. Also enable in browser settings
  1. Settings → Apps → [Your Browser] → Notifications
  2. Enable notifications
  3. Check browser notification permissions

​
Backend Integration Required

SendNotification.tsx requires backend implementation:
  • Save subscription data when users subscribe (see TODO comments in code)
  • Delete subscription data when users unsubscribe
  • Implement /notification endpoint to send actual push notifications
  • Use web-push library or similar for server-side notification delivery

​
Customizing Notification Content

To customize your push notification content, edit app/notification/route.ts and modify the title, message, icon, and other properties in the sendNotification call.

​
Modifying the App Icon & Splash Screen

​
App Icons

Replace the icon files in the public/icons/ directory with your custom icons:
  • icon-512x512.png - Main app icon (512×512px)
  • android-chrome-192x192.png - Android icon (192×192px)
  • apple-touch-icon.png - iOS home screen icon (180×180px)
Also update the favicon:
  • public/favicon.ico - Browser favicon
  • app/favicon.ico - Next.js app favicon

​
Splash Screen

Splash screens are automatically generated from your app icon and theme colors defined in public/manifest.json. To customize:
  1. Update the theme_color and background_color in public/manifest.json
  2. Ensure your main icon (icon-512x512.png) represents your brand
  3. Run npm run build to apply changes
Use tools like PWA Asset Generator to create all required icon sizes from a single source image.

​
Deploying to Vercel

​
Using Vercel Dashboard

  1. Connect your repository:
    • Push your code to GitHub
    • Visit vercel.com and import your repository
  2. Configure environment variables:
    • In your Vercel project dashboard, go to Settings → Environment Variables
    • Add the same variables from your .env.local: 
      NEXT_PUBLIC_PRIVY_APP_ID
NEXT_PUBLIC_PRIVY_CLIENT_ID
WEB_PUSH_EMAIL
WEB_PUSH_PRIVATE_KEY
NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY
NEXT_PUBLIC_PIMLICO_BUNDLER_URL
  3. Deploy: Vercel will automatically build and deploy your app
  4. Update Privy settings: In your Privy dashboard, add your Vercel domain (e.g., your-app.vercel.app) to the allowed origins
PWA features (install prompts, offline support, push notifications) work automatically on HTTPS domains like Vercel deployments.

​
Using Vercel CLI

Alternatively, deploy using the Vercel CLI:
  1. Install Vercel CLI: 
    npm i -g vercel
  2. Login to Vercel: 
    vercel login
  3. Deploy: 
    vercel
    Follow the prompts to configure your project.
  4. Add environment variables: 
    vercel env add NEXT_PUBLIC_PRIVY_APP_ID
vercel env add NEXT_PUBLIC_PRIVY_CLIENT_ID
vercel env add WEB_PUSH_EMAIL
vercel env add WEB_PUSH_PRIVATE_KEY
vercel env add NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY
vercel env add NEXT_PUBLIC_PIMLICO_BUNDLER_URL
    Or you can go to the Vercel dashboard and add the environment variables there.
  5. Redeploy with environment variables: 
    vercel --prod

​
Learn more