Feature: add wallet network settings to app settings

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

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

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

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

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

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

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

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

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]

src/status_im/contexts/settings/wallet/network_settings/testnet_mode/view.cljs

@@ -19,44 +19,49 @@
   (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
                           :type                :primary
                           :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}])))

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

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

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)