Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add prd of WallectConnect general component #330

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

add prd of WallectConnect general component #330

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f12825
add prd of WallectConnect general component
Sven-TBD May 30, 2023
1e852d9
add ui sketch for the wallet connect general component
Sven-TBD May 30, 2023
e78c009
add 2 project management proposals and split the US list by repo
Sven-TBD May 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions CKB-Explorer-PRDs/WalletConnect/GeneralComponent.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# CKB General Component for WalletConnect

## General Component for Wallet Side

A general component is provided for WalletConnect on the side of third party wallet.

### Connecting flowchart

> Scanning QR code is the most used and also recommended for users to connect to dApp with your wallet. We also offer a way to connect by pasting the WalletConnect code which could be used for testing. [UI](https://www.figma.com/file/6XNoimRDbFTTNm016rbIdU/Magickbase?type=design&node-id=16072-38648&t=rF3mLzNYeaveGD6Q-0)

#### UI Sketch

![UI图](pic/2023-05-30-09-20-22.png)

#### Status1: Unconnected

While the dapp is unconnected with the wallet, users can click on the button below to scan QR code on the dapp side in order to connect the dapp.

![UnconnectStatus](pic/2023-05-30-08-19-27.png)

#### Status2: Connecting

After clicking the scan button, and if the QR code is correct then the dapp and wallet are trying to communicate following the protocol. If the QR code is not in correct format, corresponding messages will be popped up.

![ConnectingStatus](pic/2023-05-30-08-22-37.png)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, the status of disconnection and connecting is quite similar to account model of Ethereum because the interaction is the same:

1. connect wallet
2. waiting
3. show wallet/show error message

So the current UX of wallet connect can be used


#### Status3: Connect Request

Once the WalletConnection information fecthes back, the wallet shows the connection request information, including the dapp name, its url, network, Account and Auth.

- The network refers to the CKB network to which the dapp is going to connect.
- The Account refers to the CKB wallet account that the user is going to use.
- The Auth refers to the lock method for user addresses. Typically, a user's addresses can be divided into different adress sets based on the lock method they use, and here various classification methods are provided. Dapps can request the specific address sets they need, and users can choose to revoke authorization for certain address sets.

To cancel this request, just press the Reject button.

![ConnectRequest](pic/2023-05-30-08-42-31.png)

#### Status4: Connectting Information

After the connection is established, the dapp will maintain a persistent connection with the wallet. The relevant connection information, the confirmed information from the previous step, will still be displayed here. Users can disconnect from the dapp at any time.

![ConnecttingInformation](pic/2023-05-30-08-41-25.png)
Binary file added CKB-Explorer-PRDs/WalletConnect/pic/2023-05-30-08-19-27.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added CKB-Explorer-PRDs/WalletConnect/pic/2023-05-30-08-22-37.png
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While connecting, connecting by Walletconnec code should be disabled.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, and the WalletConnect code way should also be removed from the formal demo.
cc @Kirl70

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added CKB-Explorer-PRDs/WalletConnect/pic/2023-05-30-08-41-25.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added CKB-Explorer-PRDs/WalletConnect/pic/2023-05-30-08-42-31.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added CKB-Explorer-PRDs/WalletConnect/pic/2023-05-30-09-20-22.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This repo is used to manage public issues of [CKB Explorer](https://github.com/n
| 0 | General Components | Contain some common compoents | [open](CKB-Explorer-PRDs/GeneralComponents/GeneralComponents.md) | -| - |
| 1 | Export to csv | The feature,Export to csv, provides a function on such as Block page, Transaction page and so on for user to download some transaction info from block explorer | - | [#325](https://github.com/Magickbase/ckb-explorer-public-issues/issues/325) | [open](https://app.axure.cloud/app/project/o093j5/preview/9ug42i) |
| 2 | Nervos DAO | The product requirements about Nervos DAO page | [open](CKB-Explorer-PRDs/NervosDAO/NervosDAO.md) | -| - |
| 3 | WalletConnect availability | Whole user story for the usage of WalletConnect, ranging from the dApp to Neuron CKB wallet | - | [#144](https://github.com/Magickbase/neuron-public-issues/issues/144)| [open](https://vs0cjf.axshare.com/#id=owrcmb&p=%E7%AE%80%E4%BB%8B&g=1) |
| 3 | WalletConnect availability | Whole user story for the usage of WalletConnect, ranging from the dApp to Neuron CKB wallet | [open](CKB-Explorer-PRDs/WalletConnect/GeneralComponent.md) | [#144](https://github.com/Magickbase/neuron-public-issues/issues/144)| [open](https://vs0cjf.axshare.com/#id=owrcmb&p=%E7%AE%80%E4%BB%8B&g=1) |


## Commended plugins
Expand Down