Replace token images by new token component

The new component is being used in the following components:
 - token-input
 - network-amount
 - token-tag
 - summary-tag
 - context-tag
 - token-value
 - token-network
 - preview-list

src/quo/components/community/token_gating.cljs

@@ -10,40 +10,36 @@
 
 (defn token-requirement-list-row
   [tokens padding?]
-  [rn/view
-   {:style (style/token-row padding?)}
-   (doall
-    (map-indexed (fn [token-index token]
-                   (let [{:keys [img-src amount sufficient? purchasable?]} token]
-                     ^{:key token-index}
-                     [rn/view {:style style/token-tag-spacing}
-                      [token-tag/view
-                       {:token-symbol  (:symbol token)
-                        :token-value   amount
-                        :size          :size-24
-                        :options       (cond
-                                         sufficient?  :hold
-                                         purchasable? :add)
-                        :token-img-src img-src}]]))
-                 tokens))])
+  [rn/view {:style (style/token-row padding?)}
+   (map-indexed (fn [token-index token]
+                  (let [{:keys [amount sufficient? purchasable?]} token]
+                    ^{:key token-index}
+                    [rn/view {:style style/token-tag-spacing}
+                     [token-tag/view
+                      {:token-symbol (:symbol token)
+                       :token-value  amount
+                       :size         :size-24
+                       :options      (cond
+                                       sufficient?  :hold
+                                       purchasable? :add)}]]))
+                tokens)])
 
 (defn- internal-view
   [{:keys [tokens padding? theme]}]
   [:<>
    (if (> (count tokens) 1)
-     (doall
-      (map-indexed
-       (fn [token-requirement-index tokens]
-         ^{:key token-requirement-index}
-         [rn/view {:margin-bottom 12}
-          (when-not (= token-requirement-index 0)
-            [rn/view {:style (style/token-row-or-border theme)}])
-          (when-not (= token-requirement-index 0)
-            [text/text
-             {:style (style/token-row-or-text padding? theme)
-              :size  :label} (string/lower-case (i18n/label :t/or))])
-          [token-requirement-list-row tokens padding?]])
-       tokens))
+     (map-indexed
+      (fn [token-requirement-index tokens]
+        ^{:key token-requirement-index}
+        [rn/view {:margin-bottom 12}
+         (when-not (= token-requirement-index 0)
+           [rn/view {:style (style/token-row-or-border theme)}])
+         (when-not (= token-requirement-index 0)
+           [text/text
+            {:style (style/token-row-or-text padding? theme)
+             :size  :label} (string/lower-case (i18n/label :t/or))])
+         [token-requirement-list-row tokens padding?]])
+      tokens)
      [token-requirement-list-row (first tokens) padding?])])
 
 (def token-requirement-list (quo.theme/with-theme internal-view))

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

@@ -4,6 +4,7 @@
     [quo.components.avatars.user-avatar.view :as user-avatar]
     [quo.components.list-items.preview-list.properties :as properties]
     [quo.components.tags.number-tag.view :as number-tag]
+    [quo.components.token :as token]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.fast-image :as fast-image]
@@ -31,7 +32,12 @@
                                               :height        size
                                               :border-radius border-radius}}]
 
