WIP Manage session functionality

src/status_im/bottom_sheet/core.cljs

@@ -12,7 +12,6 @@
 (fx/defn show-bottom-sheet-event
   {:events [:bottom-sheet/show-sheet]}
   [cofx view options]
-         (println options "DSDSDSDSDSDSDSDSDSDS")
   (show-bottom-sheet
    cofx
    {:view    view

src/status_im/navigation.cljs

@@ -96,3 +96,8 @@
   [_]
   {:hide-wallet-connect-success-sheet nil})
 
+(fx/defn hide-wallet-connect-app-management-sheet
+  {:events [:hide-wallet-connect-app-management-sheet]}
+  [{:keys [db]}]
+  {:db (assoc db :wallet-connect/showing-app-management-sheet? false)
+   :hide-wallet-connect-app-management-sheet nil})

src/status_im/navigation/core.cljs

@@ -346,10 +346,18 @@
                       (fn [] (gestureHandlerRootHOC views/wallet-connect-success-comp))
                       (fn [] views/wallet-connect-success-comp)))
 
+(defonce wallet-connect-app-management-sheet-reg
+  (.registerComponent Navigation
+                      "wallet-connect-app-management-sheet"
+                      (fn [] (gestureHandlerRootHOC views/wallet-connect-app-management-comp))
+                      (fn [] views/wallet-connect-app-management-comp)))
+
 (re-frame/reg-fx :show-wallet-connect-sheet (fn [] (show-overlay "wallet-connect-sheet")))
 (re-frame/reg-fx :hide-wallet-connect-sheet (fn [] (dissmiss-overlay "wallet-connect-sheet")))
 (re-frame/reg-fx :show-wallet-connect-success-sheet (fn [] (show-overlay "wallet-connect-success-sheet")))
 (re-frame/reg-fx :hide-wallet-connect-success-sheet (fn [] (dissmiss-overlay "wallet-connect-success-sheet")))
+(re-frame/reg-fx :show-wallet-connect-app-management-sheet (fn [] (show-overlay "wallet-connect-app-management-sheet")))
+(re-frame/reg-fx :hide-wallet-connect-app-management-sheet (fn [] (dissmiss-overlay "wallet-connect-app-management-sheet")))
 
 ;; SIGNING
 

src/status_im/qr_scanner/core.cljs

@@ -101,5 +101,5 @@
   [{:keys [db]} uri]
   {::router/handle-uri {:chain (ethereum/chain-keyword db)
                         :chats (get db :chats)
-                        :uri   "wc:cf8dcdd1c7e4fd8d0d8789335b80b870199007f3bfcf6c0af5b17373d045955a@2?controller=false&publicKey=c5c76bb460b0484fbb571bcf6ee76185b4d9f6bac724a660c202bafedecffb65&relay=%7B%22protocol%22%3A%22waku%22%7D"
+                        :uri   "wc:a40194ebfcc4d4b408568fc9b83578f129f8b654fa5c6bec1b5556cf07ae4878@2?controller=false&publicKey=7ccdaca70dc3d28358646769787a2f7062b717c84166596feb02e7ffe2095b05&relay=%7B%22protocol%22%3A%22waku%22%7D"
                         :cb    #(re-frame/dispatch [::match-scanned-value %])}})

src/status_im/subs.cljs

@@ -266,6 +266,8 @@
 (reg-root-key-sub :wallet-connect/proposal-metadata :wallet-connect/proposal-metadata)
 (reg-root-key-sub :wallet-connect/enabled? :wallet-connect/enabled?)
 (reg-root-key-sub :wallet-connect/session-connected :wallet-connect/session-connected)
+(reg-root-key-sub :wallet-connect/showing-app-management-sheet? :wallet-connect/showing-app-management-sheet?)
+(reg-root-key-sub :wallet-connect/sessions :wallet-connect/sessions)
 
 (re-frame/reg-sub
  :communities

src/status_im/ui/components/bottom_panel/views.cljs

@@ -43,7 +43,7 @@
                                :duration        500
                                :useNativeDriver true})])))
 
-(defn bottom-panel [_ render window-height on-close]
+(defn bottom-panel [_ render window-height on-close show-overlay?]
   (let [bottom-anim-value (anim/create-value window-height)
         alpha-value       (anim/create-value 0)
         clear-timeout     (atom nil)
@@ -97,7 +97,7 @@
                                                                      :ignore-offset true}
 
                                        [react/view {:flex 1}
-                                        (when platform/ios?
+                                        (when (and platform/ios? show-overlay?)
                                           [react/animated-view {:flex 1 :background-color colors/black-persist :opacity alpha-value}])
                                         [react/animated-view {:style {:position  :absolute
                                                                       :transform [{:translateY bottom-anim-value}]
@@ -108,6 +108,6 @@
                                       #(do (on-close)
                                            nil)))})))
 
-(views/defview animated-bottom-panel [val view on-close]
+(views/defview animated-bottom-panel [val view on-close show-overlay?]
   (views/letsubs [{window-height :height} [:dimensions/window]]
-    [bottom-panel (when val (select-keys val [:from :contact :amount :token :approve? :message :cancel? :hash :name :url :icons :description :topic :relay :self :peer :permissions :state])) view window-height on-close]))
+    [bottom-panel (when val (select-keys val [:from :contact :amount :token :approve? :message :cancel? :hash :name :url :icons :description :topic :relay :self :peer :permissions :state])) view window-height on-close (if-not (nil? show-overlay?) show-overlay? true)]))

