diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs index ae41e10347..12b33c81d7 100644 --- 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 diff --git a/src/status_im/contexts/preview/quo/navigation/page_nav.cljs b/src/status_im/contexts/preview/quo/navigation/page_nav.cljs index 805bed1604..05cebe6d66 100644 --- 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 diff --git a/src/status_im/contexts/wallet/common/account_switcher/view.cljs b/src/status_im/contexts/wallet/common/account_switcher/view.cljs index e7c45022cc..314fdcd210 100644 --- 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)}]}])) diff --git a/src/status_im/contexts/wallet/connected_dapps/style.cljs b/src/status_im/contexts/wallet/connected_dapps/style.cljs new file mode 100644 index 0000000000..068690f329 --- /dev/null +++ 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}) diff --git a/src/status_im/contexts/wallet/connected_dapps/view.cljs b/src/status_im/contexts/wallet/connected_dapps/view.cljs new file mode 100644 index 0000000000..1fa004a343 --- /dev/null +++ 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"}]]) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 3441576c01..c2fd8d9948 100644 --- 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}