Skip to content

Commit 2819c20

Browse files
erikseppanenerikseppanen
authored
Quo2 wallet: add wallet overview (#16855)
1 parent 18347b4 commit 2819c20

File tree

10 files changed

+280
-7
lines changed

10 files changed

+280
-7
lines changed

‎resources/images/icons2/16x16/[email protected]

439 Bytes
Loading

‎resources/images/icons2/16x16/[email protected]

582 Bytes
Loading

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

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
(ns quo2.components.wallet.wallet-overview.component-spec
2+
(:require [quo2.components.wallet.wallet-overview.view :as wallet-overview]
3+
[test-helpers.component :as h]))
4+
5+
(h/describe
6+
"Wallet overview test"
7+
(h/test "renders correct balance"
8+
(h/render [wallet-overview/view
9+
{:state :default
10+
:time-frame :one-week
11+
:metrics :positive
12+
:balance "€0.01"}])
13+
(h/is-truthy (h/get-by-text "€0.01"))))

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
(ns quo2.components.wallet.wallet-overview.style
2+
(:require [quo2.foundations.colors :as colors]))
3+
4+
(def container-info
5+
{:flex 1
6+
:padding-horizontal 20
7+
:padding-top 12
8+
:padding-bottom 32})
9+
10+
(def container-info-top
11+
{:flex-direction :row
12+
:flex 1
13+
:justify-content :space-between
14+
:align-items :center})
15+
16+
(def network-dropdown
17+
{:border-color colors/neutral-50
18+
:border-width 1
19+
:border-radius 10
20+
:width 68
21+
:height 32})
22+
23+
(defn color-metrics
24+
[metrics]
25+
(if (= metrics :positive) colors/success-50 colors/danger-50))
26+
27+
(defn color-text-heading
28+
[theme]
29+
(colors/theme-colors colors/neutral-100 colors/white theme))
30+
31+
(defn color-text-paragraph
32+
[theme]
33+
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme))
34+
35+
(defn style-text-heading
36+
[theme]
37+
{:color (color-text-heading theme)})
38+
39+
(defn style-text-paragraph
40+
[theme]
41+
{:color (color-text-paragraph theme)})
42+
43+
(defn dot-separator
44+
[metrics]
45+
{:background-color (color-metrics metrics)
46+
:margin-horizontal 4
47+
:width 2
48+
:height 2})
49+
50+
(defn loading-bar
51+
[width height margin-right theme]
52+
{:width width
53+
:height height
54+
:border-radius 6
55+
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
56+
:margin-right margin-right})

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

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
(ns quo2.components.wallet.wallet-overview.view
2+
(:require [quo2.components.icon :as icons]
3+
[quo2.components.markdown.text :as quo2]
4+
[react-native.core :as rn]
5+
[utils.i18n :as i18n]
6+
[quo2.components.wallet.wallet-overview.style :as style]
7+
[quo2.theme :as quo.theme]))
8+
9+
(def ^:private time-frames
10+
{:one-week (i18n/label :t/one-week-int)
11+
:one-month (i18n/label :t/one-month-int)
12+
:three-months (i18n/label :t/three-months-int)
13+
:one-year (i18n/label :t/one-year)
14+
:all-time (i18n/label :t/all-time)})
15+
16+
(defn- loading-bars
17+
[bars theme]
18+
(map (fn [{:keys [width height margin]}]
19+
[rn/view {:style (style/loading-bar width height margin theme)}])
20+
bars))
21+
22+
;; temporary placeholder for network dropdown component
23+
(defn- network-dropdown
24+
[]
25+
[:<>
26+
[rn/view {:style style/network-dropdown}]])
27+
28+
(defn- view-info-top
29+
[{:keys [state balance theme]}]
30+
[rn/view {:style style/container-info-top}
31+
(if (= state :loading)
32+
(loading-bars [{:width 201 :height 20 :margin 0}] theme)
33+
[quo2/text
34+
{:weight :semi-bold
35+
:size :heading-1
36+
:style (style/style-text-heading theme)}
37+
balance])
38+
[network-dropdown]])
39+
40+
(defn- view-metrics
41+
[metrics currency-change percentage-change]
42+
[rn/view
43+
{:style {:flex-direction :row
44+
:align-items :center}}
45+
[quo2/text
46+
{:weight :medium
47+
:size :paragraph-2
48+
:style {:color (style/color-metrics metrics)}}
49+
percentage-change]
50+
[rn/view
51+
{:style (style/dot-separator metrics)}]
52+
[quo2/text
53+
{:weight :medium
54+
:size :paragraph-2
55+
:style {:color (style/color-metrics metrics)
56+
:margin-right 4}}
57+
currency-change]
58+
[icons/icon
59+
(if (= metrics :positive) :i/positive :i/negative)
60+
{:color (style/color-metrics metrics)
61+
:size 16}]])
62+
63+
(defn- view-info-bottom
64+
[{:keys [state time-frame metrics date begin-date end-date
65+
currency-change percentage-change theme]}]
66+
[rn/view {:flex-direction :row}
67+
(when (= state :loading)
68+
[rn/view
69+
{:style {:flex-direction :row
70+
:align-items :center}}
71+
(loading-bars [{:width 32 :height 10 :margin 8}
72+
{:width 32 :height 10 :margin 4}
73+
{:width 62 :height 10 :margin 4}
74+
{:width 10 :height 10 :margin 0}]
75+
theme)])
76+
(when (and (= state :default) (= time-frame :selected))
77+
[quo2/text
78+
{:weight :medium
79+
:size :paragraph-2
80+
:style (style/style-text-paragraph theme)}
81+
date])
82+
(when (and (= state :default) (= time-frame :custom))
83+
[rn/view {:style {:flex-direction :row}}
84+
[quo2/text
85+
{:weight :medium
86+
:size :paragraph-2
87+
:style (style/style-text-paragraph theme)}
88+
begin-date]
89+
[icons/icon :i/positive-right
90+
{:color (style/color-text-paragraph theme)
91+
:size 16}]
92+
[quo2/text
93+
{:weight :medium
94+
:size :paragraph-2
95+
:style (style/style-text-paragraph theme)}
96+
end-date]])
97+
(when (and (= state :default) (not (#{:none :selected} time-frame)))
98+
[rn/view {:style {:flex-direction :row}}
99+
[quo2/text
100+
{:weight :medium
101+
:size :paragraph-2
102+
:style {:color (style/color-text-paragraph theme)
103+
:margin-right 8}}
104+
(time-frame time-frames)]
105+
(when (and (= state :default) (not= metrics :none))
106+
[view-metrics metrics currency-change percentage-change])])])
107+
108+
(defn- view-internal
109+
[props]
110+
[rn/view {:style style/container-info}
111+
[rn/view {:style {:flex 1}}
112+
[view-info-top props]
113+
[view-info-bottom props]]])
114+
115+
(def view
116+
(quo.theme/with-theme view-internal))

‎src/quo2/core.cljs

+4-3
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,11 @@
102102
quo2.components.tags.tags
103103
quo2.components.tags.token-tag
104104
quo2.components.text-combinations.title.view
105+
quo2.components.wallet.account-card.view
105106
quo2.components.wallet.network-amount.view
106107
quo2.components.wallet.network-bridge.view
107-
quo2.components.wallet.account-card.view
108-
quo2.components.wallet.token-input.view))
108+
quo2.components.wallet.token-input.view
109+
quo2.components.wallet.wallet-overview.view))
109110

