Connected dApps: make right side of page-nav accomodate whatever we need (#19934)

* Connected dApps screen

* Style fixes

* Style fixes

* Updated quo-preview

* Reverting back Podfile.lock changes

* Fixes

* Style fixes

* Small `boolean icon-name` fix

* Style fixes

src/quo/components/navigation/page_nav/view.cljs

@@ -44,48 +44,55 @@
 
 (defn- right-section-spacing [] [rn/view {:style style/right-actions-spacing}])
 
+(defmulti add-button
+  (fn [{:keys [button-props]}]
+    (:content-type button-props)))
+
+(defmethod add-button :account-switcher
+  [{:keys [support-account-switcher? button-props]}]
+  (when support-account-switcher?
+    (let [{:keys [customization-color on-press emoji type]} button-props]
+      [rn/pressable {:on-press on-press}
+       [account-avatar/view
+        {:emoji               emoji
+         :size                32
+         :type                (or type :default)
+         :customization-color customization-color}]])))
+
+(defmethod add-button :default
+  [{:keys [background behind-overlay? button-props]}]
+  (let [{:keys [label icon-name]} button-props]
+    [button/button
+     (assoc button-props
+            :type       (button-type background)
+            :icon-only? (boolean icon-name)
+            :size       32
+            :accessible true
+            :background (if behind-overlay?
+                          :blur
+                          (when (button-properties/backgrounds background) background)))
+     (or label icon-name)]))
+
 (defn- add-right-buttons-xf
-  [max-actions background behind-overlay?]
+  [max-actions background behind-overlay? support-account-switcher?]
   (comp (filter map?)
         (take max-actions)
-        (map (fn [{:keys [icon-name label] :as button-props}]
+        (map (fn [button-props]
-               [button/button
+               (add-button {:background                background
-                (assoc button-props
+                            :behind-overlay?           behind-overlay?
-                       :type       (button-type background)
+                            :support-account-switcher? support-account-switcher?
-                       :icon-only? icon-name
+                            :button-props              button-props})))
-                       :size       32
-                       :accessible true
-                       :background (if behind-overlay?
-                                     :blur
-                                     (when (button-properties/backgrounds background) background)))
-                (or label icon-name)]))
         (interpose [right-section-spacing])))
 
-(defn- account-switcher-content
-  [{:keys [customization-color on-press emoji type]}]
-  [rn/pressable {:on-press on-press}
-   [account-avatar/view
-    {:emoji               emoji
-     :size                32
-     :type                (or type :default)
-     :customization-color customization-color}]])
-
 (defn- right-content
-  [{:keys [background content max-actions min-size? support-account-switcher? account-switcher
+  [{:keys [background content max-actions min-size? support-account-switcher?
            behind-overlay?]
     :or   {support-account-switcher? true}}]
   [rn/view (when min-size? {:style style/right-content-min-size})
-   (cond
+   (when (coll? content)
-     (and support-account-switcher? (= content :account-switcher))
-     [account-switcher-content account-switcher]
-
-     (coll? content)
      (into [rn/view {:style style/right-actions-container}]
-           (add-right-buttons-xf max-actions background behind-overlay?)
+           (add-right-buttons-xf max-actions background behind-overlay? support-account-switcher?)
-           content)
+           content))])
-
-     :else
-     nil)])
 
 (def header-height 155)
 (def page-nav-height 25)
@@ -208,19 +215,11 @@
   - on-press: callback for left button
   - icon-name: icon for left button
   - right-side (optional):
-      - The `:account-switcher` keyword
       - vector of maps to render buttons, e.g.:
         {:icon-name           :i/my-icon
          :on-press            (fn callback [] nil)
          :accessibility-label \"an optional label\"}
 
-  - account-switcher (optional)
-      - props to render dropdown component (emoji only) e.g.:
-       {:customization-color :purple
-        :on-press            (fn [] nil)
-        :state               :default (inherit dropdown states)
-        :emoji               \"🍑\"}
-
   Depending on the `type` selected, different properties are accepted:
   `:title`
     - title
@@ -251,7 +250,7 @@
   `:network`
     - network-name
     - network-logo a valid rn/image `:source` value"
-  [{:keys [type right-side background text-align account-switcher behind-overlay?]
+  [{:keys [type right-side background text-align behind-overlay?]
     :or   {type       :no-title
            text-align :center
            right-side :none
@@ -261,22 +260,20 @@
     :no-title
     [page-nav-base props
      [right-content
-      {:background       background
+      {:background      background
-       :content          right-side
+       :content         right-side
-       :max-actions      3
+       :max-actions     3
-       :behind-overlay?  behind-overlay?
+       :behind-overlay? behind-overlay?}]]
-       :account-switcher account-switcher}]]
 
     :title
     (let [centered? (= text-align :center)]
       [page-nav-base props
        [title-center (assoc props :centered? centered?)]
        [right-content
-        {:background       background
+        {:background  background
-         :content          right-side
+         :content     right-side
-         :max-actions      (if centered? 1 3)
+         :max-actions (if centered? 1 3)
-         :min-size?        centered?
+         :min-size?   centered?}]])
-         :account-switcher account-switcher}]])
 
     :dropdown
     [page-nav-base props
@@ -291,10 +288,9 @@
     [page-nav-base props
      [token-center props]
      [right-content
-      {:background       background
+      {:background  background
-       :content          right-side
+       :content     right-side
-       :max-actions      3
+       :max-actions 3}]]
-       :account-switcher account-switcher}]]
 
     :channel
     [page-nav-base props
@@ -318,11 +314,10 @@
     [page-nav-base props
      [wallet-networks-center props]
      [right-content
-      {:background       background
+      {:background  background
-       :content          right-side
+       :content     right-side
-       :max-actions      1
+       :max-actions 3
-       :min-size?        true
+       :min-size?   true}]]
-       :account-switcher account-switcher}]]
 
     (:community :network)
     [page-nav-base props

src/status_im/contexts/preview/quo/navigation/page_nav.cljs

@@ -41,6 +41,12 @@
                :value "Arrow left"}]}])
 
 
