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
This commit is contained in:
Alexander 2024-05-13 15:50:50 +02:00 committed by GitHub
parent 33da4bfabc
commit 006824e0ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 136 additions and 79 deletions

View File

@ -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

View File

@ -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

View File

@ -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)}]}]))

View File

@ -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})

View File

@ -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"}]])

View File

@ -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}