status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added assets skeleton in wallet home and account screen (#18197) 

This commit:

- Updates the "skeleton-list" component to support the "assets" type
- Adds the assets skeleton to the assets tab in the wallet home and account screen

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit is contained in:
Mohamed Javid 2023-12-21 13:28:52 +05:30 committed by GitHub
parent 4ca533a534
commit 60dfd6ce78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 224 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/quo/components/loaders/skeleton_list/component_spec.cljs
View File

@ -16,12 +16,12 @@
(h/is-truthy (h/get-by-label-text rendered accessibility-text))))
(h/describe "Skeleton tests"
(doseq [content [:messages :notifications :list-items]
animated? [true false]]
(let [content-str (name content)]
(h/test (str "Skeleton :"
content-str
" is "
(if animated? "animated" "static")
" based on animated? " animated?)
(test-skeleton content animated?)))))
(doseq [content [:messages :notifications :list-items :assets]
animated? [true false]
:let [content-str (name content)]]
(h/test (str "Skeleton :"
content-str
" is "
(if animated? "animated" "static")
" based on animated? " animated?)
(test-skeleton content animated?))))

100
src/quo/components/loaders/skeleton_list/constants.cljs
View File

@ -6,7 +6,9 @@
:list-items {:height 56
:padding-top 12}
:notifications {:height 90
:padding-top 8}})
:padding-top 8}
:assets {:height 56
:padding-top 12}})
(def ^:const content-dimensions
{:messages {0 {:author {:width 112
@ -33,30 +35,30 @@
:message {:width 156
:height 16
:margin-bottom 0}}}
:list-items {0 {:author {:width 112
:height 8
:margin-bottom 0}
:message {:width 144
:list-items {0 {:author {:width 144
:height 16
:margin-bottom 8}}
1 {:author {:width 96
:margin-bottom 8}
:message {:width 112
:height 8
:margin-bottom 0}
:message {:width 212
:margin-bottom 0}}
1 {:author {:width 212
:height 16
:margin-bottom 8}}
2 {:author {:width 80
:margin-bottom 8}
:message {:width 96
:height 8
:margin-bottom 0}
:message {:width 249
:margin-bottom 0}}
2 {:author {:width 249
:height 16
:margin-bottom 8}}
3 {:author {:width 124
:margin-bottom 8}
:message {:width 80
:height 8
:margin-bottom 0}
:message {:width 156
:margin-bottom 0}}
3 {:author {:width 156
:height 16
:margin-bottom 8}}}
:margin-bottom 8}
:message {:width 124
:height 8
:margin-bottom 0}}}
:notifications {0 {:author {:width 109
:height 8
:margin-bottom 8}
@ -92,4 +94,64 @@
:margin-bottom 8}
:message2 {:width 256
:height 30
:margin-bottom 0}}}})
:margin-bottom 0}}}
:assets {0 {:author {:width 60
:height 14
:margin-bottom 8}
:message {:width 92
:height 10
:margin-bottom 0}
:author2 {:width 80
:height 10
:margin-bottom 8}
:message2 {:width 52
:height 10
:margin-right 4}
:message3 {:width 52
:height 10
:margin-right 4}}
1 {:author {:width 60
:height 14
:margin-bottom 8}
:message {:width 92
:height 10
:margin-bottom 0}
:author2 {:width 100
:height 10
:margin-bottom 8}
:message2 {:width 32
:height 10
:margin-right 4}
:message3 {:width 32
:height 10
:margin-right 4}}
2 {:author {:width 80
:height 14
:margin-bottom 8}
:message {:width 112
:height 10
:margin-bottom 0}
:author2 {:width 80
:height 10
:margin-bottom 8}
:message2 {:width 52
:height 10
:margin-right 4}
:message3 {:width 52
:height 10
:margin-right 4}}
3 {:author {:width 80
:height 14
:margin-bottom 8}
:message {:width 112
:height 10
:margin-bottom 0}
:author2 {:width 100
:height 10
:margin-bottom 8}
:message2 {:width 32
:height 10
:margin-right 4}
:message3 {:width 32
:height 10
:margin-right 4}}}})

22
src/quo/components/loaders/skeleton_list/style.cljs
View File