+(def account-switcher-option
+  {:content-type        :account-switcher
+   :customization-color :purple
+   :on-press            #(js/alert "Pressed Account Switcher")
+   :emoji               "🍑"})
+
 (def right-side-options
   (let [options [{:icon-name :i/save :on-press #(js/alert "SAVE")}
                  {:icon-name :i/mark-as-read :on-press #(js/alert "MARK AS READ")}
@@ -52,20 +58,21 @@
      {:key   (take 2 options)
       :value "2 actions"}
      {:key   (take 3 options)
-      :value "3 actions"}]))
+      :value "3 actions"}
-
+     {:key   (conj (take 1 options) account-switcher-option)
-(def account-switcher
+      :value "1 action + account switcher"}
-  {:key :account-switcher})
+     {:key   (conj (take 2 options) account-switcher-option)
+      :value "2 actions + account switcher"}]))
 
 (def no-title-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj right-side-options account-switcher)}])
+    :options right-side-options}])
 
 (def title-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj right-side-options account-switcher)}
+    :options right-side-options}
    {:key :title :type :text}
    {:key     :text-align
     :type    :select
@@ -79,7 +86,7 @@
 (def token-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj right-side-options account-switcher)}
+    :options right-side-options}
    {:key     :token-logo
     :type    :select
     :options [{:key   (resources/get-mock-image :status-logo)
@@ -128,7 +135,7 @@
 (def wallet-networks-descriptor
   [{:key     :right-side
     :type    :select
-    :options (conj (take 2 right-side-options) account-switcher)}])
+    :options right-side-options}])
 
 (def community-descriptor
   [{:key     :right-side
@@ -195,9 +202,6 @@
                 :community-logo     (resources/get-mock-image :coinbase)
                 :network-name       "Mainnet"
                 :network-logo       (resources/get-mock-image :diamond)
-                :account-switcher   {:customization-color :purple
-                                     :on-press            #(js/alert "Pressed Account Switcher")
-                                     :emoji               "🍑"}
                 :networks           networks})]
     (fn []
       [preview/preview-container

src/status_im/contexts/wallet/common/account_switcher/view.cljs

@@ -4,6 +4,7 @@
     [status-im.contexts.wallet.sheets.account-options.view :as account-options]
     [status-im.contexts.wallet.sheets.network-filter.view :as network-filter]
     [status-im.contexts.wallet.sheets.select-account.view :as select-account]
+    [status-im.feature-flags :as ff]
     [utils.re-frame :as rf]))
 
 (defn get-bottom-sheet-args
@@ -18,11 +19,12 @@
   [{:keys [type on-press accessibility-label icon-name switcher-type margin-top]
     :or   {icon-name           :i/close
            accessibility-label :top-bar
-           switcher-type       :account-options}}]
+           switcher-type       :account-options
+           type                :no-title}}]
   (let [{:keys [color emoji watch-only?]} (rf/sub [:wallet/current-viewing-account])
         networks                          (rf/sub [:wallet/selected-network-details])]
     [quo/page-nav
-     {:type                (or type :no-title)
+     {:type                type
       :icon-name           icon-name
       :margin-top          margin-top
       :background          :blur
@@ -30,9 +32,14 @@
       :accessibility-label accessibility-label
       :networks            networks
       :networks-on-press   #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])
-      :right-side          :account-switcher
+      :right-side          [(when (and (ff/enabled? ::ff/wallet.wallet-connect)
-      :account-switcher    {:customization-color color
+                                       (not watch-only?))
-                            :on-press            #(rf/dispatch [:show-bottom-sheet
+                              {:icon-name :i/dapps
-                                                                (get-bottom-sheet-args switcher-type)])
+                               :on-press  #(rf/dispatch [:navigate-to :screen/wallet.connected-dapps])})
-                            :emoji               emoji
+
-                            :type                (when watch-only? :watch-only)}}]))
+                            {:content-type        :account-switcher
+                             :customization-color color
+                             :on-press            #(rf/dispatch [:show-bottom-sheet
+                                                                 (get-bottom-sheet-args switcher-type)])
+                             :emoji               emoji
+                             :type                (when watch-only? :watch-only)}]}]))

