Connected dApps: make right side of page-nav accomodate whatever we need

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

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

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,21 +19,27 @@
  [{: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
  :on-press on-press
  :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)}]}]))

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}