Token network component (#17667)

src/quo/components/list_items/token_network/component_spec.cljs

@@ -0,0 +1,47 @@
+(ns quo.components.list-items.token-network.component-spec
+  (:require [quo.components.list-items.token-network.view :as token-network]
+            [quo.foundations.colors :as colors]
+            [quo.foundations.resources :as resources]
+            [test-helpers.component :as h]))
+
+(def props
+  {:token       (resources/get-token :snt)
+   :state       :default
+   :label       "Status"
+   :networks    [(resources/get-network :ethereum)]
+   :token-value "100.00 SNT"
+   :fiat-value  "€0.00"})
+
+(h/describe "List items: Token network"
+  (h/test "default state"
+    (h/render [token-network/view (dissoc props :state)])
+    (h/is-truthy (h/get-by-text "Status")))
+
+  (h/test "default state explicit"
+    (h/render [token-network/view props])
+    (h/is-truthy (h/get-by-text "Status")))
+
+  (h/test "Pressed state"
+    (h/render [token-network/view props])
+    (h/fire-event :on-press-in (h/get-by-label-text :token-network))
+    (h/wait-for #(h/has-style (h/query-by-label-text :token-network)
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
+
+  (h/test "Active state"
+    (h/render [token-network/view (assoc props :state :active)])
+    (h/has-style (h/query-by-label-text :token-network)
+                 {:backgroundColor (colors/resolve-color :blue :light 10)}))
+
+  (h/test "Selected state"
+    (h/render [token-network/view (assoc props :state :selected)])
+    (h/is-truthy (h/query-by-label-text :check-icon)))
+
+  (h/test "Call on-press"
+    (let [on-press (h/mock-fn)]
+      (h/render [token-network/view (assoc props :on-press on-press)])
+      (h/fire-event :on-press (h/get-by-label-text :token-network))
+      (h/was-called on-press)))
+
+  (h/test "Empty props"
+    (h/render [token-network/view {}])
+    (h/is-truthy (h/get-by-label-text :token-network))))

src/quo/components/list_items/token_network/style.cljs

@@ -0,0 +1,47 @@
+(ns quo.components.list-items.token-network.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- background-color
+  [state customization-color theme]
+  (cond
+    (= state :pressed)  (colors/resolve-color customization-color theme 5)
+    (= state :active)   (colors/resolve-color customization-color theme 10)
+    (= state :selected) (colors/resolve-color customization-color theme 5)
+    :else               :transparent))
+
+(defn container
+  [state customization-color theme]
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-radius      12
+   :height             56
+   :background-color   (background-color state customization-color theme)})
+
+(defn check-color
+  [customization-color theme]
+  (colors/resolve-color customization-color theme))
+
+(def info
+  {:flex-direction :row
+   :align-items    :center})
+
+(def token-info
+  {:height 40})
+
+(def token-image
+  {:width         32
+   :height        32
+   :border-width  1
+   :border-radius 16
+   :border-color  colors/neutral-80-opa-5
+   :margin-right  8})
+
+(def values-container
+  {:align-items :flex-end})
+
+(defn fiat-value
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

src/quo/components/list_items/token_network/view.cljs

@@ -0,0 +1,62 @@
+(ns quo.components.list-items.token-network.view
+  (:require
+    [quo.components.icon :as icon]
+    [quo.components.list-items.preview-list.view :as preview-list]
+    [quo.components.list-items.token-network.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
+
+(defn- info
+  [{:keys [token label networks]}]
+  [rn/view {:style style/info}
+   [rn/image
+    {:source (or (:source token) token)
+     :style  style/token-image}]
+   [rn/view {:style style/token-info}
+    [text/text {:weight :semi-bold} label]
+    [preview-list/view
+     {:type   :network
+      :size   :size-14
+      :number 3}
+     networks]]])
+
+(defn- values
+  [{:keys [state token-value fiat-value customization-color theme]}]
+  (if (= state :selected)
+    [icon/icon :i/check
+     {:color               (style/check-color customization-color theme)
+      :accessibility-label :check-icon}]
+    [rn/view {:style style/values-container}
+     [text/text
+      {:weight :medium
+       :size   :paragraph-2}
+      token-value]
+     [text/text
+      {:style (style/fiat-value theme)
+       :size  :paragraph-2}
+      fiat-value]]))
+
+(defn- view-internal
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [on-press state customization-color
+                 _token _networks _token-value _fiat-value theme]
+          :as   props
+          :or   {customization-color :blue}}]
+      (let [internal-state (if @pressed?
+                             :pressed
+                             state)]
+        [rn/pressable
+         {:style               (style/container internal-state customization-color theme)
+          :on-press-in         on-press-in
+          :on-press-out        on-press-out
+          :on-press            on-press
+          :accessibility-label :token-network}
+         [info props]
+         [values props]]))))
+
+(def view (quo.theme/with-theme view-internal))

src/quo/core.cljs

@@ -77,6 +77,7 @@
     quo.components.list-items.preview-list.view
     quo.components.list-items.saved-address.view
     quo.components.list-items.saved-contact-address.view
+    quo.components.list-items.token-network.view
     quo.components.list-items.token-value.view
     quo.components.list-items.user-list
     quo.components.loaders.skeleton-list.view
@@ -112,7 +113,6 @@
     quo.components.selectors.selectors.view
     quo.components.settings.accounts.view
     quo.components.settings.category.view
-    quo.components.settings.category.view
     quo.components.settings.data-item.view
     quo.components.settings.privacy-option.view
     quo.components.settings.reorder-item.view
@@ -278,6 +278,7 @@
 (def community-list-item quo.components.list-items.community.view/view)
 (def saved-address quo.components.list-items.saved-address.view/view)
 (def saved-contact-address quo.components.list-items.saved-contact-address.view/view)
+(def token-network quo.components.list-items.token-network.view/view)
 (def token-value quo.components.list-items.token-value.view/view)
 
 ;;;; Loaders

src/quo/core_spec.cljs

@@ -32,7 +32,6 @@
     [quo.components.inputs.address-input.component-spec]
     [quo.components.inputs.input.component-spec]
     [quo.components.inputs.locked-input.component-spec]
-    [quo.components.inputs.locked-input.component-spec]
     [quo.components.inputs.profile-input.component-spec]
     [quo.components.inputs.recovery-phrase.component-spec]
     [quo.components.inputs.title-input.component-spec]
@@ -46,6 +45,7 @@
     [quo.components.list-items.dapp.component-spec]
     [quo.components.list-items.saved-address.component-spec]
     [quo.components.list-items.saved-contact-address.component-spec]
+    [quo.components.list-items.token-network.component-spec]
     [quo.components.list-items.token-value.component-spec]
     [quo.components.loaders.skeleton-list.component-spec]
     [quo.components.markdown.list.component-spec]
@@ -72,6 +72,7 @@
     [quo.components.switchers.group-messaging-card.component-spec]
     [quo.components.tags.network-tags.component-spec]
     [quo.components.tags.status-tags-component-spec]
+    [quo.components.tags.tiny-tag.component-spec]
     [quo.components.wallet.account-card.component-spec]
     [quo.components.wallet.account-origin.component-spec]
     [quo.components.wallet.account-overview.component-spec]

src/status_im2/contexts/quo_preview/list_items/token_network.cljs

@@ -0,0 +1,55 @@
+(ns status-im2.contexts.quo-preview.list-items.token-network
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def networks-list
+  [{:source (quo.resources/get-network :ethereum)}
+   {:source (quo.resources/get-network :optimism)}
+   {:source (quo.resources/get-network :arbitrum)}
+   {:source (quo.resources/get-network :zksync)}
+   {:source (quo.resources/get-network :polygon)}])
+
+(def descriptor
+  [{:key     :state
+    :type    :select
+    :options [{:key :default}
+              {:key :active}
+              {:key :selected}]}
+   {:key     :token
+    :type    :select
+    :options [{:value :eth
+               :key   (quo.resources/get-token :eth)}
+              {:value :snt
+               :key   (quo.resources/get-token :snt)}
+              {:value :dai
+               :key   (quo.resources/get-token :dai)}]}
+   {:key  :label
+    :type :text}
+   {:key  :token-value
+    :type :text}
+   {:key  :fiat-value
+    :type :text}
+   (preview/customization-color-option)
+   {:key  :show-alert-on-press?
+    :type :boolean}])
+
+(defn preview-token-network
+  []
+  (let [state (reagent/atom {:token               (quo.resources/get-token :snt)
+                             :label               "Status"
+                             :token-value         "0.00 SNT"
+                             :fiat-value          "€0.00"
+                             :networks            networks-list
+                             :state               :default
+                             :customization-color :blue})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/token-network
+        (merge @state
+               (when (:show-alert-on-press? @state)
+                 {:on-press #(js/alert "Pressed!")}))]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -92,6 +92,7 @@
     [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
     [status-im2.contexts.quo-preview.list-items.saved-address :as saved-address]
     [status-im2.contexts.quo-preview.list-items.saved-contact-address :as saved-contact-address]
+    [status-im2.contexts.quo-preview.list-items.token-network :as token-network]
     [status-im2.contexts.quo-preview.list-items.token-value :as token-value]
     [status-im2.contexts.quo-preview.list-items.user-list :as user-list]
     [status-im2.contexts.quo-preview.loaders.skeleton-list :as skeleton-list]
@@ -328,6 +329,8 @@
                         :component saved-address/view}
                        {:name      :saved-contact-address
                         :component saved-contact-address/view}
+                       {:name      :token-network
+                        :component token-network/preview-token-network}
                        {:name      :token-value
                         :component token-value/view}
                        {:name      :user-list