Feat: wallet empty account UI (#17077)

* feat: wallet account empty

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

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})

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?)

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?]}]

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})
 

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

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})

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]"]]))

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]])))

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})

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})

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}])])))

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"
 }