Volodymyr Kozieiev
GitHub
parent
265d9be6c2
commit
1770ff24ce
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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?
|
||||
|
|
|
|||
|
|
@ -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
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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]]]))
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue