Skip to content
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.

Sign up for GitHub

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

Collectible details page #17520

Merged
merged 3 commits into from
Oct 9, 2023
Merged

Collectible details page #17520

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce1e543
Collectible details page
vkjr Oct 4, 2023
34475bd
review notes
vkjr Oct 6, 2023
66e124c
lint fix
vkjr Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added resources/images/icons2/20x20/opensea@2x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/icons2/20x20/opensea@3x.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible-monkey.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/mock2/collectible6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions src/quo2/components/navigation/page_nav/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@
:align-items :center})

(defn center-content-container
[centered?]
[centered? center-opacity]
{:flex 1
:margin-horizontal 12
:flex-direction :row
:align-items :center
:justify-content (if centered? :center :flex-start)})
:justify-content (if centered? :center :flex-start)
:opacity center-opacity})

(def right-actions-container
{:flex-direction :row})
Expand Down Expand Up @@ -79,6 +80,7 @@
:text-align-vertical :center}))

(def community-network-logo
{:width 24
:height 24
:margin-right 6})
{:width 24
:height 24
:border-radius 12
:margin-right 6})
30 changes: 15 additions & 15 deletions src/quo2/components/navigation/page_nav/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,22 +86,22 @@
nil)])

(defn- title-center
[{:keys [centered? title]}]
[rn/view {:style (style/center-content-container centered?)}
[{:keys [centered? title center-opacity]}]
[rn/view {:style (style/center-content-container centered? center-opacity)}
[text/text
{:weight :medium
:size :paragraph-1
:number-of-lines 1}
title]])

(defn- dropdown-center
[{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text]}]
[{:keys [theme background dropdown-on-press dropdown-selected? dropdown-text center-opacity]}]
(let [dropdown-type (cond
(= background :photo) :grey
(and (= theme :dark) (= background :blur)) :grey
:else :ghost)
dropdown-state (if dropdown-selected? :active :default)]
[rn/view {:style (style/center-content-container true)}
[rn/view {:style (style/center-content-container true center-opacity)}
[dropdown/view
{:type dropdown-type
:state dropdown-state
Expand All @@ -111,8 +111,8 @@
dropdown-text]]))

(defn- token-center
[{:keys [theme background token-logo token-name token-abbreviation]}]
[rn/view {:style (style/center-content-container false)}
[{:keys [theme background token-logo token-name token-abbreviation center-opacity]}]
[rn/view {:style (style/center-content-container false center-opacity)}
[rn/image {:style style/token-logo :source token-logo}]
[text/text
{:style style/token-name
Expand All @@ -128,8 +128,8 @@
token-abbreviation]])

(defn- channel-center
[{:keys [theme background channel-emoji channel-name channel-icon]}]
[rn/view {:style (style/center-content-container false)}
[{:keys [theme background channel-emoji channel-name channel-icon center-opacity]}]
[rn/view {:style (style/center-content-container false center-opacity)}
[rn/text {:style style/channel-emoji}
channel-emoji]
[text/text
Expand All @@ -141,11 +141,11 @@
[icons/icon channel-icon {:size 16 :color (style/channel-icon-color theme background)}]])

(defn- title-description-center
[{:keys [background theme picture title description]}]
[rn/view {:style (style/center-content-container false)}
[{:keys [background theme picture title description center-opacity]}]
[rn/view {:style (style/center-content-container false center-opacity)}
(when picture
[rn/view {:style style/group-avatar-picture}
[group-avatar/view {:picture picture :size 28}]])
[group-avatar/view {:picture picture :size :size-28}]])
[rn/view {:style style/title-description-container}
[text/text
{:style style/title-description-title
Expand All @@ -161,11 +161,11 @@
description]]])

(defn- community-network-center
[{:keys [type community-logo network-logo community-name network-name]}]
[{:keys [type community-logo network-logo community-name network-name center-opacity]}]
(let [community? (= type :community)
shown-logo (if community? community-logo network-logo)
shown-name (if community? community-name network-name)]
[rn/view {:style (style/center-content-container false)}
[rn/view {:style (style/center-content-container false center-opacity)}
[rn/image
{:style style/community-network-logo
:source shown-logo}]
Expand All @@ -176,8 +176,8 @@
shown-name]]))

(defn- wallet-networks-center
[{:keys [networks networks-on-press background]}]
[rn/view {:style (style/center-content-container true)}
[{:keys [networks networks-on-press background center-opacity]}]
[rn/view {:style (style/center-content-container true center-opacity)}
[network-dropdown/view
{:state :default
:on-press networks-on-press
Expand Down
2 changes: 1 addition & 1 deletion src/quo2/components/wallet/wallet_overview/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
(def container-info
{:padding-horizontal 20
:padding-top 12
:flex-grow 1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is definitely safe? 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you check if it looks fine in quo2 and if used in other screens?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it doesn't look fine, thanks!
That flex-grow was causing problems on wallet accounts page since it is used on the same page with flat-list. And when there are not enough items in a flat-list, wallet-overview grows in width and that results in jumps when user switches between "assets" and "collectibles" tabs.
I will return flex-grow and will put wallet-overview in an enclosing view of fixed height. It is okay when it grows horizontally, but vertical growth isn't really needed for this component.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we shouldn't be using fixed height. Most of the time flex-box is sufficient

:padding-bottom 32
:flex-grow 1
:max-height 98})

(def container-info-top
Expand Down
11 changes: 9 additions & 2 deletions src/status_im2/common/resources.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,17 +81,24 @@
:dark (js/require "../resources/images/ui2/no-notifications-dark.png")}})

(def mock-images
{:diamond (js/require "../resources/images/mock2/diamond.png")
:bored-ape (js/require "../resources/images/mock2/bored-ape.png")
{:bored-ape (js/require "../resources/images/mock2/bored-ape.png")
:coinbase (js/require "../resources/images/mock2/coinbase.png")
:collectible (js/require "../resources/images/mock2/collectible.png")
:collectible-monkey (js/require "../resources/images/mock2/collectible-monkey.png")
:collectible1 (js/require "../resources/images/mock2/collectible1.png")
:collectible2 (js/require "../resources/images/mock2/collectible2.png")
:collectible3 (js/require "../resources/images/mock2/collectible3.png")
:collectible4 (js/require "../resources/images/mock2/collectible4.png")
:collectible5 (js/require "../resources/images/mock2/collectible5.png")
:collectible6 (js/require "../resources/images/mock2/collectible6.png")
:contact (js/require "../resources/images/mock2/contact.png")
:community-banner (js/require "../resources/images/mock2/community-banner.png")
:community-logo (js/require "../resources/images/mock2/community-logo.png")
:community-cover (js/require "../resources/images/mock2/community-cover.png")
:dark-blur-bg (js/require "../resources/images/mock2/dark_blur_bg.png")
:dark-blur-background (js/require "../resources/images/mock2/dark-blur-background.png")
:decentraland (js/require "../resources/images/mock2/decentraland.png")
:diamond (js/require "../resources/images/mock2/diamond.png")
:gif (js/require "../resources/images/mock2/gif.png")
:monkey (js/require "../resources/images/mock2/monkey.png")
:light-blur-background (js/require "../resources/images/mock2/light-blur-background.png")
Expand Down
40 changes: 19 additions & 21 deletions src/status_im2/common/scroll_page/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
(if collapsed? 50 170))

(defn f-scroll-page-header
[scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back?
collapsed? overlay-shown?]
[{:keys [scroll-height height page-nav-right-section-buttons sticky-header
top-nav title-colum navigate-back? collapsed? page-nav-props overlay-shown?]}]
(let [input-range [0 10]
output-range [-208 -45]
y (reanimated/use-shared-value scroll-height)
Expand Down Expand Up @@ -54,17 +54,6 @@
:top 0
:left 0
:right 0}}
(when logo
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's okay to delete this? this component is used in the communities overview page? or am I missing something and this code is elsewhere now?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scroll-page uses page-nav internally but before it was using it with :type :no-title and showing title/logo on top of that component. Since page-nav know how to render title and logo, I got rid of logo in title directly in scroll-page and added the possibility to configure internal page-nav instead. Here is how communities overview now configured:

status-mobile/src/status_im2/contexts/communities/overview/view.cljs

Line 329 in 6eeff34

:page-nav-props {:type :community

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanation! 🙏

[reanimated/view
{:style (style/sticky-header-title opacity-animation)}
[rn/image
{:source logo
:style style/sticky-header-image}]
[quo/text
{:size :paragraph-1
:weight :semi-bold
:style {:line-height 21}}
name]])
(if top-nav
[rn/view {:style {:margin-top 0}}
top-nav]
Expand All @@ -74,10 +63,12 @@
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
:blur
:photo)
:right-side page-nav-right-side
:right-side page-nav-right-section-buttons
:center-opacity (reanimated/get-shared-value opacity-animation)
:overlay-shown? overlay-shown?}
navigate-back? (assoc :icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])))])
:on-press #(rf/dispatch [:navigate-back]))
page-nav-props (merge page-nav-props))])
(when title-colum
title-colum)
sticky-header]]))
Expand Down Expand Up @@ -105,14 +96,21 @@
(defn scroll-page
[_ _ _]
(let [scroll-height (reagent/atom negative-scroll-position-0)]
(fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll
collapsed?
height top-nav title-colum background-color navigate-back? overlay-shown?]}
sticky-header
(fn [{:keys [theme cover-image logo on-scroll
collapsed? height top-nav title-colum background-color navigate-back? page-nav-props
overlay-shown? sticky-header]}
children]
[:<>
[:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons
logo sticky-header top-nav title-colum navigate-back? collapsed? overlay-shown?]
[:f> f-scroll-page-header
{:scroll-height @scroll-height
:height height
:sticky-header sticky-header
:top-nav top-nav
:title-colum title-colum
:navigate-back? navigate-back?
:collapsed? collapsed?
:page-nav-props page-nav-props
:overlay-shown? overlay-shown?}]
[rn/scroll-view
{:content-container-style {:flex-grow 1}
:content-inset-adjustment-behavior :never
Expand Down
23 changes: 10 additions & 13 deletions src/status_im2/contexts/communities/discover/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,19 +206,16 @@
featured-communities-count (count featured-communities)]
(fn []
[scroll-page/scroll-page
{:name (i18n/label :t/discover-communities)
:theme theme
:on-scroll #(reset! scroll-height %)
:background-color (colors/theme-colors
colors/white
colors/neutral-95)
:navigate-back? :true
:height (if (> @scroll-height 360)
208
148)}
[render-sticky-header
{:selected-tab selected-tab
:scroll-height scroll-height}]
{:theme theme
:on-scroll #(reset! scroll-height %)
:navigate-back? :true
:height (if (> @scroll-height 360)
208
148)
:sticky-header [render-sticky-header
{:selected-tab selected-tab
:scroll-height scroll-height}]}

[render-communities
selected-tab
featured-communities-count
Expand Down
35 changes: 18 additions & 17 deletions src/status_im2/contexts/communities/overview/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns status-im2.contexts.communities.overview.view
(:require [oops.core :as oops]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent]
Expand Down Expand Up @@ -317,22 +316,24 @@
collapsed? (and initial-joined? (:joined community))
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
[scroll-page/scroll-page
{:cover-image cover
:collapsed? collapsed?
:logo logo
:page-nav-right-section-buttons (page-nav-right-section-buttons id)
:name name
:on-scroll #(reset! scroll-height %)
:navigate-back? true
:background-color (colors/theme-colors colors/white colors/neutral-95)
:height 148
:overlay-shown? overlay-shown?}
[sticky-category-header
{:enabled (> @scroll-height @first-channel-height)
:label (pick-first-category-by-height
@scroll-height
@first-channel-height
@categories-heights)}]
{:cover-image cover
:collapsed? collapsed?
:logo logo
:name name
:on-scroll #(reset! scroll-height %)
:navigate-back? true
:height 148
:overlay-shown? overlay-shown?
:page-nav-props {:type :community
:right-side (page-nav-right-section-buttons id)
:community-name name
:community-logo logo}
:sticky-header [sticky-category-header
{:enabled (> @scroll-height @first-channel-height)
:label (pick-first-category-by-height
@scroll-height
@first-channel-height
@categories-heights)}]}
[community-content
community
pending?
Expand Down
3 changes: 2 additions & 1 deletion src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[re-frame.core :as rf]
[react-native.fast-image :as fast-image]
[react-native.reanimated :as reanimated]
[quo2.components.animated-header-flatlist.view :as animated-header-list]))
Expand Down Expand Up @@ -78,7 +79,7 @@
:header-comp header-comp
:title-comp title-comp
:main-comp main-comp
:back-button-on-press #()})
:back-button-on-press #(rf/dispatch [:navigate-back])})

(defn mock-screen
[]
Expand Down
2 changes: 0 additions & 2 deletions src/status_im2/contexts/quo_preview/settings/data_item.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,6 @@
[preview/preview-container
{:state state
:descriptor descriptor}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
(when @blur?
[blur/view
{:style {:position :absolute
Expand Down
63 changes: 63 additions & 0 deletions src/status_im2/contexts/wallet/collectible/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
(ns status-im2.contexts.wallet.collectible.style)

(def container
{:margin-top 100
:margin-bottom 34})

(def preview
{:margin-horizontal 8
:margin-top 12})

(def header
{:margin-horizontal 20
:margin-top 16
:margin-bottom 12})

(def collection-container
{:flex-direction :row
:margin-top 6})

(def buttons-container
{:flex-direction :row
:align-items :stretch
:margin-horizontal 20
:margin-top 8
:margin-bottom 20})

(def tabs
{:margin-horizontal 20
:margin-vertical 12})

(def send-button
{:flex 1
:margin-right 6})

(def opensea-button
{:flex 1
:margin-left 6})

(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-section
{:margin-horizontal 20
:margin-top 8})

(def traits-item
{:margin-horizontal 6
:flex 1})

(def traits-container
{:margin-horizontal 14
:margin-vertical 12})
Loading