Live links
- Frontend: https://stephs-vc-gated-dapp.vercel.app
- Server: https://fullstack-polygon-id-vc-gated-dapp.onrender.com
This template spins up a dapp that is
- ✅ Built with the popular NextJS library
- ✅ VC Gated with a Polygon ID KYCAgeCredential
- ✅ Fully connected with to all EVM chains including Polygon zkEVM Cardona Testnet and Polygon Amoy Testnet with RainbowKit
- ✅ Beautifully styled with configurable components and icons from the Chakra UI library
- ✅ Ready to interact with any smart contract thanks to working read and write examples from a Polygon zkEVM Testnet demo smart contract with wagmi hooks
Use this template as a base to bootstrap a Polygon hackathon project FAST 🏃🏻♀️ so you can focus on your dapp's business logic & building the value layer of the internet. 🚀
Love or hate something about this template? Let me know by tweeting your feedback
Node requirement: node v20.2.0
Here's how to check your node version.
node -v
If you're not running this version, you can switch your version with nvm
-
Visit the template repo https://github.com/oceans404/fullstack-polygon-id-vc-gated-dapp/tree/main and click "Use this template" to create a new repo
-
Get a KYCAgeCredential Verifiable Credential - follow instructions here
-
Follow server setup instructions
https://github.com/oceans404/fullstack-polygon-id-vc-gated-dapp/tree/main/server
- Follow frontend setup instructions
https://github.com/oceans404/fullstack-polygon-id-vc-gated-dapp/tree/main/did-frontend
- Frontend: localhost:3000
- Server: localhost:8080
Welcome page: In order to see the dapp, you need to prove your access rights. Click the "Prove access rights" button
![Screenshot 2023-06-23 at 10 51 19 AM](https://private-user-images.githubusercontent.com/91382964/248302658-65c486ea-16f5-4ad7-9da5-97492bc83b7e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMxMjQ1NjIsIm5iZiI6MTcyMzEyNDI2MiwicGF0aCI6Ii85MTM4Mjk2NC8yNDgzMDI2NTgtNjVjNDg2ZWEtMTZmNS00YWQ3LTlkYTUtOTc0OTJiYzgzYjdlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA4VDEzMzc0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWMzM2I0OTM0OWEwZjhlODFiOTRmZjU4ZGJkZGU1M2YwNmIyYzY2ZGU2OWQ4NmIxNTA3ZDViYjQ0MTQ2ZWQzZDUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.njF3i6iq5lLWoU-9sqqCLxX5lZQ0U6BiFTmacqv-rAM)
A modal with a QR code appears. Scan this QR code with your Polygon ID mobile app. Note: you must hold a KYCAgeCredential with a birthday before this year. Here's how to get the KYCAgeCredential VC
![Screenshot 2023-06-23 at 10 51 30 AM](https://private-user-images.githubusercontent.com/91382964/248302685-c570c4c6-c549-4dea-9f4b-611bb54bbe78.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMxMjQ1NjIsIm5iZiI6MTcyMzEyNDI2MiwicGF0aCI6Ii85MTM4Mjk2NC8yNDgzMDI2ODUtYzU3MGM0YzYtYzU0OS00ZGVhLTlmNGItNjExYmI1NGJiZTc4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA4VDEzMzc0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM4OTVjOTY4OGY4NTQ0M2NiZDhlMmMyYWUyODBiYmVmMTVmZTJjZDZlMDdmOTlmODk2M2M1ODA5NzdhMGNhNTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.XHTJPy8xkHMAe--VHzNVXg0UqZ6z_BT8Vt5f1YoGKhE)
If you successfully complete age verification, you'll see a success message, then be redirected to the dapp.
![Screenshot 2023-06-23 at 10 51 57 AM](https://private-user-images.githubusercontent.com/91382964/248302717-f3d12060-d17e-4c55-b4da-43c6fe13c7eb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMxMjQ1NjIsIm5iZiI6MTcyMzEyNDI2MiwicGF0aCI6Ii85MTM4Mjk2NC8yNDgzMDI3MTctZjNkMTIwNjAtZDE3ZS00YzU1LWI0ZGEtNDNjNmZlMTNjN2ViLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA4VDEzMzc0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI4ZDU1YjU3NGUxMzZhYTdkZDFhZjNjM2MwZDRiNDA0YWIyZWUxM2VlM2YzNTM3YjcyY2E3NmU4NjkyNzg4YWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7Prsy_QJlEs7j9SQLoeXJp2VIAHMcxeTvZ1FwlqFrQg)
This is the Dapp page that you see once you've proved access rights. It's set up with a RainbowKit wallet connector and has read and write to smart contract examples.
![Screenshot 2023-06-23 at 10 52 19 AM](https://private-user-images.githubusercontent.com/91382964/248302746-7e89b2b8-fb78-42df-9bc1-5938198af3a8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMxMjQ1NjIsIm5iZiI6MTcyMzEyNDI2MiwicGF0aCI6Ii85MTM4Mjk2NC8yNDgzMDI3NDYtN2U4OWIyYjgtZmI3OC00MmRmLTliYzEtNTkzODE5OGFmM2E4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA4VDEzMzc0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYwNGRlMzlmYWEzMTMwZTJkMWNiNDg1OGFhM2Q4MDdkZjU2ZjhiNWYzYTQzOWM3ZjM5MTc2Mjk0MDM0MzMwYTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.C2g-ZyJQVmZNpdVEgrewKh5fERaeuGic9X5xBiBd_zo)