Wallet: Token item fixes (#18136)

* Wallet: token item fixes

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

@@ -7,6 +7,7 @@
   (h/test "Token label renders"
     (h/render [token-value/view
                {:token               :snt
+                :token-name          "Status"
                 :state               :default
                 :status              :empty
                 :customization-color :blue
@@ -20,6 +21,7 @@
   (h/test "Status change"
     (h/render [token-value/view
                {:token               :snt
+                :token-name          "Status"
                 :state               :default
                 :status              :positive
                 :customization-color :blue

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

@@ -6,7 +6,6 @@
     [quo.components.markdown.text :as text]
     [quo.components.utilities.token.view :as token]
     [quo.foundations.colors :as colors]
-    [quo.foundations.common :as common]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [reagent.core :as reagent]))
@@ -14,7 +13,8 @@
 (defn- internal-view
   []
   (let [state (reagent/atom :default)]
-    (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press]}]
+    (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press
+                 token-name]}]
       (let [bg-opacity                                                      (case @state
                                                                               :active  10
                                                                               :pressed 5
@@ -36,7 +36,7 @@
                    :flex           1}}
           [token/view {:token token :size :size-32}]
           [rn/view {:style {:margin-left 8}}
-           [text/text {:weight :semi-bold} (common/token-label token)]
+           [text/text {:weight :semi-bold} token-name]
            [text/text
             {:size  :paragraph-2
              :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}

src/quo/components/utilities/token/view.cljs

@@ -1,8 +1,11 @@
 (ns quo.components.utilities.token.view
-  (:require [quo.components.utilities.token.loader :as token-loader]
-            [react-native.core :as rn]
-            [schema.core :as schema]
-            [utils.number]))
+  (:require
+    [clojure.string :as string]
+    [quo.components.markdown.text :as quo]
+    [quo.components.utilities.token.loader :as token-loader]
+    [react-native.core :as rn]
+    [schema.core :as schema]
+    [utils.number]))
 
 (def ?schema
   [:=>
@@ -33,6 +36,18 @@
 
 (def ^:private b64-png-image-prefix "data:image/png;base64,")
 
+(defn temp-empty-symbol
+  [token size]
+  [rn/view
+   {:style (token-style {:justify-content :center
+                         :align-items     :center
+                         :border-radius   20
+                         :border-width    1
+                         :border-color    :grey}
+                        size)}
+   [quo/text {:style {:color :grey}}
+    (string/capitalize (first (name token)))]])
+
 (defn view-internal
   "Render a token image.
    Props:
@@ -51,8 +66,10 @@
                      (str b64-png-image-prefix image-source)
                      image-source)
         source     (or b64-string (token-loader/get-token-image token))]
-    [rn/image
-     {:style  (token-style style size)
-      :source source}]))
+    (if source
+      [rn/image
+       {:style  (token-style style size)
+        :source source}]
+      [temp-empty-symbol token size])))
 
 (def view (schema/instrument #'view-internal ?schema))

src/quo/foundations/common.cljs

@@ -3,8 +3,3 @@
 (def currency-label
   {:eur "€"
    :usd "$"})
-
-(def token-label
-  {:eth "Ethereum"
-   :snt "Status"
-   :dai "Dai"})

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

@@ -20,6 +20,7 @@
 (defn view
   []
   (let [state (reagent/atom {:token               :snt
+                             :token-name          "Status"
                              :state               :default
                              :status              :empty
                              :customization-color :blue

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

@@ -19,6 +19,7 @@
 
 (def tokens
   [{:token               :snt
+    :token-name          "Status"
     :state               :default
     :status              :empty
     :customization-color :blue
@@ -27,6 +28,7 @@
                           :percentage-change "0.00"
                           :fiat-change       "€0.00"}}
    {:token               :eth
+    :token-name          "Ether"
     :state               :default
     :status              :empty
     :customization-color :blue
@@ -35,6 +37,7 @@
                           :percentage-change "0.00"
                           :fiat-change       "€0.00"}}
    {:token               :dai
+    :token-name          "Dai Stablecoin"
     :state               :default
     :status              :empty
     :customization-color :blue

src/status_im2/subs/wallet/wallet.cljs

@@ -130,8 +130,9 @@
         market-values                     (:usd market-values-per-currency)
         {:keys [price change-pct-24hour]} market-values
         fiat-change                       (utils/calculate-fiat-change crypto-value change-pct-24hour)]
-    (when crypto-value
+    (when (and crypto-value (seq (:name item)))
       {:token               (keyword (string/lower-case (:symbol item)))
+       :token-name          (:name item)
        :state               :default
        :status              (cond
                               (pos? change-pct-24hour) :positive