-
Notifications
You must be signed in to change notification settings - Fork 984
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement about tab on collectible page #18269
Changes from 32 commits
c0a93d4
d9cfd7c
64e2cd4
ee684cc
d3548e5
8aa659f
babcd37
1bc8af8
c5c9ecf
d74fb18
6a87eb4
a74e391
3f2aa72
bcea0db
5ab6f05
7364478
20d32f1
56ea01e
945cd9c
442e8cc
516058e
b3a0b83
0e69118
3a89747
e1ea5e6
4b0be06
cbc9efa
a2df1dd
2853e16
5ed397e
e21eb87
ebde44b
511e473
58e087b
d2be520
477fa88
5a2bb35
9d7a4ed
01ce7b1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
(ns status-im.contexts.wallet.collectible.tabs.about.style) | ||
|
||
(def title | ||
{:padding-horizontal 20 | ||
:padding-top 8 | ||
:padding-bottom 4}) | ||
|
||
(def description | ||
{:padding-horizontal 20 | ||
:padding-top 4 | ||
:padding-bottom 12}) | ||
|
||
(def section-label | ||
{:margin-horizontal 20 | ||
:margin-top 12}) | ||
|
||
(def link-cards-container | ||
{:margin-horizontal 20 | ||
:margin-top 12 | ||
:flex-direction :row | ||
:justify-content :space-between | ||
:flex-wrap :wrap}) | ||
|
||
(defn link-card | ||
[item-width] | ||
{:margin-bottom 16 | ||
:width item-width}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
(ns status-im.contexts.wallet.collectible.tabs.about.view | ||
(:require [quo.core :as quo] | ||
[quo.theme] | ||
[react-native.core :as rn] | ||
[status-im.contexts.wallet.collectible.tabs.about.style :as style] | ||
[status-im.contexts.wallet.temp :as temp] | ||
[utils.i18n :as i18n] | ||
[utils.re-frame :as rf])) | ||
|
||
(def ^:private link-card-space 28) | ||
|
||
(defn- view-internal | ||
[] | ||
(let [window-width (rf/sub [:dimensions/window-width]) | ||
item-width (- (/ window-width 2) link-card-space) | ||
{:keys [collectible-data]} (rf/sub [:wallet/last-collectible-details]) | ||
link-card-container-style (style/link-card item-width)] | ||
[:<> | ||
[rn/view {:style style/title} | ||
[quo/text | ||
{:size :heading-2 | ||
:weight :semi-bold} | ||
(:name collectible-data)]] | ||
[rn/view {:style style/description} | ||
[quo/text | ||
{:size :paragraph-2} | ||
(:description collectible-data)]] | ||
[quo/section-label | ||
{:container-style style/section-label | ||
:section (i18n/label :t/on-the-web)}] | ||
[rn/view {:style style/link-cards-container} | ||
(for [item (:cards temp/collectible-about)] | ||
^{:key (:title item)} | ||
[quo/link-card (assoc item :container-style link-card-container-style)])]])) | ||
|
||
(def view (quo.theme/with-theme view-internal)) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
(ns status-im.contexts.wallet.collectible.tabs.activity.view | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for adding the structure to the tabs! |
||
(:require [quo.core :as quo] | ||
[react-native.core :as rn] | ||
[status-im.contexts.wallet.temp :as temp])) | ||
|
||
(defn activity-item | ||
[item] | ||
[:<> | ||
[quo/divider-date (:timestamp item)] | ||
[quo/wallet-activity item]]) | ||
|
||
(defn view | ||
[] | ||
[rn/flat-list | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just a question, do we really need this to be a flatlist? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It was more that one item before, so it needed to be scrolled. I believe it's better to use flatlist in case of small devices |
||
{:data temp/collectible-activities | ||
:style {:flex 1} | ||
:render-fn activity-item}]) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
(ns status-im.contexts.wallet.collectible.tabs.overview.style) | ||
|
||
(def info-container | ||
{:flex-direction :row | ||
:margin-horizontal 20 | ||
:margin-top 8 | ||
:margin-bottom 12}) | ||
|
||
(def account | ||
{:margin-right 6 | ||
:flex 1}) | ||
|
||
(def network | ||
{:margin-left 6 | ||
:flex 1}) | ||
|
||
(def traits-title-container | ||
{:margin-left 20 | ||
:margin-top 8}) | ||
|
||
(def traits-item | ||
{:margin 6 | ||
:flex 1}) | ||
|
||
(def traits-container | ||
{:margin-horizontal 14 | ||
:margin-vertical 12}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
(ns status-im.contexts.wallet.collectible.tabs.overview.view | ||
(:require | ||
[clojure.string :as string] | ||
[quo.core :as quo] | ||
[quo.foundations.resources :as quo.resources] | ||
[quo.theme] | ||
[react-native.core :as rn] | ||
[status-im.contexts.wallet.collectible.tabs.overview.style :as style] | ||
[utils.i18n :as i18n] | ||
[utils.re-frame :as rf])) | ||
|
||
(defn- trait-item | ||
[{:keys [trait-type value]}] | ||
[quo/data-item | ||
{:description :default | ||
:card? true | ||
:status :default | ||
:size :default | ||
:title trait-type | ||
:subtitle value | ||
:container-style style/traits-item}]) | ||
|
||
(defn- traits-section | ||
[] | ||
(let [traits (rf/sub [:wallet/last-collectible-details-traits])] | ||
(when (pos? (count traits)) | ||
[rn/view | ||
[quo/section-label | ||
{:section (i18n/label :t/traits) | ||
:container-style style/traits-title-container}] | ||
[rn/flat-list | ||
{:render-fn trait-item | ||
:data traits | ||
:key :collectibles-list | ||
:key-fn :id | ||
:num-columns 2 | ||
:content-container-style style/traits-container}]]))) | ||
|
||
(defn- info | ||
[] | ||
(let [chain-id (rf/sub [:wallet/last-collectible-details-chain-id]) | ||
{:keys [network-name]} (rf/sub [:wallet/network-details-by-chain-id chain-id]) | ||
subtitle (string/capitalize (name (or network-name ""))) | ||
{:keys [name emoji color]} (rf/sub [:wallet/last-collectible-details-owner])] | ||
[rn/view {:style style/info-container} | ||
[rn/view {:style style/account} | ||
[quo/data-item | ||
{:card? true | ||
:status :default | ||
:size :default | ||
:title (i18n/label :t/account-title) | ||
:subtitle name | ||
:emoji emoji | ||
:subtitle-type :account | ||
:customization-color color}]] | ||
[rn/view {:style style/network} | ||
[quo/data-item | ||
{:subtitle-type :network | ||
:card? true | ||
:status :default | ||
:size :default | ||
:title (i18n/label :t/network) | ||
:network-image (quo.resources/get-network network-name) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think I put the image in the sub for network details. can you check the value of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It doesn't exist there. This is the response of the reffered sub:
|
||
:subtitle subtitle}]]])) | ||
|
||
(defn- view-internal | ||
[] | ||
[:<> | ||
[info] | ||
[traits-section]]) | ||
|
||
(def view (quo.theme/with-theme view-internal)) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
(ns status-im.contexts.wallet.collectible.tabs.view | ||
(:require [quo.theme] | ||
[status-im.contexts.wallet.collectible.tabs.about.view :as about] | ||
[status-im.contexts.wallet.collectible.tabs.activity.view :as activity] | ||
[status-im.contexts.wallet.collectible.tabs.overview.view :as overview])) | ||
|
||
(defn- view-internal | ||
[{:keys [selected-tab]}] | ||
(case selected-tab | ||
:overview [overview/view] | ||
:about [about/view] | ||
:activity [activity/view] | ||
nil)) | ||
|
||
(def view (quo.theme/with-theme view-internal)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👌