Skip to content

Commit aaf0b8e

Browse files
mmilad75mmilad75
authored
Implement transaction progress component (#17933)
* copy codes * refactor preview * refactor deprecated codes in view * change condition structure in view-internal * comment unused codes * refactor title * fix title style * fix icon style * fix context tag * fix icon and row * refactor icon-internal * rename network-state and network-type * fix progress-container style * fix progress-box-container style * fix progress container naming and style * change progress-bar component * fix progress box component * convert to functional component and bring back the animation * fix progress box for arbitrum-optimism network * fix text-steps * fix status-row * refactor code style * refactor get-network-text * resolve comment * add translations * remove btn-title prop * fix dark mode border color * fix dark mode icon color * move interval to preview * add tests ns * add tests * fix lint issues * fix rendering issue * fix lint issue * add arbitrum and optimism as separate networks * create const for progress percentage * fix progress bar component and preview * refactor text-steps * refactor names * fix lint issues * rename arbitrum-progress-percentage and optimism-progress-percentage * update tests * convert hard-coded color to customization-color * fix progress_bar tests * separate state for each network * add progress percentage for each network and refactor params of functions * separate epoch number for each network * update tests * fix lint issues * refactor codes * fix lint issues * resolve comments * add confirmation progress * use confirmation-progress component in transaction-progress * fix preview * add tests * fix lint issue * resolve comment * refactor networks * change sending state style * update tests * fix lint issues * remove unused code * add helper for calculate counter step * add assoc-props to view-networks * change text-internal props order * fix colors/resolve-color usage * refactor view codes * add get-networks to preview * add max-value to progress bar style * remove threading macros in the previews * remove inline functional components in the previews * remove optimism-arbitrum checks in the view * fix lint issues * add max-progress and min-progress to confirmation-progress * refactor text-steps * fix counter structure in transaction-progress * fix counter structure in confirmation-progress * fix resolve-color usage * fix lint issue * fix tests * resolve comments * fix color issue * fix margins * fix lint issue
1 parent 7e14846 commit aaf0b8e

File tree

18 files changed

+909
-22
lines changed

18 files changed

+909
-22
lines changed

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

851 Bytes
Loading

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

1.15 KB
Loading

‎src/quo/components/wallet/confirmation_progress/component_spec.cljs

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
(ns quo.components.wallet.confirmation-progress.component-spec
2+
(:require [quo.core :as quo]
3+
[reagent.core :as reagent]
4+
[test-helpers.component :as h]))
5+
6+
(defn- get-test-data
7+
[{:keys [state network]
8+
:or {state :pending network :mainnet}}]
9+
{:counter (reagent/atom 0)
10+
:total-box 85
11+
:progress-value "10"
12+
:network network
13+
:state state
14+
:customization-color :blue})
15+
16+
(h/describe "Confirmation Progress"
17+
(h/test "component renders when state is sending and network is optimism"
18+
(h/render [quo/confirmation-propgress
19+
(get-test-data {:state :sending
20+
:network :optimism})])
21+
(h/is-truthy (h/get-by-label-text :progress-box)))
22+
23+
(h/test "component renders when state is confirmed and network is optimism"
24+
(h/render [quo/confirmation-propgress
25+
(get-test-data {:state :confirmed
26+
:network :optimism})])
27+
(h/is-truthy (h/get-by-label-text :progress-box)))
28+
29+
(h/test "component renders when state is finalising and network is optimism"
30+
(h/render [quo/confirmation-propgress
31+
(get-test-data {:state :finalising
32+
:network :optimism})])
33+
(h/is-truthy (h/get-by-label-text :progress-box)))
34+
35+
(h/test "component renders when state is finalized and network is optimism"
36+
(h/render [quo/confirmation-propgress
37+
(get-test-data {:state :finalized
38+
:network :optimism})])
39+
(h/is-truthy (h/get-by-label-text :progress-box)))
40+
41+
(h/test "component renders when state is error and network is optimism"
42+
(h/render [quo/confirmation-propgress
43+
(get-test-data {:state :error
44+
:network :optimism})])
45+
(h/is-truthy (h/get-by-label-text :progress-box)))
46+
47+
(h/test "component renders when state is sending and network is arbitrum"
48+
(h/render [quo/confirmation-propgress
49+
(get-test-data {:state :sending
50+
:network :arbitrum})])
51+
(h/is-truthy (h/get-by-label-text :progress-box)))
52+
53+
(h/test "component renders when state is confirmed and network is arbitrum"
54+
(h/render [quo/confirmation-propgress
55+
(get-test-data {:state :confirmed
56+
:network :arbitrum})])
57+
(h/is-truthy (h/get-by-label-text :progress-box)))
58+
59+
(h/test "component renders when state is finalising and network is arbitrum"
60+
(h/render [quo/confirmation-propgress
61+
(get-test-data {:state :finalising
62+
:network :arbitrum})])
63+
(h/is-truthy (h/get-by-label-text :progress-box)))
64+
65+
(h/test "component renders when state is finalized and network is arbitrum"
66+
(h/render [quo/confirmation-propgress
67+
(get-test-data {:state :finalized
68+
:network :arbitrum})])
69+
(h/is-truthy (h/get-by-label-text :progress-box)))
70+
71+
(h/test "component renders when state is error and network is arbitrum"
72+
(h/render [quo/confirmation-propgress
73+
(get-test-data {:state :error
74+
:network :arbitrum})])
75+
(h/is-truthy (h/get-by-label-text :progress-box)))
76+
77+
(h/test "component renders when state is pending and network is mainnet"
78+
(h/render [quo/confirmation-propgress (get-test-data {})])
79+
(h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
80+
81+
(h/test "component renders when state is sending and network is mainnet"
82+
(h/render [quo/confirmation-propgress (get-test-data {:state :sending})])
83+
(h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
84+
85+
(h/test "component renders when state is confirmed and network is mainnet"
86+
(h/render [quo/confirmation-propgress (get-test-data {:state :confirmed})])
87+
(h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
88+
89+
(h/test "component renders when state is finalising and network is mainnet"
90+
(h/render [quo/confirmation-propgress (get-test-data {:state :finalising})])
91+
(h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
92+
93+
(h/test "component renders when state is finalized and network is mainnet"
94+
(h/render [quo/confirmation-propgress (get-test-data {:state :finalized})])
95+
(h/is-truthy (h/get-by-label-text :mainnet-progress-box)))
96+
97+
(h/test "component renders when state is error and network is mainnet"
98+
(h/render [quo/confirmation-propgress (get-test-data {:state :error})])
99+
(h/is-truthy (h/get-by-label-text :mainnet-progress-box))))

‎src/quo/components/wallet/confirmation_progress/style.cljs

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
(ns quo.components.wallet.confirmation-progress.style)
2+
3+
(def progress-box-container
4+
{:flex-direction :row
5+
:align-items :center
6+
:padding-horizontal 12
7+
:padding-bottom 10
8+
:padding-top 4
9+
:flex-wrap :wrap})

‎src/quo/components/wallet/confirmation_progress/view.cljs

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
(ns quo.components.wallet.confirmation-progress.view
2+
(:require [quo.components.wallet.confirmation-progress.style :as style]
3+
[quo.components.wallet.progress-bar.view :as progress-box]
4+
[quo.theme :as quo.theme]
5+
[react-native.core :as rn]))
6+
7+
(def ^:private max-progress 100)
8+
(def ^:private min-progress 0)
9+
10+
(defn- calculate-box-state
11+
[state counter index]
12+
(cond
13+
(and (= state :sending) (>= counter index) (< index 3)) :confirmed
14+
(and (= state :confirmed) (>= counter index) (< index 5)) :confirmed
15+
(and (= state :finalising) (>= counter index) (< index 5)) :confirmed
16+
(and (= state :finalising) (>= counter index) (> index 4) (< index 20)) :finalized
17+
(and (= state :finalized) (>= counter index) (< index 5)) :confirmed
18+
(and (= state :finalized) (>= counter index) (> index 4)) :finalized
19+
(and (= state :error) (>= counter index) (< index 2)) :error
20+
:else :pending))
21+
22+
(defn- calculate-box-state-sidenet
23+
[state]
24+
(case state
25+
:error :error
26+
(:confirmed :finalising :finalized) :finalized
27+
:pending))
28+
29+
(defn- calculate-progressed-value
30+
[state progress-value]
31+
(case state
32+
:finalising progress-value
33+
:finalized max-progress
34+
min-progress))
35+
36+
(defn- progress-boxes-mainnet
37+
[{:keys [state counter total-box]}]
38+
[rn/view
39+
{:accessibility-label :mainnet-progress-box
40+
:style style/progress-box-container}
41+
(let [numbers (range 1 total-box)]
42+
(doall (for [n numbers]
43+
[progress-box/view
44+
{:state (calculate-box-state state counter n)
45+
:customization-color :blue
46+
:key n}])))])
47+
48+
(defn- progress-boxes-sidenet
49+
[{:keys [state progress-value]}]
50+
[rn/view
51+
{:accessibility-label :progress-box
52+
:style style/progress-box-container}
53+
[progress-box/view
54+
{:state (calculate-box-state-sidenet state)
55+
:customization-color :success}]
56+
[progress-box/view
57+
{:state (calculate-box-state-sidenet state)
58+
:full-width? true
59+
:progressed-value (calculate-progressed-value state progress-value)
60+
:customization-color :blue}]])
61+
62+
(defn- view-internal
63+
[{:keys [network] :as props}]
64+
(case network
65+
:mainnet [progress-boxes-mainnet props]
66+
(:arbitrum :optimism) [progress-boxes-sidenet props]
67+
nil))
68+
69+
(def view (quo.theme/with-theme view-internal))

‎src/quo/components/wallet/progress_bar/component_spec.cljs

+6-6
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
:width 8
4040
:borderRadius 3
4141
:borderColor colors/neutral-80-opa-5
42-
:backgroundColor (colors/custom-color (:customization-color props) 50)})))
42+
:backgroundColor (colors/resolve-color (:customization-color props) theme)})))
4343

4444
(h/test "finalized state with customtization-color blue in dark mode"
4545
(let [theme :dark
@@ -51,7 +51,7 @@
5151
:width 8
5252
:borderRadius 3
5353
:borderColor colors/neutral-80-opa-5
54-
:backgroundColor (colors/custom-color (:customization-color props) 60)})))
54+
:backgroundColor (colors/resolve-color (:customization-color props) theme)})))
5555

