Wallet Empty Home UI (#16965)

* feat: wallet empty home

src/quo2/components/graph/wallet_graph/view.cljs

@@ -31,16 +31,17 @@
                           (colors/theme-colors colors/danger-50 colors/danger-60 theme))
         gradient-colors [(colors/alpha line-color 0.1) (colors/alpha line-color 0)]
         fill-color      (colors/theme-colors colors/white colors/neutral-95)]
-    [linear-gradient/linear-gradient
-     {:colors gradient-colors
-      :start  {:x 0 :y 1}
-      :end    {:x 0 :y 0}
-      :style  style/gradient-background}
-     (if (= time-frame :empty)
-       [rn/view
-        {:accessibility-label :illustration
-         :style               style/illustration}
-        [text/text "Illustration here"]]
+    (if (= time-frame :empty)
+      [rn/view
+       {:accessibility-label :illustration
+        :style               style/illustration}
+       [text/text {:style {:color colors/white}}
+        "Illustration here"]]
+      [linear-gradient/linear-gradient
+       {:colors gradient-colors
+        :start  {:x 0 :y 1}
+        :end    {:x 0 :y 0}
+        :style  style/gradient-background}
        [rn/view {:accessibility-label :line-chart}
         [charts/line-chart
          {:height                  96
@@ -65,6 +66,6 @@
           :disable-scroll          true
           :y-axis-label-width      0.01
           :labels-extra-height     -36
-          :x-axis-label-text-style style/x-axis-label-text-style}]])]))
+          :x-axis-label-text-style style/x-axis-label-text-style}]]])))
 
 (def view (quo.theme/with-theme view-internal))

src/quo2/components/list_items/token_value/component_spec.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.list-items.token-value.component-spec
   (:require
-    [quo2.foundations.colors :as colors]
     [test-helpers.component :as h]
     [quo2.components.list-items.token-value.view :as token-value]))
 
@@ -18,34 +17,6 @@
                                       :fiat-change       "€0.00"}}])
     (h/is-truthy (h/get-by-text "Status")))
 
