Quo2 wallet: add wallet overview (#16855)

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

@@ -0,0 +1,13 @@
+(ns quo2.components.wallet.wallet-overview.component-spec
+  (:require [quo2.components.wallet.wallet-overview.view :as wallet-overview]
+            [test-helpers.component :as h]))
+
+(h/describe
+  "Wallet overview test"
+  (h/test "renders correct balance"
+    (h/render [wallet-overview/view
+               {:state      :default
+                :time-frame :one-week
+                :metrics    :positive
+                :balance    "€0.01"}])
+    (h/is-truthy (h/get-by-text "€0.01"))))

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

@@ -0,0 +1,56 @@
+(ns quo2.components.wallet.wallet-overview.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def container-info
+  {:flex               1
+   :padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     32})
+
+(def container-info-top
+  {:flex-direction  :row
+   :flex            1
+   :justify-content :space-between
+   :align-items     :center})
+
+(def network-dropdown
+  {:border-color  colors/neutral-50
+   :border-width  1
+   :border-radius 10
+   :width         68
+   :height        32})
+
+(defn color-metrics
+  [metrics]
+  (if (= metrics :positive) colors/success-50 colors/danger-50))
+
+(defn color-text-heading
+  [theme]
+  (colors/theme-colors colors/neutral-100 colors/white theme))
+
+(defn color-text-paragraph
+  [theme]
+  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme))
+
+(defn style-text-heading
+  [theme]
+  {:color (color-text-heading theme)})
+
+(defn style-text-paragraph
+  [theme]
+  {:color (color-text-paragraph theme)})
+
+(defn dot-separator
+  [metrics]
+  {:background-color  (color-metrics metrics)
+   :margin-horizontal 4
+   :width             2
+   :height            2})
+
+(defn loading-bar
+  [width height margin-right theme]
+  {:width            width
+   :height           height
+   :border-radius    6
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
+   :margin-right     margin-right})

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

@@ -0,0 +1,116 @@
+(ns quo2.components.wallet.wallet-overview.view
+  (:require [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as quo2]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]
+            [quo2.components.wallet.wallet-overview.style :as style]
+            [quo2.theme :as quo.theme]))
+
+(def ^:private time-frames
+  {:one-week     (i18n/label :t/one-week-int)
+   :one-month    (i18n/label :t/one-month-int)
+   :three-months (i18n/label :t/three-months-int)
+   :one-year     (i18n/label :t/one-year)
+   :all-time     (i18n/label :t/all-time)})
+
+(defn- loading-bars
+  [bars theme]
+  (map (fn [{:keys [width height margin]}]
+         [rn/view {:style (style/loading-bar width height margin theme)}])
+       bars))
+
+;; temporary placeholder for network dropdown component
+(defn- network-dropdown
+  []
+  [:<>
+   [rn/view {:style style/network-dropdown}]])
+
+(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
+      {:weight :semi-bold
+       :size   :heading-1
+       :style  (style/style-text-heading theme)}
+      balance])
+   [network-dropdown]])
+
+(defn- view-metrics
+  [metrics currency-change percentage-change]
+  [rn/view
+   {:style {:flex-direction :row
+            :align-items    :center}}
+   [quo2/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:color (style/color-metrics metrics)}}
+    percentage-change]
+   [rn/view
+    {:style (style/dot-separator metrics)}]
+   [quo2/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:color        (style/color-metrics metrics)
+              :margin-right 4}}
+    currency-change]
+   [icons/icon
+    (if (= metrics :positive) :i/positive :i/negative)
+    {:color (style/color-metrics metrics)
+     :size  16}]])
+
+(defn- view-info-bottom
+  [{:keys [state time-frame metrics date begin-date end-date
+           currency-change percentage-change theme]}]
+  [rn/view {:flex-direction :row}
+   (when (= state :loading)
+     [rn/view
+      {:style {:flex-direction :row
+               :align-items    :center}}
+      (loading-bars [{:width 32 :height 10 :margin 8}
+                     {:width 32 :height 10 :margin 4}
+                     {:width 62 :height 10 :margin 4}
+                     {:width 10 :height 10 :margin 0}]
+                    theme)])
+   (when (and (= state :default) (= time-frame :selected))
+     [quo2/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
+       {:weight :medium
+        :size   :paragraph-2
+        :style  (style/style-text-paragraph theme)}
+       begin-date]
+      [icons/icon :i/positive-right
+       {:color (style/color-text-paragraph theme)
+        :size  16}]
+      [quo2/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
+       {:weight :medium
+        :size   :paragraph-2
+        :style  {:color        (style/color-text-paragraph theme)
+                 :margin-right 8}}
+       (time-frame time-frames)]
+      (when (and (= state :default) (not= metrics :none))
+        [view-metrics metrics currency-change percentage-change])])])
+
+(defn- view-internal
+  [props]
+  [rn/view {:style style/container-info}
+   [rn/view {:style {:flex 1}}
+    [view-info-top props]
+    [view-info-bottom props]]])
+
+(def view
+  (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -102,10 +102,11 @@
     quo2.components.tags.tags
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
+    quo2.components.wallet.account-card.view
     quo2.components.wallet.network-amount.view
     quo2.components.wallet.network-bridge.view
-    quo2.components.wallet.account-card.view
+    quo2.components.wallet.token-input.view
-    quo2.components.wallet.token-input.view))
+    quo2.components.wallet.wallet-overview.view))
 
 (def separator quo2.components.common.separator.view/separator)
 
