Collectible details page (#17520)

Collectible details page

src/quo2/components/navigation/page_nav/style.cljs

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

src/quo2/components/navigation/page_nav/view.cljs

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

src/quo2/components/wallet/wallet_overview/style.cljs

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

src/status_im2/common/resources.cljs

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

src/status_im2/common/scroll_page/view.cljs

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

src/status_im2/contexts/communities/discover/view.cljs

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

src/status_im2/contexts/communities/overview/view.cljs

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

src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs

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

src/status_im2/contexts/quo_preview/settings/data_item.cljs

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

src/status_im2/contexts/wallet/collectible/style.cljs

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