[#17965] Create token component (#18018)

* Create token component

* 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

* Rename token image file: eth-token -> eth

* Remove resources/get-token function

src/quo/components/community/token_gating.cljs

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

src/quo/components/icon.cljs

@@ -9,9 +9,10 @@
 
 (defn- valid-color?
   [color]
-  (or (keyword? color)
+  (and color
-      (and (string? color)
+       (or (keyword? color)
-           (not (string/blank? color)))))
+           (and (string? color)
+                (not (string/blank? color))))))
 
 (defn- image-icon-style
   [{:keys [color no-color size container-style theme]}]
@@ -37,8 +38,8 @@
          (cond-> {:size                size
                   :accessibility-label accessibility-label
                   :style               container-style}
-           (and color (valid-color? color))     (assoc :color color)
+           (valid-color? color)   (assoc :color color)
-           (and color-2 (valid-color? color-2)) (assoc :color-2 color-2))]
+           (valid-color? color-2) (assoc :color-2 color-2))]
         [rn/image
          {:style               (image-icon-style (assoc props :size size))
           :accessibility-label accessibility-label

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.utilities.token.view :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
+  {:border-width     1
-   :height           32
-   :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,6 +4,7 @@
     [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.utilities.token.view :as token]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [reagent.core :as reagent]))
@@ -11,9 +12,11 @@
 (defn- info
   [{:keys [token label networks]}]
   [rn/view {:style style/info}
-   [rn/image
+   (when token
-    {:source (or (:source token) token)
+     [token/view
-     :style  style/token-image}]
+      {: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.utilities.token.view :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
+          [token/view {:token token :size :size-32}]
-           {:source (resources/get-token token)
-            :style  {:width  32
-                     :height 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.utilities.token.view :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)}
+     [tag-skeleton {:theme theme :size size :text (str amount " " token)}
-      [rn/image {:style (style/circle-logo size) :source token-logo}]]
+      [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
+               {:type  :token
-                :label        "1,000 SNT"
+                :label "1,000 SNT"
-                :image-source "path/to/token-image.png"}])
+                :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
+  {:border-radius 12})
-   :height        24
-   :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.utilities.token.view :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
+    [token/view
-     {:source image-source
+     {:token token
-      :style  style/token-image}]
+      :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
+  (case size
-    :size-24 {:width         20
+    :size-24 {:margin-right  6
-              :height        20
-              :margin-right  6
               :border-radius 10}
-    :size-32 {:width         28
+    :size-32 {:margin-right  8
-              :height        28
-              :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.utilities.token.view :as token]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.hole-view :as hole-view]
@@ -14,13 +15,12 @@
     - :options - false / :add / :hold (default false)
     - :size - :size-24 / :size-32 (default :size-24)
     - :blur? - boolean (default false)
-    - :theme - :light / :dark 
+    - :theme - :light / :dark
-    - :token-img-src - token image source
     - :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
@@ -28,21 +28,25 @@
        [hole-view/hole-view
         {:holes (if options
                   [{:x            (- @container-width
-                                     (condp = size
+                                     (case size
                                        :size-24 10
-                                       :size-32 12))
+                                       :size-32 12
-                    :y            (condp = size
+                                       nil))
+                    :y            (case size
                                     :size-24 -6
-                                    :size-32 -4)
+                                    :size-32 -4
+                                    nil)
                     :width        16
                     :height       16
                     :borderRadius 8}]
                   [])}
-        [rn/view
+        [rn/view {:style (style/container size options blur? theme)}
-         {:style (style/container size options blur? theme)}
+         [token/view
-         [rn/image
+          {:style (style/token-img size)
-          {:style  (style/token-img size)
+           :token token-symbol
-           :source token-img-src}]
+           :size  (case size
+                    :size-24 :size-20
+                    :size-32 :size-28)}]
          [text/text
           {:size   :paragraph-2
            :weight :medium

src/quo/components/utilities/token/loader.clj

@@ -0,0 +1,34 @@
+(ns quo.components.utilities.token.loader
+  (:require [clojure.java.io :as io]
+            [clojure.string :as string]))
+
+(def ^:private token-path "./resources/images/tokens/mainnet/")
+
+(defn- clean-filename
+  "Return a (string) filename without the .png extension and @<number>x suffix."
+  [file]
+  (first (string/split (str file) #"@|\.png")))
+
+(defn- get-js-require
+  [filename]
+  (let [require-path (str "." filename ".png")]
+    `(js/require ~require-path)))
+
+(defn- get-file-key
+  [filename]
+  (-> filename
+      (string/split #"\/")
+      (peek)
+      (string/lower-case)))
+
+(defn get-tokens
+  []
+  (let [files         (file-seq (io/file token-path))
+        png-filenames (keep (fn [file]
+                              (when (string/ends-with? file "png")
+                                (clean-filename file)))
+                            files)]
+    (zipmap (map get-file-key png-filenames)
+            (map get-js-require png-filenames))))
+
+(defmacro resolve-tokens [] (get-tokens))

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

@@ -0,0 +1,14 @@
+(ns quo.components.utilities.token.loader
+  (:require-macros [quo.components.utilities.token.loader :as loader])
+  (:require [clojure.string :as string]))
+
+(def ^:private tokens (loader/resolve-tokens))
+
+(defn- get-token-image*
+  [token]
+  (let [token-symbol (cond-> token
+                       (keyword? token) name
+                       :always          string/lower-case)]
+    (get tokens token-symbol)))
+
+(def get-token-image (memoize get-token-image*))

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

@@ -0,0 +1,58 @@
+(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]))
+
+(def ?schema
+  [:=>
+   [:cat
+    [:map {:closed true}
+     [:size {:optional true :default 32} [:or keyword? pos-int?]]
+     [:token {:optional true} [:or keyword? string?]]
+     [:style {:optional true} map?]
+     ;; Ignores `token` and uses this as parameter to `rn/image`'s source.
+     [:image-source {:optional true} [:or string? map?]]
+     ;; If true, adds `data:image/png;base64,` as prefix to the string passed as `image-source`
+     [:add-b64-prefix? {:optional true} boolean?]]]
+   :any])
+
+(defn- size->number
+  "Remove `size-` prefix in size keywords and returns a number useful for styling."
+  [size]
+  (-> size name (subs 5) utils.number/parse-int))
+
+(defn- token-style
+  [style size]
+  (let [size-number (if (keyword? size)
+                      (size->number size)
+                      size)]
+    (assoc style
+           :width  size-number
+           :height size-number)))
+
+(def ^:private b64-png-image-prefix "data:image/png;base64,")
+
+(defn view-internal
+  "Render a token image.
+   Props:
+   - style:           extra styles to apply to the `rn/image` component.
+   - size:            `:size-nn` or just `nn`, being `nn` any number. Defaults to 32.
+   - token:           string or keyword, it can contain upper case letters or not.
+                      E.g. all of these are valid and resolve to the same:
+                      :token/snt | :snt | :SNT | \"SNT\" | \"snt\".
+   - image-source:    Ignores `token` and uses this as parameter to `rn/image`'s source.
+   - add-b64-prefix?: If true, adds `data:image/png;base64,` as prefix to the string
+                      passed as `image-source`.
+  "
+  [{:keys [token size style image-source add-b64-prefix?]
+    :or   {size 32}}]
+  (let [b64-string (if (and image-source add-b64-prefix?)
+                     (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}]))
+
+(def view (schema/instrument #'view-internal ?schema))

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.utilities.token.view :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
+   [token/view {:token token :size :size-12}]
-    {:source (resources/get-token token)
-     :style  {:width 12 :height 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

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

@@ -5,10 +5,10 @@
     [quo.components.dividers.divider-line.view :as divider-line]
     [quo.components.markdown.text :as text]
     [quo.components.tags.network-tags.view :as network-tag]
+    [quo.components.utilities.token.view :as token]
     [quo.components.wallet.token-input.style :as style]
     [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]))
@@ -41,9 +41,7 @@
           :style    {:flex-direction :row
                      :flex-grow      1
                      :align-items    :flex-end}}
-         [rn/image
+         [token/view {:token token :size :size-32}]
-          {:style  style/token
-           :source (resources/get-token token)}]
          [rn/text-input
           (cond-> {:auto-focus               true
                    :ref                      #(reset! input-ref %)

src/quo/components/wallet/transaction_summary/component_spec.cljs

@@ -19,10 +19,10 @@
   (h/test "Context tag rendered"
     (h/render [transaction-summary/view
                {:transaction :send
-                :first-tag   {:size       24
+                :first-tag   {:size   24
-                              :type       :token
+                              :type   :token
-                              :token-name "SNT"
+                              :token  "SNT"
-                              :amount     1500}}])
+                              :amount 1500}}])
     (h/is-truthy (h/query-by-label-text :context-tag))))
 
 

src/quo/core.cljs

@@ -143,6 +143,7 @@
     quo.components.text-combinations.standard-title.view
     quo.components.text-combinations.username.view
     quo.components.text-combinations.view
+    quo.components.utilities.token.view
     quo.components.wallet.account-card.view
     quo.components.wallet.account-origin.view
     quo.components.wallet.account-overview.view
@@ -388,6 +389,9 @@
 (def text-combinations quo.components.text-combinations.view/view)
 (def username quo.components.text-combinations.username.view/view)
 
+;;;; Utilities - Outside of design system
+(def token quo.components.utilities.token.view/view)
+
 ;;;; Wallet
 (def account-card quo.components.wallet.account-card.view/view)
 (def account-origin quo.components.wallet.account-origin.view/view)

src/quo/foundations/resources.cljs

@@ -32,197 +32,6 @@
   [k]
   (get dapps k))
 
-(def tokens
-  {:0-native  (js/require "../resources/images/tokens/mainnet/0-native.png")
-   :0xbtc     (js/require "../resources/images/tokens/mainnet/0XBTC.png")
-   :1st       (js/require "../resources/images/tokens/mainnet/1ST.png")
-   :abt       (js/require "../resources/images/tokens/mainnet/ABT.png")
-   :abyss     (js/require "../resources/images/tokens/mainnet/ABYSS.png")
-   :ae        (js/require "../resources/images/tokens/mainnet/AE.png")
-   :agld      (js/require "../resources/images/tokens/mainnet/AGLD.png")
-   :akro      (js/require "../resources/images/tokens/mainnet/AKRO.png")
-   :amb       (js/require "../resources/images/tokens/mainnet/AMB.png")
-   :ampl      (js/require "../resources/images/tokens/mainnet/AMPL.png")
-   :ant       (js/require "../resources/images/tokens/mainnet/ANT.png")
-   :appc      (js/require "../resources/images/tokens/mainnet/APPC.png")
-   :ast       (js/require "../resources/images/tokens/mainnet/AST.png")
-   :atmchain  (js/require "../resources/images/tokens/mainnet/ATMChain.png")
-   :ausdc     (js/require "../resources/images/tokens/mainnet/aUSDC.png")
-   :bal       (js/require "../resources/images/tokens/mainnet/BAL.png")
-   :bam       (js/require "../resources/images/tokens/mainnet/BAM.png")
-   :band      (js/require "../resources/images/tokens/mainnet/BAND.png")
-   :bat       (js/require "../resources/images/tokens/mainnet/BAT.png")
-   :blt       (js/require "../resources/images/tokens/mainnet/BLT.png")
-   :blz       (js/require "../resources/images/tokens/mainnet/BLZ.png")
-   :bnb       (js/require "../resources/images/tokens/mainnet/BNB.png")
-   :bnt       (js/require "../resources/images/tokens/mainnet/BNT.png")
-   :brln      (js/require "../resources/images/tokens/mainnet/BRLN.png")
-   :btm       (js/require "../resources/images/tokens/mainnet/BTM.png")
-   :btu       (js/require "../resources/images/tokens/mainnet/BTU.png")
-   :cdai      (js/require "../resources/images/tokens/mainnet/cDAI.png")
-   :cdt       (js/require "../resources/images/tokens/mainnet/CDT.png")
-   :centra    (js/require "../resources/images/tokens/mainnet/Centra.png")
-   :cfi       (js/require "../resources/images/tokens/mainnet/CFI.png")
-   :ck        (js/require "../resources/images/tokens/mainnet/CK.png")
-   :cnd       (js/require "../resources/images/tokens/mainnet/CND.png")
-   :cob       (js/require "../resources/images/tokens/mainnet/COB.png")
-   :comp      (js/require "../resources/images/tokens/mainnet/COMP.png")
-   :crv       (js/require "../resources/images/tokens/mainnet/CRV.png")
-   :cvc       (js/require "../resources/images/tokens/mainnet/CVC.png")
-   :dai       (js/require "../resources/images/tokens/mainnet/DAI.png")
-   :dat       (js/require "../resources/images/tokens/mainnet/DAT.png")
-   :data      (js/require "../resources/images/tokens/mainnet/DATA.png")
-   :dcn       (js/require "../resources/images/tokens/mainnet/DCN.png")
-   :dgd       (js/require "../resources/images/tokens/mainnet/DGD.png")
-   :dgx       (js/require "../resources/images/tokens/mainnet/DGX.png")
-   :dlt       (js/require "../resources/images/tokens/mainnet/DLT.png")
-   :dnt       (js/require "../resources/images/tokens/mainnet/DNT.png")
-   :dpy       (js/require "../resources/images/tokens/mainnet/DPY.png")
-   :drt       (js/require "../resources/images/tokens/mainnet/DRT.png")
-   :dta       (js/require "../resources/images/tokens/mainnet/DTA.png")
-   :edg       (js/require "../resources/images/tokens/mainnet/EDG.png")
-   :edo       (js/require "../resources/images/tokens/mainnet/EDO.png")
-   :ekg       (js/require "../resources/images/tokens/mainnet/EKG.png")
-   :eko       (js/require "../resources/images/tokens/mainnet/EKO.png")
-   :elf       (js/require "../resources/images/tokens/mainnet/ELF.png")
-   :emona     (js/require "../resources/images/tokens/mainnet/EMONA.png")
-   :eng       (js/require "../resources/images/tokens/mainnet/ENG.png")
-   :enj       (js/require "../resources/images/tokens/mainnet/ENJ.png")
-   :ens       (js/require "../resources/images/tokens/mainnet/ENS.png")
-   :eos       (js/require "../resources/images/tokens/mainnet/EOS.png")
-   :equad     (js/require "../resources/images/tokens/mainnet/EQUAD.png")
-   :eth       (js/require "../resources/images/tokens/mainnet/ETH-token.png")
-   :eth2x-fli (js/require "../resources/images/tokens/mainnet/ETH2x-FLI.png")
-   :ethos     (js/require "../resources/images/tokens/mainnet/ETHOS.png")
-   :evx       (js/require "../resources/images/tokens/mainnet/EVX.png")
-   :fuel      (js/require "../resources/images/tokens/mainnet/FUEL.png")
-   :fun       (js/require "../resources/images/tokens/mainnet/FUN.png")
-   :fxc       (js/require "../resources/images/tokens/mainnet/FXC.png")
-   :gdc       (js/require "../resources/images/tokens/mainnet/GDC.png")
-   :gen       (js/require "../resources/images/tokens/mainnet/GEN.png")
-   :glm       (js/require "../resources/images/tokens/mainnet/GLM.png")
-   :gno       (js/require "../resources/images/tokens/mainnet/GNO.png")
-   :gnt       (js/require "../resources/images/tokens/mainnet/GNT.png")
-   :grid      (js/require "../resources/images/tokens/mainnet/GRID.png")
-   :grt       (js/require "../resources/images/tokens/mainnet/GRT.png")
-   :hez       (js/require "../resources/images/tokens/mainnet/HEZ.png")
-   :hst       (js/require "../resources/images/tokens/mainnet/HST.png")
-   :ht        (js/require "../resources/images/tokens/mainnet/HT.png")
-   :icn       (js/require "../resources/images/tokens/mainnet/ICN.png")
-   :icos      (js/require "../resources/images/tokens/mainnet/ICOS.png")
-   :iost      (js/require "../resources/images/tokens/mainnet/IOST.png")
-   :kdo       (js/require "../resources/images/tokens/mainnet/KDO.png")
-   :kin       (js/require "../resources/images/tokens/mainnet/KIN.png")
-   :knc       (js/require "../resources/images/tokens/mainnet/KNC.png")
-   :kudos     (js/require "../resources/images/tokens/mainnet/Kudos.png")
-   :lend      (js/require "../resources/images/tokens/mainnet/LEND.png")
-   :link      (js/require "../resources/images/tokens/mainnet/LINK.png")
-   :lisk      (js/require "../resources/images/tokens/mainnet/LISK.png")
-   :loom      (js/require "../resources/images/tokens/mainnet/LOOM.png")
-   :lpt       (js/require "../resources/images/tokens/mainnet/LPT.png")
-   :lrc       (js/require "../resources/images/tokens/mainnet/LRC.png")
-   :mana      (js/require "../resources/images/tokens/mainnet/MANA.png")
-   :mco       (js/require "../resources/images/tokens/mainnet/MCO.png")
-   :mda       (js/require "../resources/images/tokens/mainnet/MDA.png")
-   :met       (js/require "../resources/images/tokens/mainnet/MET.png")
-   :mfg       (js/require "../resources/images/tokens/mainnet/MFG.png")
-   :mgo       (js/require "../resources/images/tokens/mainnet/MGO.png")
-   :mkr       (js/require "../resources/images/tokens/mainnet/MKR.png")
-   :mln       (js/require "../resources/images/tokens/mainnet/MLN.png")
-   :moc       (js/require "../resources/images/tokens/mainnet/MOC.png")
-   :mod       (js/require "../resources/images/tokens/mainnet/MOD.png")
-   :mth       (js/require "../resources/images/tokens/mainnet/MTH.png")
-   :mtl       (js/require "../resources/images/tokens/mainnet/MTL.png")
-   :myb       (js/require "../resources/images/tokens/mainnet/MYB.png")
-   :nexo      (js/require "../resources/images/tokens/mainnet/NEXO.png")
-   :nexxo     (js/require "../resources/images/tokens/mainnet/NEXXO.png")
-   :nmr       (js/require "../resources/images/tokens/mainnet/NMR.png")
-   :npxs      (js/require "../resources/images/tokens/mainnet/NPXS.png")
-   :ogn       (js/require "../resources/images/tokens/mainnet/OGN.png")
-   :omg       (js/require "../resources/images/tokens/mainnet/OMG.png")
-   :otn       (js/require "../resources/images/tokens/mainnet/OTN.png")
-   :oxt       (js/require "../resources/images/tokens/mainnet/OXT.png")
-   :pax       (js/require "../resources/images/tokens/mainnet/PAX.png")
-   :paxg      (js/require "../resources/images/tokens/mainnet/PAXG.png")
-   :pay       (js/require "../resources/images/tokens/mainnet/PAY.png")
-   :pbtc      (js/require "../resources/images/tokens/mainnet/PBTC.png")
-   :plr       (js/require "../resources/images/tokens/mainnet/PLR.png")
-   :poe       (js/require "../resources/images/tokens/mainnet/POE.png")
-   :poly      (js/require "../resources/images/tokens/mainnet/POLY.png")
-   :powr      (js/require "../resources/images/tokens/mainnet/POWR.png")
-   :ppp       (js/require "../resources/images/tokens/mainnet/PPP.png")
-   :ppt       (js/require "../resources/images/tokens/mainnet/PPT.png")
-   :pt        (js/require "../resources/images/tokens/mainnet/PT.png")
-   :qkc       (js/require "../resources/images/tokens/mainnet/QKC.png")
-   :qrl       (js/require "../resources/images/tokens/mainnet/QRL.png")
-   :qsp       (js/require "../resources/images/tokens/mainnet/QSP.png")
-   :r         (js/require "../resources/images/tokens/mainnet/R.png")
-   :rae       (js/require "../resources/images/tokens/mainnet/RAE.png")
-   :rare      (js/require "../resources/images/tokens/mainnet/RARE.png")
-   :rcn       (js/require "../resources/images/tokens/mainnet/RCN.png")
-   :rdn       (js/require "../resources/images/tokens/mainnet/RDN.png")
-   :ren       (js/require "../resources/images/tokens/mainnet/REN.png")
-   :rep       (js/require "../resources/images/tokens/mainnet/REP.png")
-   :req       (js/require "../resources/images/tokens/mainnet/REQ.png")
-   :rhoc      (js/require "../resources/images/tokens/mainnet/RHOC.png")
-   :rlc       (js/require "../resources/images/tokens/mainnet/RLC.png")
-   :rol       (js/require "../resources/images/tokens/mainnet/ROL.png")
-   :sai       (js/require "../resources/images/tokens/mainnet/SAI.png")
-   :salt      (js/require "../resources/images/tokens/mainnet/SALT.png")
-   :san       (js/require "../resources/images/tokens/mainnet/SAN.png")
-   :sngls     (js/require "../resources/images/tokens/mainnet/SNGLS.png")
-   :snm       (js/require "../resources/images/tokens/mainnet/SNM.png")
-   :snt       (js/require "../resources/images/tokens/mainnet/SNT.png")
-   :snx       (js/require "../resources/images/tokens/mainnet/SNX.png")
-   :socks     (js/require "../resources/images/tokens/mainnet/SOCKS.png")
-   :spank     (js/require "../resources/images/tokens/mainnet/SPANK.png")
-   :spike     (js/require "../resources/images/tokens/mainnet/SPIKE.png")
-   :spn       (js/require "../resources/images/tokens/mainnet/SPN.png")
-   :st        (js/require "../resources/images/tokens/mainnet/ST.png")
-   :storj     (js/require "../resources/images/tokens/mainnet/STORJ.png")
-   :storm     (js/require "../resources/images/tokens/mainnet/STORM.png")
-   :strk      (js/require "../resources/images/tokens/mainnet/STRK.png")
-   :stx       (js/require "../resources/images/tokens/mainnet/STX.png")
-   :sub       (js/require "../resources/images/tokens/mainnet/SUB.png")
-   :supr      (js/require "../resources/images/tokens/mainnet/SUPR.png")
-   :susd      (js/require "../resources/images/tokens/mainnet/sUSD.png")
-   :taas      (js/require "../resources/images/tokens/mainnet/TAAS.png")
-   :taud      (js/require "../resources/images/tokens/mainnet/TAUD.png")
-   :tcad      (js/require "../resources/images/tokens/mainnet/TCAD.png")
-   :tgbp      (js/require "../resources/images/tokens/mainnet/TGBP.png")
-   :tkn       (js/require "../resources/images/tokens/mainnet/TKN.png")
-   :tkx       (js/require "../resources/images/tokens/mainnet/TKX.png")
-   :tnt       (js/require "../resources/images/tokens/mainnet/TNT.png")
-   :trst      (js/require "../resources/images/tokens/mainnet/TRST.png")
-   :trx       (js/require "../resources/images/tokens/mainnet/TRX.png")
-   :tusd      (js/require "../resources/images/tokens/mainnet/TUSD.png")
-   :ubi       (js/require "../resources/images/tokens/mainnet/UBI.png")
-   :ubt       (js/require "../resources/images/tokens/mainnet/UBT.png")
-   :ukg       (js/require "../resources/images/tokens/mainnet/UKG.png")
-   :uni       (js/require "../resources/images/tokens/mainnet/UNI.png")
-   :upp       (js/require "../resources/images/tokens/mainnet/UPP.png")
-   :usdc      (js/require "../resources/images/tokens/mainnet/USDC.png")
-   :usds      (js/require "../resources/images/tokens/mainnet/USDS.png")
-   :usdt      (js/require "../resources/images/tokens/mainnet/USDT.png")
-   :veri      (js/require "../resources/images/tokens/mainnet/VERI.png")
-   :vgx       (js/require "../resources/images/tokens/mainnet/VGX.png")
-   :vib       (js/require "../resources/images/tokens/mainnet/VIB.png")
-   :wabi      (js/require "../resources/images/tokens/mainnet/WaBi.png")
-   :wbtc      (js/require "../resources/images/tokens/mainnet/WBTC.png")
-   :weth      (js/require "../resources/images/tokens/mainnet/WETH.png")
-   :wings     (js/require "../resources/images/tokens/mainnet/WINGS.png")
-   :wtc       (js/require "../resources/images/tokens/mainnet/WTC.png")
-   :xaur      (js/require "../resources/images/tokens/mainnet/XAUR.png")
-   :xpa       (js/require "../resources/images/tokens/mainnet/XPA.png")
-   :xrl       (js/require "../resources/images/tokens/mainnet/XRL.png")
-   :xuc       (js/require "../resources/images/tokens/mainnet/XUC.png")
-   :zrx       (js/require "../resources/images/tokens/mainnet/ZRX.png")
-   :zsc       (js/require "../resources/images/tokens/mainnet/ZSC.png")})
-
-(defn get-token
-  [k]
-  (get tokens k))
-
 (def ^:private networks
   {:arbitrum (js/require "../resources/images/networks/Arbitrum.png")
    :ethereum (js/require "../resources/images/networks/Ethereum.png")

src/status_im2/contexts/quo_preview/community/token_gating.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.community.token-gating
   (:require
     [quo.core :as quo]
-    [quo.foundations.resources :as resources]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -22,29 +21,24 @@
   [sufficient? many-tokens? loading?]
   (into
    [{:symbol      "KNC"
-     :img-src     (resources/get-token :knc)
      :amount      200
      :sufficient? true
      :loading?    loading?}
     {:symbol       "MANA"
-     :img-src      (resources/get-token :mana)
      :amount       10
      :sufficient?  sufficient?
      :purchasable? true
      :loading?     loading?}
     {:symbol      "RARE"
-     :img-src     (resources/get-token :rare)
      :amount      10
      :sufficient? sufficient?
      :loading?    loading?}]
    (when many-tokens?
      [{:symbol      "FXC"
-       :img-src     (resources/get-token :fxc)
        :amount      20
        :sufficient? true
        :loading?    loading?}
       {:symbol      "SNT"
-       :img-src     (resources/get-token :snt)
        :amount      10000
        :sufficient? sufficient?
        :loading?    loading?}])))
@@ -58,11 +52,9 @@
                                 many-tokens?
                                 loading?)
         [{:symbol      "FXC"
-          :img-src     (resources/get-token :fxc)
           :amount      20
           :sufficient? true}
          {:symbol      "USDT"
-          :img-src     (resources/get-token :usdt)
           :amount      20
           :sufficient? false}]]
        [(join-gate-options-base sufficient?

src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs

@@ -2,7 +2,6 @@
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
-    [quo.foundations.resources :as quo.resources]
     [react-native.core :as rn]
     [status-im2.common.resources :as resources]))
 
@@ -42,10 +41,9 @@
   [:<>
    [quo/text {:style {:margin-right 4}} "Hold"]
    [quo/token-tag
-    {:size          :size-24
+    {:size         :size-24
-     :token-img-src (quo.resources/get-token :eth)
+     :token-value  5
-     :token-value   5
+     :token-symbol "ETH"}]
-     :token-symbol  "ETH"}]
    [quo/text {:style {:margin-left 4}} "To post"]])
 
 (defn example-3

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

@@ -66,12 +66,7 @@
     :emoji               "🍓"
     :type                :default}])
 
-(def tokens-list
+(def tokens-list [:snt :eth :knc :mana :rare])
-  [{:source (quo.resources/get-token :snt)}
-   {:source (quo.resources/get-token :eth)}
-   {:source (quo.resources/get-token :knc)}
-   {:source (quo.resources/get-token :mana)}
-   {:source (quo.resources/get-token :rare)}])
 
 (def communities-list
   [{:source (resources/get-mock-image :coinbase)}

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

@@ -20,12 +20,9 @@
               {:key :selected}]}
    {:key     :token
     :type    :select
-    :options [{:value :eth
+    :options [{:key :eth}
-               :key   (quo.resources/get-token :eth)}
+              {:key :snt}
-              {:value :snt
+              {:key :dai}]}
-               :key   (quo.resources/get-token :snt)}
-              {:value :dai
-               :key   (quo.resources/get-token :dai)}]}
    {:key  :label
     :type :text}
    {:key  :token-value
@@ -38,7 +35,7 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:token               (quo.resources/get-token :snt)
+  (let [state (reagent/atom {:token               :snt
                              :label               "Status"
                              :token-value         "0.00 SNT"
                              :fiat-value          "€0.00"

src/status_im2/contexts/quo_preview/settings/category.cljs

@@ -21,7 +21,10 @@
   [{:key :blur? :type :boolean}
    {:key     :list-type
     :type    :select
-    :options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}])
+    :options [{:key   :settings
+               :value :settings}
+              {:key   :reorder
+               :value :reorder}]}])
 
 (defn view
   []

src/status_im2/contexts/quo_preview/settings/reorder_item.cljs

@@ -2,7 +2,6 @@
   (:require
     [quo.components.settings.reorder-item.types :as types]
     [quo.core :as quo]
-    [quo.foundations.resources :as quo.resources]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -22,10 +21,10 @@
            :title      "Status"}}
    {:id   3
     :type types/item
-    :data {:image      (quo.resources/get-token :eth)
+    :data {:image      (resources/get-mock-image :status-logo)
            :image-size 21
            :right-icon :i/world
-           :title      "Ethereum"}}
+           :title      "Status"}}
    {:id   4
     :type types/item
     :data {:image      (resources/get-mock-image :monkey)

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -97,8 +97,11 @@
   [size-descriptor
    {:key  :amount
     :type :text}
-   {:key  :token-name
+   {:key     :token
-    :type :text}])
+    :type    :select
+    :options [{:key "ETH"}
+              {:key "SNT"}
+              {:key "DAI"}]}])
 
 (def network-descriptor
   [size-descriptor
@@ -202,8 +205,7 @@
           :community-logo      (resources/mock-images :coinbase)
           :community-name      "Community"
           :channel-name        "my channel"
-          :token-logo          (resources/mock-images :diamond)
+          :token               "ETH"
-          :token-name          "ETH"
           :amount              "10"
           :network-logo        (resources/mock-images :monkey)
           :network-name        "Network"

src/status_im2/contexts/quo_preview/tags/summary_tag.cljs

@@ -13,7 +13,7 @@
     :token
     {:customization-color "#9999991A"
      :label               "150 ETH"
-     :image-source        (quo.resources/get-token :eth)}
+     :token               :eth}
     :address
     {:label "0x39c...Bd2"}
     :user

src/status_im2/contexts/quo_preview/tags/token_tag.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.token-tag
   (:require
     [quo.core :as quo]
-    [quo.foundations.resources :as resources]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
@@ -42,9 +41,6 @@
               {:key   "SNT"
                :value "SNT"}]}])
 
-(def eth-token (resources/get-token :eth))
-(def snt-token (resources/get-token :snt))
-
 (defn view
   []
   (let [state (reagent/atom {:size         :size-24
@@ -59,7 +55,4 @@
         :show-blur-background? true
         :descriptor            descriptor}
        [rn/view {:style {:align-items :center}}
-        [quo/token-tag
+        [quo/token-tag @state]]])))
-         (assoc @state
-                :token-img-src
-                (if (= (get-in @state [:token-symbol]) "ETH") eth-token snt-token))]]])))

src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs

@@ -7,25 +7,22 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def asset-snt
-  {:size       24
+  {:size   24
-   :type       :token
+   :type   :token
-   :token-name "SNT"
+   :token  "SNT"
-   :amount     1500
+   :amount 1500})
-   :token-logo (quo.resources/get-token :snt)})
 
 (def asset-eth
-  {:size       24
+  {:size   24
-   :type       :token
+   :type   :token
-   :token-name "ETH"
+   :token  "ETH"
-   :amount     75
+   :amount 75})
-   :token-logo (quo.resources/get-token :eth)})
 
 (def asset-dai
-  {:size       24
+  {:size   24
-   :type       :token
+   :type   :token
-   :token-name "DAI"
+   :token  "DAI"
-   :amount     2400
+   :amount 2400})
-   :token-logo (quo.resources/get-token :dai)})
 
 (def asset-collectible
   {:size               24
@@ -157,7 +154,6 @@
     :value "At"}])
 
 (def descriptor
-
   (concat
    [{:key     :transaction
      :type    :select

src/status_im2/contexts/quo_preview/wallet/wallet_activity.cljs

@@ -8,18 +8,16 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def asset-snt
-  {:size       24
+  {:size   24
-   :type       :token
+   :type   :token
-   :token-name "SNT"
+   :token  "SNT"
-   :amount     1500
+   :amount 1500})
-   :token-logo (quo.resources/get-token :snt)})
 
 (def asset-dai
-  {:size       24
+  {:size   24
-   :type       :token
+   :type   :token
-   :token-name "DAI"
+   :token  "DAI"
-   :amount     2400
+   :amount 2400})
-   :token-logo (quo.resources/get-token :dai)})
 
 (def asset-collectible
   {:size               24

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

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.wallet.common.temp
   (:require
-    [quo.foundations.resources :as quo.resources]
     [react-native.core :as rn]
     [status-im2.common.resources :as status.resources]
     [utils.i18n :as i18n]))
@@ -86,21 +85,21 @@
 
 (defn bridge-token-list
   [networks-list]
-  [{:token               (quo.resources/get-token :snt)
+  [{:token               :snt
     :label               "Status"
     :token-value         "0.00 SNT"
     :fiat-value          "€0.00"
     :networks            networks-list
     :state               :default
     :customization-color :blue}
-   {:token               (quo.resources/get-token :eth)
+   {:token               :eth
     :label               "Ethereum"
     :token-value         "0.00 ETH"
     :fiat-value          "€0.00"
     :networks            networks-list
     :state               :default
     :customization-color :blue}
-   {:token               (quo.resources/get-token :dai)
+   {:token               :dai
     :label               "Dai"
     :token-value         "0.00 DAI"
     :fiat-value          "€0.00"

src/status_im2/contexts/wallet/send/select_asset/view.cljs

@@ -1,8 +1,6 @@
 (ns status-im2.contexts.wallet.send.select-asset.view
   (:require
-    [clojure.string :as string]
     [quo.core :as quo]
-    [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
@@ -24,7 +22,7 @@
           balance-fiat-formatted  (.toFixed (:total-balance-fiat token) 2)
           currency-symbol         "$"]
       [quo/token-network
-       {:token       (quo.resources/get-token (keyword (string/lower-case (:symbol token))))
+       {:token       (:symbol token)
         :label       (:name token)
         :token-value (str total-balance-formatted " " (:symbol token))
         :fiat-value  (str currency-symbol balance-fiat-formatted)

src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.wallet.send.transaction-confirmation.view
   (:require
     [quo.core :as quo]
-    [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
@@ -24,7 +23,7 @@
     [quo/summary-tag
      {:label        "150 ETH"
       :type         :token
-      :image-source (quo.resources/get-token :eth)}]]
+      :image-source :eth}]]
    [rn/view
     {:style {:flex-direction :row
              :margin-top     4}}