@@ -302,4 +303,4 @@
 (def network-bridge quo2.components.wallet.network-bridge.view/view)
 (def account-card quo2.components.wallet.account-card.view/view)
 (def token-input quo2.components.wallet.token-input.view/view)
-
+(def wallet-overview quo2.components.wallet.wallet-overview.view/view)

src/quo2/core_spec.cljs

@@ -49,7 +49,8 @@
     [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.status-tags-component-spec]
+    [quo2.components.wallet.account-card.component-spec]
     [quo2.components.wallet.network-amount.component-spec]
     [quo2.components.wallet.network-bridge.component-spec]
-    [quo2.components.wallet.account-card.component-spec]
+    [quo2.components.wallet.token-input.component-spec]
-    [quo2.components.wallet.token-input.component-spec]))
+    [quo2.components.wallet.wallet-overview.component-spec]))

src/status_im2/contexts/quo_preview/main.cljs

@@ -103,10 +103,11 @@
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
     [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
+    [status-im2.contexts.quo-preview.wallet.account-card :as account-card]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
-    [status-im2.contexts.quo-preview.wallet.account-card :as account-card]
     [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
+    [status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview]
     [utils.re-frame :as rf]))
 
 (def screens-categories
@@ -413,7 +414,10 @@
                         :component network-bridge/preview}
                        {:name      :token-input
                         :options   {:topBar {:visible true}}
-                        :component token-input/preview}]
+                        :component token-input/preview}
+                       {:name      :wallet-overview
+                        :options   {:topBar {:visible true}}
+                        :component wallet-overview/preview-wallet-overview}]
    :keycard           [{:name      :keycard-component
                         :options   {:topBar {:visible true}}
                         :component keycard/preview-keycard}]})

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

@@ -0,0 +1,77 @@
+(ns status-im2.contexts.quo-preview.wallet.wallet-overview
+  (:require [quo2.core :as quo2]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label   "State"
+    :key     :state
+    :type    :select
+    :options [{:key   :loading
+               :value "Loading"}
+              {:key   :default
+               :value "Default"}]}
+   {:label   "Time frame"
+    :key     :time-frame
+    :type    :select
+    :options [{:key   :none
+               :value "None"}
+              {:key   :selected
+               :value "Selected"}
+              {:key   :one-week
+               :value "1 Week"}
+              {:key   :one-month
+               :value "1 Month"}
+              {:key   :three-months
+               :value "3 Months"}
+              {:key   :one-year
+               :value "1 Year"}
+              {:key   :all-time
+               :value "All time"}
+              {:key   :custom
+               :value "Custom"}]}
+   {:label   "Metrics"
+    :key     :metrics
+    :type    :select
+    :options [{:key   :none
+               :value "None"}
+              {:key   :positive
+               :value "Positive"}
+              {:key   :negative
+               :value "Negative"}]}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:state             :default
+                             :time-frame        :one-week
+                             :metrics           :positive
+                             :balance           "€0.00"
+                             :date              "20 Nov 2023"
+                             :begin-date        "16 May"
+                             :end-date          "25 May"
+                             :currency-change   "€0.00"
+                             :percentage-change "0.00%"})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :flex-direction   :row
+          :justify-content  :center}
+         [quo2/wallet-overview @state]]]])))
+
+(defn preview-wallet-overview
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white
+                                           colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

translations/en.json

@@ -2262,6 +2262,11 @@
     "channel-unmuted-successfully": "Channel unmuted successfully! ",
     "photo-saved": "Photo saved to your device",
     "community-unmuted": "Community unmuted",
+    "all-time": "All time",
+    "one-week-int": "1 week",
+    "one-month-int": "1 month",
+    "three-months-int": "3 months",
+    "one-year": "1 year",
     "retake": "Retake",
     "use-photo": "Use Photo",
     "photo-caps": "PHOTO"