From a9ec2ca7bac1113b0f039dfbb914b7bdc32d789a Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Fri, 19 Jan 2024 20:51:50 -0600 Subject: [PATCH] Add support to display token images in token gated communities (#18174) --- .../components/community/token_gating.cljs | 22 +++++------ src/quo/components/tags/token_tag/view.cljs | 13 ++++--- src/quo/components/utilities/token/view.cljs | 38 ++++++++++--------- 3 files changed, 38 insertions(+), 35 deletions(-) diff --git a/src/quo/components/community/token_gating.cljs b/src/quo/components/community/token_gating.cljs index 387ec5bd41..18fe8d9464 100644 --- a/src/quo/components/community/token_gating.cljs +++ b/src/quo/components/community/token_gating.cljs @@ -11,17 +11,17 @@ (defn token-requirement-list-row [tokens padding?] [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)}]])) + (map-indexed (fn [token-index {:keys [img-src amount sufficient? purchasable?] :as token}] + ^{:key token-index} + [rn/view {:style style/token-tag-spacing} + [token-tag/view + {:token-symbol (:symbol token) + :token-img-src img-src + :token-value amount + :size :size-24 + :options (cond + sufficient? :hold + purchasable? :add)}]]) tokens)]) (defn- internal-view diff --git a/src/quo/components/tags/token_tag/view.cljs b/src/quo/components/tags/token_tag/view.cljs index 80224709c9..45b08e4ee5 100644 --- a/src/quo/components/tags/token_tag/view.cljs +++ b/src/quo/components/tags/token_tag/view.cljs @@ -20,7 +20,7 @@ - :token-symbol - string" [] (let [container-width (reagent/atom 0)] - (fn [{:keys [options size blur? theme token-value token-symbol] + (fn [{:keys [options size blur? theme token-value token-img-src token-symbol] :or {size :size-24}}] [rn/view {:on-layout #(reset! container-width @@ -42,11 +42,12 @@ [])} [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)}] + {:style (style/token-img size) + :token token-symbol + :size (case size + :size-24 :size-20 + :size-32 :size-28) + :image-source token-img-src}] [text/text {:size :paragraph-2 :weight :medium diff --git a/src/quo/components/utilities/token/view.cljs b/src/quo/components/utilities/token/view.cljs index fb6c94e8e4..8fe7fb023c 100644 --- a/src/quo/components/utilities/token/view.cljs +++ b/src/quo/components/utilities/token/view.cljs @@ -15,9 +15,7 @@ [: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 :schema.common/image-source :string]] - ;; If true, adds `data:image/png;base64,` as prefix to the string passed as `image-source` - [:add-b64-prefix? {:optional true} boolean?]]] + [:image-source {:optional true} [:or :schema.common/image-source :string]]]] :any]) (defn- size->number @@ -52,28 +50,32 @@ first string/capitalize)]]) +(defn- normalize-b64-string + [b64-image] + (if (string/starts-with? b64-image "data:image/") + b64-image + (str b64-png-image-prefix b64-image))) + (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`. + - 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, it + can be a b64 string representing an image. " - [{:keys [token size style image-source add-b64-prefix?] + [{:keys [token size style image-source] :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))] - (if source + (let [img-src (if (string? image-source) + (normalize-b64-string image-source) + image-source)] + (if-let [existing-source (or img-src (token-loader/get-token-image token))] [rn/image {:style (token-style style size) - :source source}] + :source existing-source}] [temp-empty-symbol token size style]))) (def view (schema/instrument #'view-internal ?schema))