Create token component

src/quo/components/token.cljs

@@ -0,0 +1,53 @@
+(ns quo.components.token
+  (:require [clojure.string :as string]
+            [quo.foundations.resources :as resources]
+            [react-native.core :as rn]
+            [utils.number]))
+
+(defn- size->number
+  "Remove `size-` prefix in size keywords and returns a number useful for styling."
+  [k]
+  (utils.number/parse-int (subs (name k) 5)))
+
+(defn- token-style
+  [style size]
+  (let [size-number (if (keyword? size)
+                      (size->number size)
+                      size)]
+    (assoc style
+           :width  size-number
+           :height size-number)))
+
+(defn- get-token-image*
+  [token]
+  (let [token-name (condp #(%1 %2) token
+                     string?  (keyword (string/lower-case token))
+                     keyword? (keyword (string/lower-case (name token)))
+                     nil)]
+    (resources/get-token token-name)))
+
+(def ^:private get-token-image (memoize get-token-image*))
+(def ^:private b64-png-image-prefix "data:image/png;base64,")
+
+(defn view
+  "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
+           token :snt}}]
+  (let [b64-string (if (and image-source add-b64-prefix?)
+                     (str b64-png-image-prefix image-source)
+                     image-source)
+        source     (or b64-string (get-token-image token))]
+    [rn/image
+     {:style  (token-style style size)
+      :source source}]))

src/quo/core.cljs

@@ -139,6 +139,7 @@
     quo.components.tags.token-tag.view
     quo.components.text-combinations.channel-name.view
     quo.components.text-combinations.view
+    quo.components.token
     quo.components.wallet.account-card.view
     quo.components.wallet.account-origin.view
     quo.components.wallet.account-overview.view
@@ -374,6 +375,9 @@
 (def text-combinations quo.components.text-combinations.view/view)
 (def channel-name quo.components.text-combinations.channel-name.view/view)
 
+;;;; Token
+(def token quo.components.token/view)
+
 ;;;; Wallet
 (def account-card quo.components.wallet.account-card.view/view)
 (def account-origin quo.components.wallet.account-origin.view/view)