status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Collectible details page (#17520) 

Collectible details page
This commit is contained in:
Volodymyr Kozieiev 2023-10-09 14:18:43 +01:00 committed by GitHub
parent 265d9be6c2
commit 1770ff24ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 343 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/20x20/opensea@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
resources/images/icons2/20x20/opensea@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
resources/images/mock2/collectible-monkey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
resources/images/mock2/collectible1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
resources/images/mock2/collectible2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
resources/images/mock2/collectible3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
resources/images/mock2/collectible4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
resources/images/mock2/collectible5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
resources/images/mock2/collectible6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

6
src/quo2/components/navigation/page_nav/style.cljs
View File

@ -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})
@ -81,4 +82,5 @@
(def community-network-logo
{:width 24
:height 24
:border-radius 12
:margin-right 6})

30
src/quo2/components/navigation/page_nav/view.cljs
View File

@ -86,8 +86,8 @@
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
@ -95,13 +95,13 @@
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
@ -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
@ -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
@ -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
@ -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}]
@ -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

2
src/quo2/components/wallet/wallet_overview/style.cljs
View File

@ -4,8 +4,8 @@
(def container-info
{:padding-horizontal 20
:padding-top 12
:flex-grow 1
:padding-bottom 32
:flex-grow 1
:max-height 98})
(def container-info-top

11
src/status_im2/common/resources.cljs
View File

@ -81,10 +81,16 @@
: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")
@ -92,6 +98,7 @@
: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")

40
src/status_im2/common/scroll_page/view.cljs
View File

@ -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)
@ -54,17 +54,6 @@
:top 0
:left 0
:right 0}}
(when logo
[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]
@ -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]]))
@ -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

13
src/status_im2/contexts/communities/discover/view.cljs
View File

