Connection request and UI of bottom sheet

src/status_im/subs.cljs

@@ -254,6 +254,9 @@
 (reg-root-key-sub :anon-metrics/data-visible? :anon-metrics/data-visible?)
 (reg-root-key-sub :anon-metrics/learn-more-visible? :anon-metrics/learn-more-visible?)
 
+;; wallet connect
+(reg-root-key-sub :wallet-connect/proposal-metadata :wallet-connect/proposal-metadata)
+
 (re-frame/reg-sub
  :communities
  :<- [:raw-communities]

src/status_im/ui/screens/bottom_sheets/views.cljs

@@ -6,6 +6,7 @@
             [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
             [status-im.ui.screens.about-app.views :as about-app]
             [status-im.ui.screens.multiaccounts.recover.views :as recover.views]
+            [status-im.ui.screens.wallet.wallet-connect.views :as wallet-connect.views]
             [quo.core :as quo]))
 
 (defn bottom-sheet []
@@ -37,7 +38,10 @@
           (merge recover.views/bottom-sheet)
 
           (= view :migrate-account-password)
-          (merge key-storage/migrate-account-password))]
+          (merge key-storage/migrate-account-password)
+
+          (= view :wallet-connect-session-proposal)
+          (merge wallet-connect.views/bottom-sheet))]
     [quo/bottom-sheet opts
      (when content
        [content])]))

src/status_im/ui/screens/notifications_center/views/notification.cljs

@@ -71,7 +71,7 @@
                             :size :small}
                   name]
                  [icons/icon
-                  :main-icons/chevron-down
+                  :main-icons/chevron-right
                   {:color  colors/gray
                    :width  16
                    :height 22}]])

src/status_im/ui/screens/profile/user/views.cljs

@@ -59,7 +59,7 @@
           :accessibility-label :share-my-contact-code-button}
          (i18n/label :t/share-link)]]])))
 
