walletconnect / gm-dapp

dapp publishing example of WalletConnect Push

React GM Dapp (React, Typescript, Next.js, Ethers)

🔗 Live dapp demo - https://gm.walletconnect.com/
🔗 Live wallet demo - https://react-auth-wallet-git-feat-push-wallet-walletconnect1.vercel.app/
📚 WalletConnect v2 Docs - https://docs.walletconnect.com/2.0

Overview

This example aims to demonstrate dapp-facing use cases enabled by WalletConnect Push.

Running locally

Install the app's dependencies:

npm i

Set up your local environment variables by copying the example into your own .env.local file:

cp .env.local.example .env.local

Your .env.local now contains the following environment variables:

• NEXT_PUBLIC_PROJECT_ID (placeholder) - You can generate your own PROJECT_ID at https://cloud.walletconnect.com

Develop

npm run dev

Build

npm run build

gm-dapp's Issues

GM Dapp + Notifier Implementation

Context

• Part of #1
• Should extend/fork https://react-auth-dapp.walletconnect.com/
• Uses the existing Push Proposal flow (already available in @walletconnect/push-client@latest). This does not depend on the upcoming Subscribe flow (see WalletConnect/walletconnect-docs#574)
• Uses the pairing topic that was established during the initial auth sign-in to propose a push subscription

Implementation

1. Extend https://react-auth-dapp.walletconnect.com/ and https://react-auth-wallet.walletconnect.com/ to implement PushClient
2. Propose and settle a pushSubscription over the pairingTopic established from a prior auth request.
3. Add UI affordances (i.e. buttons) in the dapp to subscribe/unsubscribe
4. Implement supabase table to hold gm dapp subscribers
5. When a user subscribes/unsubscribes -> add/remove their account on the table
6. Set up a cron (or similar) automation to POST a gm notification via cast.walletconnect.com/notify at 9am UTC for all subscribed accounts

GM sometimes is not passing the account to Web3Inbox Widget

This makes widget unable to login. Widget then is stuck on connect wallet state

Improvements

• Timestamp at top of screen so not hidden by modal
• Several icon's isDisabled is not DRY with the button itself
• Improve padding/style of loading spinner for next page of notifications
• Improve helper text
• Web3Modal colors

gm dapp epic

Overview

The gm dapp is used to dogfood the developer and user experience of web3inbox and push.

There are 4 main components

• Simple dapp. Users can connect, then opt-in to receive notifications (#2)
• Backend notifier. A simple service that sends 'gm' messages to opted in users at 9am (#2)
• Quick subscribe from within web3inbox (#5)
• Sample wallet that receives PN's

The end result is that users can subscribe to the GM notifications, and receive these notifications as push notifications in our sample wallet, and within web3inbox.

By creating this, we can test the full flow and use this as a demo for pilot partners.

Simple Dapp (#2)

First screen has a connect button.
After connecting, there is a "subscribe to gm" button

Users can also manage their subscription and unsubscribe.

Backend notifier (#2)

A job that runs at 9am and sends a gm to Cast server for subscribed users

Quick Subscribe from web3inbox

Add the GM app to the "explore app" section of web3inbox.
See spec WalletConnect/walletconnect-docs#574

Sample Wallet that receives notifications

Our sample wallet should receive PN's from GM

Not required, but ideally, tapping on the PN should open up web3inbox and deep link to the gm message.

Feature: manage message preferences from dapp

Problem

We want to give users the choice to select what type of messages they want to receive and reduce spam issues.

Currently the user can manage their subscription preferences in the wallet, but this is hidden and missing from the dapp context.

Solution

Add a preferences setting to the dapp

Subscribe with non-Notify wallets

GM works great with our sample app, but lets get it working with other wallets.

• WalletConnect v2 wallets
• Injected wallets

Feature: show user message type preferences during opt-in

Our UX mockups show message preference opt-in screens during sign up.
These flows should be added to GM

Timestamp on UI

Add a small timestamp overlay to the corner of the screen.

Use the format YYYY-MM-DD HH:MM:SS TZ

Quick Subscribe from web3inbox

Quick Subscribe from web3inbox

Add the GM app to the "explore app" section of web3inbox.
See spec WalletConnect/walletconnect-docs#574

Manual GM requests are not authenticated

When a user sends themself a GM, we do not authenticate this request. This allows anyone to send a manual GM to anyone else. We should send the SIWE to the server for authentication as well?

[Feat] Implement webhooks to support `Subscribe` flow in web3inbox

Context

• Web3Inbox now supports wc_pushSubscribe for GM dapp (via Subscribe button on the Explore page), as well as wc_pushUpdate (via the Preferences modal)

Problem

• Currently the wc_pushSubscribe flow only propagates the new subscriber account up to Cast, but GM dapp is unaware of the new subscriber -> hence it does not include this new subscriber account in /notify calls.

Solution

• Webhook registration spec: https://docs.walletconnect.com/2.0/specs/servers/cast/cast-server-api#register-webhook

1. Implement an endpoint that processes incoming POST requests containing the webhook payload (see spec above)
   1. Add payload.account to the subscribers table if event: "subscribed"
   2. Remove payload.account from the subscribers table if event: "unsubscribed"
2. Register the webhook endpoint's full URL with Cast/Notify Server via the POST /register-webhook endpoint (see spec above)

Unsubscribe from GM subscriptions

A user can subscribe to GM https://gm.walletconnect.com/
It follows that the same user should be able to undo this action and unsubscribe right on the dapp https://gm.walletconnect.com/

Add a unsubscribe button to the GM dapp to allow users to unsubscribe.

Show subscription status when there is an active subscription

Problem

As a user, I have an existing GM subscription, then connect to gm.walletconnect.com, and the UI says "subscribe to gm". This is confusing because I thought I already had a subscription. I click "subscibe" and there is an error "user has an existing subscription".

This is bad UX as the user should be informed of their subscription, and be given appropriate actions such as "unsubscribe" or "manage"

To repro:

• Subscribe to gm in one window
• In a new incognitor window, connect to gm again

Note:

• Using new browser window with existing local storage correctly shows the unsubcribe button. This issue only impacts new devices/browers

Solution

Show an unsubscribe/manage button, or some text like "you are subscribed".

Update "send me a gm" message

Assumption: Most messages will be more than 1 line and include a URL, so our testing and UI/UX should work with this default.

For better UX testing let's do a full 1000 length message + URL when clicking "send me a gm" in the gm dapp.

Suggestion:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia blandit dui non sollicitudin. Duis sollicitudin euismod leo, a venenatis arcu condimentum eget. Duis congue accumsan mi vel malesuada. Proin quis felis tempus, tristique turpis vel, accumsan risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis nisi velit, gravida nec ligula eu, egestas consequat augue. Phasellus dapibus laoreet neque, ut interdum lectus blandit et. Aenean vitae quam quis neque vehicula egestas tempor sit amet orci. Mauris congue malesuada sodales. Aliquam erat volutpat. Donec et ipsum justo.

Aliquam vitae tempus nisl. Nunc id est maximus, semper nunc a, dictum dui. Vivamus varius pharetra nisl id tristique. Duis varius elementum condimentum. Fusce commodo nunc sapien, eget suscipit mauris ultrices id. Aliquam erat volutpat. Donec eu pharetra nunc. Nam ipsum felis, malesuada id tristique sed, bibendum sit amet lorem. Aliquam in nibh nec nibh libero.

Link: https://gm.walletconnect.com/