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>

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)
+     [wallet-networks-center props]
-     [rn/view {:style (style/center-content-container true)}
-      [text/text
-       {:weight          :regular
-        :size            :paragraph-1
-        :number-of-lines 1}
-       "NETWORK DROPDOWN"]]
      [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

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

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]
+  (:require [quo2.core :as quo]
-            [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]
+            [utils.re-frame :as rf]))
-            [status-im2.contexts.wallet.account.style :as style]
+
-            [status-im2.contexts.wallet.account.tabs.view :as tabs]))
+(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
+        {:type              :wallet-networks
-         :mid-section           {:type :text-only :main-text ""}
+         :background        :blur
-         :left-section          {:type     :grey
+         :icon-name         :i/close
-                                 :icon     :i/close
+         :on-press          #(rf/dispatch [:navigate-back])
-                                 :on-press #(rf/dispatch [:navigate-back])}
+         :networks          networks-list
-         :right-section-buttons [{:type     :grey
+         :networks-on-press #(js/alert "Pressed Networks")
-                                  :label    "[WIP]"
+         :right-side        :account-switcher
-                                  :on-press #(rf/dispatch [:open-modal :how-to-pair])}]}]
+         :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