Activity tab on collectible page (#18220)
This commit is contained in:
Volodymyr Kozieiev
GitHub
parent
8225d91ee0
commit
bf55a2a974
|
|
@ -5,13 +5,15 @@
|
|||
[quo.foundations.resources :as quo.resources]
|
||||
[quo.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.common.scroll-page.view :as scroll-page]
|
||||
[status-im.contexts.wallet.collectible.style :as style]
|
||||
[status-im.contexts.wallet.temp :as temp]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn header
|
||||
[collectible-name description collection-image-url]
|
||||
[collectible-name collection-name collection-image-url]
|
||||
[rn/view {:style style/header}
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:size :paragraph-1}
|
||||
description]]])
|
||||
collection-name]]])
|
||||
|
||||
(defn cta-buttons
|
||||
[]
|
||||
|
|
@ -40,24 +42,19 @@
|
|||
: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}]}])
|
||||
(def activity-tabs-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]
|
||||
|
|
@ -82,6 +79,19 @@
|
|||
:num-columns 2
|
||||
:content-container-style style/traits-container}]]))
|
||||
|
||||
(defn activity-item
|
||||
[item]
|
||||
[:<>
|
||||
[quo/divider-date (:timestamp item)]
|
||||
[quo/wallet-activity item]])
|
||||
|
||||
(defn activity-section
|
||||
[]
|
||||
[rn/flat-list
|
||||
{:data temp/collectible-activities
|
||||
:style {:flex 1}
|
||||
:render-fn activity-item}])
|
||||
|
||||
(defn info
|
||||
[chain-id]
|
||||
(let [network (rf/sub [:wallet/network-details-by-chain-id
|
||||
|
|
@ -112,6 +122,25 @@
|
|||
:subtitle network-name
|
||||
:subtitle-type :network}]]]))
|
||||
|
||||
(defn tabs
|
||||
[_]
|
||||
(let [selected-tab (reagent/atom (:id (first activity-tabs-data)))]
|
||||
(fn [{:keys [traits chain-id] :as _props}]
|
||||
[:<>
|
||||
[quo/tabs
|
||||
{:size 32
|
||||
:style style/tabs
|
||||
:scrollable? true
|
||||
:default-active @selected-tab
|
||||
:data activity-tabs-data
|
||||
:on-change #(reset! selected-tab %)}]
|
||||
(condp = @selected-tab
|
||||
:overview [:<>
|
||||
[info chain-id]
|
||||
[traits-section traits]]
|
||||
:activity [activity-section]
|
||||
nil)])))
|
||||
|
||||
(defn collectible-actions-sheet
|
||||
[]
|
||||
[quo/action-drawer
|
||||
|
|
@ -133,19 +162,20 @@
|
|||
|
||||
(defn view-internal
|
||||
[{:keys [theme] :as _props}]
|
||||
(let [collectible (rf/sub [:wallet/last-collectible-details])
|
||||
(let [collectible (rf/sub [:wallet/last-collectible-details])
|
||||
{:keys [collectible-data preview-url
|
||||
collection-data]} collectible
|
||||
collection-data]} collectible
|
||||
{traits :traits
|
||||
collectible-name :name
|
||||
description :description} collectible-data
|
||||
chain-id (rf/sub [:wallet/last-collectible-chain-id])]
|
||||
collectible-name :name} collectible-data
|
||||
{collection-image :image-url
|
||||
collection-name :name} collection-data
|
||||
chain-id (rf/sub [:wallet/last-collectible-chain-id])]
|
||||
[scroll-page/scroll-page
|
||||
{:navigate-back? true
|
||||
:height 148
|
||||
:page-nav-props {:type :title-description
|
||||
:title collectible-name
|
||||
:description description
|
||||
:description collection-name
|
||||
:right-side [{:icon-name :i/options
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
|
|
@ -157,10 +187,10 @@
|
|||
[rn/image
|
||||
{:source preview-url
|
||||
:style style/preview}]]
|
||||
[header collectible-name description (:image-url collection-data)]
|
||||
[header collectible-name collection-name collection-image]
|
||||
[cta-buttons]
|
||||
[tabs]
|
||||
[info chain-id]
|
||||
[traits-section traits]]]))
|
||||
[tabs
|
||||
{:traits traits
|
||||
:chain-id chain-id}]]]))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
(ns status-im.contexts.wallet.temp
|
||||
(:require [clojure.string :as string]
|
||||
[quo.foundations.resources :as quo.resources]
|
||||
[status-im.common.resources :as resources]
|
||||
[status-im.contexts.wallet.item-types :as types]))
|
||||
|
||||
|
|
@ -57,3 +58,50 @@
|
|||
(let [all-addresses [address-local-suggestion-saved-address-mock
|
||||
address-local-suggestion-mock]]
|
||||
(vec (filter #(string/starts-with? (:address %) substring) all-addresses))))
|
||||
|
||||
(def collectible-activities
|
||||
[{:transaction :receive
|
||||
:timestamp "Today 22:20"
|
||||
:status :finalised
|
||||
:counter 1
|
||||
:first-tag {:size 24
|
||||
:type :collectible
|
||||
:collectible (resources/mock-images :collectible)
|
||||
:collectible-name "Collectible"
|
||||
:collectible-number "123"}
|
||||
:second-tag-prefix :t/from
|
||||
:second-tag {:size 24
|
||||
:type :default
|
||||
:full-name "Aretha Gosling"
|
||||
:profile-picture (resources/mock-images :user-picture-female2)}
|
||||
:third-tag-prefix :t/to
|
||||
:third-tag {:size 24
|
||||
:type :account
|
||||
:account-name "Piggy bank"
|
||||
:emoji "🐷"}
|
||||
|
||||
:fourth-tag-prefix :t/via
|
||||
:fourth-tag {:size 24
|
||||
:type :network
|
||||
:network-logo (quo.resources/get-network :ethereum)
|
||||
:network-name "Mainnet"}}
|
||||
{:transaction :mint
|
||||
:timestamp "Yesterday"
|
||||
:status :finalised
|
||||
:counter 1
|
||||
:first-tag {:size 24
|
||||
:type :collectible
|
||||
:collectible (resources/mock-images :collectible)
|
||||
:collectible-name "Collectible"
|
||||
:collectible-number "123"}
|
||||
:second-tag-prefix :t/at
|
||||
:second-tag
|
||||
{:size 24
|
||||
:type :address
|
||||
:address
|
||||
"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"}
|
||||
:third-tag-prefix :t/on
|
||||
:third-tag {:size 24
|
||||
:type :network
|
||||
:network-logo (quo.resources/get-network :ethereum)
|
||||
:network-name "Mainnet"}}])
|
||||
|
|
|
|||
Loading…
Reference in New Issue