This repository contains a ready-to-use modern crypto mobile PWA using the latest technologies including embedded passkey wallets and mobile push notifications.
Use this repo to skip all the tedious set up, plumbing, and configuration. Fork the repo (or copy and paste the parts you need), layer in your smart contracts and business logic, and start shipping to your users.
Try out a basic demo on your phone. Visit pwawallet.xyz on mobile safari and install the PWA to your homepage. Push notifications on iPhone requires iOS >=16.4.
- Build a FriendTech clone
- Bring your own smart contracts and build your own crypto mobile PWA app
- Fork it and explore how a modern mobile-focused crypto PWA works
This repo is an end-to-end app that implements the following core PWA mobile stack features:
- Mobile-focused PWA;
- Push notifications configured for iOS and Android
- Embedded non-custodial wallet via mobile passkey (with opt-in iCloud recovery)
- Web 2 Auth/Social integration layer
- Supports L2s (and any EVM chains) for low fees and fast UX (optional)
- Service workers all configured and set up correctly.
- Automatically manages PWA updates; Prompts user to update whenever there is a new PWA version pushed live.
- Clerk user management works out of the box: supports social auth (Twitter, Discord), Username based auth, or Phone number based auth
- Ready-to-use mobile design system using Tailwind with mobile component library Konsta [shadcn of mobile]) so you can get productive fast.
Let's set up the application. This requires some one-time configuration for certain services.
Clone the repository:
git clone https://github.com/anagrambuild/mobile-pwa-with-walletInstall the dependencies
pnpm iLet's set up the keypair required for push notifications.
pnpm webpush:generate-keysPut the generated public and private keys in your .env under NEXT_PUBLIC_WEB_PUSH_PUBLIC_KEY and WEB_PUSH_PRIVATE_KEY respectively.
Also, set the WEB_PUSH_SUBJECT to your production domain.
Now let's sign up for our secure wallet infrastructure service, TurnKey.
Go to Turnkey.com and create an Organization for free. Find the Organization ID and add that to your .env under TURNKEY_ORGANIZATION_ID
Then run the following commands:
pnpm turnkey:install
pnpm turnkey:create:api-key
pnpm turnkey:create:private-keyAdd the generated key pair result of those commands to TURNKEY_API_PUBLIC_KEY, TURNKEY_API_PRIVATE_KEY in your .env file
Let's set up our database hosting for our offchain data (users, push notifications, etc) We'll use PlanetScale for their serverless MySQL hosting. If you prefer Postgres, we recommend neon for serverless db hosting. Or you can always bring your own SQL database connection if you have an existing database.
To set up the database schema, run:
pnpm db:pushYou can also inspect and view/edit your database visually using the local Drizzle Studio by running:
pnpm db:studioGo to clerk.com and set up an account.
Add API keys to .env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY_HERE
CLERK_SECRET_KEY=YOUR_SECRET_KEY_HEREEnable and configure the types of web2 authentication you'd like to use within Clerk (e.g. Twitter, Discord, Phone Number, or just plain username). If you don't want to use Clerk, you can roll your own auth, or use something like next-auth.
To generate the web3 code (hooks, etc) via Wagmi CLI, run the following command:
pnpm web3:codegenIf you're using anything on Ethereum, be sure to add your RPC to the .env
That's it, you're now set up.
Now you're ready to start the server and get to coding!
pnpm devAnd you should be able to access your PWA at localhost:3000
If your mobile device is on the same network as your development machine, you can access the development server via your local IP address. If not you can employ ngrok to create a tunnel to your local machine.
ngrok http 3000
This will allow a secure connection too which is helpful in testing service workers