Quo2: Token Input followup (#17419)

* Quo2: token input followup

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})

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

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]]]])))