@ -5,6 +5,7 @@
(defn container
[content]
{:flex-direction :row
:align-items :center
:padding 12
:padding-top (get-in constants/layout-dimensions [content :padding-top])
:height (get-in constants/layout-dimensions [content :height])})
@ -17,14 +18,29 @@
:background-color color})
(def content-container
{:padding-left 8})
{:flex 1
:padding-left 8})
(def right-content-container
{:align-items :flex-end})
(def right-bottom-content-container
{:flex-direction :row})
(defn author
[color]
{:height 10
:width 10
:border-radius 6
:background-color color})
(defn content-view
[{:keys [type index content color]}]
(let [{:keys [width height margin-bottom]}
(let [{:keys [width height margin-bottom margin-right]}
(get-in constants/content-dimensions [content index type])]
{:height height
:width width
:border-radius 6
:background-color color
:margin-bottom margin-bottom}))
:margin-bottom margin-bottom
:margin-right margin-right}))

28
src/quo/components/loaders/skeleton_list/view.cljs
View File

@ -17,13 +17,13 @@
[rn/view {:style style/content-container}
[rn/view
{:style (style/content-view
{:type (if (= content :list-items) :message :author)
{:type :author
:index index
:content content
:color color})}]
[rn/view
{:style (style/content-view
{:type (if (= content :list-items) :author :message)
{:type :message
:index index
:content content
:color color})}]
@ -32,7 +32,29 @@
{:style (style/content-view {:type :message2
:index index
:content content
:color color})}])]])
:color color})}])]
(when (= content :assets)
[rn/view {:style style/right-content-container}
[rn/view
{:style (style/content-view
{:type :author2
:index index
:content content
:color color})}]
[rn/view {:style style/right-bottom-content-container}
[rn/view
{:style (style/content-view
{:type :message2
:index index
:content content
:color color})}]
[rn/view
{:style (style/content-view
{:type :message3
:index index
:content content
:color color})}]
[rn/view {:style (style/author color)}]]])])
(defn- f-animated-skeleton-view
[{:keys [style color skeleton-height animated? translate-x window-width theme] :as data}]

3
src/status_im/contexts/quo_preview/loaders/skeleton_list.cljs
View File

@ -9,7 +9,8 @@
:type :select
:options [{:key :list-items}
{:key :notifications}
{:key :messages}]}
{:key :messages}
{:key :assets}]}
{:key :blur? :type :boolean}
{:key :animated? :type :boolean}])

21
src/status_im/contexts/wallet/account/tabs/assets/view.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns status-im.contexts.wallet.account.tabs.assets.view
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.contexts.wallet.common.token-value.view :as token-value]
[utils.re-frame :as rf]))
(defn view
[]
(let [tokens-loading? (rf/sub [:wallet/tokens-loading?])
tokens (rf/sub [:wallet/account-token-values])]
(if tokens-loading?
[quo/skeleton-list
{:content :assets
:parent-height 560
:animated? false}]
[rn/flat-list
{:render-fn token-value/view
:style {:flex 1}
:data tokens
:content-container-style {:padding-horizontal 8}}])))

31
src/status_im/contexts/wallet/account/tabs/view.cljs
View File

@ -2,28 +2,23 @@
(:require
[react-native.core :as rn]
[status-im.contexts.wallet.account.tabs.about.view :as about]
[status-im.contexts.wallet.account.tabs.assets.view :as assets]
[status-im.contexts.wallet.account.tabs.dapps.view :as dapps]
[status-im.contexts.wallet.common.activity-tab.view :as activity]
[status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
[status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
[status-im.contexts.wallet.common.token-value.view :as token-value]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.i18n :as i18n]))
(defn view
[{:keys [selected-tab]}]
(let [tokens (filter identity (rf/sub [:wallet/account-token-values]))]
(case selected-tab
:assets [rn/flat-list
{:render-fn token-value/view
:style {:flex 1}
:data tokens
:content-container-style {:padding-horizontal 8}}]
:collectibles [collectibles/view]
:activity [activity/view]
:permissions [empty-tab/view
{:title (i18n/label :t/no-permissions)
:description (i18n/label :t/no-collectibles-description)
:placeholder? true}]
:dapps [dapps/view]
[about/view])))
[rn/view {:style {:flex 1}}
(case selected-tab
:assets [assets/view]
:collectibles [collectibles/view]
:activity [activity/view]
:permissions [empty-tab/view
{:title (i18n/label :t/no-permissions)
:description (i18n/label :t/no-collectibles-description)
:placeholder? true}]
:dapps [dapps/view]
[about/view])])

