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

[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>
This commit is contained in:
Mohamed Javid 2024-02-14 15:37:04 +05:30 committed by GitHub
parent 357db52720
commit f762cdcf9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 124 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/navigation/page_nav/view.cljs
View File

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

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

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

2
src/status_im/constants.cljs
View File

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

4
src/status_im/contexts/wallet/account/view.cljs
View File

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

12
src/status_im/contexts/wallet/common/account_switcher/view.cljs
View File

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

54
src/status_im/contexts/wallet/common/sheets/network_filter/view.cljs Normal file
View File

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

52
src/status_im/contexts/wallet/common/sheets/network_preferences/view.cljs
View File

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

21
src/status_im/contexts/wallet/common/utils.cljs
View File

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

2
src/status_im/contexts/wallet/events.cljs
View File

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

16
src/status_im/contexts/wallet/home/view.cljs
View File

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

3
src/status_im/feature_flags.cljs
View File

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

3
translations/en.json
View File

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