From 60dfd6ce780fc6563e181ee1d884e41a8642fda5 Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Thu, 21 Dec 2023 13:28:52 +0530 Subject: [PATCH] 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> --- .../loaders/skeleton_list/component_spec.cljs | 18 ++-- .../loaders/skeleton_list/constants.cljs | 100 ++++++++++++++---- .../loaders/skeleton_list/style.cljs | 22 +++- .../loaders/skeleton_list/view.cljs | 28 ++++- .../quo_preview/loaders/skeleton_list.cljs | 3 +- .../wallet/account/tabs/assets/view.cljs | 21 ++++ .../contexts/wallet/account/tabs/view.cljs | 31 +++--- .../contexts/wallet/common/temp.cljs | 13 --- src/status_im/contexts/wallet/home/style.cljs | 3 - .../wallet/home/tabs/assets/style.cljs | 4 + .../wallet/home/tabs/assets/view.cljs | 21 ++++ .../contexts/wallet/home/tabs/style.cljs | 4 + .../contexts/wallet/home/tabs/view.cljs | 15 +++ src/status_im/contexts/wallet/home/view.cljs | 23 ++-- 14 files changed, 224 insertions(+), 82 deletions(-) create mode 100644 src/status_im/contexts/wallet/account/tabs/assets/view.cljs create mode 100644 src/status_im/contexts/wallet/home/tabs/assets/style.cljs create mode 100644 src/status_im/contexts/wallet/home/tabs/assets/view.cljs create mode 100644 src/status_im/contexts/wallet/home/tabs/style.cljs create mode 100644 src/status_im/contexts/wallet/home/tabs/view.cljs diff --git a/src/quo/components/loaders/skeleton_list/component_spec.cljs b/src/quo/components/loaders/skeleton_list/component_spec.cljs index 63555dca77..a0f559fe08 100644 --- a/src/quo/components/loaders/skeleton_list/component_spec.cljs +++ b/src/quo/components/loaders/skeleton_list/component_spec.cljs @@ -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?)))) diff --git a/src/quo/components/loaders/skeleton_list/constants.cljs b/src/quo/components/loaders/skeleton_list/constants.cljs index 246d00cc64..a5f184c6fd 100644 --- a/src/quo/components/loaders/skeleton_list/constants.cljs +++ b/src/quo/components/loaders/skeleton_list/constants.cljs @@ -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}}}}) diff --git a/src/quo/components/loaders/skeleton_list/style.cljs b/src/quo/components/loaders/skeleton_list/style.cljs index 6a094de9b1..bf7ec841c9 100644 --- a/src/quo/components/loaders/skeleton_list/style.cljs +++ b/src/quo/components/loaders/skeleton_list/style.cljs @@ -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})) diff --git a/src/quo/components/loaders/skeleton_list/view.cljs b/src/quo/components/loaders/skeleton_list/view.cljs index ea460204f9..d9b7b91ad8 100644 --- a/src/quo/components/loaders/skeleton_list/view.cljs +++ b/src/quo/components/loaders/skeleton_list/view.cljs @@ -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}] diff --git a/src/status_im/contexts/quo_preview/loaders/skeleton_list.cljs b/src/status_im/contexts/quo_preview/loaders/skeleton_list.cljs index a332e6391f..eca35a13c0 100644 --- a/src/status_im/contexts/quo_preview/loaders/skeleton_list.cljs +++ b/src/status_im/contexts/quo_preview/loaders/skeleton_list.cljs @@ -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}]) diff --git a/src/status_im/contexts/wallet/account/tabs/assets/view.cljs b/src/status_im/contexts/wallet/account/tabs/assets/view.cljs new file mode 100644 index 0000000000..69977ebc61 --- /dev/null +++ b/src/status_im/contexts/wallet/account/tabs/assets/view.cljs @@ -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}}]))) diff --git a/src/status_im/contexts/wallet/account/tabs/view.cljs b/src/status_im/contexts/wallet/account/tabs/view.cljs index e105d3dcc1..172de0e43e 100644 --- a/src/status_im/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im/contexts/wallet/account/tabs/view.cljs @@ -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])]) diff --git a/src/status_im/contexts/wallet/common/temp.cljs b/src/status_im/contexts/wallet/common/temp.cljs index 16a8618281..424688d7bd 100644 --- a/src/status_im/contexts/wallet/common/temp.cljs +++ b/src/status_im/contexts/wallet/common/temp.cljs @@ -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" diff --git a/src/status_im/contexts/wallet/home/style.cljs b/src/status_im/contexts/wallet/home/style.cljs index c902caa13b..dad938e0fd 100644 --- a/src/status_im/contexts/wallet/home/style.cljs +++ b/src/status_im/contexts/wallet/home/style.cljs @@ -21,9 +21,6 @@ (def separator {:width 12}) -(def selected-tab-container - {:padding-horizontal 8}) - (defn home-container [] {:margin-top (safe-area/get-top) diff --git a/src/status_im/contexts/wallet/home/tabs/assets/style.cljs b/src/status_im/contexts/wallet/home/tabs/assets/style.cljs new file mode 100644 index 0000000000..479d4fc04a --- /dev/null +++ b/src/status_im/contexts/wallet/home/tabs/assets/style.cljs @@ -0,0 +1,4 @@ +(ns status-im.contexts.wallet.home.tabs.assets.style) + +(def list-container + {:padding-horizontal 8}) diff --git a/src/status_im/contexts/wallet/home/tabs/assets/view.cljs b/src/status_im/contexts/wallet/home/tabs/assets/view.cljs new file mode 100644 index 0000000000..cd2ab787c9 --- /dev/null +++ b/src/status_im/contexts/wallet/home/tabs/assets/view.cljs @@ -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}]))) diff --git a/src/status_im/contexts/wallet/home/tabs/style.cljs b/src/status_im/contexts/wallet/home/tabs/style.cljs new file mode 100644 index 0000000000..caec094679 --- /dev/null +++ b/src/status_im/contexts/wallet/home/tabs/style.cljs @@ -0,0 +1,4 @@ +(ns status-im.contexts.wallet.home.tabs.style) + +(def container + {:flex 1}) diff --git a/src/status_im/contexts/wallet/home/tabs/view.cljs b/src/status_im/contexts/wallet/home/tabs/view.cljs new file mode 100644 index 0000000000..536d91b394 --- /dev/null +++ b/src/status_im/contexts/wallet/home/tabs/view.cljs @@ -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])]) diff --git a/src/status_im/contexts/wallet/home/view.cljs b/src/status_im/contexts/wallet/home/view.cljs index 1e13852577..8e4022c0e2 100644 --- a/src/status_im/contexts/wallet/home/view.cljs +++ b/src/status_im/contexts/wallet/home/view.cljs @@ -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}]]))))