Fix collectible/token icon and name on addresses for permissions screen (#18897)

src/quo/components/wallet/account_permissions/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.wallet.account-permissions.view
-  (:require [quo.components.avatars.account-avatar.view :as account-avatar]
+  (:require [clojure.string :as string]
+            [quo.components.avatars.account-avatar.view :as account-avatar]
             [quo.components.dividers.divider-line.view :as divider-line]
             [quo.components.icon :as icons]
             [quo.components.markdown.text :as text]
@@ -28,17 +29,24 @@
          (i18n/label :t/no-relevant-tokens)]
 
         (let [token-length (dec (count tokens))]
-          (map-indexed (fn [idx {:keys [type token amount collectible-name collectible-img-src]}]
+          (map-indexed
-                         ^{:key idx}
+           (fn [idx
-                         [required-tokens/view
+                {:keys              [type token amount collectible-name collectible-img-src
-                          {:container-style     style/token-and-text
+                                     token-img-src]
-                           :type                type
+                 collectible-symbol :symbol}]
-                           :amount              amount
+             ^{:key idx}
-                           :token               token
+             [required-tokens/view
-                           :collectible-img-src collectible-img-src
+              {:container-style     style/token-and-text
-                           :collectible-name    collectible-name
+               :type                type
-                           :divider?            (not= token-length idx)}])
+               :amount              amount
-                       tokens)))]]))
+               :token               token
+               :token-img-src       token-img-src
+               :collectible-img-src collectible-img-src
+               :collectible-name    (if (string/blank? collectible-name)
+                                      collectible-symbol
+                                      collectible-name)
+               :divider?            (not= token-length idx)}])
+           tokens)))]]))
 
 (defn- view-internal
   [{:keys

src/quo/components/wallet/required_tokens/view.cljs

@@ -30,7 +30,7 @@
      :style  {:margin-left 4}}
     (case type
       :token       (str amount " " token)
-      :collectible collectible-name
+      :collectible (str amount " " collectible-name)
       nil)]
    (when divider?
      [rn/view

src/status_im/contexts/communities/actions/addresses_for_permissions/view.cljs

@@ -2,7 +2,6 @@
   (:require [quo.core :as quo]
             [react-native.gesture :as gesture]
             [status-im.common.not-implemented :as not-implemented]
-            [status-im.common.resources :as resources]
             [status-im.constants :as constants]
             [utils.i18n :as i18n]
             [utils.money :as money]
@@ -18,8 +17,8 @@
     nil))
 
 (defn- balances->components-props
-  [balances]
+  [balances images-by-symbol]
-  (for [{:keys [amount decimals type name] :as balance} balances]
+  (for [{:keys [amount decimals type name] sym :symbol :as balance} balances]
     (cond-> balance
       true
       (assoc :type
@@ -30,22 +29,24 @@
 
       (= type constants/community-token-type-erc721)
       (assoc :collectible-name    name
-             :collectible-img-src (resources/get-mock-image :collectible))
+             :collectible-img-src (images-by-symbol sym))
 
       (= type constants/community-token-type-erc20)
-      (assoc :amount (str (money/token->unit amount decimals))
+      (assoc :amount        (str (money/token->unit amount decimals))
-             :token  (:symbol balance)))))
+             :token         (:symbol balance)
+             :token-img-src (images-by-symbol sym)))))
 
 (defn- account-item
   [{:keys [color address name emoji]} _ _
    {:keys [selected-addresses community-id share-all-addresses? community-color]}]
-  (let [balances (rf/sub [:communities/permissioned-balances-by-address community-id address])]
+  (let [balances         (rf/sub [:communities/permissioned-balances-by-address community-id address])
+        images-by-symbol (rf/sub [:communities/token-images-by-symbol community-id])]
     [quo/account-permissions
      {:account             {:name                name
                             :address             address
                             :emoji               emoji
                             :customization-color color}
-      :token-details       (balances->components-props balances)
+      :token-details       (balances->components-props balances images-by-symbol)
       :checked?            (contains? selected-addresses address)
       :disabled?           share-all-addresses?
       :on-change           #(rf/dispatch [:communities/toggle-selected-permission-address

src/status_im/subs/communities.cljs

@@ -412,3 +412,13 @@
     (re-frame/subscribe [:communities/airdrop-address community-id])])
  (fn [[accounts airdrop-address]]
    (first (filter #(= (:address %) airdrop-address) accounts))))
+
+(re-frame/reg-sub
+ :communities/token-images-by-symbol
+ (fn [[_ community-id]]
+   [(re-frame/subscribe [:communities/community community-id])])
+ (fn [[{:keys [tokens-metadata]}] _]
+   (->> tokens-metadata
+        (map (fn [{sym :symbol image :image}]
+               {sym image}))
+        (into {}))))

src/status_im/subs/communities_test.cljs

@@ -505,3 +505,24 @@
         :communities
         {community-id {:color community-color}})
       (is (match? community-color (rf/sub [sub-name community-id]))))))
+
+(h/deftest-sub :communities/token-images-by-symbol
+  [sub-name]
+  (testing
+    "returns a map keyed by the images of tokens/collectibles
+            And has data-uri as it's values"
+    (swap! rf-db/app-db assoc-in
+      [:communities community-id :tokens-metadata]
+      [{:contract-addresses {:420 "0x1"}
+        :image              "data:image/jpeg;base64,/9j/2wCEAAYEBQYFBAYGBQYH"
+        :tokenType          2
+        :symbol             "DOGE"
+        :name               "Doge Coin coll"}
+       {:contract-addresses {:420 "0x1"}
+        :image              "data:image/jpeg;base64,/9j/2wCEAAYEBQYFBAYGBQYH"
+        :tokenType          2
+        :symbol             "BTC"
+        :name               "Bitcoin coll"}])
+    (is (match? {"DOGE" "data:image/jpeg;base64,/9j/2wCEAAYEBQYFBAYGBQYH"
+                 "BTC"  "data:image/jpeg;base64,/9j/2wCEAAYEBQYFBAYGBQYH"}
+                (rf/sub [sub-name community-id])))))