From b4a0e74a4a4e749282a3326d8c4bd622c3a491c6 Mon Sep 17 00:00:00 2001 From: Sean Hagstrom Date: Wed, 5 Jun 2024 12:17:14 +0100 Subject: [PATCH] Feature: add wallet network settings to app settings (#20254) * tweak(wallet-network-settings): update testnet label for optimism network * chore: feature-flag saved-addresses inside wallet settings * chore: remove feature-flag for network-settings inside wallet settings * chore: remove feature-flag for wallet-settings inside settings * tweak: adjust vertical spacing on wallet-network settings screen * chore: update information-box component with shell theme * tweak: add blur styling to testnet bottom-sheet * fix: ensure testnet-mode toggle is consistent * tweak: implement blur background override for bottom-sheet * tweak: change the blur background color for the overlay component * fix: adjust alignment between categories and labels --- .../info/information_box/style.cljs | 13 ++++++++++ .../components/info/information_box/view.cljs | 4 +-- src/quo/components/overlay/style.cljs | 2 +- .../components/settings/category/style.cljs | 14 +++++----- src/quo/foundations/colors.cljs | 3 +++ src/status_im/common/bottom_sheet/style.cljs | 7 +++-- src/status_im/common/bottom_sheet/view.cljs | 4 +-- .../contexts/profile/settings/list_items.cljs | 14 +++++----- .../wallet/network_settings/style.cljs | 2 +- .../network_settings/testnet_mode/view.cljs | 19 +++++++++----- .../wallet/network_settings/view.cljs | 26 ++++++++++++------- .../settings/wallet/wallet_options/view.cljs | 17 ++++++------ src/status_im/feature_flags.cljs | 3 --- 13 files changed, 77 insertions(+), 51 deletions(-) diff --git a/src/quo/components/info/information_box/style.cljs b/src/quo/components/info/information_box/style.cljs index 026e1f8898..4e258e59c7 100644 --- a/src/quo/components/info/information_box/style.cljs +++ b/src/quo/components/info/information_box/style.cljs @@ -28,6 +28,19 @@ :border colors/danger-50-opa-10 :icon colors/danger-50 :text colors/danger-50} + :close-button colors/white} + :shell {:default {:bg colors/white-opa-5 + :border colors/white-opa-10 + :icon colors/white-opa-70 + :text colors/white} + :informative {:bg colors/primary-50-opa-5 + :border colors/primary-50-opa-10 + :icon colors/primary-50 + :text colors/white} + :error {:bg colors/danger-50-opa-5 + :border colors/danger-50-opa-10 + :icon colors/danger-50 + :text colors/danger-50} :close-button colors/white}}) (defn get-color diff --git a/src/quo/components/info/information_box/view.cljs b/src/quo/components/info/information_box/view.cljs index 2ddae9693b..dfacb33303 100644 --- a/src/quo/components/info/information_box/view.cljs +++ b/src/quo/components/info/information_box/view.cljs @@ -53,11 +53,11 @@ :button-label string :on-button-press function :on-close function" - [{:keys [type closed? icon style button-label + [{:keys [type closed? blur? icon style button-label on-button-press on-close no-icon-color? icon-size]} message] (when-not closed? - (let [theme (quo.theme/use-theme) + (let [theme (if blur? :shell (quo.theme/use-theme)) include-button? (not (string/blank? button-label))] [rn/view {:accessibility-label :information-box diff --git a/src/quo/components/overlay/style.cljs b/src/quo/components/overlay/style.cljs index 471bbebe09..ed1e51214f 100644 --- a/src/quo/components/overlay/style.cljs +++ b/src/quo/components/overlay/style.cljs @@ -4,7 +4,7 @@ (defn overlay-background [type] (let [background-color (case type - :shell colors/neutral-80-opa-80-blur + :shell colors/overlay-background-blur :drawer colors/neutral-100-opa-70-blur nil)] {:position :absolute diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index 73377f8807..ade6924d91 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -7,13 +7,12 @@ {:left 0 :right 0 :padding-horizontal 20 - :padding-top (when label 12) + :padding-top (if label 12 8) :padding-bottom 8}) (defn settings-items - [{:keys [label blur?]} theme] - {:margin-top (if label 12 4) - :border-radius 16 + [{:keys [blur?]} theme] + {:border-radius 16 :background-color (if blur? colors/white-opa-5 (colors/theme-colors colors/white colors/neutral-95 theme)) @@ -24,9 +23,10 @@ (defn label [{:keys [blur?]} theme] - {:color (if blur? - colors/white-opa-40 - (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) + {:margin-bottom 12 + :color (if blur? + colors/white-opa-40 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}) (def reorder-items {:margin-top 12}) diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index 2bf157a597..4ba5ee0c4e 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -141,6 +141,9 @@ (def neutral-95-opa-70-blur neutral-95-opa-70) (def neutral-100-opa-70-blur (if platform/android? neutral-100-opa-70 "#0D1014B3")) +(def overlay-background-blur (if platform/android? (alpha "#192438" 0.8) "#242830cc")) +(def bottom-sheet-background-blur (if platform/ios? "#ED9D1D0D" neutral-100-opa-90)) + ;;;;Black ;;Solid diff --git a/src/status_im/common/bottom_sheet/style.cljs b/src/status_im/common/bottom_sheet/style.cljs index 0f08b9401c..a4e8cb7c7f 100644 --- a/src/status_im/common/bottom_sheet/style.cljs +++ b/src/status_im/common/bottom_sheet/style.cljs @@ -23,9 +23,12 @@ :left 0 :right 0}) -(def shell-bg +(defn shell-bg + [blur-background] {:position :absolute - :background-color (if platform/ios? colors/white-opa-5 colors/neutral-100-opa-90) + :background-color (if blur-background + blur-background + (if platform/ios? colors/white-opa-5 colors/neutral-100-opa-90)) :left 0 :right 0 :top 0 diff --git a/src/status_im/common/bottom_sheet/view.cljs b/src/status_im/common/bottom_sheet/view.cljs index 905f1bcb5f..f982b619de 100644 --- a/src/status_im/common/bottom_sheet/view.cljs +++ b/src/status_im/common/bottom_sheet/view.cljs @@ -64,7 +64,7 @@ (defn view [{:keys [hide? insets]} {:keys [content selected-item padding-bottom-override border-radius on-close shell? - gradient-cover? customization-color hide-handle? blur-radius] + gradient-cover? customization-color hide-handle? blur-radius blur-background] :or {border-radius 12}}] (let [theme (quo.theme/use-theme) {window-height :height} (rn/get-window) @@ -134,7 +134,7 @@ (style/sheet {:max-height sheet-max-height}))} (when shell? [blur/ios-view - {:style style/shell-bg + {:style (style/shell-bg blur-background) :blur-radius (or blur-radius 20) :blur-amount 32 :blur-type :transparent diff --git a/src/status_im/contexts/profile/settings/list_items.cljs b/src/status_im/contexts/profile/settings/list_items.cljs index 35fe3b1d82..8c298513e5 100644 --- a/src/status_im/contexts/profile/settings/list_items.cljs +++ b/src/status_im/contexts/profile/settings/list_items.cljs @@ -1,7 +1,6 @@ (ns status-im.contexts.profile.settings.list-items (:require [status-im.common.not-implemented :as not-implemented] [status-im.config :as config] - [status-im.feature-flags :as ff] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -35,13 +34,12 @@ :image :icon :blur? true :action :arrow} - {:title (i18n/label :t/wallet) - :on-press #(rf/dispatch [:navigate-to-within-stack [:screen/settings.wallet :screen/settings]]) - :image-props :i/wallet - :image :icon - :blur? true - :action :arrow - :feature-flag ::ff/settings.wallet-settings} + {:title (i18n/label :t/wallet) + :on-press #(rf/dispatch [:navigate-to-within-stack [:screen/settings.wallet :screen/settings]]) + :image-props :i/wallet + :image :icon + :blur? true + :action :arrow} (when config/show-not-implemented-features? {:title (i18n/label :t/dapps) :on-press not-implemented/alert diff --git a/src/status_im/contexts/settings/wallet/network_settings/style.cljs b/src/status_im/contexts/settings/wallet/network_settings/style.cljs index 9193294fa9..85e7314b30 100644 --- a/src/status_im/contexts/settings/wallet/network_settings/style.cljs +++ b/src/status_im/contexts/settings/wallet/network_settings/style.cljs @@ -3,7 +3,7 @@ (def title-container {:padding-horizontal 20 - :margin-vertical 12}) + :padding-vertical 12}) (defn page-wrapper [inset-top] diff --git a/src/status_im/contexts/settings/wallet/network_settings/testnet_mode/view.cljs b/src/status_im/contexts/settings/wallet/network_settings/testnet_mode/view.cljs index 33bb888372..e1008782fb 100644 --- a/src/status_im/contexts/settings/wallet/network_settings/testnet_mode/view.cljs +++ b/src/status_im/contexts/settings/wallet/network_settings/testnet_mode/view.cljs @@ -19,21 +19,24 @@ (rf/dispatch [:profile.settings/profile-update :test-networks-enabled? enable? {:on-success logout}])) (defn testnet-mode-confirm-change-sheet - [{:keys [title description on-confirm on-cancel]}] + [{:keys [title blur? description on-confirm on-cancel]}] (let [customization-color (rf/sub [:profile/customization-color])] [:<> [quo/drawer-top {:title title + :blur? blur? :container-style style/drawer-top}] [quo/text {:style style/description} description] [rn/view {:style style/info-box-container} [quo/information-box - {:type :default - :icon :i/info} + {:type :default + :blur? blur? + :icon :i/info} (i18n/label :t/change-testnet-mode-logout-info)]] [quo/bottom-actions {:container-style {:style style/bottom-actions-container} :actions :two-actions + :blur? blur? :button-one-label (i18n/label :t/confirm) :button-one-props {:accessibility-label :confirm-testnet-mode-change :on-press on-confirm @@ -41,22 +44,24 @@ :customization-color customization-color} :button-two-label (i18n/label :t/cancel) :button-two-props {:accessibility-label :cancel-testnet-mode-change - :type :dark-grey + :type :grey :on-press on-cancel}}]])) (defn view - [{:keys [enable?]}] + [{:keys [enable? blur?]}] (let [on-confirm (rn/use-callback #(on-confirm-change enable?) [enable?])] (if enable? [testnet-mode-confirm-change-sheet - {:title (i18n/label :t/turn-on-testnet-mode) + {:blur? blur? + :title (i18n/label :t/turn-on-testnet-mode) :description (i18n/label :t/testnet-mode-enable-description) :on-confirm on-confirm :on-cancel hide-bottom-sheet}] [testnet-mode-confirm-change-sheet - {:title (i18n/label :t/turn-off-testnet-mode) + {:blur? blur? + :title (i18n/label :t/turn-off-testnet-mode) :description (i18n/label :t/testnet-mode-disable-description) :on-confirm on-confirm :on-cancel hide-bottom-sheet}]))) diff --git a/src/status_im/contexts/settings/wallet/network_settings/view.cljs b/src/status_im/contexts/settings/wallet/network_settings/view.cljs index a8cf9b06fe..bbee8f92c1 100644 --- a/src/status_im/contexts/settings/wallet/network_settings/view.cljs +++ b/src/status_im/contexts/settings/wallet/network_settings/view.cljs @@ -1,5 +1,6 @@ (ns status-im.contexts.settings.wallet.network-settings.view (:require [quo.core :as quo] + [quo.foundations.colors :as colors] [quo.foundations.resources :as resources] [quo.theme] [react-native.core :as rn] @@ -44,9 +45,7 @@ :data (map make-network-settings-item [{:details (:optimism networks) :testnet-mode? testnet-mode? - :testnet-label [quo/text - {:style style/testnet-not-available} - (i18n/label :t/testnet-not-available)]} + :testnet-label (i18n/label :t/sepolia-active)} {:details (:arbitrum networks) :testnet-mode? testnet-mode? :testnet-label (i18n/label :t/sepolia-active)}]) @@ -56,9 +55,9 @@ (defn testnet-mode-setting [{:keys [testnet-mode? on-enable on-disable]}] (let [on-change-testnet (rn/use-callback - (fn [active?] - (if active? (on-enable) (on-disable))) - [on-enable on-disable])] + (fn [] + (if-not testnet-mode? (on-enable) (on-disable))) + [testnet-mode? on-enable on-disable])] {:blur? true :title (i18n/label :t/testnet-mode) :action :selector @@ -79,25 +78,32 @@ :list-type :settings}]) (defn on-change-testnet - [{:keys [enable? theme]}] + [{:keys [enable? blur? theme]}] (rf/dispatch [:show-bottom-sheet - {:content (fn [] [testnet/view {:enable? enable?}]) - :theme theme}])) + {:content (fn [] [testnet/view + {:enable? enable? + :blur? blur?}]) + :theme theme + :shell? blur? + :blur-background colors/bottom-sheet-background-blur}])) (defn view [] - (let [insets (safe-area/get-insets) + (let [blur? true + insets (safe-area/get-insets) theme (quo.theme/use-theme) networks-by-name (rf/sub [:wallet/network-details-by-network-name]) testnet-mode? (rf/sub [:profile/test-networks-enabled?]) enable-testnet (rn/use-callback (fn [] (on-change-testnet {:theme theme + :blur? blur? :enable? true})) [theme]) disable-testnet (rn/use-callback (fn [] (on-change-testnet {:theme theme + :blur? blur? :enable? false})) [theme])] [quo/overlay diff --git a/src/status_im/contexts/settings/wallet/wallet_options/view.cljs b/src/status_im/contexts/settings/wallet/wallet_options/view.cljs index cfb356185a..fe5a9b2db9 100644 --- a/src/status_im/contexts/settings/wallet/wallet_options/view.cljs +++ b/src/status_im/contexts/settings/wallet/wallet_options/view.cljs @@ -49,13 +49,12 @@ (defn advanced-settings [] - (when (ff/enabled? ::ff/settings.network-settings) - [quo/category - {:key :advanced-wallet-settings - :label (i18n/label :t/advanced) - :data (advanced-settings-options) - :blur? true - :list-type :settings}])) + [quo/category + {:key :advanced-wallet-settings + :label (i18n/label :t/advanced) + :data (advanced-settings-options) + :blur? true + :list-type :settings}]) (defn navigate-back [] @@ -75,5 +74,7 @@ [quo/page-top {:title (i18n/label :t/wallet) :title-accessibility-label :wallet-settings-header}] - [basic-settings] + (when (or (ff/enabled? ::ff/settings.keypairs-and-accounts) + (ff/enabled? ::ff/settings.saved-addresses)) + [basic-settings]) [advanced-settings]])) diff --git a/src/status_im/feature_flags.cljs b/src/status_im/feature_flags.cljs index 5612e8f106..c809f5443f 100644 --- a/src/status_im/feature_flags.cljs +++ b/src/status_im/feature_flags.cljs @@ -11,11 +11,8 @@ (def ^:private initial-flags {::community.edit-account-selection (enabled-in-env? :FLAG_EDIT_ACCOUNT_SELECTION_ENABLED) - ::settings.wallet-settings (enabled-in-env? :FLAG_WALLET_SETTINGS_ENABLED) ::settings.keypairs-and-accounts (enabled-in-env? :FLAG_WALLET_SETTINGS_KEYPAIRS_AND_ACCOUNTS_ENABLED) - ::settings.network-settings (enabled-in-env? - :FLAG_WALLET_SETTINGS_NETWORK_SETTINGS_ENABLED) ::settings.saved-addresses (enabled-in-env? :FLAG_WALLET_SETTINGS_SAVED_ADDRESSES_ENABLED) ::shell.jump-to (enabled-in-env? :ENABLE_JUMP_TO)