diff --git a/src/quo/components/token.cljs b/src/quo/components/token.cljs new file mode 100644 index 000000000000..8d07503db255 --- /dev/null +++ b/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}])) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 04b061080716..a6ef853d3083 100644 --- a/src/quo/core.cljs +++ b/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)