status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Sean Hagstrom 2024-06-05 12:17:14 +01:00 committed by GitHub
parent 379ba87c16
commit b4a0e74a4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 77 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/quo/components/info/information_box/style.cljs
View File

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

4
src/quo/components/info/information_box/view.cljs
View File

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

2
src/quo/components/overlay/style.cljs
View File

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

14
src/quo/components/settings/category/style.cljs
View File

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

3
src/quo/foundations/colors.cljs
View File

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

7
src/status_im/common/bottom_sheet/style.cljs
View File

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

4
src/status_im/common/bottom_sheet/view.cljs
View File

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

14
src/status_im/contexts/profile/settings/list_items.cljs
View File

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

2
src/status_im/contexts/settings/wallet/network_settings/style.cljs
View File

@ -3,7 +3,7 @@
(def title-container
{:padding-horizontal 20
:margin-vertical 12})
:padding-vertical 12})
(defn page-wrapper
[inset-top]

19
src/status_im/contexts/settings/wallet/network_settings/testnet_mode/view.cljs
View File

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

26
src/status_im/contexts/settings/wallet/network_settings/view.cljs
View File

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

17
src/status_im/contexts/settings/wallet/wallet_options/view.cljs
View File

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

3
src/status_im/feature_flags.cljs
View File

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