GM Hackers (Web3Inbox, Next.js, wagmi, React, TypeScript)
🔗 Live dapp demo - https://hackers.gm.walletconnect.com/
📚 WalletConnect Web3Inbox Docs - https://docs.walletconnect.com/2.0/web3inbox/core-components/usage
Overview
![Screenshot 2023-09-22 at 7 29 48 PM](https://user-images.githubusercontent.com/26746725/269960232-7a024b35-f5c6-490d-b5a5-ba7b918514bf.png)
Send notifications to a blockchain account using WalletConnect's Web3Inbox SDK.
This example dapp shows basic dapp usage of the Web3Inbox SDK to send a notification whenever there is a new Ethereum block.
Subscriptions to dapp notifications are synced across all devices that use the same blockchain account.
Hacker guide
Watch the tutorial guide 🖥️
https://www.loom.com/share/a7001711b8a94500b827a9d2655c8654?sid=1a36ccfa-9ee8-42a5-a882-9b78ac6e846a
Running locally
Install the app's dependencies:
npm i
Develop
For locally testing the app, you will need to expose your localhost to a public domain. See the Expose domain section for instructions.
npm run dev
Build
For deploying the app to a public URL, refer to the Deploy section.
npm run build
Expose domain
The did.json
file needs to be hosted on a publicly available domain. Although Vercel and similar alternatives work great for the actual deployment, any dev working with Notify API might like a hot-reloadable deployment. This is where tunnels come in.
Follow the following instructions to expose your app from localhost to be publicly available:
Instructions adapted from Cloudflare
- Download
cloudflared
utility:- MacOS:
brew install cloudflared
- Ubuntu/Debian:
apt install cloudflared
- Windows: Download from here
- MacOS:
- Run your app in localhost
npm run dev
- Expose your app
cloudflared tunnel --url http://localhost:3000
Once you've got that running, you can access your local app from a public domain that looks like:
https://some-combination-of-words.trycloudflare.com
Make sure this tunnel is running in the background while you are testing your app. If the tunnel is closed, you will need to update the dapp url and use the updated did.json
file from WalletConnect Cloud.
Once you've got that running, you can now use this domain and similar configuration to test your app with notify:
-
Head over to WalletConnect Cloud and Sign in or Sign up if you don't have an account.
-
Create a project and take note of your Project ID.
-
You will need to set the
NEXT_PUBLIC_PROJECT_ID
environment variable to your Project ID from step #2. -
Back in WalletConnect Cloud, navigate to your project's APIs tab. Under Notify API > Configuration >
DAPP INFORMATION
, provide your cloudflare URL as the dapp URL. -
Under the same section, next to Notification types, click on the "Add Notification Type" button and add a title and description for your notification type. This is the type of notification that your app will publish. For example, if you are going to send promotional content as notification, you might want to add a notification type called "Promotional" with a description "Promotional content from the XYZ Team.". After saving, click the copy button next to your newly created notification type to copy its ID. Replace the existing ID in
/pages/index.tsx
Line 120 with your new ID. -
Still on Notify API section, you should see a
Notify API Secret
. Copy this secret to the.env.local
file as theNOTIFY_API_SECRET
environment variable. Make sure to update the environment variables on your local environment as well as on your deployment platform. -
Next, you need to paste the
did.json
in the /.well-known/ directory. Save it to the/public/.well-known/
directory. Be sure to replace the existing did.json file.- Download
did.json
(Step 2: “Download did:web”) and place it at/public/.well-known/did.json
- Download
-
Once the new files are saved, on the APIs tab in Cloud, find the toggle switch next to the Notify API section and switch it on. You should see a success toast: "Notify configuration successfully verified"
Test and view notifications
Now you should have a fully functioning dapp that is capable of sending notifications with the Web3Inbox SDK.
First, test that you can subscribe to notifications by going to your dapp's public URL, connect your wallet, sign the SIWE message in your wallet, and press subscribe. Approximately every 12 seconds you should see a "New block" notification in the dapp's UI.
To quality for bounties, notifications must be visible app.web3inbox.com or one of our sample wallets that supports Web3Inbox notifications. Note that these automated notifications will only be sent to your account if you have the UI open and with the same account connected.
Sample wallets to test notifications:
Sending notifications
-
Send test notification button in the gm-hackers dapp.
-
Use WalletConnect Cloud broadcast feature.
-
Make a request to Notify API. The example below showcases how to send a notification to all subscribers.
// Your project ID from WalletConnect Cloud const projectId = process.env.NEXT_PUBLIC_PROJECT_ID; // notify_api_secret generated in WalletConnect Cloud const notifyApiSecret = process.env.NOTIFY_API_SECRET; const headers = { Authorization: `Bearer ${notifyApiSecret}`, }; // 1. Get the list of subscribers for your project const subscribersRes = await fetch( `https://notify.walletconnect.com/${projectId}/subscribers`, { headers } ); const subscribers = await subscribersRes.json(); // 2. Send a notification to all your subscribers const body = JSON.stringify({ accounts: subscribers, notification: { title: "GM Hackers!", body: "Enjoy hacking on WalletConnect", icon: "https://avatars.githubusercontent.com/u/37784886?s=48&v=4", url: "https://hackers.gm.walletconnect.com/", type: "promotional", }, }); const notifyRes = await fetch( `https://notify.walletconnect.com/${projectId}/notify`, { method: "POST", headers, body, } ); const result = await notifyRes.json(); console.log(result);
Deploy the example dapp
-
Head over to WalletConnect Cloud.
-
Deploy your app to a public URL. Note you will need to update the
NEXT_PUBLIC_PROJECT_ID
environment variable to your Project ID from step #2. Some options to create your repo and deploy to a public URL include:- Create repo & Deploy to Vercel
- Create repo & Deploy to Netlify
- Fork/clone this repo and deploy yourself
-
Back in WalletConnect Cloud, navigate to your project's APIs tab. Under Notify API > Configuration >
DAPP INFORMATION
, update your public URL as the dapp URL. -
Copy the secret into your deployment as the
NOTIFY_API_SECRET
environment variable. Make sure to update the environment variables on your local environment as well as on your deployment platform. -
Next, you need to host the updated
did.json
file on your public URL in the /.well-known/ directory. Save it to the /public/.well-known/ directory in your fork of this template repository. Be sure to replace the existing did.json file.- Download
did.json
(Step 2: “Download did:web”) and place it at/public/.well-known/did.json
- Update your
NEXT_PUBLIC_APP_DOMAIN
environment variable to include the hostname of your deployment. - Deploy your changes in
/public/.well-known/
to your public URL (e.g. by committing and pushing).
- Download
-
Once the new files are deployed, on the APIs tab in Cloud, find the toggle switch next to the Notify API section and switch it on. You should see a success toast: "Notify configuration successfully verified"
Managing environment variables
Hack ideas
- A DeFi app that sends notifications for positions being liquidated, claimable rewards, etc.
- A PWA that sends desktop notifications.
- Segment subscribers and send them notifications relevant to their on-chain activity.
- Use your own database and integrate with our webhook.