[Feature] Wallet - Network filter UI in Wallet home and account screens (#18772)

This commit adds network filter UI in the Wallet home and account screens.

---------

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/quo/components/navigation/page_nav/view.cljs

@@ -311,7 +311,7 @@
     - title
     - description
     - picture: a valid rn/image `:source` value
-  `:wallet-network`
+  `:wallet-networks`
     - networks: a vector of network image source
     - networks-on-press: a callback
   `:community`

src/quo/components/settings/category/style.cljs

@@ -11,8 +11,8 @@
    :padding-bottom     8})
 
 (defn settings-items
-  [{:keys [blur? theme]}]
+  [{:keys [label blur? theme]}]
-  {:margin-top       12
+  {:margin-top       (if label 12 4)
    :border-radius    16
    :background-color (if blur?
                        colors/white-opa-5

src/status_im/constants.cljs

@@ -432,6 +432,8 @@
 (def ^:const optimism-network-name :optimism)
 (def ^:const arbitrum-network-name :arbitrum)
 
+(def ^:const default-network-names #{mainnet-network-name optimism-network-name arbitrum-network-name})
+
 (def ^:const chain-id-separator ":")
 
 (def ^:const account-default-customization-color :blue)

src/status_im/contexts/wallet/account/view.cljs

@@ -38,7 +38,9 @@
       (let [{:keys [name color formatted-balance
                     watch-only?]} (rf/sub [:wallet/current-viewing-account])]
         [rn/view {:style {:flex 1}}
-         [account-switcher/view {:on-press #(rf/dispatch [:wallet/close-account-page])}]
+         [account-switcher/view
+          {:type     :wallet-networks
+           :on-press #(rf/dispatch [:wallet/close-account-page])}]
          [quo/account-overview
           {:current-value       formatted-balance
            :account-name        name

src/status_im/contexts/wallet/common/account_switcher/view.cljs

@@ -1,7 +1,9 @@
 (ns status-im.contexts.wallet.common.account-switcher.view
   (:require [quo.core :as quo]
             [status-im.contexts.wallet.common.sheets.account-options.view :as account-options]
+            [status-im.contexts.wallet.common.sheets.network-filter.view :as network-filter]
             [status-im.contexts.wallet.common.sheets.select-account.view :as select-account]
+            [status-im.feature-flags :as ff]
             [utils.re-frame :as rf]))
 
 (defn get-bottom-sheet-args
@@ -13,20 +15,24 @@
     nil))
 
 (defn view
-  [{:keys [on-press accessibility-label icon-name switcher-type margin-top]
+  [{: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}}]
   (let [{:keys [color emoji watch-only?]} (rf/sub [:wallet/current-viewing-account])
         networks                          (rf/sub [:wallet/network-details])]
     [quo/page-nav
-     {:icon-name           icon-name
+     {:type                (or type :no-title)
+      :icon-name           icon-name
       :margin-top          margin-top
       :background          :blur
       :on-press            on-press
       :accessibility-label accessibility-label
       :networks            networks
-      :networks-on-press   #(js/alert "Pressed Networks")
+      :networks-on-press   #(ff/alert ::ff/wallet.network-filter
+                                      (fn []
+                                        (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

src/status_im/contexts/wallet/common/sheets/network_filter/view.cljs

@@ -0,0 +1,54 @@
+(ns status-im.contexts.wallet.common.sheets.network-filter.view
+  (:require
+    [quo.core :as quo]
+    [reagent.core :as reagent]
+    [status-im.constants :as constants]
+    [status-im.contexts.wallet.common.utils :as utils]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [state             (reagent/atom :default)
+        networks-selected (reagent/atom #{})
+        toggle-network    (fn [network-name]
+                            (reset! state :changed)
+                            (if (contains? @networks-selected
+                                           network-name)
+                              (swap! networks-selected disj
+                                network-name)
+                              (swap! networks-selected conj
+                                network-name)))
+        get-networks      (fn []
+                            (if (= @state :default)
+                              constants/default-network-names
+                              @networks-selected))]
+    (fn []
+      (let [color            (rf/sub [:profile/customization-color])
+            network-details  (rf/sub [:wallet/network-details])
+            mainnet          (first network-details)
+            layer-2-networks (rest network-details)]
+        [:<>
+         [quo/drawer-top {:title (i18n/label :t/select-networks)}]
+         [quo/category
+          {:list-type :settings
+           :data      [(utils/make-network-item mainnet
+                                                {:state       @state
+                                                 :title       (i18n/label :t/mainnet)
+                                                 :color       color
+                                                 :networks    (get-networks)
+                                                 :on-change   #(toggle-network (:network-name
+                                                                                mainnet))
+                                                 :label-props "$0.00"})]}]
+         [quo/category
+          {:list-type :settings
+           :label     (i18n/label :t/layer-2)
+           :data      (mapv (fn [network]
+                              (utils/make-network-item network
+                                                       {:state       @state
+                                                        :color       color
+                                                        :networks    (get-networks)
+                                                        :on-change   #(toggle-network (:network-name
+                                                                                       network))
+                                                        :label-props "$0.00"}))
+                            layer-2-networks)}]]))))

src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs

@@ -1,32 +1,14 @@
 (ns status-im.contexts.wallet.common.sheets.network-preferences.view
-  (:require [clojure.string :as string]
+  (:require [quo.core :as quo]
-            [quo.core :as quo]
             [quo.foundations.colors :as colors]
-            [quo.foundations.resources :as resources]
             [quo.theme :as quo.theme]
             [react-native.blur :as blur]
             [reagent.core :as reagent]
             [status-im.contexts.wallet.common.sheets.network-preferences.style :as style]
+            [status-im.contexts.wallet.common.utils :as utils]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-
-(defn- make-network-item
-  [{:keys [network-name] :as _network}
-   {:keys [title color on-change network-preferences state blur?] :as _options}]
-  {:title        (or title (string/capitalize (name network-name)))
-   :blur?        blur?
-   :image        :icon-avatar
-   :image-props  {:icon (resources/get-network network-name)
-                  :size :size-20}
-   :action       :selector
-   :action-props {:type                (if (= :default state)
-                                         :filled-checkbox
-                                         :checkbox)
-                  :customization-color color
-                  :checked?            (contains? network-preferences network-name)
-                  :on-change           on-change}})
-
 (defn- view-internal
   [{:keys [selected-networks watch-only?]}]
   (let [state                               (reagent/atom :default)
@@ -88,12 +70,12 @@
          [quo/category
           {:list-type :settings
            :blur?     blur?
-           :data      [(make-network-item mainnet
+           :data      [(utils/make-network-item mainnet
                                                 {:state     @state
                                                  :title     (i18n/label :t/mainnet)
                                                  :color     color
                                                  :blur?     blur?
-                                           :network-preferences (get-current-preferences-names)
+                                                 :networks  (get-current-preferences-names)
                                                  :on-change #(toggle-network (:network-name
                                                                               mainnet))})]}]
          [quo/category
@@ -101,11 +83,11 @@
            :blur?     blur?
            :label     (i18n/label :t/layer-2)
            :data      (mapv (fn [network]
-                              (make-network-item network
+                              (utils/make-network-item network
                                                        {:state     @state
                                                         :color     color
                                                         :blur?     blur?
-                                                  :network-preferences (get-current-preferences-names)
+                                                        :networks  (get-current-preferences-names)
                                                         :on-change #(toggle-network (:network-name
                                                                                      network))}))
                             layer-2-networks)}]

src/status_im/contexts/wallet/common/utils.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.common.utils
   (:require [clojure.string :as string]
+            [quo.foundations.resources :as resources]
             [status-im.common.qr-codes.view :as qr-codes]
             [status-im.constants :as constants]
             [utils.money :as money]
@@ -274,3 +275,23 @@
 (defn get-balance-for-chain
   [data chain-id]
   (some #(when (= chain-id (:chain-id %)) %) (vals data)))
+
+(defn make-network-item
+  "This function generates props for quo/category component item"
+  [{:keys [network-name] :as _network}
+   {:keys [title color on-change networks state label-props] :as _options}]
+  (cond-> {:title        (or title (string/capitalize (name network-name)))
+           :image        :icon-avatar
+           :image-props  {:icon (resources/get-network network-name)
+                          :size :size-20}
+           :action       :selector
+           :action-props {:type                (if (= :default state)
+                                                 :filled-checkbox
+                                                 :checkbox)
+                          :customization-color color
+                          :checked?            (contains? networks network-name)
+                          :on-change           on-change}}
+
+    label-props
+    (assoc :label       :text
+           :label-props label-props)))

src/status_im/contexts/wallet/events.cljs

@@ -280,8 +280,6 @@
                                                [])
                :wallet/valid-ens-or-address? (boolean result))}))
 
-
-
 (rf/reg-event-fx :wallet/fetch-address-suggestions
  (fn [{:keys [db]} [_address]]
    {:db (assoc db

src/status_im/contexts/wallet/home/view.cljs

@@ -4,8 +4,10 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im.common.home.top-nav.view :as common.top-nav]
+    [status-im.contexts.wallet.common.sheets.network-filter.view :as network-filter]
     [status-im.contexts.wallet.home.style :as style]
     [status-im.contexts.wallet.home.tabs.view :as tabs]
+    [status-im.feature-flags :as ff]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -52,7 +54,11 @@
             :time-frame        :none
             :metrics           :none
             :balance           formatted-balance
-            :networks   networks}]]
+            :networks          networks
+            :dropdown-on-press #(ff/alert ::ff/wallet.network-filter
+                                          (fn []
+                                            (rf/dispatch [:show-bottom-sheet
+                                                          {:content network-filter/view}])))}]]
          [quo/wallet-graph {:time-frame :empty}]
          [rn/flat-list
           {:style                             style/accounts-list

src/status_im/feature_flags.cljs

@@ -12,7 +12,8 @@
   (reagent/atom
    {::wallet.edit-default-keypair (enabled-in-env? :FLAG_EDIT_DEFAULT_KEYPAIR_ENABLED)
     ::wallet.bridge-token         (enabled-in-env? :FLAG_BRIDGE_TOKEN_ENABLED)
-    ::wallet.remove-account       (enabled-in-env? :FLAG_REMOVE_ACCOUNT_ENABLED)}))
+    ::wallet.remove-account       (enabled-in-env? :FLAG_REMOVE_ACCOUNT_ENABLED)
+    ::wallet.network-filter       (enabled-in-env? :FLAG_NETWORK_FILTER_ENABLED)}))
 
 (defn feature-flags [] @feature-flags-config)
 

translations/en.json

@@ -2504,5 +2504,6 @@
     "origin-header": "Origin",
     "origin-desc": "Origin is where your key pair (your private and public key) comes from. You can generate a new key pair or import an existing private key.",
     "derivation-path-header": "Derivation path",
-    "derivation-path-desc": "Derivation paths are the routes your Status Wallet uses to generate addresses from your private key."
+    "derivation-path-desc": "Derivation paths are the routes your Status Wallet uses to generate addresses from your private key.",
+    "select-networks": "Select networks"
 }