src/status_im/ui/components/react.cljs

@@ -13,7 +13,8 @@
             ["@react-native-community/clipboard" :default Clipboard]
             ["react-native-linear-gradient" :default LinearGradient]
             ["react-native-navigation" :refer (Navigation)]
-            ["react-native-fast-image" :as FastImage])
+            ["react-native-fast-image" :as FastImage]
+            ["@react-native-community/blur" :as blur])
   (:require-macros [status-im.utils.views :as views]))
 
 (def native-modules (.-NativeModules react-native))
@@ -39,6 +40,8 @@
 
 (def linear-gradient (reagent/adapt-react-class LinearGradient))
 
+(def blur-view (reagent/adapt-react-class (.-BlurView blur)))
+
 (defn valid-source? [source]
   (or (not (map? source))
       (not (contains? source :uri))

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

@@ -38,11 +38,7 @@
           (merge recover.views/bottom-sheet)
 
           (= view :migrate-account-password)
-          (merge key-storage/migrate-account-password)
-
-          (= view :wallet-connect-session-connected)
-          (merge wallet-connect.views/success-sheet))]
-    (println asd "CCCCOFDSFSDFSD")
+          (merge key-storage/migrate-account-password))]
     [quo/bottom-sheet opts
      (when content
        [content (when options options)])]))

src/status_im/ui/screens/views.cljs

@@ -147,5 +147,15 @@
      [react/safe-area-provider
       [inactive]
       [wallet-connect/wallet-connect-success-sheet-view]
+      (when js/goog.DEBUG
+        [reloader/reload-view])])))
+
+(def wallet-connect-app-management-comp
+  (reagent/reactify-component
+   (fn []
+     ^{:key (str "wallet-connect-app-management-sheet" @reloader/cnt)}
+     [react/safe-area-provider
+      [inactive]
+      [wallet-connect/wallet-connect-app-management-sheet-view]
       (when js/goog.DEBUG
         [reloader/reload-view])])))

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

@@ -50,11 +50,13 @@
       :width  chevron-icon-container-width
       :height chevron-icon-container-height}]]])
 
-;; (def selected-account (reagent/atom nil))
+(def show-account-selector? (reagent/atom false))
 