-(defn wallet-connect-init [] (wallet-connect/init #(re-frame/dispatch [:wallet/wallet-connect-client-init %]) #(println "error " %)))
+(defn wallet-connect-init [] (wallet-connect/init #(re-frame/dispatch [:wallet-connect/client-init %]) #(println "error " %)))
 
 ;; {:keys [multiaccount :networks/networks :networks/current-network]
 ;;  :as db}
@@ -157,7 +157,7 @@
          :chevron             true
          :on-press            #(do
                                  (wallet-connect-init)
-                                 (re-frame/dispatch [::qr-scanner/scan-code
+                                 (re-frame/dispatch [:bottom-sheet/show-sheet :wallet-connect-session-proposal
                                                    {:title   "Wallet Connect 2.0"
                                                     :handler :wallet-connect/qr-code-scanned}]))}])
      [quo/list-item

src/status_im/ui/screens/wallet/wallet_connect/views.cljs

@@ -0,0 +1,131 @@
+(ns status-im.ui.screens.wallet.wallet-connect.views
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [re-frame.core :as re-frame]
+            [status-im.ui.components.react :as react]
+            [status-im.multiaccounts.recover.core :as multiaccounts.recover]
+            [status-im.keycard.recovery :as keycard]
+            [status-im.i18n.i18n :as i18n]
+            [status-im.utils.config :as config]
+            [status-im.utils.security]
+            [quo.design-system.colors :as colors]
+            [quo.core :as quo]
+            [status-im.ui.components.icons.icons :as icons]
+            [status-im.react-native.resources :as resources]
+            [reagent.core :as reagent]))
+
+(defn hide-sheet-and-dispatch [event]
+  (re-frame/dispatch [:bottom-sheet/hide])
+  (re-frame/dispatch event))
+
+(defn circle [{:keys [color size style icon]}]
+  [react/view
+   {:style (merge
+            style
+            {:width            size
+             :height           size
+             :background-color color
+             :border-radius    (/ size 2)
+             :align-items      :center
+             :justify-content  :center})}
+   (when icon
+     [icons/icon icon
+      {:color    colors/blue}])])
+
+(defn toolbar-selection [{:keys [icon text background-color multiaccounts]}]
+  [react/touchable-opacity
+    [react/view {:style {:height 36
+                         :min-width 189
+                         :border-radius 18
+                         :background-color background-color
+                         :align-items :center
+                         :flex-direction :row
+                         :padding-left 12
+                         :padding-right 8}}
+     [icons/icon
+      :main-icons/billfold
+      {:color  (:text-05 @colors/theme)
+       :width  18
+       :height 17.8}]
+     [quo/text {:color :inverse
+                :style {:margin-left 8
+                        }}
+      text]
+     [icons/icon
+      :main-icons/chevron-down
+      {:color  (:text-05 @colors/theme)
+       :width  24
+       :height 24}]]])
+
+(defview bottom-sheet-view []
+  (letsubs [view-id [:view-id]
+            {:keys [name url icons description]} [:wallet-connect/proposal-metadata]
+            {:keys [address] :as account} [:multiaccount]
+            accounts [:multiaccount/visible-accounts]
+            selected-account (reagent/atom nil)]
+           [react/view {:flex 1 :align-items :center}
+            [react/view {:flex-direction :row
+                         :align-items :center
+                         :margin-top 10
+                         :margin-bottom 16}
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  40
+                      :style {:margin-right 8}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  4
+                      :style {:margin-right 4}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  4
+                      :style {:margin-right 4}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  4
+                      :style {:margin-right 8}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  24
+                      :style {:margin-right 8}
+                      :icon :main-icons/checkmark}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  4
+                      :style {:margin-right 4}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  4
+                      :style {:margin-right 4}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  4
+                      :style {:margin-right 8}}]
+             [circle {:color (:interactive-02 @colors/theme)
+                      :size  40}]]
+            [react/view {:flex 1
+                         :align-items :center}
+             [react/view {:style {:flex-direction :row}}
+              [quo/text {:weight :bold
+                         :size   :large}
+               (str name " ")]
+              [quo/text {:weight :regular
+                         :size   :large
+                         :color  :secondary
+                         :style  {:margin-bottom 16}}
+               (i18n/label :t/wallet-connect-proposal-title {:name name})]]
+             [toolbar-selection {:icon :main-icons/billfold
+                                 :background-color (:color (first accounts))
+                                 :text (:name (first accounts))
+                                 :multiaccounts accounts}]
+             [quo/text {:align :center
+                        :color :secondary
+                        :style {:margin-vertical 16}}
+              (i18n/label :t/wallet-connect-proposal-description {:name name})]
+             [react/view {:padding-horizontal 16 :width "100%" :align-items :stretch :justify-content :space-between :flex-direction :row :margin-top 6}
+              [react/view {:flex 1
+                           :margin-right 4}
+               [quo/button
+                {:on-press #(re-frame/dispatch [:bottom-sheet/hide])}
+                (i18n/label :t/cancel)]]
+              [react/view {:flex 1
+                           :margin-left 4}
+               [quo/button
+                {:theme     :accent
+                 :on-press  #(re-frame/dispatch [:wallet-connect/approve-proposal])}
+                (i18n/label :t/connect)]]
+              ]]]))
+
+(def bottom-sheet
+  {:content bottom-sheet-view})

src/status_im/wallet/core.cljs

@@ -1046,38 +1046,56 @@
   {::async-storage/set! {:transactions-management-enabled? enabled?}
    :db (assoc db :wallet/transactions-management-enabled? enabled?)})
 
