Update "Preview list" component (#17051)
This commit updates the "Preview list" component to support the following types (according to Figma): - collectibles - dapps - accounts - network - tokens Additionally, imports the images for wallet networks and dApps. --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Mohamed Javid
GitHub
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 923 B |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 721 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -99,6 +99,10 @@
|
|||
:ring? ring?})}
|
||||
(:uri profile-picture)
|
||||
profile-picture
|
||||
|
||||
(number? profile-picture)
|
||||
profile-picture
|
||||
|
||||
:else {:uri profile-picture})}])]))
|
||||
|
||||
(def user-avatar (quo2.theme/with-theme user-avatar-internal))
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
(:require [quo2.theme :as quo.theme]
|
||||
[quo2.components.dropdowns.network-dropdown.style :as style]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.list-items.preview-list :as preview-list]
|
||||
[quo2.components.list-items.preview-list.view :as preview-list]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- internal-view
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
:on-press on-press
|
||||
:on-press-in (fn [] (reset! pressed? true))
|
||||
:on-press-out (fn [] (reset! pressed? false))}
|
||||
[preview-list/preview-list
|
||||
[preview-list/view
|
||||
{:type :network
|
||||
:list-size (count networks)
|
||||
:size 20}
|
||||
:size :size/s-20}
|
||||
networks]])))
|
||||
|
||||
(def view (quo.theme/with-theme internal-view))
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
(ns quo2.components.list-items.preview-list
|
||||
(:require [quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.markdown.text :as quo2.text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[quo2.theme :as quo.theme]))
|
||||
|
||||
(def params
|
||||
{32 {:border-radius {:circular 16 :rounded 10}
|
||||
:hole-radius {:circular 18 :rounded 12}
|
||||
:margin-left -8
|
||||
:hole-size 36
|
||||
:hole-x 22
|
||||
:hole-y -2}
|
||||
24 {:border-radius {:circular 12 :rounded 8}
|
||||
:hole-radius {:circular 13 :rounded 9}
|
||||
:margin-left -4
|
||||
:hole-size 26
|
||||
:hole-x 19
|
||||
:hole-y -1}
|
||||
20 {:border-radius {:circular 10 :rounded 8}
|
||||
:hole-radius {:circular 11 :rounded 9}
|
||||
:margin-left -4
|
||||
:hole-size 22
|
||||
:hole-x 15
|
||||
:hole-y -1}
|
||||
16 {:border-radius {:circular 8 :rounded 8}
|
||||
:hole-radius {:circular 9 :rounded 9}
|
||||
:margin-left -4
|
||||
:hole-size 18
|
||||
:hole-x 11
|
||||
:hole-y -1}})
|
||||
|
||||
;; TODO - Add avatar components for other types once implemented
|
||||
(defn avatar
|
||||
[item type size border-radius]
|
||||
(case type
|
||||
:user [user-avatar/user-avatar
|
||||
(merge {:ring? false
|
||||
:status-indicator? false
|
||||
:size (case size
|
||||
32 :small
|
||||
24 :xs
|
||||
16 :xxxs)}
|
||||
item)]
|
||||
(:photo :collectible :network) [fast-image/fast-image
|
||||
{:source (:source item)
|
||||
:style {:width size
|
||||
:height size
|
||||
:border-radius border-radius}}]))
|
||||
|
||||
(defn list-item
|
||||
[index type size item list-size margin-left
|
||||
hole-size hole-radius hole-x hole-y border-radius]
|
||||
(let [last-item? (= index (- list-size 1))]
|
||||
[hole-view/hole-view
|
||||
{:style {:margin-left (if (= index 0) 0 margin-left)}
|
||||
:holes (if last-item?
|
||||
[]
|
||||
[{:x hole-x
|
||||
:y hole-y
|
||||
:width hole-size
|
||||
:height hole-size
|
||||
:borderRadius hole-radius}])}
|
||||
[avatar item type size border-radius]]))
|
||||
|
||||
(defn get-overflow-color
|
||||
[transparent? transparent-color light-color dark-color theme]
|
||||
(if transparent?
|
||||
transparent-color
|
||||
(colors/theme-colors light-color dark-color theme)))
|
||||
|
||||
(defn overflow-label
|
||||
[{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
|
||||
[rn/view
|
||||
{:style {:width size
|
||||
:height size
|
||||
:margin-left margin-left
|
||||
:border-radius border-radius
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (get-overflow-color
|
||||
transparent?
|
||||
colors/white-opa-10
|
||||
colors/neutral-20
|
||||
colors/neutral-70
|
||||
theme)}}
|
||||
(if (= size 16)
|
||||
[quo2.icons/icon :i/more
|
||||
{:size 12
|
||||
:color (get-overflow-color
|
||||
transparent?
|
||||
colors/white-opa-70
|
||||
colors/neutral-50
|
||||
colors/neutral-40
|
||||
theme)}]
|
||||
[quo2.text/text
|
||||
{:size (if (= size 32) :paragraph-2 :label)
|
||||
:weight :medium
|
||||
:style {:color (get-overflow-color
|
||||
transparent?
|
||||
colors/white-opa-70
|
||||
colors/neutral-60
|
||||
colors/neutral-40
|
||||
theme)
|
||||
:margin-left -2}}
|
||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
||||
(if (< label 100)
|
||||
(str "+" label)
|
||||
more-than-99-label)])])
|
||||
|
||||
(defn border-type
|
||||
[type]
|
||||
(case type
|
||||
(:account :collectible :photo) :rounded
|
||||
:circular))
|
||||
|
||||
(defn- preview-list-internal
|
||||
"[preview-list opts items]
|
||||
opts
|
||||
{:type :user/:community/:account/:token/:collectible/:dapp/:network
|
||||
:size 32/24/16
|
||||
:list-size override items count in overflow label (optional)
|
||||
:transparent? overflow-label transparent?}
|
||||
items preview list items (only 4 items is required for preview)
|
||||
"
|
||||
[{:keys [type size list-size transparent? theme more-than-99-label]} items]
|
||||
(let [items-arr (into [] items)
|
||||
list-size (or list-size (count items))
|
||||
margin-left (get-in params [size :margin-left])
|
||||
hole-size (get-in params [size :hole-size])
|
||||
border-radius (get-in params [size :border-radius (border-type type)])
|
||||
hole-radius (get-in params [size :hole-radius (border-type type)])
|
||||
hole-x (get-in params [size :hole-x])
|
||||
hole-y (get-in params [size :hole-y])]
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
(for [index (range (if (> list-size 4) 3 list-size))]
|
||||
^{:key (str index list-size)}
|
||||
[list-item index type size (get items-arr index) list-size
|
||||
margin-left hole-size hole-radius hole-x hole-y border-radius])
|
||||
(when (> list-size 4)
|
||||
[overflow-label
|
||||
{:label (- list-size 3)
|
||||
:size size
|
||||
:transparent? transparent?
|
||||
:border-radius border-radius
|
||||
:margin-left margin-left
|
||||
:theme theme
|
||||
:more-than-99-label more-than-99-label}])]))
|
||||
|
||||
(def preview-list (quo.theme/with-theme preview-list-internal))
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
(ns quo2.components.list-items.preview-list.properties)
|
||||
|
||||
(def ^:private types-for-squared-border #{:accounts :collectibles})
|
||||
|
||||
(defn border-type
|
||||
[type]
|
||||
(if (types-for-squared-border type) :squared :rounded))
|
||||
|
||||
(def sizes
|
||||
{:size/s-32 {:size 32
|
||||
:user-avatar-size :small
|
||||
:border-radius {:rounded 16 :squared 10}
|
||||
:hole-radius {:rounded 18 :squared 12}
|
||||
:margin-left -8
|
||||
:hole-size 36
|
||||
:hole-x 22
|
||||
:hole-y -2}
|
||||
:size/s-24 {:size 24
|
||||
:user-avatar-size :xs
|
||||
:border-radius {:rounded 12 :squared 8}
|
||||
:hole-radius {:rounded 13 :squared 9}
|
||||
:margin-left -4
|
||||
:hole-size 26
|
||||
:hole-x 19
|
||||
:hole-y -1}
|
||||
:size/s-20 {:size 20
|
||||
:user-avatar-size :xxs
|
||||
:border-radius {:rounded 10 :squared 8}
|
||||
:hole-radius {:rounded 11 :squared 9}
|
||||
:margin-left -4
|
||||
:hole-size 22
|
||||
:hole-x 15
|
||||
:hole-y -1}
|
||||
:size/s-16 {:size 16
|
||||
:user-avatar-size :xxxs
|
||||
:border-radius {:rounded 8 :squared 8}
|
||||
:hole-radius {:rounded 9 :squared 9}
|
||||
:margin-left -4
|
||||
:hole-size 18
|
||||
:hole-x 11
|
||||
:hole-y -1}
|
||||
:size/s-14 {:size 14
|
||||
:user-avatar-size :xxxs
|
||||
:border-radius {:rounded 7 :squared 7}
|
||||
:hole-radius {:rounded 8 :squared 8}
|
||||
:margin-left -2
|
||||
:hole-size 16
|
||||
:hole-x 11
|
||||
:hole-y -1}})
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
(ns quo2.components.list-items.preview-list.view
|
||||
(:require [quo2.components.avatars.account-avatar.view :as account-avatar]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.markdown.text :as quo2.text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]
|
||||
[quo2.components.list-items.preview-list.properties :as properties]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.hole-view :as hole-view]))
|
||||
|
||||
;; This overflow item needs to be cleaned up once the "number tag" component is implemented
|
||||
;; https://github.com/status-im/status-mobile/issues/17045
|
||||
(defn get-overflow-color
|
||||
[blur? blur-light-color blur-dark-color light-color dark-color theme]
|
||||
(if blur?
|
||||
(colors/theme-colors blur-light-color blur-dark-color theme)
|
||||
(colors/theme-colors light-color dark-color theme)))
|
||||
|
||||
(def more-icon-for-sizes #{16 14})
|
||||
|
||||
(defn overflow-label
|
||||
[{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
|
||||
[rn/view
|
||||
{:style {:width size
|
||||
:height size
|
||||
:margin-left margin-left
|
||||
:border-radius border-radius
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (get-overflow-color
|
||||
blur?
|
||||
colors/neutral-80-opa-5
|
||||
colors/white-opa-5
|
||||
colors/neutral-20
|
||||
colors/neutral-90
|
||||
theme)}}
|
||||
(if (more-icon-for-sizes size)
|
||||
[quo2.icons/icon :i/more
|
||||
{:size 12
|
||||
:color (get-overflow-color
|
||||
blur?
|
||||
colors/neutral-80-opa-70
|
||||
colors/white-opa-70
|
||||
colors/neutral-50
|
||||
colors/neutral-40
|
||||
theme)}]
|
||||
[quo2.text/text
|
||||
{:size (if (= size 32) :paragraph-2 :label)
|
||||
:weight :medium
|
||||
:style {:color (get-overflow-color
|
||||
blur?
|
||||
colors/neutral-80-opa-70
|
||||
colors/white-opa-70
|
||||
colors/neutral-50
|
||||
colors/neutral-40
|
||||
theme)
|
||||
:margin-left -2}}
|
||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
||||
(if (< label 100)
|
||||
(str "+" label)
|
||||
more-than-99-label)])])
|
||||
|
||||
(defn- preview-item
|
||||
[{:keys [item type size-key]}]
|
||||
(let [size (get-in properties/sizes [size-key :size])
|
||||
user-avatar-size (get-in properties/sizes [size-key :user-avatar-size])
|
||||
border-radius (get-in properties/sizes
|
||||
[size-key :border-radius (properties/border-type type)])]
|
||||
(case type
|
||||
:user [user-avatar/user-avatar
|
||||
(merge {:ring? false
|
||||
:status-indicator? false
|
||||
:size user-avatar-size}
|
||||
item)]
|
||||
|
||||
:accounts [account-avatar/view
|
||||
(merge item {:size size})]
|
||||
|
||||
(:communities :collectibles) [fast-image/fast-image
|
||||
{:source (:source item)
|
||||
:style {:width size
|
||||
:height size
|
||||
:border-radius border-radius}}]
|
||||
|
||||
(:tokens :network :dapps) [fast-image/fast-image
|
||||
{:source (:source item)
|
||||
:style {:width size
|
||||
:height size
|
||||
:border-radius border-radius}}]
|
||||
nil)))
|
||||
|
||||
(defn- list-item
|
||||
[{:keys [index type size-key item number]}]
|
||||
(let [last-item? (= index (dec number))
|
||||
border-type (properties/border-type type)
|
||||
{margin-left :margin-left
|
||||
hole-size :hole-size
|
||||
hole-x :hole-x
|
||||
hole-y :hole-y
|
||||
{hole-radius border-type} :hole-radius} (properties/sizes size-key)]
|
||||
[hole-view/hole-view
|
||||
{:style {:margin-left (if (= index 0) 0 margin-left)}
|
||||
:holes (if last-item?
|
||||
[]
|
||||
[{:x hole-x
|
||||
:y hole-y
|
||||
:width hole-size
|
||||
:height hole-size
|
||||
:borderRadius hole-radius}])}
|
||||
[preview-item
|
||||
{:item item
|
||||
:type type
|
||||
:size-key size-key}]]))
|
||||
|
||||
(defn- view-internal
|
||||
"[preview-list opts items]
|
||||
opts
|
||||
{:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
|
||||
:size :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
|
||||
:number number of items in the list (optional)
|
||||
:blur? overflow-label blur?}
|
||||
items preview list items (only 4 items is required for preview)
|
||||
"
|
||||
[{:keys [type size number blur? theme more-than-99-label]} items]
|
||||
(let [size-key (if (contains? properties/sizes size) size :size/s-24)
|
||||
number (or number (count items))
|
||||
margin-left (get-in properties/sizes [size-key :margin-left])
|
||||
border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
(for [index (range (if (> number 4) 3 number))]
|
||||
^{:key (str index number)}
|
||||
[list-item
|
||||
{:index index
|
||||
:type type
|
||||
:size-key size-key
|
||||
:item (get (vec items) index)
|
||||
:number number}])
|
||||
(when (> number 4)
|
||||
[overflow-label
|
||||
{:label (- number 3)
|
||||
:size (get-in properties/sizes [size-key :size])
|
||||
:blur? blur?
|
||||
:border-radius border-radius
|
||||
:margin-left margin-left
|
||||
:theme theme
|
||||
:more-than-99-label more-than-99-label}])]))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
:align-items :center
|
||||
:flex 1}}
|
||||
[rn/image
|
||||
{:source (resources/tokens token)
|
||||
{:source (resources/get-token token)
|
||||
:style {:width 32
|
||||
:height 32}}]
|
||||
[rn/view {:style {:margin-left 8}}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
[{:keys [amount token theme]}]
|
||||
[rn/view {:style style/container}
|
||||
[rn/image
|
||||
{:source (resources/tokens token)
|
||||
{:source (resources/get-token token)
|
||||
:style {:width 12 :height 12}}]
|
||||
[text/text
|
||||
{:weight :medium
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
{:style {:flex-direction :row
|
||||
:align-items :center}}
|
||||
[rn/image
|
||||
{:source (resources/networks network)
|
||||
{:source (resources/get-network network)
|
||||
:style style/network-icon}]
|
||||
[text/text
|
||||
{:size :label
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
[rn/image
|
||||
{:style {:width 14
|
||||
:height 14}
|
||||
:source (resources/networks network)}]
|
||||
:source (resources/get-network network)}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
quo2.components.list-items.community.view
|
||||
quo2.components.list-items.dapp.view
|
||||
quo2.components.list-items.menu-item
|
||||
quo2.components.list-items.preview-list
|
||||
quo2.components.list-items.preview-list.view
|
||||
quo2.components.list-items.token-value.view
|
||||
quo2.components.list-items.user-list
|
||||
quo2.components.loaders.skeleton
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
(def channel-list-item quo2.components.list-items.channel/list-item)
|
||||
(def dapp quo2.components.list-items.dapp.view/view)
|
||||
(def menu-item quo2.components.list-items.menu-item/menu-item)
|
||||
(def preview-list quo2.components.list-items.preview-list/preview-list)
|
||||
(def preview-list quo2.components.list-items.preview-list.view/view)
|
||||
(def user-list quo2.components.list-items.user-list/user-list)
|
||||
(def community-list-item quo2.components.list-items.community.view/view)
|
||||
(def token-value quo2.components.list-items.token-value.view/view)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,18 @@
|
|||
[k]
|
||||
(get ui k))
|
||||
|
||||
(def dapps
|
||||
{:coingecko (js/require "../resources/images/dapps/CoinGecko.png")
|
||||
:1inch (js/require "../resources/images/dapps/1inch.png")
|
||||
:aave (js/require "../resources/images/dapps/Aave.png")
|
||||
:uniswap (js/require "../resources/images/dapps/Uniswap.png")
|
||||
:zapper (js/require "../resources/images/dapps/Zapper.png")
|
||||
:zerion (js/require "../resources/images/dapps/Zerion.png")})
|
||||
|
||||
(defn get-dapp
|
||||
[k]
|
||||
(get dapps k))
|
||||
|
||||
(def tokens
|
||||
{:eth (js/require "../resources/images/tokens/mainnet/ETH-token.png")
|
||||
:knc (js/require "../resources/images/tokens/mainnet/KNC.png")
|
||||
|
|
@ -25,10 +37,18 @@
|
|||
(get tokens k))
|
||||
|
||||
(def networks
|
||||
{:ethereum (js/require "../resources/images/tokens/mainnet/ETH-network.png")
|
||||
:optimism (js/require "../resources/images/tokens/mainnet/OP.png")
|
||||
:arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")})
|
||||
{:arbitrum (js/require "../resources/images/networks/Arbitrum.png")
|
||||
:ethereum (js/require "../resources/images/networks/Ethereum.png")
|
||||
:gnosis (js/require "../resources/images/networks/Gnosis.png")
|
||||
:hermez (js/require "../resources/images/networks/Hermez.png")
|
||||
:optimism (js/require "../resources/images/networks/Optimism.png")
|
||||
:polygon (js/require "../resources/images/networks/Polygon.png")
|
||||
:scroll (js/require "../resources/images/networks/Scroll.png")
|
||||
:taiko (js/require "../resources/images/networks/Taiko.png")
|
||||
:unknown (js/require "../resources/images/networks/Unknown.png")
|
||||
:xdai (js/require "../resources/images/networks/xDAI.png")
|
||||
:zksync (js/require "../resources/images/networks/zkSync.png")})
|
||||
|
||||
(defn get-network
|
||||
[n]
|
||||
(get networks n))
|
||||
[k]
|
||||
(get networks k))
|
||||
|
|
|
|||
|
|
@ -52,7 +52,6 @@
|
|||
(def mock-images
|
||||
{:diamond (js/require "../resources/images/mock2/diamond.png")
|
||||
:coinbase (js/require "../resources/images/mock2/coinbase.png")
|
||||
:coin-gecko (js/require "../resources/images/mock2/coin-gecko.png")
|
||||
:collectible (js/require "../resources/images/mock2/collectible.png")
|
||||
:contact (js/require "../resources/images/mock2/contact.png")
|
||||
:community-banner (js/require "../resources/images/mock2/community-banner.png")
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
(when (seq user-list)
|
||||
[rn/view style/preview-user
|
||||
[quo/preview-list
|
||||
{:type :user
|
||||
:list-size (count user-list)
|
||||
:size 24}
|
||||
{:type :user
|
||||
:number (count user-list)
|
||||
:size :size/s-24}
|
||||
user-list]
|
||||
[quo/text
|
||||
{:accessibility-label :communities-screen-title
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
(:require [quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.common.resources :as resources]
|
||||
[quo2.foundations.resources :as resources]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
(defn preview
|
||||
[]
|
||||
(let [state (reagent/atom {:dapp {:avatar (resources/get-mock-image :coin-gecko)
|
||||
(let [state (reagent/atom {:dapp {:avatar (resources/get-dapp :coingecko)
|
||||
:name "Coingecko"
|
||||
:value "coingecko.com"}
|
||||
:state :default
|
||||
|
|
|
|||
|
|
@ -6,53 +6,122 @@
|
|||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:key :size
|
||||
[{:key :type
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:options [{:key :user
|
||||
:value "User"}
|
||||
{:key :communities
|
||||
:value "Communities"}
|
||||
{:key :collectibles
|
||||
:value "Collectibles"}
|
||||
{:key :tokens
|
||||
:value "Tokens"}
|
||||
{:key :dapps
|
||||
:value "dApps"}
|
||||
{:key :accounts
|
||||
:value "Accounts"}
|
||||
{:key :network
|
||||
:value "Network"}]}
|
||||
{:key :size
|
||||
:type :select
|
||||
:options [{:key :size/s-32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
{:key :size/s-24
|
||||
:value "24"}
|
||||
{:key 16
|
||||
:value "16"}]}
|
||||
{:key :type
|
||||
:type :select
|
||||
:options [{:key :user}
|
||||
{:key :photo}
|
||||
{:key :network}]}
|
||||
{:key :list-size
|
||||
:default 10
|
||||
:type :text}])
|
||||
{:key :size/s-20
|
||||
:value "20"}
|
||||
{:key :size/s-16
|
||||
:value "16"}
|
||||
{:key :size/s-14
|
||||
:value "14"}]}
|
||||
{:key :number
|
||||
:type :text}
|
||||
{:key :blur?
|
||||
:type :boolean}])
|
||||
|
||||
(def user-list
|
||||
[{:full-name "ABC DEF"}
|
||||
{:full-name "GHI JKL"}
|
||||
{:full-name "MNO PQR"}
|
||||
{:full-name "STU VWX"}])
|
||||
[{:full-name "A Y"
|
||||
:customization-color :blue}
|
||||
{:full-name "B Z"
|
||||
:profile-picture (resources/get-mock-image :user-picture-male4)
|
||||
:customization-color :army}
|
||||
{:full-name "X R"
|
||||
:customization-color :orange}
|
||||
{:full-name "T R"
|
||||
:profile-picture (resources/get-mock-image :user-picture-male5)
|
||||
:customization-color :army}])
|
||||
|
||||
(def photos-list
|
||||
[{:source (resources/get-mock-image :photo1)}
|
||||
(def accounts-list
|
||||
[{:customization-color :purple
|
||||
:emoji "🍑"
|
||||
:type :default}
|
||||
{:customization-color :army
|
||||
:emoji "🍓"
|
||||
:type :default}
|
||||
{:customization-color :orange
|
||||
:emoji "🍑"
|
||||
:type :default}
|
||||
{:customization-color :blue
|
||||
:emoji "🍓"
|
||||
:type :default}])
|
||||
|
||||
(def tokens-list
|
||||
[{:source (quo.resources/get-token :snt)}
|
||||
{:source (quo.resources/get-token :eth)}
|
||||
{:source (quo.resources/get-token :knc)}
|
||||
{:source (quo.resources/get-token :mana)}
|
||||
{:source (quo.resources/get-token :rare)}])
|
||||
|
||||
(def communities-list
|
||||
[{:source (resources/get-mock-image :coinbase)}
|
||||
{:source (resources/get-mock-image :decentraland)}
|
||||
{:source (resources/get-mock-image :rarible)}
|
||||
{:source (resources/get-mock-image :photo1)}
|
||||
{:source (resources/get-mock-image :photo2)}
|
||||
{:source (resources/get-mock-image :photo3)}])
|
||||
|
||||
(def collectibles-list
|
||||
[{:source (resources/get-mock-image :collectible)}
|
||||
{:source (resources/get-mock-image :photo2)}
|
||||
{:source (resources/get-mock-image :photo3)}
|
||||
{:source (resources/get-mock-image :photo1)}
|
||||
{:source (resources/get-mock-image :photo2)}
|
||||
{:source (resources/get-mock-image :photo3)}])
|
||||
|
||||
(def dapps-list
|
||||
[{:source (quo.resources/get-dapp :coingecko)}
|
||||
{:source (quo.resources/get-dapp :aave)}
|
||||
{:source (quo.resources/get-dapp :1inch)}
|
||||
{:source (quo.resources/get-dapp :zapper)}
|
||||
{:source (quo.resources/get-dapp :uniswap)}])
|
||||
|
||||
(def networks-list
|
||||
[{:source (quo.resources/get-network :ethereum)}
|
||||
{:source (quo.resources/get-network :optimism)}
|
||||
{:source (quo.resources/get-network :arbitrum)}])
|
||||
{:source (quo.resources/get-network :arbitrum)}
|
||||
{:source (quo.resources/get-network :zksync)}
|
||||
{:source (quo.resources/get-network :polygon)}])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [state (reagent/atom {:type :user
|
||||
:size 32
|
||||
:list-size 10
|
||||
(let [state (reagent/atom {:type :accounts
|
||||
:size :size/s-32
|
||||
:number 4
|
||||
:more-than-99-label "99+"})
|
||||
type (reagent/cursor state [:type])]
|
||||
type (reagent/cursor state [:type])
|
||||
blur? (reagent/cursor state [:blur?])]
|
||||
(fn []
|
||||
[preview/preview-container {:state state :descriptor descriptor}
|
||||
[preview/preview-container
|
||||
{:state state
|
||||
:descriptor descriptor
|
||||
:blur? true
|
||||
:show-blur-background? @blur?}
|
||||
[quo/preview-list @state
|
||||
(case @type
|
||||
:user user-list
|
||||
:photo photos-list
|
||||
:network networks-list)]])))
|
||||
:user user-list
|
||||
:communities communities-list
|
||||
:accounts accounts-list
|
||||
:tokens tokens-list
|
||||
:collectibles collectibles-list
|
||||
:dapps dapps-list
|
||||
:network networks-list)]])))
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
:title "Status"}}
|
||||
{:id 3
|
||||
:type types/item
|
||||
:data {:image (quo2.resources/tokens :eth)
|
||||
:data {:image (quo2.resources/get-token :eth)
|
||||
:image-size 21
|
||||
:right-icon :i/world
|
||||
:title "Ethereum"}}
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@
|
|||
|
||||
constants/content-type-image
|
||||
[quo/preview-list
|
||||
{:type :photo
|
||||
{:type :collectibles
|
||||
:more-than-99-label (i18n/label :counter-99-plus)
|
||||
:size 24}
|
||||
:size :size/s-24}
|
||||
data]
|
||||
|
||||
constants/content-type-sticker
|
||||
|
|
|
|||