-(defn render-account [{:keys [address name color] :as account} _ _ {:keys [selected-account]}]
+(defn render-account [{:keys [address name color] :as account} _ _ {:keys [selected-account on-select]}]
   (let [account-selected? (= (:address @selected-account) address)]
-    [react/touchable-without-feedback {:on-press #(reset! selected-account (merge {} account))}
+    [react/touchable-without-feedback {:on-press #(do
+                                                    (reset! selected-account (merge {} account))
+                                                    (when on-select (on-select)))}
      [react/view {:style {:height 34
                           :background-color color
                           :border-radius 17
@@ -66,41 +68,47 @@
                  :weight (if account-selected? :medium :regular)}
        name]]]))
 
-(defn account-picker [accounts selected-account {:keys [on-press]}]
-  (println on-press )
+(defn account-selector [accounts selected-account on-select]
+  [react/view {:style {:height 80
+                       :width "100%"
+                       :justify-content :center
+                       :padding-horizontal 16
+                       :margin-top 40}}
+   [react/view
+    [quo/text {:size :small} "Select account"]
+    [list/flat-list {:data        accounts
+                     :key-fn      :address
+                     :render-fn   render-account
+                     :render-data {:selected-account selected-account
+                                   :on-select on-select}
+                     :horizontal  true
+                     :shows-horizontal-scroll-indicator false
+                     :extraData @selected-account
+                     :style {:height 40
+                             :width "100%"
+                             :margin-top 10}}]]])
+
+(defn account-picker [accounts selected-account {:keys [on-press on-select]}]
   (if (> (count accounts) 1)
-    [react/view {:style {:height 80
-                         :width "100%"
-                         :justify-content :center
-                         :padding-horizontal 16
-                         :margin-top 40}}
-     [react/view
-      [quo/text {:size :small} "Select account"]
-      [list/flat-list {:data        accounts
-                       :key-fn      :address
-                       :render-fn   render-account
-                       :render-data {:selected-account selected-account}
-                       :horizontal  true
-                       :shows-horizontal-scroll-indicator false
-                       :extraData @selected-account
-                       :style {:height 40
-                               :width "100%"
-                               :margin-top 10}}]]]
+    [account-selector accounts selected-account on-select]
     [react/touchable-opacity {:style {:width "100%"
                                       :align-items :center
                                       :padding-top 8}}
-     [toolbar-selection {:text  (:name @selected-account)
+     [toolbar-selection {:text (:name @selected-account)
                          :background-color (:color @selected-account)
                          :on-press on-press}]]))
 
 (def tiny-circle-size 4)
 
 (def big-circle-size 24)
 
-(defview success-sheet-view [{:keys [peer state topic]}]
+(defview success-sheet-view [{:keys [topic]}]
   (letsubs [visible-accounts @(re-frame/subscribe [:visible-accounts-without-watch-only])
-            dapps-account [:dapps-account]]
-           (let [{:keys [accounts]} state
+            dapps-account [:dapps-account]
+            showing-app-management-sheet? [:wallet-connect/showing-app-management-sheet?]
+            sessions [:wallet-connect/sessions]]
+           (let [{:keys [peer state]} (first (filter #(= (:topic %) topic) sessions))
+                 {:keys [accounts]} state
                  {:keys [metadata]} peer
                  {:keys [name icons]} metadata
                  icon-uri (when (and icons (> (count icons) 0)) (first icons))
@@ -127,7 +135,9 @@
                [account-picker
                 (vector dapps-account)
                 selected-account
-                {:on-press #(println "blur view here")}]
+                {:on-press #(do
+                              (re-frame/dispatch [:wallet-connect/manage-app])
+                              (reset! show-account-selector? true))}]
                [quo/text {:weight :regular
                           :color :secondary
                           :style  styles/message-title}
@@ -137,11 +147,54 @@
                  [react/view styles/proposal-button-right
                   [quo/button
                    {:theme     :accent
-                    :on-press  #(re-frame/dispatch [:hide-wallet-connect-success-sheet])}
-                   "Close"]]]]]])))
-
-(def success-sheet
-  {:content success-sheet-view})
+                    :on-press  #(do
+                                  (reset! show-account-selector? false)
+                                  (re-frame/dispatch [:hide-wallet-connect-success-sheet]))}
+                   "Close"]]]]]
+              (when (or showing-app-management-sheet? false)
+                [react/blur-view {:style {:position :absolute
+                                          :top 80
+                                          :left 0
+                                          :right 0
+                                          :bottom 0
+                                          :background-color "rgba(255, 255, 255, 0.3)"}
+                                  :blurAmount 2
+                                  :blurType :light}
+                 [react/touchable-opacity {:style {:position :absolute
+                                                   :top 0
+                                                   :left 0
+                                                   :right 0
+                                                   :bottom 0
+                                                   :border-radius 16}
+                                           :on-press #(do
+                                                        (reset! show-account-selector? false))}]])])))
+
+(defview app-management-sheet-view [{:keys [topic]}]
+  (letsubs []
+           (let [name "APP MANAGEMENT"
+                 visible-accounts @(re-frame/subscribe [:visible-accounts-without-watch-only])
+                 dapps-account @(re-frame/subscribe [:dapps-account])
+                 selected-account (reagent/atom dapps-account)]
+             [react/view {:style (merge styles/acc-sheet {:background-color "rgba(0,0,0,0)"})}
+              [react/linear-gradient {:colors ["rgba(0,0,0,0)" "rgba(0,0,0,0.3)"]
+                                      :start {:x 0 :y 0} :end {:x 0 :y 1}
+                                      :style {:width "100%"
+                                              :height 50
+                                              :opacity 0.3}}]
+              [react/view styles/proposal-sheet-container
+               [react/view styles/sheet-body-container
+                [react/view {:style styles/proposal-title-container}
+                 [quo/text {:weight :bold
+                            :size   :large}
+                  name]
+                 [quo/text {:weight :regular
+                            :size   :large
+                            :style  styles/proposal-title}
+                  "Connected"]]]
+               [account-selector
+                visible-accounts
+                selected-account
+                #(re-frame/dispatch [:wallet-connect/change-session-account topic @selected-account])]]])))
 
 (defview session-proposal-sheet [{:keys [name icons]}]
   (let [visible-accounts @(re-frame/subscribe [:visible-accounts-without-watch-only])
@@ -192,3 +245,11 @@
             session
             success-sheet-view
             #(re-frame/dispatch [:hide-wallet-connect-success-sheet])]))
+
+(defview wallet-connect-app-management-sheet-view []
+  (letsubs [session [:wallet-connect/session-connected]]
+           [bottom-panel/animated-bottom-panel
+            session
+            app-management-sheet-view
+            #(re-frame/dispatch [:hide-wallet-connect-app-management-sheet])
+            false]))

src/status_im/utils/wallet_connect.cljs

@@ -22,5 +22,7 @@
 
 (defn session-proposal-event [] (.-proposal (.-session CLIENT_EVENTS)))
 
+(defn session-updated-event [] (.-updated (.-session CLIENT_EVENTS)))
+
 (defn url? [url]
   (string/starts-with? url "wc:"))