Add network-dropdown to wallet-overview component (#17440)

This commit adds the "network-dropdown" component to the "wallet-overview" component.

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

src/quo2/components/dropdowns/network_dropdown/style.cljs

@@ -4,10 +4,10 @@
 (defn container-border-color
   [{:keys [state blur? theme pressed?]}]
   (let [default-color (if blur?
-                        colors/neutral-80-opa-5
+                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))
         active-color  (if blur?
-                        colors/neutral-80-opa-10
+                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))]
     (condp = state
       :disabled default-color

src/quo2/components/wallet/wallet_overview/style.cljs

@@ -16,13 +16,6 @@
   {:flex-direction :row
    :padding-top    4})
 
-(def network-dropdown
-  {:border-color  colors/neutral-50
-   :border-width  1
-   :border-radius 10
-   :width         68
-   :height        32})
-
 (defn color-metrics
   [metrics theme]
   (if (= metrics :positive)

src/quo2/components/wallet/wallet_overview/view.cljs

@@ -1,10 +1,11 @@
 (ns quo2.components.wallet.wallet-overview.view
-  (:require [quo2.components.icon :as icons]
+  (:require [quo2.components.dropdowns.network-dropdown.view :as network-dropdown]
+            [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
-            [react-native.core :as rn]
-            [utils.i18n :as i18n]
             [quo2.components.wallet.wallet-overview.style :as style]
-            [quo2.theme :as quo.theme]))
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]))
 
 (def ^:private time-frames
   {:one-week     (i18n/label :t/one-week-int)
@@ -15,22 +16,13 @@
 
 (defn- loading-bars
   [bars theme]
-  (map (fn [{:keys [width height margin]}]
+  (map-indexed (fn [index {:keys [width height margin]}]
-         [rn/view {:style (style/loading-bar width height margin theme)}])
+                 ^{:key index}
-       bars))
+                 [rn/view {:style (style/loading-bar width height margin theme)}])
-
+               bars))
-;; temporary placeholder for network dropdown component
-(defn- network-dropdown-temporary
-  []
-  [:<>
-   [rn/view
-    {:style (merge style/network-dropdown
-                   {:justify-content :center
-                    :align-items     :center})}
-    [text/text "[WIP]"]]])
 
 (defn- view-info-top
-  [{:keys [state balance theme]}]
+  [{:keys [state balance theme networks dropdown-on-press dropdown-state]}]
   [rn/view {:style style/container-info-top}
    (if (= state :loading)
      (loading-bars [{:width 201 :height 20 :margin 0}] theme)
@@ -39,7 +31,11 @@
        :size   :heading-1
        :style  (style/style-text-heading theme)}
       balance])
-   [network-dropdown-temporary]])
+   [network-dropdown/view
+    {:state    (or dropdown-state :default)
+     :blur?    true
+     :on-press dropdown-on-press}
+    networks]])
 
 (defn- view-metrics
   [{:keys [metrics currency-change percentage-change theme]}]
@@ -59,7 +55,7 @@
      :style  {:color        (style/color-metrics metrics theme)
               :margin-right 4}}
     currency-change]
-   [icons/icon
+   [icon/icon
     (if (= metrics :positive) :i/positive :i/negative)
     {:color (style/color-metrics metrics theme)
      :size  16}]])
@@ -90,7 +86,7 @@
         :size   :paragraph-2
         :style  (style/style-text-paragraph theme)}
        begin-date]
-      [icons/icon :i/positive-right
+      [icon/icon :i/positive-right
        {:color (style/color-text-paragraph theme)
         :size  16}]
       [text/text

src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.quo-preview.wallet.wallet-overview
   (:require [quo2.core :as quo]
+            [quo2.foundations.resources :as quo.resources]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
@@ -41,6 +42,11 @@
               {:key   :negative
                :value "Negative"}]}])
 
+(def ^:private networks-list
+  [{:source (quo.resources/get-network :ethereum)}
+   {:source (quo.resources/get-network :optimism)}
+   {:source (quo.resources/get-network :arbitrum)}])
+
 (defn preview-wallet-overview
   []
   (let [state (reagent/atom {:state             :default
@@ -61,4 +67,7 @@
          {:padding-vertical 60
           :flex-direction   :row
           :justify-content  :center}
-         [quo/wallet-overview @state]]]])))
+         [quo/wallet-overview
+          (assoc @state
+                 :networks          networks-list
+                 :dropdown-on-press #(js/alert "On pressed dropdown"))]]]])))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -1,10 +1,15 @@
 (ns status-im2.contexts.wallet.common.temp
-  (:require
+  (:require [quo2.core :as quo]
-    [quo2.core :as quo]
+            [quo2.foundations.resources :as quo.resources]
-    [react-native.core :as rn]
+            [react-native.core :as rn]
-    [utils.i18n :as i18n]
+            [status-im2.contexts.wallet.common.utils :as utils]
-    [utils.re-frame :as rf]
+            [utils.i18n :as i18n]
-    [status-im2.contexts.wallet.common.utils :as utils]))
+            [utils.re-frame :as rf]))
+
+(def networks
+  [{:source (quo.resources/get-network :ethereum)}
+   {:source (quo.resources/get-network :optimism)}
+   {:source (quo.resources/get-network :arbitrum)}])
 
 (defn wallet-temporary-navigation
   []
@@ -31,7 +36,8 @@
    :begin-date        "16 May"
    :end-date          "25 May"
    :currency-change   "€0.00"
-   :percentage-change "0.00%"})
+   :percentage-change "0.00%"
+   :networks          networks})
 
 (def tokens
   [{:token               :snt