-  (h/test "Pressed state"
-    (h/render [token-value/view
-               {:token               :snt
-                :state               :pressed
-                :status              :empty
-                :customization-color :blue
-                :metrics?            true
-                :values              {:crypto-value      "0.00"
-                                      :fiat-value        "€0.00"
-                                      :percentage-change "0.00"
-                                      :fiat-change       "€0.00"}}])
-    (h/has-style (h/get-by-label-text :container)
-                 {:backgroundColor (colors/custom-color-by-theme :blue 50 50 5 5)}))
-
-  (h/test "Active state"
-    (h/render [token-value/view
-               {:token               :snt
-                :state               :active
-                :status              :empty
-                :customization-color :blue
-                :metrics?            true
-                :values              {:crypto-value      "0.00"
-                                      :fiat-value        "€0.00"
-                                      :percentage-change "0.00"
-                                      :fiat-change       "€0.00"}}])
-    (h/has-style (h/get-by-label-text :container)
-                 {:backgroundColor (colors/custom-color-by-theme :blue 50 50 10 10)}))
-
   (h/test "Status change"
     (h/render [token-value/view
                {:token               :snt

src/quo2/components/list_items/token_value/style.cljs

@@ -3,8 +3,7 @@
 
 (defn container
   [color bg-opacity theme]
-  {:width              359
-   :height             56
+  {:height             56
    :padding-horizontal 12
    :padding-vertical   8
    :border-radius      12

src/quo2/components/list_items/token_value/view.cljs

@@ -8,53 +8,63 @@
     [quo2.theme :as quo.theme]
     [react-native.core :as rn]
     [quo2.foundations.common :as common]
-    [quo2.components.list-items.token-value.style :as style]))
+    [quo2.components.list-items.token-value.style :as style]
+    [reagent.core :as reagent]))
 
 (defn- internal-view
-  [{:keys [theme customization-color state status token metrics? values]}]
-  (let [bg-opacity                                                      (case state
-                                                                          :active  10
-                                                                          :pressed 5
-                                                                          0)
-        {:keys [crypto-value fiat-value percentage-change fiat-change]} values]
-    [rn/view
-     {:style               (style/container customization-color bg-opacity theme)
-      :accessibility-label :container}
-     [rn/view
-      {:style {:flex-direction :row
-               :align-items    :center}}
-      [rn/image
-       {:source (resources/tokens token)
-        :style  {:width  32
-                 :height 32}}]
-      [rn/view {:style {:margin-left 8}}
-       [text/text {:weight :semi-bold} (common/token-label token)]
-       [text/text
-        {:size  :paragraph-2
-         :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-        (str crypto-value " " (string/upper-case (clj->js token)))]]]
-     [rn/view
-      {:style {:align-items     :flex-end
-               :justify-content :space-between}}
-      [text/text
-       {:weight :medium
-        :size   :paragraph-2} fiat-value]
-      (when metrics?
-        [rn/view
-         {:style {:flex-direction :row
-                  :align-items    :center}}
-         [text/text
-          {:size  :paragraph-2
-           :style (style/metric-text status theme)} (str percentage-change "%")]
-         [rn/view {:style (style/dot-divider status theme)}]
-         [text/text
-          {:size  :paragraph-2
-           :style (style/metric-text status theme)} fiat-change]
-         (when (not= status :empty)
-           [rn/view
-            {:style               {:margin-left 4}
-             :accessibility-label :arrow-icon}
-            [icon/icon (if (= status :positive) :i/positive :i/negative)
-             (style/arrow-icon status theme)]])])]]))
+  [{:keys [theme customization-color status token metrics? values on-press]}]
+  (let [state (reagent/atom :default)]
+    (fn []
+      (let [bg-opacity                                                      (case @state
+                                                                              :active  10
+                                                                              :pressed 5
+                                                                              0)
+            {:keys [crypto-value fiat-value percentage-change fiat-change]} values]
+        [rn/pressable
+         {:style               (style/container customization-color bg-opacity theme)
+          :on-press-in         #(reset! state :pressed)
+          :on-press-out        #(reset! state :default)
+          :on-press            (fn []
+                                 (reset! state :active)
+                                 (js/setTimeout #(reset! state :default) 300)
+                                 on-press)
+          :accessibility-label :container}
+         [rn/view
+          {:style {:flex-direction :row
+                   :align-items    :center
+                   :flex           1}}
+          [rn/image
+           {:source (resources/tokens token)
+            :style  {:width  32
+                     :height 32}}]
+          [rn/view {:style {:margin-left 8}}
+           [text/text {:weight :semi-bold} (common/token-label token)]
+           [text/text
+            {:size  :paragraph-2
+             :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+            (str crypto-value " " (string/upper-case (clj->js token)))]]]
+         [rn/view
+          {:style {:align-items     :flex-end
+                   :justify-content :space-between}}
+          [text/text
+           {:weight :medium
+            :size   :paragraph-2} fiat-value]
+          (when metrics?
+            [rn/view
+             {:style {:flex-direction :row
+                      :align-items    :center}}
+             [text/text
+              {:size  :paragraph-2
+               :style (style/metric-text status theme)} (str percentage-change "%")]
+             [rn/view {:style (style/dot-divider status theme)}]
+             [text/text
+              {:size  :paragraph-2
+               :style (style/metric-text status theme)} fiat-change]
+             (when (not= status :empty)
+               [rn/view
+                {:style               {:margin-left 4}
+                 :accessibility-label :arrow-icon}
+                [icon/icon (if (= status :positive) :i/positive :i/negative)
+                 (style/arrow-icon status theme)]])])]]))))
 
 (def view (quo.theme/with-theme internal-view))

src/quo2/components/wallet/account_card/view.cljs

@@ -107,7 +107,8 @@
      :icon                true
      :accessibility-label :add-account
      :on-press            on-press
-     :customization-color customization-color}
+     :customization-color customization-color
+     :icon-only?          true}
     :i/add]])
 
 (defn- view-internal

src/quo2/components/wallet/wallet_overview/style.cljs

@@ -2,16 +2,15 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def container-info
-  {:flex               1
-   :padding-horizontal 20
+  {:padding-horizontal 20
    :padding-top        12
-   :padding-bottom     32})
+   :flex-grow          1
+   :padding-bottom     32
+   :max-height         98})
 
 (def container-info-top
   {:flex-direction  :row
-   :flex            1
-   :justify-content :space-between
-   :align-items     :center})
+   :justify-content :space-between})
 
 (def network-dropdown
   {:border-color  colors/neutral-50

src/quo2/components/wallet/wallet_overview/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.wallet.wallet-overview.view
   (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as quo2]
+            [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
             [utils.i18n :as i18n]
             [quo2.components.wallet.wallet-overview.style :as style]
@@ -20,36 +20,40 @@
        bars))
 
 ;; temporary placeholder for network dropdown component
-(defn- network-dropdown
+(defn- network-dropdown-temporary
   []
   [:<>
-   [rn/view {:style style/network-dropdown}]])
+   [rn/view
+    {:style (merge style/network-dropdown
+                   {:justify-content :center
+                    :align-items     :center})}
+    [text/text "[WIP]"]]])
 
 (defn- view-info-top
   [{:keys [state balance theme]}]
   [rn/view {:style style/container-info-top}
    (if (= state :loading)
      (loading-bars [{:width 201 :height 20 :margin 0}] theme)
-     [quo2/text
+     [text/text
       {:weight :semi-bold
        :size   :heading-1
        :style  (style/style-text-heading theme)}
       balance])
-   [network-dropdown]])
+   [network-dropdown-temporary]])
 
 (defn- view-metrics
   [metrics currency-change percentage-change]
   [rn/view
    {:style {:flex-direction :row
             :align-items    :center}}
-   [quo2/text
+   [text/text
     {:weight :medium
      :size   :paragraph-2
      :style  {:color (style/color-metrics metrics)}}
     percentage-change]
    [rn/view
     {:style (style/dot-separator metrics)}]
-   [quo2/text
+   [text/text
     {:weight :medium
      :size   :paragraph-2
      :style  {:color        (style/color-metrics metrics)
@@ -74,14 +78,14 @@
                      {:width 10 :height 10 :margin 0}]
                     theme)])
    (when (and (= state :default) (= time-frame :selected))
-     [quo2/text
+     [text/text
       {:weight :medium
        :size   :paragraph-2
        :style  (style/style-text-paragraph theme)}
       date])
    (when (and (= state :default) (= time-frame :custom))
      [rn/view {:style {:flex-direction :row}}
-      [quo2/text
+      [text/text
        {:weight :medium
         :size   :paragraph-2
         :style  (style/style-text-paragraph theme)}
@@ -89,14 +93,14 @@
       [icons/icon :i/positive-right
        {:color (style/color-text-paragraph theme)
         :size  16}]
-      [quo2/text
+      [text/text
        {:weight :medium
         :size   :paragraph-2
         :style  (style/style-text-paragraph theme)}
        end-date]])
    (when (and (= state :default) (not (#{:none :selected} time-frame)))
      [rn/view {:style {:flex-direction :row}}
-      [quo2/text
+      [text/text
        {:weight :medium
         :size   :paragraph-2
         :style  {:color        (style/color-text-paragraph theme)
@@ -108,9 +112,8 @@
 (defn- view-internal
   [props]
   [rn/view {:style style/container-info}
-   [rn/view {:style {:flex 1}}
-    [view-info-top props]
-    [view-info-bottom props]]])
+   [view-info-top props]
+   [view-info-bottom props]])
 
 (def view
   (quo.theme/with-theme view-internal))

src/quo2/foundations/common.cljs

@@ -6,4 +6,5 @@
 
 (def token-label
   {:eth "Ethereum"
-   :snt "Status"})
+   :snt "Status"
+   :dai "Dai"})

src/quo2/foundations/resources.cljs

@@ -11,7 +11,7 @@
   (get ui k))
 
 (def tokens
-  {:eth  (js/require "../resources/images/tokens/mainnet/ETH.png")
+  {:eth  (js/require "../resources/images/tokens/mainnet/ETH-token.png")
    :knc  (js/require "../resources/images/tokens/mainnet/KNC.png")
    :mana (js/require "../resources/images/tokens/mainnet/MANA.png")
    :rare (js/require "../resources/images/tokens/mainnet/RARE.png")
@@ -25,6 +25,6 @@
   (get tokens k))
 
 (def networks
-  {:ethereum (js/require "../resources/images/tokens/mainnet/ETH.png")
+  {: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")})

src/status_im2/common/home/view.cljs

@@ -112,6 +112,7 @@
                :on-press            #(rf/dispatch [:activity-center/open])})
        :i/activity-center]]]))
 
+;; TODO: should be moved to quo2 https://github.com/status-im/status-mobile/issues/16964
 (defn top-nav
   "[top-nav props]
   props

src/status_im2/contexts/quo_preview/list_items/token_value.cljs

@@ -50,8 +50,9 @@
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view
-        {:style {:flex 1}}
         [rn/view {:style {:min-height 300}} [preview/customizer state descriptor]]
         [rn/view
          {:style {:align-items :center
-                  :margin-top  50}} [quo/token-value @state]]]])))
+                  :margin-top  50}}
+         [quo/token-value @state]]]])))
+

