The intention for this project is to enable Mini App Builders to easily create new Next.js mini apps.
The example implemented here is a simple mini app that makes you connect and claim a simple ERC20 token every 5 minutes.
- Connect Wallet or Wallet Auth using Next Auth for Sessions
- Verify With World ID Command requesting Orb verification level to proceed.
- Send Transaction for minting and send the user a $TUTE ERC 20 token just for being verified. This refreshes every 5 minutes.
- pnpm: Fast and efficient package manager.
- ngrok: Expose your local server publicly for easy testing.
- mini-kit-js: JavaScript SDK for World's Mini Apps.
- minikit-react: React bindings for MiniKit SDK.
- mini-apps-ui-kit-react: Pre-built UI components for Mini Apps.
git clone https://github.com/mateosauton/MiniAppWeb3template.git
cd MiniAppWeb3templatepnpm installCopy the example environment file:
cp .env.example .envThen fill in the required variables:
Find your App ID in the Developer Portal (Configuration > Basic).
Define an action in the developer portal under the Incognito Actions tab, copy it, and include it in the .env file
Run your Mini App locally:
pnpm devVisit http://localhost:3000 in your browser.
To test your Mini App directly on your phone, expose your app publicly using NGROK.
Install NGROK and run:
ngrok http http://localhost:3000NGROK provides a publicly accessible URL.
Go to the Developer Portal and configure:
- App URL: Set it to your NGROK-generated URL.
From the Developer Portal, navigate to Configuration > Basic and scan the generated QR code.
Questions or feedback? Feel free to reach out!
- Telegram: @mateosauton