5656
(h/test "finalized state with customtization-color army in light mode"
5757
(let [theme :light
@@ -63,7 +63,7 @@
6363
:width 8
6464
:borderRadius 3
6565
:borderColor colors/neutral-80-opa-5
66-
:backgroundColor (colors/custom-color (:customization-color props) 50)})))
66+
:backgroundColor (colors/resolve-color (:customization-color props) theme)})))
6767

6868
(h/test "confirmed state in light mode"
6969
(let [theme :light
@@ -75,7 +75,7 @@
7575
:width 8
7676
:borderRadius 3
7777
:borderColor colors/neutral-80-opa-5
78-
:backgroundColor colors/success-50})))
78+
:backgroundColor (colors/resolve-color :success theme)})))
7979

8080
(h/test "confirmed state in dark mode"
8181
(let [theme :dark
@@ -99,7 +99,7 @@
9999
:width 8
100100
:borderRadius 3
101101
:borderColor colors/neutral-80-opa-5
102-
:backgroundColor colors/danger-50})))
102+
:backgroundColor (colors/resolve-color :danger theme)})))
103103

104104
(h/test "error state in dark mode"
105105
(let [theme :dark
@@ -111,4 +111,4 @@
111111
:width 8
112112
:borderRadius 3
113113
:borderColor colors/white-opa-5
114-
:backgroundColor colors/danger-60}))))
114+
:backgroundColor (colors/resolve-color :danger theme)}))))

