diff --git a/src/quo2/components/wallet/token_input/style.cljs b/src/quo2/components/wallet/token_input/style.cljs index 52f7a60e8e..9fbcbf52a4 100644 --- a/src/quo2/components/wallet/token_input/style.cljs +++ b/src/quo2/components/wallet/token_input/style.cljs @@ -20,11 +20,13 @@ {:width 32 :height 32}) -(def text-input +(defn text-input + [theme] (merge typography/heading-1 {:font-weight "600" - :margin-left 4 + :margin-left 8 :margin-right (if platform/ios? 6 4) + :color (colors/theme-colors colors/neutral-100 colors/white theme) :padding 0 :text-align :center :height "100%"})) @@ -39,6 +41,6 @@ (def data-container {:padding-top 4 :padding-horizontal 20 - :height 28 :flex-direction :row - :justify-content :space-between}) + :justify-content :space-between + :align-items :center}) diff --git a/src/quo2/components/wallet/token_input/view.cljs b/src/quo2/components/wallet/token_input/view.cljs index b90c0617a5..033437998b 100644 --- a/src/quo2/components/wallet/token_input/view.cljs +++ b/src/quo2/components/wallet/token_input/view.cljs @@ -9,7 +9,9 @@ [react-native.core :as rn] [reagent.core :as reagent] [quo2.foundations.common :as common] - [quo2.components.wallet.token-input.style :as style])) + [quo2.components.wallet.token-input.style :as style] + [quo2.components.tags.network-tags.view :as network-tag] + [quo2.components.dividers.divider-line.view :as divider-line])) (defn calc-value [crypto? currency token value conversion] @@ -23,7 +25,7 @@ value (reagent/atom 0) crypto? (reagent/atom true) input-ref (atom nil)] - (fn [{:keys [theme token currency conversion]}] + (fn [{:keys [theme token currency conversion networks title customization-color]}] [rn/view {:style (style/main-container width)} [rn/view {:style style/amount-container} [rn/pressable @@ -42,22 +44,26 @@ :max-length 12 :default-value @value :on-change-text #(reset! value %) - :style style/text-input}] + :style (style/text-input theme) + :selection-color customization-color}] [text/text {:size :paragraph-2 :weight :semi-bold - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} + :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :margin-right 8 + :padding-bottom 2}} (string/upper-case (clj->js (if @crypto? token currency)))]] [button/button {:icon true + :icon-only? true :size 32 :on-press #(swap! crypto? not) :type :outline :accessibility-label :reorder} :i/reorder]] - [rn/view {:style (style/divider width theme)}] + [divider-line/view {:container-style {:margin-vertical 8}}] [rn/view {:style style/data-container} - [text/text "[WIP] NETWORK TAG"] + [network-tag/view {:networks networks :title title}] [text/text {:size :paragraph-2 :weight :medium diff --git a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs index 0f3b2df9f6..3c1dc9ba89 100644 --- a/src/status_im2/contexts/quo_preview/wallet/token_input.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/token_input.cljs @@ -1,10 +1,18 @@ (ns status-im2.contexts.quo-preview.wallet.token-input (:require [quo2.core :as quo] + [quo2.foundations.resources :as resources] [react-native.core :as rn] [reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview])) +(def networks + [{:source (resources/get-network :arbitrum)} + {:source (resources/get-network :optimism)} + {:source (resources/get-network :ethereum)}]) + +(def title "Max: 200 SNT") + (def descriptor [{:label "Token:" :key :token @@ -23,9 +31,12 @@ (defn preview [] - (let [state (reagent/atom {:token :eth - :currency :usd - :conversion 0.02})] + (let [state (reagent/atom {:token :eth + :currency :usd + :conversion 0.02 + :networks networks + :title title + :customization-color :blue})] (fn [] [preview/preview-container {:state state @@ -36,4 +47,5 @@ [rn/view {:style {:flex 1 :margin-top 50 - :align-items :center}} [quo/token-input @state]]]]))) + :align-items :center}} + [quo/token-input @state]]]])))