ETH Shanghai Hackathon 2022 Bounty #1

petermdenton commented 2 years ago

🏆 Prize Title

Web3 Messaging between Provably Connected Addresses using XMTP and CyberConnect

💰Prize Bounty

ETH 2.5k USD

📙Challenge Description

Use XMTP and CyberConnect to gate messaging in an application so that users can only receive messages from those they are already connected with through CyberConnect's Proof of Connection.

Specifics

The XMTP Protocol and SDK allows app developers to build clients that can send and receive messages through Ethereum accounts.
CyberConnect Protocol allows users to form social connections that are recorded and verified on blockchain networks.

🏆 The Objective

Using the XMTP example chat app, integrate the CyberConnect protocol to allow a user to control who can message them. The winning example would show that a client only displays messages from senders who the recipient is connected with via CyberConnect.

☝️ Tips

For demo purposes, you should manually create CyberConnect “follow” statuses between two addresses.
You can then use the CyberConnect connections query to get the follow status between the two addresses.
You can fork the XMTP example chat app to quickly establish a basic functioning messaging UX, including wallet connection management, conversation grouping, and ENS resolution.

💯 In an exceptional entry:

Users can also establish CyberConnect connections within the application.
- Note: There might not be an easy way to do this yet!
Users can still optionally view messages from all senders, not only established CyberConnect connections.

🥰 We believe these types of user-centric clients will have a positive impact on preventing spam and allowing web3 wallet users to control who can message them.

💻 An example user flow

The following describes a fully-featured UX and is not required for the bounty:

A user connects to the application using a wallet provider.
The user should see a list of their conversations.
The user can select a conversation, see a list of historical messages, send a new message to the other party, and see new messages from the other party in real-time.
The user can start a new conversation and specify any Ethereum or ENS address as the recipient.
- The user should be able to successfully send an arbitrary message to an address that is connected with them through CyberConnect, that is also registered with the XMTP network.
- The user should be able to send a connection request to a recipient address that is not yet connected with them through CyberConnect, that is registered with the XMTP network.
- The user can include an arbitrary message with the connection request.
- The user cannot send further messages to that recipient address until the initial connection request has been accepted.
  - It is indicated to the user that they have a pending connection request with the recipient address.
- The user should see a warning when the recipient address is not registered with the XMTP network.
The user can view inbound connection requests, accept them, and reply to the sender in a new conversation without needing to send a connection request of their own.
The user can access an expanded inbox view that includes conversations with addresses they are not connected with through CyberConnect.

Note: The XMTP example chat app provides a strong foundation for the UX described above.

🗳️ Submission Requirements

Link to repo of functional dapp code with well-documented README
URL of the dapp front-end
Video of a demo of the dapp functionality

✅ Judging Criteria

Is the dapp functional?
Is the code relatively well-written (time constraints taken into account)?
How compelling is the use case?
Are XMTP and CyberConnect used effectively? Specifically, will a user only see messages via XMTP from those they are connected to via the CyberConnect protocol?
Is the UI intuitive and easy to use?

🗓️ Winner Announcement Date

June 2 2022

🛠️ Developer Resources

Have questions or need help? Contact: peter@xmtp.com

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 1.2782 ETH (2500.05 USD @ $1955.91/ETH) attached to it.

If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
- Want to chip in? Add your own contribution here.
- Questions? Checkout Gitcoin Help or the Gitcoin's Discord
- $3,684,143.05 more funded OSS Work available on the Gitcoin Issue Explorer

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 1 day, 6 hours ago. Please review their action plans below:

1) dangoz has started work.

Roman is a socialfi dating dApp, prepaid, pay and earn by LIKE, built with trust transparency and honesty in mind. The blockchain and the sponsored protocols comes with brilliant solutions to leverage web2 dating industry with content, interoperability and incentives.

Learn more on the Gitcoin Issue Details page.

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 1.2425 ETH (2500.00 USD @ $1937.01/ETH) has been submitted by:

@petermdenton please take a look at the submitted work:

PR by @devyeshtandon
PR by @nfttopbest
PR by @dangoz
PR by @shuajj
PR by @lacastar
PR by @top-kraken
PR by @azephiar
PR by @georgefane

Learn more on the Gitcoin Issue Details page
Want to chip in? Add your own contribution here.
Questions? Checkout Gitcoin Help or the Gitcoin's Discord
$3,805,984.63 more funded OSS Work available on the Gitcoin Issue Explorer

NftTopBest commented 2 years ago

Hi @petermdenton Is that we must use the https://github.com/xmtp/example-chat-react code to build the DApp. Should we use our implementation of the chat app? As we are trying to build a Web3 Social DApp that we can have XMTP integrated.

saulmc commented 2 years ago

@NftTopBest We recommend using the https://github.com/xmtp/example-chat-react, but you may also integrate XMTP into your own dapp!

You may still find this helpful: https://github.com/xmtp/example-chat-react/blob/main/components/XmtpProvider.tsx

NftTopBest commented 2 years ago

@NftTopBest We recommend using the https://github.com/xmtp/example-chat-react, but you may also integrate XMTP into your own dapp!

You may still find this helpful: https://github.com/xmtp/example-chat-react/blob/main/components/XmtpProvider.tsx

Good to know! Working on it!! What a great XMTP!

ephemeraHQ / ethshanghai-2022