src/status_im2/contexts/quo_preview/wallet/wallet_overview.cljs

@@ -1,5 +1,5 @@
 (ns status-im2.contexts.quo-preview.wallet.wallet-overview
-  (:require [quo2.core :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
@@ -62,7 +62,7 @@
          {:padding-vertical 60
           :flex-direction   :row
           :justify-content  :center}
-         [quo2/wallet-overview @state]]]])))
+         [quo/wallet-overview @state]]]])))
 
 (defn preview-wallet-overview
   []

src/status_im2/contexts/wallet/home/style.cljs

@@ -0,0 +1,24 @@
+(ns status-im2.contexts.wallet.home.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(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})

src/status_im2/contexts/wallet/home/temp.cljs

@@ -0,0 +1,68 @@
+(ns status-im2.contexts.wallet.home.temp
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [utils.re-frame :as rf]))
+
+(defn wallet-temporary-navigation
+  []
+  [rn/view
+   {:style {:flex            1
+            :align-items     :center
+            :justify-content :center}}
+   [quo/text {} "TEMPORARY NAVIGATION"]
+   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
+    "Navigate to Account"]
+   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
+    "Create Account"]
+   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
+    "Saved Addresses"]
+   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
+    "Collectibles"]])
+
+(def wallet-overview-state
+  {: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%"})
+
+(def account-cards
+  [{:name                "Account 1"
+    :balance             "€0.00"
+    :percentage-value    "€0.00"
+    :customization-color :blue
+    :type                :empty
+    :emoji               "🍑"}
+   {:customization-color :blue
+    :on-press            #(js/alert "Button pressed")
+    :type                :add-account}])
+
+(def tokens
+  [{:token               :snt
+    :state               :default
+    :status              :empty
+    :customization-color :blue
+    :values              {:crypto-value      "0.00"
+                          :fiat-value        "€0.00"
+                          :percentage-change "0.00"
+                          :fiat-change       "€0.00"}}
+   {:token               :eth
+    :state               :default
+    :status              :empty
+    :customization-color :blue
+    :values              {:crypto-value      "0.00"
+                          :fiat-value        "€0.00"
+                          :percentage-change "0.00"
+                          :fiat-change       "€0.00"}}
+   {:token               :dai
+    :state               :default
+    :status              :empty
+    :customization-color :blue
+    :values              {:crypto-value      "0.00"
+                          :fiat-value        "€0.00"
+                          :percentage-change "0.00"
+                          :fiat-change       "€0.00"}}])

src/status_im2/contexts/wallet/home/view.cljs

@@ -1,38 +1,63 @@
 (ns status-im2.contexts.wallet.home.view
-  (:require [react-native.core :as rn]
-            [quo2.core :as quo]
-            [react-native.safe-area :as safe-area]
-            [utils.re-frame :as rf]))
+  (:require
+    [react-native.core :as rn]
+    [quo2.core :as quo]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im2.common.home.view :as common.home]
+    [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]))
 