-      (:tokens :network :dapps)    [fast-image/fast-image
+      :tokens                      [token/view
+                                    {:token item
+                                     :size  size
+                                     :style {:border-radius border-radius}}]
+
+      (:network :dapps)            [fast-image/fast-image
                                     {:source (or (:source item) item)
                                      :style  {:width         size
                                               :height        size

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

@@ -5,7 +5,7 @@
             [test-helpers.component :as h]))
 
 (def props
-  {:token       (resources/get-token :snt)
+  {:token       :snt
    :state       :default
    :label       "Status"
    :networks    [(resources/get-network :ethereum)]

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

@@ -34,9 +34,7 @@
    :flex   1})
 
 (def token-image
-  {:width            32
-   :height           32
-   :border-width     1
+  {:border-width     1
    :border-radius    16
    :border-color     colors/neutral-80-opa-5
    :margin-right     8

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

@@ -4,16 +4,18 @@
     [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.components.token :as token]
     [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}]
+   [token/view
+    {:style style/token-image
+     :size  :size-32
+     :token token}]
    [rn/view {:style style/token-info}
     [text/text
      {:weight          :semi-bold

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

@@ -4,9 +4,9 @@
     [quo.components.icon :as icon]
     [quo.components.list-items.token-value.style :as style]
     [quo.components.markdown.text :as text]
+    [quo.components.token :as token]
     [quo.foundations.colors :as colors]
     [quo.foundations.common :as common]
-    [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [reagent.core :as reagent]))
@@ -34,10 +34,7 @@
           {:style {:flex-direction :row
                    :align-items    :center
                    :flex           1}}
-          [rn/image
-           {:source (resources/get-token token)
-            :style  {:width  32
-                     :height 32}}]
+          [token/view {:token token :size :size-32}]
           [rn/view {:style {:margin-left 8}}
            [text/text {:weight :semi-bold} (common/token-label token)]
            [text/text

src/quo/components/tags/context_tag/style.cljs

@@ -59,6 +59,10 @@
   [theme]
   {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
 
+(defn token-logo
+  [size]
+  {:border-radius (if (= size 24) 10 14)})
+
 (defn circle-logo
   [size]
   (if (= size 24)

src/quo/components/tags/context_tag/view.cljs

@@ -7,6 +7,7 @@
     [quo.components.list-items.preview-list.view :as preview-list]
     [quo.components.markdown.text :as text]
     [quo.components.tags.context-tag.style :as style]
+    [quo.components.token :as token]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
@@ -73,7 +74,7 @@
 
 (defn- view-internal
   [{:keys [theme type size state blur? customization-color profile-picture full-name users
-           group-name token-logo amount token-name network-logo network-name networks
+           group-name amount token network-logo network-name networks
            account-name emoji collectible collectible-name collectible-number duration container-style]
     :or   {customization-color :blue
            type                :default
@@ -123,8 +124,11 @@
      [communities-tag (assoc props :channel? (= type :channel))]
 
      :token
-     [tag-skeleton {:theme theme :size size :text (str amount " " token-name)}
-      [rn/image {:style (style/circle-logo size) :source token-logo}]]
+     [tag-skeleton {:theme theme :size size :text (str amount " " token)}
+      [token/view
+       {:style (style/token-logo size)
+        :token token
+        :size  (if (= size 24) :size-20 :size-28)}]]
 
      :network
      [tag-skeleton {:theme theme :size size :text network-name}
@@ -182,9 +186,8 @@
 
   - `:token`
     - size
-    - token-logo (valid rn/image :source value)
     - amount
-    - token-name
+    - token
 
   - `:network`
     - size

src/quo/components/tags/summary_tag/component_spec.cljs

@@ -47,7 +47,7 @@
 
   (h/test "Token view render"
     (h/render [summary-tag/view
-               {:type         :token
-                :label        "1,000 SNT"
-                :image-source "path/to/token-image.png"}])
+               {:type  :token
+                :label "1,000 SNT"
+                :token :eth}])
     (h/is-truthy (h/get-by-text "1,000 SNT"))))

src/quo/components/tags/summary_tag/style.cljs

@@ -24,6 +24,4 @@
    :border-radius 10})
 
 (def token-image
-  {:width         24
-   :height        24
-   :border-radius 12})
+  {:border-radius 12})

src/quo/components/tags/summary_tag/view.cljs

@@ -5,12 +5,13 @@
     [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.markdown.text :as text]
     [quo.components.tags.summary-tag.style :as style]
+    [quo.components.token :as token]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (defn- left-view
-  [{:keys [label type customization-color emoji image-source]}]
+  [{:keys [label type customization-color emoji image-source token]}]
   (case type
     :account
     [account-avatar/view
@@ -38,9 +39,10 @@
       :profile-picture     image-source
       :customization-color customization-color}]
     :token
-    [rn/image
-     {:source image-source
-      :style  style/token-image}]
+    [token/view
+     {:token token
+      :size  :size-24
+      :style style/token-image}]
     nil))
 
 (defn- view-internal
@@ -50,7 +52,7 @@
       should vary based on a custom color.
     - :type - :token / :user / :collectible / :saved-address / :network / :account
     - :emoji - string - emoji used for displaying account avatar
-    - :image-source - resource - image to display on :network, :collectible :user and :token
+    - :image-source - resource - image to display on :network, :collectible and :user
     - :theme - :light / :dark"
   [{:keys [label customization-color type theme]
     :as   props
@@ -62,6 +64,7 @@
    [text/text
     {:style  (style/label type theme)
      :weight :semi-bold
-     :size   :heading-1} label]])
+     :size   :heading-1}
+    label]])
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/tags/token_tag/style.cljs

@@ -34,14 +34,10 @@
 
 (defn token-img
   [size]
-  (condp = size
-    :size-24 {:width         20
-              :height        20
-              :margin-right  6
+  (case size
+    :size-24 {:margin-right  6
               :border-radius 10}
-    :size-32 {:width         28
-              :height        28
-              :margin-right  8
+    :size-32 {:margin-right  8
               :border-radius 14}))
 
 (defn label

src/quo/components/tags/token_tag/view.cljs

@@ -4,6 +4,7 @@
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
     [quo.components.tags.token-tag.style :as style]
+    [quo.components.token :as token]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.hole-view :as hole-view]
@@ -14,35 +15,38 @@
     - :options - false / :add / :hold (default false)
     - :size - :size-24 / :size-32 (default :size-24)
     - :blur? - boolean (default false)
-    - :theme - :light / :dark 
-    - :token-img-src - token image source
+    - :theme - :light / :dark
     - :token-value - string - token value
     - :token-symbol - string"
   []
   (let [container-width (reagent/atom 0)]
-    (fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
+    (fn [{:keys [options size blur? theme token-value token-symbol]
           :or   {size :size-24}}]
       [rn/view
        {:on-layout #(reset! container-width
                       (oget % :nativeEvent :layout :width))}
        [hole-view/hole-view
         {:holes (if options
                   [{:x            (- @container-width
-                                     (condp = size
+                                     (case size
                                        :size-24 10
-                                       :size-32 12))
-                    :y            (condp = size
+                                       :size-32 12
+                                       nil))
+                    :y            (case size
                                     :size-24 -6
-                                    :size-32 -4)
+                                    :size-32 -4
+                                    nil)
                     :width        16
                     :height       16
                     :borderRadius 8}]
                   [])}
-        [rn/view
-         {:style (style/container size options blur? theme)}
-         [rn/image
-          {:style  (style/token-img size)
-           :source token-img-src}]
+        [rn/view {:style (style/container size options blur? theme)}
+         [token/view
+          {:style (style/token-img size)
+           :token token-symbol
+           :size  (case size
+                    :size-24 :size-20
+                    :size-32 :size-28)}]
          [text/text
           {:size   :paragraph-2
            :weight :medium

src/quo/components/wallet/network_amount/view.cljs

@@ -2,17 +2,15 @@
   (:require
     [clojure.string :as string]
     [quo.components.markdown.text :as text]
+    [quo.components.token :as token]
     [quo.components.wallet.network-amount.style :as style]
-    [quo.foundations.resources :as resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (defn- view-internal
   [{:keys [amount token theme]}]
   [rn/view {:style style/container}
-   [rn/image
-    {:source (resources/get-token token)
-     :style  {:width 12 :height 12}}]
+   [token/view {:token token :size :size-12}]
    [text/text
     {:weight :medium
      :size   :paragraph-2

src/quo/components/wallet/token_input/style.cljs

@@ -16,10 +16,6 @@
    :flex-direction     :row
    :justify-content    :space-between})
 
-(def token
-  {:width  32
-   :height 32})
-
 (defn text-input
   [theme]
   (merge typography/heading-1