iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
Web 3

Web3.0 來襲系列 第 16

[16]Web3: WalletConnect

  • 分享至 

  • xImage
  •  

Wallet Web3 WalletConnect

https://i.imgur.com/f9UlFtn.png

WalletConnect 是一個用於將去中心化金融 (DeFi) Dapps 連接到錢包的開放協定,讓使用者可以透過掃描 QR Code 或以標準的 WalletConnect URI 和中繼 Bridge Server 進行通信請求,最後由使用者點選同意來批准請求的時候建立連線。除此之外,也可以額外設定 Push Server,用來發送連線或交易的相關資訊。

舉例來說,若是以前你想要在 Uniswap 進行交易,你一定要在電腦的瀏覽器上先安裝一個擴充 Extension 像是 Metamask 這樣的錢包才能使用,但透過 WalletConnect 的話,你只要用手機掃描 QR Code ,開啟有支援 WalletConnect 的錢包,就可以讓 Dapp 直接和手機的錢包互動,不需要在電腦上再安裝其他東西。對於無論是 Dapp 和 Wallet 的開發者或使用者來說,都是很方便的一個工具。

接著我們來看一下 WalletConnect 是怎麼運作的,下圖是分為建立連線以及建立交易的兩個部分,左上角是一開始要建立 Session 連線的情況,右邊拉出來是連線的詳細運作,而左下方的部分則是建立一筆交易的情況。

https://i.imgur.com/o9L8QlP.png

首先我們看第一部分,左上角建立連線這張圖,我們在 Dapp 的頁面上產生出一個擁有包含中繼 Bridge Server 相關連線資訊的 QR Code,用戶則是用掃瞄 QR Code 來獲得連線資訊,雙方以 Websocket 的方式在 Bridge Server 之間來進行資訊的傳遞。

https://i.imgur.com/ZADZNjZ.png

詳細來看的話,Dapp 會先發起一個建立連線的 Session Request 給 Bridge Server ,包含與自身相關的 peerId, peerMeta 資訊,同時產出一個 QR Code 讓用戶端 Wallet 掃描,掃描之後就會從 Bridge Server 這邊接收到來自 Dapp 的 Session Request ,若是用戶在這時候拒絕,Dapp 就會拋出連接錯誤訊息,並且斷開和 Bridge Server 的連線。若是用戶同意連接,則就將自己的帳戶、連接的 chainId 資訊回傳給 Dapp 接收。而這邊 4.1 Push Server 的部分就是,你可以自選要不要將連線的相關資訊丟給另外一個地方,讓它也一起和你訂閱 Bridge Server 的資訊。

https://i.imgur.com/F9Tv8KC.png

第二部分則是建立交易,我們在 Dapp 上面操作,把要買什麼 Token 、買多少金額等等都設定好後,Dapp 將這個交易資訊依照 JSON RPC 的協定來傳輸,透過 Bridge Server 傳到用戶端 Wallet,經過同意之後,再將交易進行簽署,被簽署過後的交易透過 Provider 和區塊鏈溝通,最後再將交易好的資訊用同樣的方式回傳讓 Dapp 接收。

那這就是透過 WalletConnect 來完成的一個 Dapp 和 Wallet 之間進行連線和交易的過程。

https://i.imgur.com/xt5I7gw.png

雖然前面講了很多,但實際在操作的話就會發現過程其實很簡單,基本上目前大多數的 Defi 皆有支援 WalletConnect,這邊以 Uniswap 為例,當我們按連接錢包時,就可以看到 WalletConnect 的圖樣,點選後就會跳出 QR Code ,只要你的手機錢包 App 有支援,在掃碼過後就會再跳出是否同意連接錢包的請求,這時只要點選同意,我們就可以讓手機的錢包 App 與 Uniswap 連線,進而進行後續的其他交易動作囉!

https://i.imgur.com/whZmllM.png

https://i.imgur.com/WozuioJ.png

除了透過 QR Code 掃描以外,我們再來仔細看下方的提供URL,點選 QR Code 圖片底下的「複製到剪貼板」就可以取得如下方的一段連結字串

wc:4ab515fe-eb0e-4aee-a518-c4593258e602@1?bridge=https%3A%2F%2Fu.bridge.walletconnect.org&key=374cfe59fd7a3fc67d69ba7c14c9ed23945227cd0827d45b89383edb6567cbbf

wc:{topic...}@{version...}?bridge={url...}&key={key...}

這段 WalletConnect Standard URI Format 是經由討論後,最後定義在 EIP-1328 的提案當中。

發起者 Dapp 會將用於建立連接所需要包含的參數資訊如用於一次性 topic(用於握手)以及 version 、Bridge URL、Symmetric key 等相關資訊組合在一起後,發送給用戶端,也就是前面所說的 Session Request 會用到的資訊。

https://i.imgur.com/TxyusBs.png

如何加入 WalletConnect 的註冊名單

若我們想要將自己開發的 Dapps 和 Wallets 註冊到 WalletConnect 的話,只要從官網登入後就會進到所謂的 WalletConnect Cloud ,我們可以在這邊創建相關的 Proejct 和提交你的 Dapp 或 Wallet ,而申請所需要填寫的資訊基本上就是 App 名稱、描述、Logo 圖片、官方網站連結、支援的鏈等等。

https://ithelp.ithome.com.tw/upload/images/20220920/201511120B5Ig9sOiZ.png

WalletConnect Explorer 的名單當中,可以看到已有提交正式註冊且批准通過的 Dapps 和 Wallets 有哪些,包含著名的 Uniswap、Metamask 基本上大多數都有,審核通過後就會出現在官方名單內,使用有支援 WalletConnect 的 Dapps 做連接錢包時,就也會看到申請註冊的錢包 App 出現在選擇清單裡面囉

這篇向大家介紹 WalletConnect 的連線機制以及是如何運作的,有興趣的朋友也可以實際使用錢包操作看看哦!


上一篇
[15] 一探究竟 Web3 錢包
下一篇
Web3 世界的通行證:Decentralized Identity
系列文
Web3.0 來襲27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言