From f82d28c6c9045a0fc40a4ba46a2cde308b25062c Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Mon, 27 Nov 2023 12:29:12 +0000 Subject: [PATCH] Show network info on collectible info page (#17980) --- resources/images/icons2/20x20/opensea@2x.png | Bin 1185 -> 1033 bytes resources/images/icons2/20x20/opensea@3x.png | Bin 1679 -> 1673 bytes .../settings/data_item/component_spec.cljs | 4 +- .../components/settings/data_item/view.cljs | 11 ++-- .../quo_preview/settings/data_item.cljs | 2 + .../contexts/wallet/collectible/view.cljs | 56 ++++++++++-------- src/status_im2/subs/wallet/networks.cljs | 6 ++ 7 files changed, 49 insertions(+), 30 deletions(-) diff --git a/resources/images/icons2/20x20/opensea@2x.png b/resources/images/icons2/20x20/opensea@2x.png index 87897b37927e2d61457f8ab523a763b8ea4a394d..bb921a392a6481bb8b606a5b5e827e1ef69cda02 100644 GIT binary patch delta 997 zcmVOL zL_t(|0qs~#PTN2f{w7YqfkMr$6;yJ2fkIc^HS_|7UI1>;Z~~GWgcCrQ-N6YkCuq9s zE~x+ssf&&Z2vFVG6LPFge|?94;MY}w&H*xkf4OQcm=lzy zHQ%iP5xZKWIJk}65LLBi6fqhs)nE+f+RjGB=U1M5lKw<7Zx;it8cTsy)whS>I4;Gz z?k^ai3$axMBR@rxv^b$bxkCqiroo&q;_hWQK1MX?qq748kV)$ue%%xhXY^PJJG$z_ zF3izSo#94}i3=5^g0;z{f3?AbC;xQ92WCHlAyi%uw}qF6c#Ra$P92%kBJ-+wdQ%o4 zPGAVK#%6SW6fP2lU?So7z#P@iv;^A>IEj{ z6Wu2HY$ayxRDx~#Ma&|74-vwUDay0R|E#fKEwxN9^Fa)<5nU;G1*k?;sX65I#}(X#V`v?D5G+F+^z!Z}7}6$d`QZj2@o`LeTo3=PN?nyCb# zoIPw7igQnhH1{y^e=;)M6!$UlA~yHY9ctSna-%u_$m^@TK(o=}Qe6vCKlH-sEGx>+ zdMl|yqExpQwvrVd6u$;ZYm${5>n72tSw|HKI0+e(Z?IpGn!n7M--iEln(bY zOp`nQGli1IJIoG`!WbUE(XA{DWEJjW?D&m-bZWpTw+0t<{C1l6_-&3k9vgoFKL~LC T4Pptz00000NkvXXu0mjf|B245 delta 1150 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 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)))