@ -206,19 +206,16 @@
featured-communities-count (count featured-communities)]
(fn []
[scroll-page/scroll-page
{:name (i18n/label :t/discover-communities)
:theme theme
{: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
148)
:sticky-header [render-sticky-header
{:selected-tab selected-tab
:scroll-height scroll-height}]
:scroll-height scroll-height}]}
[render-communities
selected-tab
featured-communities-count

13
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -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]
@ -320,19 +319,21 @@
{: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
: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)}]
@categories-heights)}]}
[community-content
community
pending?

3
src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs
View File

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

2
src/status_im2/contexts/quo_preview/settings/data_item.cljs
View File

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

63
src/status_im2/contexts/wallet/collectible/style.cljs Normal file
View File

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

127
src/status_im2/contexts/wallet/collectible/view.cljs
View File

@ -1,16 +1,123 @@
(ns status-im2.contexts.wallet.collectible.view
(:require [react-native.core :as rn]
[quo2.core :as quo]
[re-frame.core :as rf]))
[utils.i18n :as i18n]
[status-im2.common.scroll-page.view :as scroll-page]
[status-im2.contexts.wallet.collectible.style :as style]
[status-im2.contexts.wallet.common.temp :as temp]))
(defn header
[{:keys [name description collection-image]}]
[rn/view {:style style/header}
[quo/text
{:weight :semi-bold
:size :heading-1} name]
[rn/view style/collection-container
[quo/collection-avatar {:image collection-image}]
[quo/text
{:weight :semi-bold
:size :paragraph-1}
description]]])
(defn cta-buttons
[]
[rn/view {:style style/buttons-container}
[quo/button
{:container-style style/send-button
:type :outline
:size 40
:icon-left :i/send}
(i18n/label :t/send)]
[quo/button
{:container-style style/opensea-button
:type :outline
:size 40
:icon-left :i/opensea}
(i18n/label :t/opensea)]])
(defn tabs
[]
[quo/tabs
{:size 32
:style style/tabs
:scrollable? true
:data [{:id :overview
:label (i18n/label :t/overview)
:accessibility-label :overview-tab}
{:id :activity
:label (i18n/label :t/activity)
:accessibility-label :activity-tab}
{:id :permissions
:label (i18n/label :t/permissions)
:accessibility-label :permissions-tab}
{:id :about
:label (i18n/label :t/about)
:accessibility-label :about-tab}]}])
(defn traits-section
[traits]
[rn/view {:style style/traits-section}
[quo/section-label
{:section (i18n/label :t/traits)}]]
[rn/flat-list
{:render-fn (fn [{:keys [title subtitle]}]
[rn/view {:style style/traits-item}
[quo/data-item
{:description :default
:card? true
:status :default
:size :default
:title title
:subtitle subtitle}]])
:data traits
:key :collectibles-list
:key-fn :id
:num-columns 2
: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}]]
[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)}]]])
(defn view
[]
[rn/view
{:style {:flex 1
:align-items :center
:justify-content :center}}
[quo/text {} "COLLECTIBLES PAGE"]
[quo/divider-label]
[quo/button {:on-press #(rf/dispatch [:navigate-back])}
"NAVIGATE BACK"]])
(let [{:keys [name description image traits] :as props} temp/collectible-details]
[scroll-page/scroll-page
{:navigate-back? true
:height 148
:page-nav-props {:type :title-description
:title name
:description description
:right-side [{:icon-name :i/options
:on-press #(js/alert "pressed")}]
:picture image}}
[rn/view {:style style/container}
[rn/image
{:source image
:style style/preview}]
[header props]
[cta-buttons]
[tabs]
[info]
[traits-section traits]]]))

44
src/status_im2/contexts/wallet/common/temp.cljs
View File

@ -7,6 +7,7 @@
[status-im2.constants :as constants]
[status-im2.contexts.wallet.common.utils :as utils]
[utils.i18n :as i18n]
[status-im2.common.resources :as status.resources]
[utils.re-frame :as rf]))
(def networks
@ -26,9 +27,7 @@
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
"Create Account"]
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
"Saved Addresses"]
[quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
"Collectibles"]])
"Saved Addresses"]])
(def wallet-overview-state
{:state :default
@ -68,6 +67,45 @@
:percentage-change "0.00"
:fiat-change "€0.00"}}])
(def collectibles
[{:image (status.resources/get-mock-image :collectible1)
:id 1}
{:image (status.resources/get-mock-image :collectible2)
:id 2}
{:image (status.resources/get-mock-image :collectible3)
:id 3}
{:image (status.resources/get-mock-image :collectible4)
:id 4}
{:image (status.resources/get-mock-image :collectible5)
:id 5}
{:image (status.resources/get-mock-image :collectible6)
:id 6}])
(def collectible-details
nil
#_{:name "#5946"
:description "Bored Ape Yacht Club"
:image (status.resources/get-mock-image :collectible-monkey)
:collection-image (status.resources/get-mock-image :bored-ape)
:traits [{:title "Background"
:subtitle "Blue"
:id 1}
{:title "Clothes"
:subtitle "Bayc T Black"
:id 2}
{:title "Eyes"
:subtitle "Sleepy"
:id 3}
{:title "Fur"
:subtitle "Black"
:id 4}
{:title "Hat"
:subtitle "Beanie"
:id 5}
{:title "Mouth"
:subtitle "Bored Pipe"
:id 6}]})
(def account-overview-state
{:current-value "€0.00"
:account-name "Account 1"

6
src/status_im2/contexts/wallet/home/style.cljs
View File

@ -5,6 +5,12 @@
:padding-top 8
:padding-bottom 12})
(def accounts-container
{:height 112})
(def overview-container
{:height 86})
(def accounts-list
{:padding-horizontal 20
:padding-top 32

23
src/status_im2/contexts/wallet/home/view.cljs
View File

@ -52,16 +52,18 @@
{:style {:margin-top top
:flex 1}}
[common.top-nav/view]
[quo/wallet-overview temp/wallet-overview-state]
[rn/view {:style style/overview-container}
[quo/wallet-overview temp/wallet-overview-state]]
[rn/pressable
{:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])}
[quo/wallet-graph {:time-frame :empty}]]
[rn/view {:style style/accounts-container}
[rn/flat-list
{:style style/accounts-list
:data account-cards
:horizontal true
:separator [rn/view {:style {:width 12}}]
:render-fn quo/account-card}]
:render-fn quo/account-card}]]
[quo/tabs
{:style style/tabs
:size 32
@ -72,12 +74,25 @@
:assets [rn/flat-list
{:render-fn quo/token-value
:data temp/tokens
:key :assets-list
:content-container-style {:padding-horizontal 8}}]
:collectibles [quo/empty-state
:collectibles (if temp/collectible-details
[rn/flat-list
{:render-fn (fn [item]
[quo/collectible
{:images [(:image item)]
:on-press #(rf/dispatch [:navigate-to
:wallet-collectible])}])
:data temp/collectibles
:key :collectibles-list
:key-fn :id
:num-columns 2
:content-container-style {:padding-horizontal 8}}]
[quo/empty-state
{:title (i18n/label :t/no-collectibles)
:description (i18n/label :t/no-collectibles-description)
:placeholder? true
:container-style style/empty-container-style}]
:container-style style/empty-container-style}])
[quo/empty-state
{:title (i18n/label :t/no-activity)
:description (i18n/label :t/empty-tab-description)

6
src/status_im2/navigation/screens.cljs
View File

@ -38,7 +38,7 @@
[status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
[status-im2.contexts.wallet.account.view :as wallet-accounts]
[status-im2.contexts.wallet.address-watch.view :as wallet-address-watch]
[status-im2.contexts.wallet.collectible.view :as wallet-collectibles]
[status-im2.contexts.wallet.collectible.view :as wallet-collectible]
[status-im2.contexts.wallet.create-account.view :as wallet-create-account]
[status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
[status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
@ -245,8 +245,8 @@
{:name :wallet-address-watch
:component wallet-address-watch/view}
{:name :wallet-collectibles
:component wallet-collectibles/view}
{:name :wallet-collectible
:component wallet-collectible/view}
{:name :wallet-create-account
:component wallet-create-account/view}

6
translations/en.json
View File

@ -2333,5 +2333,9 @@
"enter-eth": "Enter any ETH address or ENS name.",
"eth-or-ens": "ETH address or ENS name.",
"type-pairing-code": "Type or paste pairing code",
"scan-sync-code-placeholder": "cs2:4FH..."
"scan-sync-code-placeholder": "cs2:4FH...",
"overview": "Overview",
"traits": "Traits",
"opensea": "OpenSea",
"mainnet": "Mainnet"
}