-(defn proposal-handler [request-event]
-  (println "EVENT - SESSION PROPOSAL" (js->clj request-event))
-  ;; show proper UI for accepting or rejecting the session proposal
-  (re-frame/dispatch [:bottom-sheet/show-sheet :recover-sheet]))
-
-(defn created-handler [request-event]
+(fx/defn proposal-handler
+  {:events [:wallet-connect/proposal]}
+  [{:keys [db] :as cofx} request-event]
+  (let [proposal (js->clj request-event :keywordize-keys true)
+        proposer (:proposer proposal)
+        metadata (:metadata proposer)]
+    (println "EVENT - SESSION PROPOSAL" proposal proposer metadata (keys proposal) (type proposal) (get proposal :proposer))
+    {:db (assoc db :wallet-connect/proposal-metadata metadata)
+     :dispatch [:bottom-sheet/show-sheet :wallet-connect-session-proposal]}))
+
+(fx/defn created-handler
+  {:events [:wallet-connect/created]}
+  [{:keys [db] :as cofx} request-event]
   (println "EVENT - SESSION CREATED" (js->clj request-event)))
 
-(defn deleted-handler [request-event]
-  (println "EVENT - SESSION PROPOSAL" (js->clj request-event)))
+(fx/defn deleted-handler
+  {:events [:wallet-connect/deleted]}
+  [{:keys [db] :as cofx} request-event]
+  (println "EVENT - SESSION DELETE" (js->clj request-event)))
 
-(defn request-handler [request-event]
-  (println "EVENT - SESSION PROPOSAL" (js->clj request-event)))
+(fx/defn request-handler
+  {:events [:wallet-connect/request]}
+  [{:keys [db] :as cofx} request-event]
+  (println "EVENT - SESSION REQUEST" (js->clj request-event)))
 
 (defn subscribe-to-events [wallet-connect-client]
-  (.on wallet-connect-client (wallet-connect/session-request-event) request-handler)
-  (.on wallet-connect-client (wallet-connect/session-created-event) created-handler)
-  (.on wallet-connect-client (wallet-connect/session-deleted-event) deleted-handler)
-  (.on wallet-connect-client (wallet-connect/session-proposal-event) proposal-handler))
+  (.on wallet-connect-client (wallet-connect/session-request-event) #(re-frame/dispatch [:wallet-connect/request %]))
+  (.on wallet-connect-client (wallet-connect/session-created-event) #(re-frame/dispatch [:wallet-connect/created %]))
+  (.on wallet-connect-client (wallet-connect/session-deleted-event) #(re-frame/dispatch [:wallet-connect/deleted %]))
+  (.on wallet-connect-client (wallet-connect/session-proposal-event) #(re-frame/dispatch [:wallet-connect/proposal %])))
+
+(fx/defn approve-proposal
+  {:events [:wallet-connect/approve-proposal]}
+  [{:keys [db]} data opts]
+  (let [client (get db :wallet-connect/client)]
+    {:dispatch [:bottom-sheet/hide-sheet]
+     :db (assoc db :wallet-connect/sessions "session data here")}))
 
 (fx/defn qr-code-scanned
   {:events [:wallet-connect/qr-code-scanned]}
   [{:keys [db]} data opts]
-  (let [client (get db :wallet/wallet-connect-client)
+  (let [client (get db :wallet-connect/client)
         ;; used for testing purposes, remove later and use data variable instead
-        uri "wc:6caef4d8a511609d607fbb180adcaac42a94520c3f3c328496a1b1c6f39a36d2@2?controller=false&publicKey=5b669b06fdac438f7be7dec2f23f0a1b2d3e651eced86e67cb6b18c455f8ba46&relay=%7B%22protocol%22%3A%22waku%22%7D"]
+        uri "wc:482d6ccae40458f2cc64a45d002da7632c3db11fe768e757e1036bad5e03c7b7@2?controller=false&publicKey=9440a606ce65c3dadff527898b923ee1dea647dae5970125a2ccd354ea641f72&relay=%7B%22protocol%22%3A%22waku%22%7D"]
     (.pair client (clj->js {:uri uri}))
     {:dispatch [:navigate-back]
-     :db (assoc db :wallet/wallet-connect-scanned-uri data)}))
+     :db (assoc db :wallet-connect/scanned-uri data)}))
 
 (fx/defn wallet-connect-client-initate
-  {:events [:wallet/wallet-connect-client-init]}
-  [{:keys [db]} client]
+  {:events [:wallet-connect/client-init]}
+  [{:keys [db] :as cofx} client]
   (subscribe-to-events client)
-  {:db (assoc db :wallet/wallet-connect-client client)})
+  {:db (assoc db :wallet-connect/client client)})

translations/en.json

@@ -1674,5 +1674,7 @@
     "disable-later-in-settings": "You can disable this later in Settings",
     "use-as-profile-picture": "Use as profile picture",
     "view-on-opensea": "View on OpenSea",
-    "profile-picture-updated": "Profile picture updated"
+    "profile-picture-updated": "Profile picture updated",
+    "wallet-connect-proposal-title": "{{name}} would like to connect to",
+    "wallet-connect-proposal-description": "By connecting you allow {{name}} to retrieve your account address and enable Web3"
 }