diff --git a/src/quo2/components/dropdowns/network_dropdown/style.cljs b/src/quo2/components/dropdowns/network_dropdown/style.cljs index 6467243fa1..6ef89a2efe 100644 --- a/src/quo2/components/dropdowns/network_dropdown/style.cljs +++ b/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 diff --git a/src/quo2/components/wallet/wallet_overview/style.cljs b/src/quo2/components/wallet/wallet_overview/style.cljs index 4a58da232d..2e735a6b5f 100644 --- a/src/quo2/components/wallet/wallet_overview/style.cljs +++ b/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) diff --git a/src/quo2/components/wallet/wallet_overview/view.cljs b/src/quo2/components/wallet/wallet_overview/view.cljs index 90061e663a..3c4abe8306 100644 --- a/src/quo2/components/wallet/wallet_overview/view.cljs +++ b/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]}] - [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]"]]]) + (map-indexed (fn [index {:keys [width height margin]}] + ^{:key index} + [rn/view {:style (style/loading-bar width height margin theme)}]) + bars)) (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 diff --git a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs index cea3a8f4df..9db0b92821 100644 --- a/src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs +++ b/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"))]]]]))) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 2f45b4cebf..9d9b678ba8 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -1,10 +1,15 @@ (ns status-im2.contexts.wallet.common.temp - (:require - [quo2.core :as quo] - [react-native.core :as rn] - [utils.i18n :as i18n] - [utils.re-frame :as rf] - [status-im2.contexts.wallet.common.utils :as utils])) + (:require [quo2.core :as quo] + [quo2.foundations.resources :as quo.resources] + [react-native.core :as rn] + [status-im2.contexts.wallet.common.utils :as utils] + [utils.i18n :as i18n] + [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