From aef2f2cfedfbba02be068d4d912fe9d939c9746e Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Wed, 4 Oct 2023 16:48:34 +0800 Subject: [PATCH] Implement wallet-networks type to the page-nav component (#17485) This commit adds the wallet-networks type to the page-nav component. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> --- .../components/navigation/page_nav/view.cljs | 20 ++++++----- .../quo_preview/navigation/page_nav.cljs | 9 ++++- .../contexts/wallet/account/view.cljs | 34 ++++++++++++------- 3 files changed, 41 insertions(+), 22 deletions(-) diff --git a/src/quo2/components/navigation/page_nav/view.cljs b/src/quo2/components/navigation/page_nav/view.cljs index b7003c5641..cffcc4ab06 100644 --- a/src/quo2/components/navigation/page_nav/view.cljs +++ b/src/quo2/components/navigation/page_nav/view.cljs @@ -4,6 +4,7 @@ [quo2.components.buttons.button.properties :as button-properties] [quo2.components.dropdowns.dropdown.view :as dropdown] [quo2.components.dropdowns.dropdown.properties :as dropdown-properties] + [quo2.components.dropdowns.network-dropdown.view :as network-dropdown] [quo2.components.icon :as icons] [quo2.components.markdown.text :as text] [quo2.components.navigation.page-nav.style :as style] @@ -174,6 +175,14 @@ :number-of-lines 1} shown-name]])) +(defn- wallet-networks-center + [{:keys [networks networks-on-press background]}] + [rn/view {:style (style/center-content-container true)} + [network-dropdown/view + {:state :default + :on-press networks-on-press + :blur? (= background :blur)} networks]]) + (defn- view-internal "behind-overlay is necessary for us to know if the page-nav buttons are under the bottom sheet overlay or not." [{:keys [type right-side background text-align account-switcher behind-overlay?] @@ -237,13 +246,7 @@ :wallet-networks [page-nav-base props - ;; TODO: use wallet-networks when available (issue #16946) - [rn/view {:style (style/center-content-container true)} - [text/text - {:weight :regular - :size :paragraph-1 - :number-of-lines 1} - "NETWORK DROPDOWN"]] + [wallet-networks-center props] [right-content {:background background :content right-side @@ -305,7 +308,8 @@ - description - picture: a valid rn/image `:source` value `:wallet-network` - (Not implemented yet) + - networks: a vector of network image source + - networks-on-press: a callback `:community` - community-name - community-logo: a valid rn/image `:source` value diff --git a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs index 392ec13d83..2ce6a04c9d 100644 --- a/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/page_nav.cljs @@ -2,11 +2,17 @@ (:require [clojure.string :as string] [quo2.core :as quo] [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as quo.resources] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.common.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview])) +(def ^:private networks + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) + (def ^:private descriptor [{:key :type :type :select @@ -190,7 +196,8 @@ :network-logo (resources/get-mock-image :diamond) :account-switcher {:customization-color :purple :on-press #(js/alert "Pressed Account Switcher") - :emoji "🍑"}})] + :emoji "🍑"} + :networks networks})] (fn [] [preview/preview-container {:state state diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index ecdd796d01..906bd70b81 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -1,13 +1,19 @@ (ns status-im2.contexts.wallet.account.view - (:require [react-native.core :as rn] - [quo2.core :as quo] + (:require [quo2.core :as quo] + [quo2.foundations.resources :as quo.resources] + [react-native.core :as rn] [react-native.safe-area :as safe-area] [reagent.core :as reagent] + [status-im2.contexts.wallet.account.style :as style] + [status-im2.contexts.wallet.account.tabs.view :as tabs] [status-im2.contexts.wallet.common.temp :as temp] [utils.i18n :as i18n] - [utils.re-frame :as rf] - [status-im2.contexts.wallet.account.style :as style] - [status-im2.contexts.wallet.account.tabs.view :as tabs])) + [utils.re-frame :as rf])) + +(def ^:private networks-list + [{:source (quo.resources/get-network :ethereum)} + {:source (quo.resources/get-network :optimism)} + {:source (quo.resources/get-network :arbitrum)}]) (def tabs-data [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab} @@ -26,14 +32,16 @@ {:style {:flex 1 :margin-top top}} [quo/page-nav - {:align-mid? true - :mid-section {:type :text-only :main-text ""} - :left-section {:type :grey - :icon :i/close - :on-press #(rf/dispatch [:navigate-back])} - :right-section-buttons [{:type :grey - :label "[WIP]" - :on-press #(rf/dispatch [:open-modal :how-to-pair])}]}] + {:type :wallet-networks + :background :blur + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back]) + :networks networks-list + :networks-on-press #(js/alert "Pressed Networks") + :right-side :account-switcher + :account-switcher {:customization-color :purple + :on-press #(js/alert "Pressed Account Switcher") + :emoji "🍑"}}] [quo/account-overview temp/account-overview-state] [quo/wallet-graph {:time-frame :empty}] [quo/wallet-ctas