110111
(def separator quo2.components.common.separator.view/separator)
111112

@@ -302,4 +303,4 @@
302303
(def network-bridge quo2.components.wallet.network-bridge.view/view)
303304
(def account-card quo2.components.wallet.account-card.view/view)
304305
(def token-input quo2.components.wallet.token-input.view/view)
305-
306+
(def wallet-overview quo2.components.wallet.wallet-overview.view/view)

‎src/quo2/core_spec.cljs

+3-2
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@
4949
[quo2.components.settings.category.component-spec]
5050
[quo2.components.share.share-qr-code.component-spec]
5151
[quo2.components.tags.status-tags-component-spec]
52+
[quo2.components.wallet.account-card.component-spec]
5253
[quo2.components.wallet.network-amount.component-spec]
5354
[quo2.components.wallet.network-bridge.component-spec]
54-
[quo2.components.wallet.account-card.component-spec]
55-
[quo2.components.wallet.token-input.component-spec]))
55+
[quo2.components.wallet.token-input.component-spec]
56+
[quo2.components.wallet.wallet-overview.component-spec]))

‎src/status_im2/contexts/quo_preview/main.cljs

+6-2
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,11 @@
103103
[status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
104104
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
105105
[status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
106+
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
106107
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
107108
[status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
108-
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
109109
[status-im2.contexts.quo-preview.wallet.token-input :as token-input]
110+
[status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview]
110111
[utils.re-frame :as rf]))
111112

112113
(def screens-categories
@@ -413,7 +414,10 @@
413414
:component network-bridge/preview}
414415
{:name :token-input
415416
:options {:topBar {:visible true}}
416-
:component token-input/preview}]
417+
:component token-input/preview}
418+
{:name :wallet-overview
419+
:options {:topBar {:visible true}}
420+
:component wallet-overview/preview-wallet-overview}]
417421
:keycard [{:name :keycard-component
418422
:options {:topBar {:visible true}}
419423
:component keycard/preview-keycard}]})

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

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
(ns status-im2.contexts.quo-preview.wallet.wallet-overview
2+
(:require [quo2.core :as quo2]
3+
[quo2.foundations.colors :as colors]
4+
[react-native.core :as rn]
5+
[reagent.core :as reagent]
6+
[status-im2.contexts.quo-preview.preview :as preview]))
7+
8+
(def descriptor
9+
[{:label "State"
10+
:key :state
11+
:type :select
12+
:options [{:key :loading
13+
:value "Loading"}
14+
{:key :default
15+
:value "Default"}]}
16+
{:label "Time frame"
17+
:key :time-frame
18+
:type :select
19+
:options [{:key :none
20+
:value "None"}
21+
{:key :selected
22+
:value "Selected"}
23+
{:key :one-week
24+
:value "1 Week"}
25+
{:key :one-month
26+
:value "1 Month"}
27+
{:key :three-months
28+
:value "3 Months"}
29+
{:key :one-year
30+
:value "1 Year"}
31+
{:key :all-time
32+
:value "All time"}
33+
{:key :custom
34+
:value "Custom"}]}
35+
{:label "Metrics"
36+
:key :metrics
37+
:type :select
38+
:options [{:key :none
39+
:value "None"}
40+
{:key :positive
41+
:value "Positive"}
42+
{:key :negative
43+
:value "Negative"}]}])
44+
45+
(defn cool-preview
46+
[]
47+
(let [state (reagent/atom {:state :default
48+
:time-frame :one-week
49+
:metrics :positive
50+
:balance "€0.00"
51+
:date "20 Nov 2023"
52+
:begin-date "16 May"
53+
:end-date "25 May"
54+
:currency-change "€0.00"
55+
:percentage-change "0.00%"})]
56+
(fn []
57+
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
58+
[rn/view {:padding-bottom 150}
59+
[rn/view {:flex 1}
60+
[preview/customizer state descriptor]]
61+
[rn/view
62+
{:padding-vertical 60
63+
:flex-direction :row
64+
:justify-content :center}
65+
[quo2/wallet-overview @state]]]])))
66+
67+
(defn preview-wallet-overview
68+
[]
69+
[rn/view
70+
{:background-color (colors/theme-colors colors/white
71+
colors/neutral-95)
72+
:flex 1}
73+
[rn/flat-list
74+
{:flex 1
75+
:keyboard-should-persist-taps :always
76+
:header [cool-preview]
77+
:key-fn str}]])

‎translations/en.json

+5
Original file line numberDiff line numberDiff line change
@@ -2262,6 +2262,11 @@
22622262
"channel-unmuted-successfully": "Channel unmuted successfully! ",
22632263
"photo-saved": "Photo saved to your device",
22642264
"community-unmuted": "Community unmuted",
2265+
"all-time": "All time",
2266+
"one-week-int": "1 week",
2267+
"one-month-int": "1 month",
2268+
"three-months-int": "3 months",
2269+
"one-year": "1 year",
22652270
"retake": "Retake",
22662271
"use-photo": "Use Photo",
22672272
"photo-caps": "PHOTO"

0 commit comments

Comments
 (0)