diff --git a/resources/images/icons2/20x20/opensea@2x.png b/resources/images/icons2/20x20/opensea@2x.png new file mode 100644 index 0000000000..87897b3792 Binary files /dev/null and b/resources/images/icons2/20x20/opensea@2x.png differ diff --git a/resources/images/icons2/20x20/opensea@3x.png b/resources/images/icons2/20x20/opensea@3x.png new file mode 100644 index 0000000000..c8d07efd44 Binary files /dev/null and b/resources/images/icons2/20x20/opensea@3x.png differ diff --git a/resources/images/mock2/collectible-monkey.png b/resources/images/mock2/collectible-monkey.png new file mode 100644 index 0000000000..d268d50a46 Binary files /dev/null and b/resources/images/mock2/collectible-monkey.png differ diff --git a/resources/images/mock2/collectible1.png b/resources/images/mock2/collectible1.png new file mode 100644 index 0000000000..e93214e3ac Binary files /dev/null and b/resources/images/mock2/collectible1.png differ diff --git a/resources/images/mock2/collectible2.png b/resources/images/mock2/collectible2.png new file mode 100644 index 0000000000..b7b78109e5 Binary files /dev/null and b/resources/images/mock2/collectible2.png differ diff --git a/resources/images/mock2/collectible3.png b/resources/images/mock2/collectible3.png new file mode 100644 index 0000000000..f2afd8b262 Binary files /dev/null and b/resources/images/mock2/collectible3.png differ diff --git a/resources/images/mock2/collectible4.png b/resources/images/mock2/collectible4.png new file mode 100644 index 0000000000..5c7f274c13 Binary files /dev/null and b/resources/images/mock2/collectible4.png differ diff --git a/resources/images/mock2/collectible5.png b/resources/images/mock2/collectible5.png new file mode 100644 index 0000000000..129ac2b125 Binary files /dev/null and b/resources/images/mock2/collectible5.png differ diff --git a/resources/images/mock2/collectible6.png b/resources/images/mock2/collectible6.png new file mode 100644 index 0000000000..1aa7041031 Binary files /dev/null and b/resources/images/mock2/collectible6.png differ diff --git a/src/quo2/components/navigation/page_nav/style.cljs b/src/quo2/components/navigation/page_nav/style.cljs index c33a601865..e1818ff16a 100644 --- a/src/quo2/components/navigation/page_nav/style.cljs +++ b/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}) diff --git a/src/quo2/components/navigation/page_nav/view.cljs b/src/quo2/components/navigation/page_nav/view.cljs index cffcc4ab06..7d52ea3d28 100644 --- a/src/quo2/components/navigation/page_nav/view.cljs +++ b/src/quo2/components/navigation/page_nav/view.cljs @@ -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 diff --git a/src/quo2/components/wallet/wallet_overview/style.cljs b/src/quo2/components/wallet/wallet_overview/style.cljs index 2e735a6b5f..f80dd52b15 100644 --- a/src/quo2/components/wallet/wallet_overview/style.cljs +++ b/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 diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 13390a40c4..f5aee0a35a 100644 --- a/src/status_im2/common/resources.cljs +++ b/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") diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index db87f3f098..4b78193477 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 072defd6a6..ec132dbce8 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 1303ac8552..3a62fc4dc4 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/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? diff --git a/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs b/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs index f086a9ced3..8a5833df64 100644 --- a/src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs +++ b/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 [] diff --git a/src/status_im2/contexts/quo_preview/settings/data_item.cljs b/src/status_im2/contexts/quo_preview/settings/data_item.cljs index 92b47c5639..f252b37df5 100644 --- a/src/status_im2/contexts/quo_preview/settings/data_item.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/collectible/style.cljs b/src/status_im2/contexts/wallet/collectible/style.cljs new file mode 100644 index 0000000000..c19c02b92e --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index c75e9657a7..1b03596efe 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/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 - {: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]]])) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 812bc03104..3fb6613236 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/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"] - [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" diff --git a/src/status_im2/contexts/wallet/home/style.cljs b/src/status_im2/contexts/wallet/home/style.cljs index 1b622aadfe..eefd32f03c 100644 --- a/src/status_im2/contexts/wallet/home/style.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 130b47cb05..8c7e84102e 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/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 - {:style style/accounts-list - :data account-cards - :horizontal true - :separator [rn/view {:style {:width 12}}] - :render-fn quo/account-card}] + [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}]] [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 - {:title (i18n/label :t/no-collectibles) - :description (i18n/label :t/no-collectibles-description) - :placeholder? true - :container-style style/empty-container-style}] + :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 6ea8bd8941..9d2709feda 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/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 - :component wallet-collectibles/view} + {:name :wallet-collectible + :component wallet-collectible/view} {:name :wallet-create-account :component wallet-create-account/view} diff --git a/translations/en.json b/translations/en.json index 67c940fe2a..8d355cbc71 100644 --- a/translations/en.json +++ b/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" }