diff --git a/resources/images/icons2/20x20/opensea@2x.png b/resources/images/icons2/20x20/opensea@2x.png index 87897b37927..bb921a392a6 100644 Binary files a/resources/images/icons2/20x20/opensea@2x.png and b/resources/images/icons2/20x20/opensea@2x.png differ diff --git a/resources/images/icons2/20x20/opensea@3x.png b/resources/images/icons2/20x20/opensea@3x.png index c8d07efd446..3d17150a80b 100644 Binary files a/resources/images/icons2/20x20/opensea@3x.png and b/resources/images/icons2/20x20/opensea@3x.png differ diff --git a/src/quo/components/settings/data_item/component_spec.cljs b/src/quo/components/settings/data_item/component_spec.cljs index 987237a8008..e9cd8ea931d 100644 --- a/src/quo/components/settings/data_item/component_spec.cljs +++ b/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" diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index 982697dc4f9..fec1c6f4e19 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/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]}] diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index 0f51b5e15b3..37b5b0d6614 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index eea88279f63..99d5c729bfe 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/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 - [] - [rn/view - {:style style/info-container} - [rn/view {:style style/account} - [quo/data-item - {:description :account - :card? true - :status :default - :size :default - :title (i18n/label :t/account-title) - :subtitle "Collectibles vault" - :emoji "🎮" - :customization-color :yellow}]] + [chain-id] + (let [network (rf/sub [:wallet/network-details-by-chain-id + chain-id]) + network-keyword (get network :network-name) + network-name (string/capitalize (name network-keyword))] + [rn/view + {:style style/info-container} + [rn/view {:style style/account} + [quo/data-item + {:description :account + :card? true + :status :default + :size :default + :title (i18n/label :t/account-title) + :subtitle "Collectibles vault" + :emoji "🎮" + :customization-color :yellow}]] - [rn/view {:style style/network} - [quo/data-item - {:description :network - :card? true - :status :default - :size :default - :title (i18n/label :t/network) - :subtitle (i18n/label :t/mainnet)}]]]) + [rn/view {:style style/network} + [quo/data-item + {:description :network + :card? true + :status :default + :size :default + :title (i18n/label :t/network) + :network-image (quo.resources/get-network network-keyword) + :subtitle network-name}]]])) (defn view [] - (let [collectible-details (rf/sub [:wallet/last-collectible-details]) - {:keys [name description preview-url traits]} collectible-details] + (let [collectible-details (rf/sub [:wallet/last-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]]])) diff --git a/src/status_im2/subs/wallet/networks.cljs b/src/status_im2/subs/wallet/networks.cljs index afed703867c..fd1363c3512 100644 --- a/src/status_im2/subs/wallet/networks.cljs +++ b/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)))