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
+  {:width         24
-   :height       24
+   :height        24
-   :margin-right 6})
+   :border-radius 12
+   :margin-right  6})

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

@@ -86,8 +86,8 @@
      nil)])
 
 (defn- title-center
-  [{:keys [centered? title]}]
+  [{:keys [centered? title center-opacity]}]
-  [rn/view {:style (style/center-content-container centered?)}
+  [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]}]
+  [{:keys [theme background token-logo token-name token-abbreviation center-opacity]}]
-  [rn/view {:style (style/center-content-container false)}
+  [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]}]
+  [{:keys [theme background channel-emoji channel-name channel-icon center-opacity]}]
-  [rn/view {:style (style/center-content-container false)}
+  [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]}]
+  [{:keys [background theme picture title description center-opacity]}]
-  [rn/view {:style (style/center-content-container false)}
+  [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]}]
+  [{:keys [networks networks-on-press background center-opacity]}]
-  [rn/view {:style (style/center-content-container true)}
+  [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,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")

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?
+  [{:keys [scroll-height height page-nav-right-section-buttons sticky-header
-   collapsed? overlay-shown?]
+           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
+    (fn [{:keys [theme cover-image logo on-scroll
-                 collapsed?
+                 collapsed? height top-nav title-colum background-color navigate-back? page-nav-props
-                 height top-nav title-colum background-color navigate-back? overlay-shown?]}
+                 overlay-shown? sticky-header]}
-         sticky-header
          children]
       [:<>
-       [:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons
+       [:f> f-scroll-page-header
-        logo sticky-header top-nav title-colum navigate-back? collapsed? overlay-shown?]
+        {: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
-        :theme            theme
+        :on-scroll      #(reset! scroll-height %)
-        :on-scroll        #(reset! scroll-height %)
+        :navigate-back? :true
-        :background-color (colors/theme-colors
+        :height         (if (> @scroll-height 360)
-                           colors/white
+                          208
-                           colors/neutral-95)
+                          148)
-        :navigate-back?   :true
+        :sticky-header  [render-sticky-header
-        :height           (if (> @scroll-height 360)
+                         {:selected-tab  selected-tab
-                            208
+                          :scroll-height scroll-height}]}
-                            148)}
+
-       [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
+         {:cover-image    cover
-          :collapsed?                     collapsed?
+          :collapsed?     collapsed?
-          :logo                           logo
+          :logo           logo
-          :page-nav-right-section-buttons (page-nav-right-section-buttons id)
+          :name           name
-          :name                           name
+          :on-scroll      #(reset! scroll-height %)
-          :on-scroll                      #(reset! scroll-height %)
+          :navigate-back? true
-          :navigate-back?                 true
+          :height         148
-          :background-color               (colors/theme-colors colors/white colors/neutral-95)
+          :overlay-shown? overlay-shown?
-          :height                         148
+          :page-nav-props {:type           :community
-          :overlay-shown?                 overlay-shown?}
+                           :right-side     (page-nav-right-section-buttons id)
-         [sticky-category-header
+                           :community-name name
-          {:enabled (> @scroll-height @first-channel-height)
+                           :community-logo logo}
-           :label   (pick-first-category-by-height
+          :sticky-header  [sticky-category-header
-                     @scroll-height
+                           {:enabled (> @scroll-height @first-channel-height)
-                     @first-channel-height
+                            :label   (pick-first-category-by-height
-                     @categories-heights)}]
+                                      @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})

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

@@ -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
+  (let [{:keys [name description image traits] :as props} temp/collectible-details]
-   {:style {:flex            1
+    [scroll-page/scroll-page
-            :align-items     :center
+     {:navigate-back? true
-            :justify-content :center}}
+      :height         148
-
+      :page-nav-props {:type        :title-description
-   [quo/text {} "COLLECTIBLES PAGE"]
+                       :title       name
-   [quo/divider-label]
+                       :description description
-   [quo/button {:on-press #(rf/dispatch [:navigate-back])}
+                       :right-side  [{:icon-name :i/options
-    "NAVIGATE BACK"]])
+                                      :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]]]))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -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"]
+    "Saved Addresses"]])
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
-    "Collectibles"]])
 
 (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"

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

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

src/status_im2/contexts/wallet/home/view.cljs

@@ -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/flat-list
+       [rn/view {:style style/accounts-container}
-        {:style      style/accounts-list
+        [rn/flat-list
-         :data       account-cards
+         {:style      style/accounts-list
-         :horizontal true
+          :data       account-cards
-         :separator  [rn/view {:style {:width 12}}]
+          :horizontal true
-         :render-fn  quo/account-card}]
+          :separator  [rn/view {:style {:width 12}}]
+          :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
-                        {:title           (i18n/label :t/no-collectibles)
+                         [rn/flat-list
-                         :description     (i18n/label :t/no-collectibles-description)
+                          {:render-fn               (fn [item]
-                         :placeholder?    true
+                                                      [quo/collectible
-                         :container-style style/empty-container-style}]
+                                                       {: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)

src/status_im2/navigation/screens.cljs

@@ -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
+    {:name      :wallet-collectible
-     :component wallet-collectibles/view}
+     :component wallet-collectible/view}
 
     {:name      :wallet-create-account
      :component wallet-create-account/view}

translations/en.json

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