Show network info on collectible info page (#17980)

This commit is contained in:
Volodymyr Kozieiev 2023-11-27 12:29:12 +00:00 committed by GitHub
parent a2856cf1c3
commit f82d28c6c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 49 additions and 30 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -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"

View File

@ -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]}]

View File

@ -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

View File

@ -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]]]))

View File

@ -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)))