‎src/quo/components/wallet/progress_bar/style.cljs

+30-13
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,48 @@
33
[quo.foundations.colors :as colors]))
44

55
(defn- border-and-background-color
6-
[customization-color]
6+
[customization-color theme]
77
{:light {:pending {:border-color colors/neutral-80-opa-5
88
:background-color colors/neutral-5}
99
:confirmed {:border-color colors/neutral-80-opa-5
10-
:background-color (colors/custom-color :success 50)}
10+
:background-color (colors/resolve-color :success theme)}
1111
:finalized {:border-color colors/neutral-80-opa-5
12-
:background-color (colors/custom-color customization-color 50)}
12+
:background-color (colors/resolve-color customization-color theme)}
1313
:error {:border-color colors/neutral-80-opa-5
14-
:background-color (colors/custom-color :danger 50)}}
14+
:background-color (colors/resolve-color :danger theme)}}
1515
:dark {:pending {:border-color colors/neutral-70
1616
:background-color colors/neutral-80}
1717
:confirmed {:border-color colors/white-opa-5
18-
:background-color (colors/custom-color :success 60)}
18+
:background-color (colors/resolve-color :success theme)}
1919
:finalized {:border-color colors/neutral-80-opa-5
20-
:background-color (colors/custom-color customization-color 60)}
20+
:background-color (colors/resolve-color customization-color theme)}
2121
:error {:border-color colors/white-opa-5
22-
:background-color (colors/custom-color :danger 60)}}})
22+
:background-color (colors/resolve-color :danger theme)}}})
23+
24+
(def max-value 100)
2325

2426
(defn root-container
25-
[{:keys [customization-color state theme]}]
26-
(let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color)
27-
[theme state])]
27+
[{:keys [customization-color state theme full-width?]}]
28+
(let [{:keys [background-color border-color]} (get-in (border-and-background-color customization-color
29+
theme)
30+
[theme (if full-width? :pending state)])]
31+
{:height 12
32+
:flex (when full-width? 1)
33+
:width (when (not full-width?) 8)
34+
:border-radius 3
35+
:border-width 1
36+
:border-color border-color
37+
:background-color background-color
38+
:margin-horizontal 1
39+
:margin-vertical 2}))
40+
41+
(defn progressed-bar
42+
[{:keys [customization-color state theme progressed-value]}]
43+
(let [{:keys [background-color]} (get-in (border-and-background-color customization-color theme)
44+
[theme state])
45+
progress (if (> progressed-value max-value) max-value progressed-value)]
2846
{:height 12
29-
:width 8
47+
:margin-top -1
48+
:width (str progress "%")
3049
:border-radius 3
31-
:border-width 1
32-
:border-color border-color
3350
:background-color background-color}))

‎src/quo/components/wallet/progress_bar/view.cljs

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@
55
[react-native.core :as rn]))
66

77
(defn- view-internal
8-
[props]
8+
[{:keys [full-width?] :as props}]
99
[rn/view
1010
{:accessibility-label :progress-bar
11-
:style (style/root-container props)}])
11+
:style (style/root-container props)}
12+
(when full-width?
13+
[rn/view {:style (style/progressed-bar props)}])])
1214

1315
(def view (quo.theme/with-theme view-internal))

0 commit comments

Comments
 (0)