Add Wallet Connect base implementation of the connection flow (#19909)

* feat: added base implementation of WC connect flow

* test: mocking the wc dependency

* fix: addressed review comments

src/mocks/js_dependencies.cljs

@@ -418,6 +418,7 @@
     "react-native-transparent-video"                   react-native-transparent-video
     "react-native-orientation-locker"                  react-native-orientation-locker
     "react-native-gifted-charts"                       react-native-gifted-charts
+    "@walletconnect/react-native-compat"               #js {}
     "../resources/data/emojis/en.json"                 (js/JSON.parse
                                                         (slurp
                                                          "./resources/data/emojis/en.json"))

src/status_im/constants.cljs

@@ -257,6 +257,12 @@
 (def regx-starts-with-uuid #"^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}")
 (def regx-full-or-partial-address #"^0x[a-fA-F0-9]{1,40}$")
 
+;; Wallet Connect
+(def ^:const optimism-crosschain-id "eip155:10")
+(def ^:const wallet-connect-supported-methods ["eth_sendTransaction" "personal_sign"])
+(def ^:const wallet-connect-supported-events ["accountsChanged" "chainChanged"])
+(def ^:const wallet-connect-session-proposal-event "session_proposal")
+
 (def ^:const dapp-permission-contact-code "contact-code")
 (def ^:const dapp-permission-web3 "web3")
 (def ^:const dapp-permission-qr-code "qr-code")

src/status_im/contexts/profile/login/events.cljs

@@ -8,6 +8,7 @@
     [status-im.constants :as constants]
     status-im.contexts.profile.login.effects
     [status-im.contexts.profile.rpc :as profile.rpc]
+    [status-im.feature-flags :as ff]
     [taoensso.timbre :as log]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
@@ -104,6 +105,8 @@
            [:chat.ui/request-link-preview-whitelist]
            [:visibility-status-updates/fetch]
            [:switcher-cards/fetch]
+           (when (ff/enabled? ::ff/wallet.wallet-connect)
+             [:dispatch [:wallet-connect/init]])
            (when-not (:universal-links/handling db)
              [:effects.chat/open-last-chat key-uid])
            (when notifications-enabled?

src/status_im/contexts/wallet/wallet_connect/effects.cljs

@@ -0,0 +1,41 @@
+(ns status-im.contexts.wallet.wallet-connect.effects
+  (:require [promesa.core :as promesa]
+            [re-frame.core :as rf]
+            [status-im.contexts.wallet.wallet-connect.utils :as wallet-connect.utils]))
+
+(rf/reg-fx
+ :effects.wallet-connect/init
+ (fn [{:keys [on-success on-fail]}]
+   (-> (wallet-connect.utils/init)
+       (promesa/then on-success)
+       (promesa/catch on-fail))))
+
+(rf/reg-fx
+ :effects.wallet-connect/register-event-listener
+ (fn [web3-wallet wc-event handler]
+   (.on web3-wallet
+        wc-event
+        (fn [js-proposal]
+          (-> js-proposal
+              (js->clj :keywordize-keys true)
+              handler)))))
+
+(rf/reg-fx
+ :effects.wallet-connect/pair
+ (fn [{:keys [web3-wallet url on-success on-fail]}]
+   (-> (.. web3-wallet -core -pairing)
+       (.pair (clj->js {:uri url}))
+       (promesa/then on-success)
+       (promesa/catch on-fail))))
+
+(rf/reg-fx
+ :effects.wallet-connect/approve-session
+ (fn [{:keys [web3-wallet proposal supported-namespaces on-success on-fail]}]
+   (let [{:keys [params id]} proposal
+         approved-namespaces (wallet-connect.utils/build-approved-namespaces params
+                                                                             supported-namespaces)]
+     (-> (.approveSession web3-wallet
+                          (clj->js {:id         id
+                                    :namespaces approved-namespaces}))
+         (promesa/then on-success)
+         (promesa/catch on-fail)))))

src/status_im/contexts/wallet/wallet_connect/events.cljs

@@ -0,0 +1,89 @@
+(ns status-im.contexts.wallet.wallet-connect.events
+  (:require [re-frame.core :as rf]
+            [status-im.constants :as constants]
+            status-im.contexts.wallet.wallet-connect.effects
+            [status-im.contexts.wallet.wallet-connect.utils :as wallet-connect.utils]
+            [taoensso.timbre :as log]))
+
+(rf/reg-event-fx
+ :wallet-connect/init
+ (fn []
+   {:fx [[:effects.wallet-connect/init
+          {:on-success #(rf/dispatch [:wallet-connect/on-init-success %])
+           :on-fail    #(rf/dispatch [:wallet-connect/on-init-fail %])}]]}))
+
+(rf/reg-event-fx
+ :wallet-connect/on-init-success
+ (fn [{:keys [db]} [web3-wallet]]
+   {:db (assoc db :wallet-connect/web3-wallet web3-wallet)
+    :fx [[:dispatch [:wallet-connect/register-event-listeners]]]}))
+
+(rf/reg-event-fx
+ :wallet-connect/register-event-listeners
+ (fn [{:keys [db]}]
+   (let [web3-wallet (get db :wallet-connect/web3-wallet)]
+     {:fx [[:effects.wallet-connect/register-event-listener
+            web3-wallet
+            constants/wallet-connect-session-proposal-event
+            #(rf/dispatch [:wallet-connect/on-session-proposal %])]]})))
+
+(rf/reg-event-fx
+ :wallet-connect/on-init-fail
+ (fn [error]
+   (log/error "Failed to initialize Wallet Connect"
+              {:error error
+               :event :wallet-connect/on-init-fail})))
+
+(rf/reg-event-fx
+ :wallet-connect/on-session-proposal
+ (fn [{:keys [db]} [proposal]]
+   {:db (assoc db :wallet-connect/current-proposal proposal)}))
+
+(rf/reg-event-fx
+ :wallet-connect/reset-current-session
+ (fn [{:keys [db]}]
+   {:db (dissoc db :wallet-connect/current-proposal)}))
+
+(rf/reg-event-fx
+ :wallet-connect/pair
+ (fn [{:keys [db]} [url]]
+   (let [web3-wallet (get db :wallet-connect/web3-wallet)]
+     {:fx [[:effects.wallet-connect/pair
+            {:web3-wallet web3-wallet
+             :url         url
+             :on-fail     #(log/error "Failed to pair with dApp")
+             :on-success  #(log/info "dApp paired successfully")}]]})))
+
+(rf/reg-event-fx
+ :wallet-connect/approve-session
+ (fn [{:keys [db]}]
+   ;; NOTE: hardcoding optimism for the base implementation
+   (let [crosschain-ids       [constants/optimism-crosschain-id]
+         web3-wallet          (get db :wallet-connect/web3-wallet)
+         current-proposal     (get db :wallet-connect/current-proposal)
+         accounts             (get-in db [:wallet :accounts])
+         ;; NOTE: for now using the first account, but should be using the account selected by the
+         ;; user on the connection screen. The default would depend on where the connection started
+         ;; from:
+         ;; - global scanner -> first account in list
+         ;; - wallet account dapps -> account that is selected
+         address              (-> accounts keys first)
+         formatted-address    (wallet-connect.utils/format-address (first crosschain-ids)
+                                                                   address)
+         supported-namespaces (clj->js {:eip155
+                                        {:chains   crosschain-ids
+                                         :methods  constants/wallet-connect-supported-methods
+                                         :events   constants/wallet-connect-supported-events
+                                         :accounts [formatted-address]}})]
+     {:fx [[:effects.wallet-connect/approve-session
+            {:web3-wallet          web3-wallet
+             :proposal             current-proposal
+             :supported-namespaces supported-namespaces
+             :on-success           (fn []
+                                     (log/debug "Wallet Connect session approved")
+                                     (rf/dispatch [:wallet-connect/reset-current-session]))
+             :on-fail              (fn [error]
+                                     (log/error "Wallet Connect session approval failed"
+                                                {:error error
+                                                 :event :wallet-connect/approve-session})
+                                     (rf/dispatch [:wallet-connect/reset-current-session]))}]]})))

src/status_im/contexts/wallet/wallet_connect/utils.cljs

@@ -1,6 +1,10 @@
 (ns status-im.contexts.wallet.wallet-connect.utils
-  (:require ["@walletconnect/core" :refer [Core]]
+  ;; NOTE: Not sorting namespaces since @walletconnect/react-native-compat should be the first
+  #_{:clj-kondo/ignore [:unsorted-required-namespaces]}
+  (:require ["@walletconnect/react-native-compat"]
+            ["@walletconnect/core" :refer [Core]]
             ["@walletconnect/web3wallet" :refer [Web3Wallet]]
+            ["@walletconnect/utils" :refer [buildApprovedNamespaces]]
             [status-im.config :as config]
             [utils.i18n :as i18n]))
 
@@ -23,3 +27,13 @@
     (Web3Wallet.init
      (clj->js {:core     core
                :metadata wallet-connect-metadata}))))
+
+(defn build-approved-namespaces
+  [proposal supported-namespaces]
+  (buildApprovedNamespaces
+   (clj->js {:proposal            proposal
+             :supportedNamespaces supported-namespaces})))
+
+(defn format-address
+  [chain-id address]
+  (str chain-id ":" address))

src/status_im/events.cljs

@@ -40,6 +40,7 @@
     status-im.contexts.wallet.send.events
     status-im.contexts.wallet.signals
     status-im.contexts.wallet.swap.events
+    status-im.contexts.wallet.wallet-connect.events
     [status-im.db :as db]
     status-im.navigation.effects
     status-im.navigation.events

src/status_im/subs/root.cljs

@@ -165,6 +165,10 @@
 ;;wallet
 (reg-root-key-sub :wallet :wallet)
 
+;;wallet-connect
+(reg-root-key-sub :wallet-connect/web3-wallet :wallet-connect/web3-wallet)
+(reg-root-key-sub :wallet-connect/current-proposal :wallet-connect/current-proposal)
+
 ;;biometrics
 (reg-root-key-sub :biometrics :biometrics)