13
src/status_im/contexts/wallet/common/temp.cljs
View File

@ -4,19 +4,6 @@
[status-im.common.resources :as status.resources]
[utils.i18n :as i18n]))
(defn wallet-overview-state
[networks]
{:state :default
:time-frame :none
:metrics :none
:balance "€0.00"
:date "20 Nov 2023"
:begin-date "16 May"
:end-date "25 May"
:currency-change "€0.00"
:percentage-change "0.00%"
:networks networks})
(def tokens
[{:token :snt
:token-name "Status"

3
src/status_im/contexts/wallet/home/style.cljs
View File

@ -21,9 +21,6 @@
(def separator
{:width 12})
(def selected-tab-container
{:padding-horizontal 8})
(defn home-container
[]
{:margin-top (safe-area/get-top)

4
src/status_im/contexts/wallet/home/tabs/assets/style.cljs Normal file
View File

@ -0,0 +1,4 @@
(ns status-im.contexts.wallet.home.tabs.assets.style)
(def list-container
{:padding-horizontal 8})

21
src/status_im/contexts/wallet/home/tabs/assets/view.cljs Normal file
View File

@ -0,0 +1,21 @@
(ns status-im.contexts.wallet.home.tabs.assets.view
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.contexts.wallet.common.temp :as temp]
[status-im.contexts.wallet.home.tabs.assets.style :as style]
[utils.re-frame :as rf]))
(defn view
[]
(let [tokens-loading? (rf/sub [:wallet/tokens-loading?])]
(if tokens-loading?
[quo/skeleton-list
{:content :assets
:parent-height 560
:animated? false}]
[rn/flat-list
{:render-fn quo/token-value
:data temp/tokens
:key :assets-list
:content-container-style style/list-container}])))

4
src/status_im/contexts/wallet/home/tabs/style.cljs Normal file
View File

@ -0,0 +1,4 @@
(ns status-im.contexts.wallet.home.tabs.style)
(def container
{:flex 1})

15
src/status_im/contexts/wallet/home/tabs/view.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns status-im.contexts.wallet.home.tabs.view
(:require
[react-native.core :as rn]
[status-im.contexts.wallet.common.activity-tab.view :as activity]
[status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
[status-im.contexts.wallet.home.tabs.assets.view :as assets]
[status-im.contexts.wallet.home.tabs.style :as style]))
(defn view
[{:keys [selected-tab]}]
[rn/view {:style style/container}
(case selected-tab
:assets [assets/view]
:collectibles [collectibles/view]
[activity/view])])

23
src/status_im/contexts/wallet/home/view.cljs
View File

@ -4,10 +4,8 @@
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im.common.home.top-nav.view :as common.top-nav]
[status-im.contexts.wallet.common.activity-tab.view :as activity]
[status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
[status-im.contexts.wallet.common.temp :as temp]
[status-im.contexts.wallet.home.style :as style]
[status-im.contexts.wallet.home.tabs.view :as tabs]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -41,13 +39,19 @@
[]
(let [selected-tab (reagent/atom (:id (first tabs-data)))]
(fn []
(let [networks (rf/sub [:wallet/network-details])
(let [tokens-loading? (rf/sub [:wallet/tokens-loading?])
networks (rf/sub [:wallet/network-details])
account-cards-data (rf/sub [:wallet/account-cards-data])
cards (conj account-cards-data (new-account-card-data))]
[rn/view {:style (style/home-container)}
[common.top-nav/view]
[rn/view {:style style/overview-container}
[quo/wallet-overview (temp/wallet-overview-state networks)]]
[quo/wallet-overview
{:state (if tokens-loading? :loading :default)
:time-frame :none
:metrics :none
:balance "€0.00"
:networks networks}]]
[quo/wallet-graph {:time-frame :empty}]
[rn/flat-list
{:style style/accounts-list
@ -63,11 +67,4 @@
:default-active @selected-tab
:data tabs-data
:on-change #(reset! selected-tab %)}]
(case @selected-tab
:assets [rn/flat-list
{:render-fn quo/token-value
:data temp/tokens
:key :assets-list
:content-container-style style/selected-tab-container}]
:collectibles [collectibles/view]
[activity/view])]))))
[tabs/view {:selected-tab @selected-tab}]]))))