-(defn wallet-temporary-navigation
+(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 {:flex            1
-            :align-items     :center
-            :justify-content :center}}
-   [quo/text {} "TEMPORARY NAVIGATION"]
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-accounts])}
-    "Navigate to Account"]
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
-    "Create Account"]
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
-    "Saved Addresses"]
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-collectibles])}
-    "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)]
-    [rn/view
-     {:style {:margin-top      top
-              :flex            1
-              :align-items     :center
-              :justify-content :center}}
-     [quo/button
-      {:icon-only?      true
-       :type            :grey
-       :on-press        (fn [] (rf/dispatch [:show-bottom-sheet {:content wallet-temporary-navigation}]))
-       :container-style {:position :absolute
-                         :top      20
-                         :right    20}} :i/options]
-     [quo/text {} "New Wallet Home"]]))
+  (let [top          (safe-area/get-top)
+        selected-tab (reagent/atom (:id (first tabs-data)))]
+    (fn []
+      [rn/view
+       {:style {:margin-top top
+                :flex       1}}
+       [common.home/top-nav {:type :grey}]
+       [quo/wallet-overview temp/wallet-overview-state]
+       [rn/pressable
+        {:on-long-press #(rf/dispatch [:show-bottom-sheet {:content temp/wallet-temporary-navigation}])}
+        [quo/wallet-graph {:time-frame :empty}]]
+       [rn/flat-list
+        {:style      style/accounts-list
+         :data       temp/account-cards
+         :horizontal true
+         :separator  [rn/view {:style {:width 12}}]
+         :render-fn  quo/account-card}]
+       [quo/tabs
+        {:style          style/tabs
+         :size           32
+         :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
+                         :content-container-style {:padding-horizontal 8}}]
+         :collectibles [collectibles]
+         [activity])])))

translations/en.json

@@ -1021,7 +1021,7 @@
     "new-public-group-chat": "Join public chat",
     "next": "Next",
     "no": "No",
-    "no-collectibles": "No collectibles available",
+    "no-collectibles": "No collectibles",
     "no-keycard-applet-on-card": "No Keycard applet on card",
     "no-pairing-slots-available": "This card is already paired to 5 devices and cannot pair to this one. Please use one of the paired devices, log in with this card and free up pairing slots on the card",
     "no-result": "No results",
@@ -2274,5 +2274,10 @@
     "one-year": "1 year",
     "retake": "Retake",
     "use-photo": "Use Photo",
-    "photo-caps": "PHOTO"
+    "photo-caps": "PHOTO",
+    "assets": "Assets",
+    "collectibles": "Collectibles",
+    "no-collectibles-description": "Don't be a bored ape",
+    "no-activity": "No activity",
+    "no-activity-description": "C'mon do something..."
 }