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]
-                  (let [{:keys [amount sufficient? purchasable?]} token]
+   (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)}]]))
+                                      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
@@ -46,7 +46,8 @@
            :token        token-symbol
            :size         (case size
                            :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]]
-     ;; 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,6 +50,12 @@
             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:
@@ -60,20 +64,18 @@
    - 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`.
+   - 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))