From 34475bd678cbf0a54d9f904c9ddf6049edc2225e Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Fri, 6 Oct 2023 10:55:28 +0100 Subject: [PATCH] review notes --- .../wallet/wallet_overview/style.cljs | 1 + src/status_im2/common/scroll_page/view.cljs | 3 +- .../contexts/communities/discover/view.cljs | 22 +-- .../contexts/communities/overview/view.cljs | 37 ++-- .../contexts/wallet/collectible/view.cljs | 187 ++++++++++-------- .../contexts/wallet/common/temp.cljs | 49 +++-- .../contexts/wallet/home/style.cljs | 3 + src/status_im2/contexts/wallet/home/view.cljs | 33 ++-- src/status_im2/navigation/screens.cljs | 2 +- translations/en.json | 3 +- 10 files changed, 180 insertions(+), 160 deletions(-) diff --git a/src/quo2/components/wallet/wallet_overview/style.cljs b/src/quo2/components/wallet/wallet_overview/style.cljs index fa4bfcbbcb5..f80dd52b153 100644 --- a/src/quo2/components/wallet/wallet_overview/style.cljs +++ b/src/quo2/components/wallet/wallet_overview/style.cljs @@ -5,6 +5,7 @@ {:padding-horizontal 20 :padding-top 12 :padding-bottom 32 + :flex-grow 1 :max-height 98}) (def container-info-top diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index 1b816402ef3..4b781934771 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -98,8 +98,7 @@ (let [scroll-height (reagent/atom negative-scroll-position-0)] (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 + overlay-shown? sticky-header]} children] [:<> [:f> f-scroll-page-header diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 03b7c99bc36..ec132dbce82 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -206,18 +206,16 @@ featured-communities-count (count featured-communities)] (fn [] [scroll-page/scroll-page - {: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 diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 46b31b7abe1..e460fdb1ebb 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -317,25 +317,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 - :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? - :page-nav-props {:type :community - :right-side (page-nav-right-section-buttons id) - :community-name name - :community-logo logo}} - [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? diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index ed8fa8d1b04..1b03596efed 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/src/status_im2/contexts/wallet/collectible/view.cljs @@ -6,9 +6,103 @@ [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 [] - (let [{:keys [name description image collection-image traits]} temp/collectible-details] + (let [{:keys [name description image traits] :as props} temp/collectible-details] [scroll-page/scroll-page {:navigate-back? true :height 148 @@ -18,93 +112,12 @@ :right-side [{:icon-name :i/options :on-press #(js/alert "pressed")}] :picture image}} - nil [rn/view {:style style/container} - [rn/image {:source image :style style/preview}] - - [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]]] - - [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)]] - - [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}]}] - - [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 "Mainnet"}]]] - - [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}]]])) + [header props] + [cta-buttons] + [tabs] + [info] + [traits-section traits]]])) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 4d9cbaa356d..3fb66132366 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -27,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 @@ -84,28 +82,29 @@ :id 6}]) (def collectible-details - {: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}]}) + 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" diff --git a/src/status_im2/contexts/wallet/home/style.cljs b/src/status_im2/contexts/wallet/home/style.cljs index abb842f3982..eefd32f03cd 100644 --- a/src/status_im2/contexts/wallet/home/style.cljs +++ b/src/status_im2/contexts/wallet/home/style.cljs @@ -8,6 +8,9 @@ (def accounts-container {:height 112}) +(def overview-container + {:height 86}) + (def accounts-list {:padding-horizontal 20 :padding-top 32 diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 18915fe799d..8c7e84102ed 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -46,13 +46,14 @@ (defn view [] (let [top (safe-area/get-top) - selected-tab (reagent/atom (:id (second tabs-data)))] + selected-tab (reagent/atom (:id (first tabs-data)))] (fn [] [rn/view {: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}]] @@ -75,17 +76,23 @@ :data temp/tokens :key :assets-list :content-container-style {:padding-horizontal 8}}] - :collectibles [rn/flat-list - {:render-fn (fn [item] - [quo/collectible - {:images [(:image item)] - :on-press #(rf/dispatch [:navigate-to - :wallet-collectibles])}]) - :data temp/collectibles - :key :collectibles-list - :key-fn :id - :num-columns 2 - :content-container-style {:padding-horizontal 8}}] + :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}]) [quo/empty-state {:title (i18n/label :t/no-activity) :description (i18n/label :t/empty-tab-description) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index eedf16ae0a7..9d2709fedad 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -245,7 +245,7 @@ {:name :wallet-address-watch :component wallet-address-watch/view} - {:name :wallet-collectibles + {:name :wallet-collectible :component wallet-collectible/view} {:name :wallet-create-account diff --git a/translations/en.json b/translations/en.json index 5111bf95172..8d355cbc712 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2336,5 +2336,6 @@ "scan-sync-code-placeholder": "cs2:4FH...", "overview": "Overview", "traits": "Traits", - "opensea": "OpenSea" + "opensea": "OpenSea", + "mainnet": "Mainnet" }