src/status_im/contexts/wallet/connected_dapps/style.cljs

@@ -0,0 +1,17 @@
+(ns status-im.contexts.wallet.connected-dapps.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def screen-padding 20)
+
+(def header-container
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :padding-horizontal screen-padding
+   :margin-vertical    12})
+
+(defn header-text
+  [bottom-padding?]
+  {:padding-horizontal screen-padding
+   :padding-top        12
+   :padding-bottom     (when bottom-padding? 8)
+   :color              colors/black})

src/status_im/contexts/wallet/connected_dapps/view.cljs

@@ -0,0 +1,29 @@
+(ns status-im.contexts.wallet.connected-dapps.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.contexts.wallet.connected-dapps.style :as style]
+    [utils.re-frame :as rf]))
+
+(defn- header
+  [{:keys [title subtitle]}]
+  [:<>
+   [rn/view {:style style/header-container}
+    [quo/button
+     {:icon-only?          true
+      :type                :grey
+      :background          :blur
+      :size                32
+      :accessibility-label :close-scan-qr-code
+      :on-press            #(rf/dispatch [:navigate-back])}
+     :i/close]]
+   [quo/text
+    {:size   :heading-1
+     :weight :semi-bold
+     :style  (style/header-text (when subtitle true))}
+    title]])
+
+(defn view
+  []
+  [rn/view {:style {:flex 1}}
+   [header {:title "Connected dApps"}]])

src/status_im/navigation/screens.cljs

@@ -92,6 +92,7 @@
     [status-im.contexts.wallet.bridge.select-asset.view :as wallet-bridge-select-asset]
     [status-im.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im.contexts.wallet.common.scan-account.view :as wallet-scan-address]
+    [status-im.contexts.wallet.connected-dapps.view :as wallet-connected-dapps]
     [status-im.contexts.wallet.save-address.view :as wallet-save-address]
     [status-im.contexts.wallet.send.from.view :as wallet-select-from]
     [status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
@@ -377,6 +378,10 @@
      :options   {:insets {:top? true}}
      :component wallet-accounts/view}
 
+    {:name      :screen/wallet.connected-dapps
+     :options   {:insets {:top? true}}
+     :component wallet-connected-dapps/view}
+
     {:name      :screen/wallet.edit-account
      :component wallet-edit-account/view}