From 3223c715268bce99ebc5bc17f379eb0a513d50d1 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Wed, 23 Aug 2023 21:10:46 +0400 Subject: [PATCH] Feat: wallet empty account UI (#17077) * feat: wallet account empty --- .../components/buttons/wallet_ctas/style.cljs | 5 +- .../empty_state/empty_state/styles.cljs | 5 ++ .../empty_state/empty_state/view.cljs | 12 +-- .../components/wallet/account_card/view.cljs | 77 ++++++++++--------- .../wallet/account_overview/style.cljs | 2 +- .../wallet/account_overview/view.cljs | 8 +- .../contexts/wallet/account/style.cljs | 15 ++++ .../contexts/wallet/account/tabs/view.cljs | 37 +++++++++ .../contexts/wallet/account/view.cljs | 50 +++++++++--- .../wallet/{home => common}/temp.cljs | 11 ++- .../contexts/wallet/home/style.cljs | 19 ++--- src/status_im2/contexts/wallet/home/view.cljs | 28 +++---- translations/en.json | 11 ++- 13 files changed, 188 insertions(+), 92 deletions(-) create mode 100644 src/status_im2/contexts/wallet/account/style.cljs create mode 100644 src/status_im2/contexts/wallet/account/tabs/view.cljs rename src/status_im2/contexts/wallet/{home => common}/temp.cljs (88%) diff --git a/src/quo2/components/buttons/wallet_ctas/style.cljs b/src/quo2/components/buttons/wallet_ctas/style.cljs index 721bc8011a..394a7d05c0 100644 --- a/src/quo2/components/buttons/wallet_ctas/style.cljs +++ b/src/quo2/components/buttons/wallet_ctas/style.cljs @@ -4,7 +4,10 @@ {:padding-top 24 :padding-bottom 12 :padding-horizontal 20 - :flex-direction :row}) + :flex-direction :row + :justify-content :center + :flex 1 + :max-height 106}) (def button-container {:padding-vertical 8 diff --git a/src/quo2/components/empty_state/empty_state/styles.cljs b/src/quo2/components/empty_state/empty_state/styles.cljs index 439010bcfb..ca7070c484 100644 --- a/src/quo2/components/empty_state/empty_state/styles.cljs +++ b/src/quo2/components/empty_state/empty_state/styles.cljs @@ -24,3 +24,8 @@ {:color colors/white})) (def button-container {:margin-top 20}) + +(def image-placeholder + {:width 80 + :height 80 + :background-color colors/danger}) diff --git a/src/quo2/components/empty_state/empty_state/view.cljs b/src/quo2/components/empty_state/empty_state/view.cljs index 5e32b1d6e7..4939552d52 100644 --- a/src/quo2/components/empty_state/empty_state/view.cljs +++ b/src/quo2/components/empty_state/empty_state/view.cljs @@ -7,14 +7,16 @@ [quo2.theme :as theme])) (defn- empty-state-internal - [{:keys [customization-color image title description blur?] + [{:keys [customization-color image title description blur? placeholder? container-style] upper-button :upper-button lower-button :lower-button :or {customization-color :blue}}] - [rn/view {:style styles/container} - [fast-image/fast-image - {:style styles/image - :source image}] + [rn/view {:style (merge styles/container container-style)} + (if placeholder? + [rn/view {:style styles/image-placeholder}] + [fast-image/fast-image + {:style styles/image + :source image}]) [rn/view {:style styles/text-container} [text/text {:style (styles/title blur?) diff --git a/src/quo2/components/wallet/account_card/view.cljs b/src/quo2/components/wallet/account_card/view.cljs index 1eff8d36e3..d5f85ce0a4 100644 --- a/src/quo2/components/wallet/account_card/view.cljs +++ b/src/quo2/components/wallet/account_card/view.cljs @@ -47,7 +47,7 @@ (defn- user-account [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics? - theme]}] + theme on-press]}] (let [watch-only? (= :watch-only type) empty? (= :empty type) account-amount (if (= :empty state) "€0.00" amount) @@ -59,44 +59,45 @@ :type type :theme theme :metrics? metrics?}] - [:<> - [rn/view {:style (style/card customization-color watch-only? metrics? theme)} - [rn/view {:style style/profile-container} - [rn/view {:style {:padding-bottom 2 :margin-right 2}} - [text/text {:style style/emoji} emoji]] - [rn/view {:style style/watch-only-container} + [rn/pressable + {:style (style/card customization-color watch-only? metrics? theme) + :on-press on-press} + [rn/view {:style style/profile-container} + [rn/view {:style {:padding-bottom 2 :margin-right 2}} + [text/text {:style style/emoji} emoji]] + [rn/view {:style style/watch-only-container} + [text/text + {:size :paragraph-2 + :weight :medium + :style (style/account-name watch-only? theme)} + account-name] + (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]] + [text/text + {:size :heading-2 + :weight :semi-bold + :style (style/account-value watch-only? theme)} + balance] + (when metrics? + [rn/view {:style style/metrics-container} [text/text - {:size :paragraph-2 - :weight :medium - :style (style/account-name watch-only? theme)} - account-name] - (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]] - [text/text - {:size :heading-2 - :weight :semi-bold - :style (style/account-value watch-only? theme)} - balance] - (when metrics? - [rn/view {:style style/metrics-container} - [text/text - {:weight :semi-bold - :size :paragraph-2 - :accessibility-label :metrics - :style (style/metrics watch-only? theme)} - account-percentage] - (when (not empty?) - [:<> - [rn/view (style/separator watch-only? theme)] - [text/text - {:weight :semi-bold - :size :paragraph-2 - :style (style/metrics watch-only? theme)} account-amount] - [rn/view {:style {:margin-left 4}} - [icon/icon :positive - {:color (if (and watch-only? (not (colors/dark?))) - colors/neutral-50 - colors/white-opa-70) - :size 16}]]])])]]))) + {:weight :semi-bold + :size :paragraph-2 + :accessibility-label :metrics + :style (style/metrics watch-only? theme)} + account-percentage] + (when (not empty?) + [:<> + [rn/view (style/separator watch-only? theme)] + [text/text + {:weight :semi-bold + :size :paragraph-2 + :style (style/metrics watch-only? theme)} account-amount] + [rn/view {:style {:margin-left 4}} + [icon/icon :positive + {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70) + colors/white-opa-70 + theme) + :size 16}]]])])]))) (defn- add-account-view [{:keys [on-press customization-color theme metrics?]}] diff --git a/src/quo2/components/wallet/account_overview/style.cljs b/src/quo2/components/wallet/account_overview/style.cljs index 35d5a32bfc..4d5773ce7d 100644 --- a/src/quo2/components/wallet/account_overview/style.cljs +++ b/src/quo2/components/wallet/account_overview/style.cljs @@ -5,7 +5,7 @@ {:padding-top 24 :padding-horizontal 20 :padding-bottom 20 - :height 78 + :height 130 :align-items :center :justify-content :center}) diff --git a/src/quo2/components/wallet/account_overview/view.cljs b/src/quo2/components/wallet/account_overview/view.cljs index f4f4f9cf53..12680a2975 100644 --- a/src/quo2/components/wallet/account_overview/view.cljs +++ b/src/quo2/components/wallet/account_overview/view.cljs @@ -9,7 +9,9 @@ (defn- loading-state [color] - [:<> + [rn/view + {:style {:height 130 + :align-items :center}} [rn/view (style/loading-bar-margin-bottom {:color color :width 104 @@ -99,7 +101,9 @@ {:style style/account-overview-wrapper} (if (= :loading state) [loading-state (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)] - [:<> + [rn/view + {:style {:height 130 + :align-items :center}} [account-details account-name account theme] [text/text {:weight :semi-bold diff --git a/src/status_im2/contexts/wallet/account/style.cljs b/src/status_im2/contexts/wallet/account/style.cljs new file mode 100644 index 0000000000..3faa6a5186 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/style.cljs @@ -0,0 +1,15 @@ +(ns status-im2.contexts.wallet.account.style) + +(def tabs + {:padding-left 20 + :padding-vertical 12}) + +(def wip + {:justify-content :center + :align-items :center + :flex 1}) + +(def empty-container-style + {:justify-content :center + :flex 1 + :margin-bottom 44}) diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs new file mode 100644 index 0000000000..98cb760267 --- /dev/null +++ b/src/status_im2/contexts/wallet/account/tabs/view.cljs @@ -0,0 +1,37 @@ +(ns status-im2.contexts.wallet.account.tabs.view + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [status-im2.contexts.wallet.account.style :as style] + [status-im2.contexts.wallet.common.temp :as temp] + [utils.i18n :as i18n])) + +(defn view + [selected-tab] + (case selected-tab + :assets [rn/flat-list + {:render-fn quo/token-value + :data temp/tokens + :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}] + :activity [quo/empty-state + {:title (i18n/label :t/no-activity) + :description (i18n/label :t/empty-tab-description) + :placeholder? true + :container-style style/empty-container-style}] + :permissions [quo/empty-state + {:title (i18n/label :t/no-permissions) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true + :container-style style/empty-container-style}] + :dapps [quo/empty-state + {:title (i18n/label :t/no-dapps) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true + :container-style style/empty-container-style}] + [rn/view {:style style/wip} + [quo/text "[WIP]"]])) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index 09f9d89d99..6b294c0364 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/src/status_im2/contexts/wallet/account/view.cljs @@ -1,15 +1,47 @@ (ns status-im2.contexts.wallet.account.view (:require [react-native.core :as rn] [quo2.core :as quo] - [utils.re-frame :as rf])) + [react-native.safe-area :as safe-area] + [reagent.core :as reagent] + [status-im2.contexts.wallet.common.temp :as temp] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [status-im2.contexts.wallet.account.style :as style] + [status-im2.contexts.wallet.account.tabs.view :as tabs])) + +(def tabs-data + [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab} + {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab} + {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab} + {:id :permissions :label (i18n/label :t/permissions) :accessibility-label :permissions} + {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps} + {:id :about :label (i18n/label :t/about) :accessibility-label :about}]) (defn view [] - [rn/view - {:style {:flex 1 - :align-items :center - :justify-content :center}} - [quo/text {} "ACCOUNTS PAGE"] - [quo/divider-label] - [quo/button {:on-press #(rf/dispatch [:navigate-back])} - "NAVIGATE BACK"]]) + (let [top (safe-area/get-top) + selected-tab (reagent/atom (:id (first tabs-data)))] + (fn [] + [rn/view + {:style {:flex 1 + :margin-top top}} + [quo/page-nav + {:align-mid? true + :mid-section {:type :text-only :main-text ""} + :left-section {:type :grey + :icon :i/close + :on-press #(rf/dispatch [:navigate-back])} + :right-section-buttons [{:type :grey + :label "[WIP]" + :on-press #(rf/dispatch [:open-modal :how-to-pair])}]}] + [quo/account-overview temp/account-overview-state] + [quo/wallet-graph {:time-frame :empty}] + [quo/wallet-ctas] + [quo/tabs + {:style style/tabs + :size 32 + :default-active @selected-tab + :data tabs-data + :on-change #(reset! selected-tab %) + :scrollable? true}] + [tabs/view @selected-tab]]))) diff --git a/src/status_im2/contexts/wallet/home/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs similarity index 88% rename from src/status_im2/contexts/wallet/home/temp.cljs rename to src/status_im2/contexts/wallet/common/temp.cljs index 8c56b5dfa0..efe9d11438 100644 --- a/src/status_im2/contexts/wallet/home/temp.cljs +++ b/src/status_im2/contexts/wallet/common/temp.cljs @@ -1,4 +1,4 @@ -(ns status-im2.contexts.wallet.home.temp +(ns status-im2.contexts.wallet.common.temp (:require [quo2.core :as quo] [react-native.core :as rn] [utils.re-frame :as rf])) @@ -36,7 +36,8 @@ :percentage-value "€0.00" :customization-color :blue :type :empty - :emoji "🍑"} + :emoji "🍑" + :on-press #(rf/dispatch [:navigate-to :wallet-accounts])} {:customization-color :blue :on-press #(js/alert "Button pressed") :type :add-account}]) @@ -66,3 +67,9 @@ :fiat-value "€0.00" :percentage-change "0.00" :fiat-change "€0.00"}}]) + +(def account-overview-state + {:current-value "€0.00" + :account-name "Account 1" + :account :default + :customization-color :blue}) diff --git a/src/status_im2/contexts/wallet/home/style.cljs b/src/status_im2/contexts/wallet/home/style.cljs index 84369ab1e4..1b622aadfe 100644 --- a/src/status_im2/contexts/wallet/home/style.cljs +++ b/src/status_im2/contexts/wallet/home/style.cljs @@ -1,24 +1,17 @@ -(ns status-im2.contexts.wallet.home.style - (:require [quo2.foundations.colors :as colors])) +(ns status-im2.contexts.wallet.home.style) (def tabs {:padding-horizontal 20 :padding-top 8 :padding-bottom 12}) -(def empty-container - {:justify-content :center - :align-items :center - :margin-bottom 44 - :flex 1}) - -(def image-placeholder - {:width 80 - :height 80 - :background-color colors/danger}) - (def accounts-list {:padding-horizontal 20 :padding-top 32 :padding-bottom 12 :max-height 112}) + +(def empty-container-style + {:justify-content :center + :flex 1 + :margin-bottom 44}) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 5b1316cf82..51ed42fd4f 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -8,27 +8,13 @@ [status-im2.contexts.wallet.home.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf] - [status-im2.contexts.wallet.home.temp :as temp])) + [status-im2.contexts.wallet.common.temp :as temp])) (def tabs-data [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab} {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab} {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}]) -(defn collectibles - [] - [rn/view {:style style/empty-container} - [rn/view {:style style/image-placeholder}] - [quo/text {:weight :semi-bold :style {:margin-top 12}} (i18n/label :t/no-collectibles)] - [quo/text {:size :paragraph-2 :style {:margin-top 2}} (i18n/label :t/no-collectibles-description)]]) - -(defn activity - [] - [rn/view {:style style/empty-container} - [rn/view {:style style/image-placeholder}] - [quo/text {:weight :semi-bold :style {:margin-top 12}} (i18n/label :t/no-activity)] - [quo/text {:size :paragraph-2 :style {:margin-top 2}} (i18n/label :t/no-activity-description)]]) - (defn view [] (let [top (safe-area/get-top) @@ -59,5 +45,13 @@ {:render-fn quo/token-value :data temp/tokens :content-container-style {:padding-horizontal 8}}] - :collectibles [collectibles] - [activity])]))) + :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}] + [quo/empty-state + {:title (i18n/label :t/no-activity) + :description (i18n/label :t/empty-tab-description) + :placeholder? true + :container-style style/empty-container-style}])]))) diff --git a/translations/en.json b/translations/en.json index f7cc1ec435..9b93ebe1a6 100644 --- a/translations/en.json +++ b/translations/en.json @@ -391,7 +391,7 @@ "custom-networks": "Custom networks", "dapp": "ÐApp", "dapp-would-like-to-connect-wallet": "would like to connect to", - "dapps": "ÐApps", + "dapps": "dApps", "dapps-permissions": "DApp permissions", "data": "Data", "datetime-ago": "ago", @@ -2001,7 +2001,7 @@ "no-pinned-messages-desc": "This chat doesn't have any pinned messages.", "no-pinned-messages-community-desc": "This channel doesn't have any pinned messages.", "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows", - "invite-friends-to-status": "Invite friends to status", + "invite-friends-to-status": "Invite friends to Status", "share-invite-link": "Share an invite link", "pending-requests": "Pending requests", "received": "Received", @@ -2280,10 +2280,13 @@ "collectibles": "Collectibles", "no-collectibles-description": "Don't be a bored ape", "no-activity": "No activity", - "no-activity-description": "C'mon do something...", + "empty-tab-description": "C'mon do something...", "buy": "Buy", "bridge": "Bridge", "on-device": "On device", "on-keycard": "On Keycard", - "keypair-title": "{{name}}'s default keypair" + "keypair-title": "{{name}}'s default keypair", + "about": "About", + "no-permissions": "No permissions", + "no-dapps": "No connected dApps" }