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
2024-05-13 15:50:50 +02:00 · 2024-05-13 15:50:50 +02:00 · 006824e0ed
parent 33da4bfabc
commit 006824e0ed
6 changed files with 136 additions and 79 deletions
--- a/src/quo/components/navigation/page_nav/view.cljs
+++ b/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}]
-               [button/button
-                (assoc button-props
-                       :type       (button-type background)
-                       :icon-only? icon-name
-                       :size       32
-                       :accessible true
-                       :background (if behind-overlay?
-                                     :blur
-                                     (when (button-properties/backgrounds background) background)))
-                (or label icon-name)]))
+        (map (fn [button-props]
+               (add-button {:background                background
+                            :behind-overlay?           behind-overlay?
+                            :support-account-switcher? support-account-switcher?
+                            :button-props              button-props})))
        (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
-     (and support-account-switcher? (= content :account-switcher))
-     [account-switcher-content account-switcher]
-
-     (coll? content)
+   (when (coll? content)
     (into [rn/view {:style style/right-actions-container}]
-           (add-right-buttons-xf max-actions background behind-overlay?)
-           content)
-
-     :else
-     nil)])
+           (add-right-buttons-xf max-actions background behind-overlay? support-account-switcher?)
+           content))])

 (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
-       :content          right-side
-       :max-actions      3
-       :behind-overlay?  behind-overlay?
-       :account-switcher account-switcher}]]
+      {:background      background
+       :content         right-side
+       :max-actions     3
+       :behind-overlay? behind-overlay?}]]

    :title
    (let [centered? (= text-align :center)]
      [page-nav-base props
       [title-center (assoc props :centered? centered?)]
       [right-content
-        {:background       background
-         :content          right-side
-         :max-actions      (if centered? 1 3)
-         :min-size?        centered?
-         :account-switcher account-switcher}]])
+        {:background  background
+         :content     right-side
+         :max-actions (if centered? 1 3)
+         :min-size?   centered?}]])

    :dropdown
    [page-nav-base props
@ -291,10 +288,9 @@
    [page-nav-base props
     [token-center props]
     [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      3
-       :account-switcher account-switcher}]]
+      {:background  background
+       :content     right-side
+       :max-actions 3}]]

    :channel
    [page-nav-base props
@ -318,11 +314,10 @@
    [page-nav-base props
     [wallet-networks-center props]
     [right-content
-      {:background       background
-       :content          right-side
-       :max-actions      1
-       :min-size?        true
-       :account-switcher account-switcher}]]
+      {:background  background
+       :content     right-side
+       :max-actions 3
+       :min-size?   true}]]

    (:community :network)
    [page-nav-base props
--- a/src/status_im/contexts/preview/quo/navigation/page_nav.cljs
+++ b/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"}]))
-
-(def account-switcher
-  {:key :account-switcher})
+      :value "3 actions"}
+     {:key   (conj (take 1 options) account-switcher-option)
+      :value "1 action + 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
--- a/src/status_im/contexts/wallet/common/account_switcher/view.cljs
+++ b/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
-      :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)}}]))
+      :right-side          [(when (and (ff/enabled? ::ff/wallet.wallet-connect)
+                                       (not watch-only?))
+                              {:icon-name :i/dapps
+                               :on-press  #(rf/dispatch [:navigate-to :screen/wallet.connected-dapps])})
+
+                            {: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)}]}]))
--- a/src/status_im/contexts/wallet/connected_dapps/style.cljs
+++ b/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})
--- a/src/status_im/contexts/wallet/connected_dapps/view.cljs
+++ b/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"}]])
--- a/src/status_im/navigation/screens.cljs
+++ b/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}