From f762cdcf9bb66d336df65194cef637044c1360f8 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Wed, 14 Feb 2024 15:37:04 +0530 Subject: [PATCH] [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> --- .../components/navigation/page_nav/view.cljs | 2 +- .../components/settings/category/style.cljs | 4 +- src/status_im/constants.cljs | 2 + .../contexts/wallet/account/view.cljs | 4 +- .../wallet/common/account_switcher/view.cljs | 12 +++-- .../common/sheets/network_filter/view.cljs | 54 +++++++++++++++++++ .../sheets/network_preferences/view.cljs | 52 ++++++------------ .../contexts/wallet/common/utils.cljs | 21 ++++++++ src/status_im/contexts/wallet/events.cljs | 2 - src/status_im/contexts/wallet/home/view.cljs | 16 ++++-- src/status_im/feature_flags.cljs | 3 +- translations/en.json | 3 +- 12 files changed, 124 insertions(+), 51 deletions(-) create mode 100644 src/status_im/contexts/wallet/common/sheets/network_filter/view.cljs diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs index 077f086c8f..64abd6445e 100644 --- a/src/quo/components/navigation/page_nav/view.cljs +++ b/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` diff --git a/src/quo/components/settings/category/style.cljs b/src/quo/components/settings/category/style.cljs index e10db83a51..3aad999e0c 100644 --- a/src/quo/components/settings/category/style.cljs +++ b/src/quo/components/settings/category/style.cljs @@ -11,8 +11,8 @@ :padding-bottom 8}) (defn settings-items - [{:keys [blur? theme]}] - {:margin-top 12 + [{:keys [label blur? theme]}] + {:margin-top (if label 12 4) :border-radius 16 :background-color (if blur? colors/white-opa-5 diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs index 3af7323fbd..082a3af563 100644 --- a/src/status_im/constants.cljs +++ b/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) diff --git a/src/status_im/contexts/wallet/account/view.cljs b/src/status_im/contexts/wallet/account/view.cljs index fa7f0d352d..364016b47f 100644 --- a/src/status_im/contexts/wallet/account/view.cljs +++ b/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 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 da90d8a0fa..9990675cb7 100644 --- a/src/status_im/contexts/wallet/common/account_switcher/view.cljs +++ b/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 diff --git a/src/status_im/contexts/wallet/common/sheets/network_filter/view.cljs b/src/status_im/contexts/wallet/common/sheets/network_filter/view.cljs new file mode 100644 index 0000000000..0c192e2328 --- /dev/null +++ b/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)}]])))) diff --git a/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs index 23dcde4b64..b1981d1614 100644 --- a/src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs +++ b/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] - [quo.core :as quo] + (:require [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,26 +70,26 @@ [quo/category {:list-type :settings :blur? blur? - :data [(make-network-item mainnet - {:state @state - :title (i18n/label :t/mainnet) - :color color - :blur? blur? - :network-preferences (get-current-preferences-names) - :on-change #(toggle-network (:network-name - mainnet))})]}] + :data [(utils/make-network-item mainnet + {:state @state + :title (i18n/label :t/mainnet) + :color color + :blur? blur? + :networks (get-current-preferences-names) + :on-change #(toggle-network (:network-name + mainnet))})]}] [quo/category {:list-type :settings :blur? blur? :label (i18n/label :t/layer-2) :data (mapv (fn [network] - (make-network-item network - {:state @state - :color color - :blur? blur? - :network-preferences (get-current-preferences-names) - :on-change #(toggle-network (:network-name - network))})) + (utils/make-network-item network + {:state @state + :color color + :blur? blur? + :networks (get-current-preferences-names) + :on-change #(toggle-network (:network-name + network))})) layer-2-networks)}] [quo/bottom-actions {:actions :one-action diff --git a/src/status_im/contexts/wallet/common/utils.cljs b/src/status_im/contexts/wallet/common/utils.cljs index 01e4073d16..4cb2c75531 100644 --- a/src/status_im/contexts/wallet/common/utils.cljs +++ b/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))) diff --git a/src/status_im/contexts/wallet/events.cljs b/src/status_im/contexts/wallet/events.cljs index 2dcbc7689f..c755e3991a 100644 --- a/src/status_im/contexts/wallet/events.cljs +++ b/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 diff --git a/src/status_im/contexts/wallet/home/view.cljs b/src/status_im/contexts/wallet/home/view.cljs index e8bd82df9d..611fc6c31c 100644 --- a/src/status_im/contexts/wallet/home/view.cljs +++ b/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])) @@ -48,11 +50,15 @@ [common.top-nav/view] [rn/view {:style style/overview-container} [quo/wallet-overview - {:state (if tokens-loading? :loading :default) - :time-frame :none - :metrics :none - :balance formatted-balance - :networks networks}]] + {:state (if tokens-loading? :loading :default) + :time-frame :none + :metrics :none + :balance formatted-balance + :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 diff --git a/src/status_im/feature_flags.cljs b/src/status_im/feature_flags.cljs index 1b28d26ae5..ecd3ba0323 100644 --- a/src/status_im/feature_flags.cljs +++ b/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) diff --git a/translations/en.json b/translations/en.json index 9f9c7acfe4..b181cbcda4 100644 --- a/translations/en.json +++ b/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" }