Add support to display token images in token gated communities (#18174)

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]
+   (map-indexed (fn [token-index {:keys [img-src amount sufficient? purchasable?] :as token}]
-                  (let [{:keys [amount sufficient? purchasable?]} token]
+                  ^{:key token-index}
-                    ^{:key token-index}
+                  [rn/view {:style style/token-tag-spacing}
-                    [rn/view {:style style/token-tag-spacing}
+                   [token-tag/view
-                     [token-tag/view
+                    {:token-symbol  (:symbol token)
-                      {:token-symbol (:symbol token)
+                     :token-img-src img-src
-                       :token-value  amount
+                     :token-value   amount
-                       :size         :size-24
+                     :size          :size-24
-                       :options      (cond
+                     :options       (cond
-                                       sufficient?  :hold
+                                      sufficient?  :hold
-                                       purchasable? :add)}]]))
+                                      purchasable? :add)}]])
                 tokens)])
 
 (defn- internal-view

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)
+          {:style        (style/token-img size)
-           :token token-symbol
+           :token        token-symbol
-           :size  (case size
+           :size         (case size
-                    :size-24 :size-20
+                           :size-24 :size-20
-                    :size-32 :size-28)}]
+                           :size-32 :size-28)
+           :image-source token-img-src}]
          [text/text
           {:size   :paragraph-2
            :weight :medium

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]]
+     [: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?]]]
    :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.
+   - style:        extra styles to apply to the `rn/image` component.
-   - size:            `:size-nn` or just `nn`, being `nn` any number. Defaults to 32.
+   - 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.
+   - token:        string or keyword, it can contain upper case letters or not.
-                      E.g. all of these are valid and resolve to the same:
+                   E.g. all of these are valid and resolve to the same:
-                      :token/snt | :snt | :SNT | \"SNT\" | \"snt\".
+                   :token/snt | :snt | :SNT | \"SNT\" | \"snt\".
-   - image-source:    Ignores `token` and uses this as parameter to `rn/image`'s source.
+   - image-source: Ignores `token` and uses this as parameter to `rn/image`'s source, it
-   - add-b64-prefix?: If true, adds `data:image/png;base64,` as prefix to the string
+                   can be a b64 string representing an image.
-                      passed as `image-source`.
   "
-  [{: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?)
+  (let [img-src (if (string? image-source)
-                     (str b64-png-image-prefix image-source)
+                  (normalize-b64-string image-source)
-                     image-source)
+                  image-source)]
-        source     (or b64-string (token-loader/get-token-image token))]
+    (if-let [existing-source (or img-src (token-loader/get-token-image token))]
-    (if source
       [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))