Show network info on collectible info page (#17980)

src/quo/components/settings/data_item/component_spec.cljs

@@ -1,6 +1,7 @@
 (ns quo.components.settings.data-item.component-spec
   (:require
     [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
     [test-helpers.component :as h]))
 
 (h/describe
@@ -161,7 +162,8 @@
                 :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
-                :customization-color :yellow}])
+                :customization-color :yellow
+                :network-image       (quo.resources/get-network :ethereum)}])
     (h/is-truthy (h/query-by-label-text :description-image)))
 
   (h/test "description emoji is visible when description is account"

src/quo/components/settings/data_item/view.cljs

@@ -7,7 +7,6 @@
     [quo.components.markdown.text :as text]
     [quo.components.settings.data-item.style :as style]
     [quo.foundations.colors :as colors]
-    [quo.foundations.resources :as quo.resources]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -17,7 +16,8 @@
   [rn/view {:style (style/loading-container size blur? theme)}])
 
 (defn- left-subtitle
-  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji]}]
+  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji
+           network-image]}]
   [rn/view {:style style/subtitle-container}
    (when (not= :small size)
      [rn/view {:style (style/subtitle-icon-container description)}
@@ -33,7 +33,7 @@
                    :type                :default}]
         :network [rn/image
                   {:accessibility-label :description-image
-                   :source              (quo.resources/tokens :eth)
+                   :source              network-image
                    :style               style/image}]
         nil)])
    [text/text
@@ -60,7 +60,7 @@
 (defn- left-side
   "The description can either be given as a string `description` or a component `custom-subtitle`"
   [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
-           customization-color
+           customization-color network-image
            emoji]
     :as   props}]
   [rn/view {:style style/left-side}
@@ -85,7 +85,8 @@
          :blur?               blur?
          :subtitle            subtitle
          :customization-color customization-color
-         :emoji               emoji}]))])
+         :emoji               emoji
+         :network-image       network-image}]))])
 
 (defn- right-side
   [{:keys [label icon-right? right-icon icon-color communities-list]}]

src/status_im2/contexts/quo_preview/settings/data_item.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.quo-preview.settings.data-item
   (:require
     [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
@@ -50,6 +51,7 @@
                              :right-icon          :i/chevron-right
                              :emoji               "🎮"
                              :customization-color :yellow
+                             :network-image       (quo.resources/get-network :ethereum)
                              :communities-list    communities-list})]
     (fn []
       [preview/preview-container

src/status_im2/contexts/wallet/collectible/view.cljs

@@ -1,6 +1,8 @@
 (ns status-im2.contexts.wallet.collectible.view
   (:require
+    [clojure.string :as string]
     [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
     [react-native.core :as rn]
     [status-im2.common.scroll-page.view :as scroll-page]
     [status-im2.contexts.wallet.collectible.style :as style]
@@ -80,33 +82,39 @@
        :content-container-style style/traits-container}]]))
 
 (defn info
-  []
+  [chain-id]
-  [rn/view
+  (let [network         (rf/sub [:wallet/network-details-by-chain-id
-   {:style style/info-container}
+                                 chain-id])
-   [rn/view {:style style/account}
+        network-keyword (get network :network-name)
-    [quo/data-item
+        network-name    (string/capitalize (name network-keyword))]
-     {:description         :account
+    [rn/view
-      :card?               true
+     {:style style/info-container}
-      :status              :default
+     [rn/view {:style style/account}
-      :size                :default
+      [quo/data-item
-      :title               (i18n/label :t/account-title)
+       {:description         :account
-      :subtitle            "Collectibles vault"
+        :card?               true
-      :emoji               "🎮"
+        :status              :default
-      :customization-color :yellow}]]
+        :size                :default
+        :title               (i18n/label :t/account-title)
+        :subtitle            "Collectibles vault"
+        :emoji               "🎮"
+        :customization-color :yellow}]]
 
-   [rn/view {:style style/network}
+     [rn/view {:style style/network}
-    [quo/data-item
+      [quo/data-item
-     {:description :network
+       {:description   :network
-      :card?       true
+        :card?         true
-      :status      :default
+        :status        :default
-      :size        :default
+        :size          :default
-      :title       (i18n/label :t/network)
+        :title         (i18n/label :t/network)
-      :subtitle    (i18n/label :t/mainnet)}]]])
+        :network-image (quo.resources/get-network network-keyword)
+        :subtitle      network-name}]]]))
 
 (defn view
   []
-  (let [collectible-details                           (rf/sub [:wallet/last-collectible-details])
+  (let [collectible-details                              (rf/sub [:wallet/last-collectible-details])
-        {:keys [name description preview-url traits]} collectible-details]
+        {:keys [name description preview-url traits id]} collectible-details
+        chain-id                                         (get-in id [:contract-id :chain-id])]
     [scroll-page/scroll-page
      {:navigate-back? true
       :height         148
@@ -124,5 +132,5 @@
       [header collectible-details]
       [cta-buttons]
       [tabs]
-      [info]
+      [info chain-id]
       [traits-section traits]]]))

src/status_im2/subs/wallet/networks.cljs

@@ -41,3 +41,9 @@
                :chain-id         chain-id
                :related-chain-id related-chain-id)))
     networks)))
+
+(re-frame/reg-sub
+ :wallet/network-details-by-chain-id
+ :<- [:wallet/network-details]
+ (fn [networks [_ chain-id]]
+   (some #(when (= chain-id (:chain-id %)) %) networks)))