Skip to content

Commit 550602d

Browse files
alwxyevh-berdnyk
alwx
and
yevh-berdnyk
authored
Update send summary to show network in a separate card (#21616) (#22067)
* Update send summary to show network in a separate card (#21616) * Style updates * Style updates * Fixes; test updates * Fixes * Fixes * e2e: updated send summary checks * Spec fix * Spec fix * Small schema update --------- Co-authored-by: Yevheniia Berdnyk <[email protected]>
1 parent 5932f7d commit 550602d

File tree

14 files changed

+173
-153
lines changed

14 files changed

+173
-153
lines changed

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

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,48 +14,43 @@
1414
(h/describe "Wallet: Summary Info"
1515
(h/test "Type of `status-account` title renders"
1616
(h/render-with-theme-provider [summary-info/view
17-
{:type :status-account
18-
:networks? true
19-
:values {:ethereum 150
20-
:optimism 50
21-
:arbitrum 25}
22-
:account-props status-account-props}])
17+
{:type :status-account
18+
:networks-to-show {:ethereum 150
19+
:optimism 50
20+
:arbitrum 25}
21+
:account-props status-account-props}])
2322
(h/is-truthy (h/get-by-text "Collectibles vault")))
2423

2524
(h/test "Type of `user` title renders"
2625
(h/render-with-theme-provider [summary-info/view
27-
{:type :user
28-
:networks? true
29-
:values {:ethereum 150
30-
:optimism 50
31-
:arbitrum 25}
32-
:account-props {:full-name "M L"
33-
:status-indicator? false
34-
:size :small
35-
:customization-color :blue
36-
:name "Mark Libot"
37-
:address "0x0ah...78b"
38-
:status-account (merge status-account-props
39-
{:size 16})}}])
26+
{:type :user
27+
:networks-to-show {:ethereum 150
28+
:optimism 50
29+
:arbitrum 25}
30+
:account-props {:full-name "M L"
31+
:status-indicator? false
32+
:size :small
33+
:customization-color :blue
34+
:name "Mark Libot"
35+
:address "0x0ah...78b"
36+
:status-account (merge status-account-props
37+
{:size 16})}}])
4038
(h/is-truthy (h/get-by-text "Mark Libot"))
4139
(h/is-truthy (h/get-by-text "Collectibles vault")))
4240

43-
(h/test "Networks true render"
41+
(h/test "Networks specified render"
4442
(h/render-with-theme-provider [summary-info/view
45-
{:type :status-account
46-
:networks? true
47-
:values {:ethereum 150
48-
:optimism 50
49-
:arbitrum 25}
50-
:account-props status-account-props}])
51-
(h/is-truthy (h/get-by-label-text :networks)))
43+
{:type :status-account
44+
:networks-to-show {:ethereum 150
45+
:optimism 50
46+
:arbitrum 25}
47+
:account-props status-account-props}])
48+
(h/is-truthy (h/get-by-label-text :networks))))
5249

53-
(h/test "Networks false render"
50+
(h/describe "Wallet: network summary info"
51+
(h/test "Type of `network` title renders"
5452
(h/render-with-theme-provider [summary-info/view
55-
{:type :status-account
56-
:networks? false
57-
:values {:ethereum 150
58-
:optimism 50
59-
:arbitrum 25}
60-
:account-props status-account-props}])
61-
(h/is-null (h/query-by-label-text :networks))))
53+
{:type :network
54+
:network-props {:full-name "Ethereum"
55+
:network-name :ethereum}}])
56+
(h/is-truthy (h/get-by-text "Ethereum"))))

‎src/quo/components/wallet/summary_info/schema.cljs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
[:catn
66
[:props
77
[:map
8-
[:type [:enum :status-account :saved-account :account :user :token]]
8+
[:type [:enum :status-account :saved-account :account :user :token :network]]
99
[:account-props {:optional true} [:maybe :map]]
10+
[:network-props {:optional true} [:maybe :map]]
1011
[:token-props {:optional true} [:maybe :map]]
11-
[:networks? {:optional true} [:maybe :boolean]]
12-
[:values {:optional true} [:maybe :map]]]]]
12+
[:networks-to-show {:optional true} [:maybe :map]]]]]
1313
:any])

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
[quo.foundations.colors :as colors]))
44

55
(defn container
6-
[networks? theme]
6+
[networks-to-show? theme]
77
{:width "100%"
8-
:height (if networks? 90 56)
8+
:height (if networks-to-show? 90 56)
99
:border-radius 16
1010
:border-width 1
1111
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
12-
:margin-bottom (if networks? 4 8)})
12+
:margin-bottom (if networks-to-show? 4 8)})
1313

1414
(def info-container
1515
{:flex-direction :row
@@ -39,3 +39,7 @@
3939
:height 32
4040
:flex-direction :row
4141
:align-items :center})
42+
43+
(def network-icon
44+
{:width 32
45+
:height 32})

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

Lines changed: 38 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -28,50 +28,35 @@
2828
[rn/view
2929
{:style (style/dot-divider theme)}])])
3030

31+
(def ^:private default-token-symbols
32+
{:ethereum "ETH"
33+
:optimism "OP"
34+
:arbitrum "ARB"
35+
:base "ETH"})
36+
3137
(defn networks
32-
[values theme]
33-
(let [{:keys [ethereum optimism arbitrum base]} values
34-
show-optimism? (and optimism
35-
(or (pos? (:amount optimism))
36-
(= (:amount optimism) "<0.01")))
37-
show-arbitrum? (and arbitrum
38-
(or (pos? (:amount arbitrum))
39-
(= (:amount arbitrum) "<0.01")))
40-
show-base? (and base
41-
(or (pos? (:amount base))
42-
(= (:amount base) "<0.01")))]
43-
[rn/view
44-
{:style style/networks-container
45-
:accessibility-label :networks}
46-
(when (and ethereum (pos? (:amount ethereum)))
47-
[network-amount
48-
{:network :ethereum
49-
:amount (str (:amount ethereum) " " (or (:token-symbol ethereum) "ETH"))
50-
:divider? (or show-arbitrum? show-optimism?)
51-
:theme theme}])
52-
(when show-optimism?
53-
[network-amount
54-
{:network :optimism
55-
:amount (str (:amount optimism) " " (or (:token-symbol optimism) "OETH"))
56-
:divider? show-arbitrum?
57-
:theme theme}])
58-
(when show-arbitrum?
59-
[network-amount
60-
{:network :arbitrum
61-
:amount (str (:amount arbitrum) " " (or (:token-symbol arbitrum) "ARB"))
62-
:theme theme}])
63-
(when show-base?
64-
[network-amount
65-
{:network :base
66-
:amount (str (:amount base) " " (or (:token-symbol base) "ETH"))
67-
:theme theme}])]))
38+
[networks-to-show theme]
39+
(->> networks-to-show
40+
(map-indexed
41+
(fn [i [k {:keys [amount token-symbol]}]]
42+
(when (or (pos? amount)
43+
(= amount "<0.01"))
44+
[network-amount
45+
{:network k
46+
:amount (str amount " " (or token-symbol (get default-token-symbols k)))
47+
:divider? (not= (dec i) (-> networks-to-show keys count))
48+
:theme theme}])))
49+
(remove nil?)
50+
(into [rn/view
51+
{:style style/networks-container
52+
:accessibility-label :networks}])))
6853

6954
(defn- view-internal
70-
[{:keys [type account-props token-props networks? values]}]
55+
[{:keys [type account-props network-props token-props networks-to-show]}]
7156
(let [theme (quo.theme/use-theme)
7257
address (or (:address account-props) (:address token-props))]
7358
[rn/view
74-
{:style (style/container networks? theme)}
59+
{:style (style/container (seq? networks-to-show) theme)}
7560
[rn/view
7661
{:style style/info-container}
7762
(case type
@@ -82,16 +67,26 @@
8267
(assoc account-props
8368
:size :size-32
8469
:neutral? true)]
70+
:network [rn/image
71+
{:source (resources/get-network (:network-name network-props))
72+
:style style/network-icon}]
8573
[user-avatar/user-avatar account-props])
8674
[rn/view {:style {:margin-left 8}}
87-
(when (not= type :account)
88-
[text/text {:weight :semi-bold} (or (:name account-props) (:label token-props))])
75+
(when (not (some #{type} [:account :network]))
76+
[text/text
77+
{:weight :semi-bold}
78+
(or (:name account-props) (:label token-props))])
79+
(when (= type :network)
80+
[text/text
81+
{:weight :semi-bold}
82+
(:full-name network-props)])
8983
[rn/view
9084
{:style {:flex-direction :row
9185
:align-items :center}}
9286
(when (= type :user)
9387
[:<>
94-
[rn/view {:style {:margin-right 4}} [account-avatar/view (:status-account account-props)]]
88+
[rn/view {:style {:margin-right 4}}
89+
[account-avatar/view (:status-account account-props)]]
9590
[text/text
9691
{:size :paragraph-2
9792
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
@@ -105,10 +100,10 @@
105100
:style {:color (when (not= type :account)
106101
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
107102
address])]]]
108-
(when networks?
103+
(when networks-to-show
109104
[:<>
110105
[rn/view
111106
{:style (style/line-divider theme)}]
112-
[networks values theme]])]))
107+
[networks networks-to-show theme]])]))
113108

114109
(def view (schema/instrument #'view-internal summary-info-schema/?schema))

‎src/status_im/contexts/preview/quo/wallet/summary_info.cljs‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,15 @@
1212
:options [{:key :status-account}
1313
{:key :user}
1414
{:key :saved-account}
15-
{:key :account}]}
16-
{:key :networks? :type :boolean}])
15+
{:key :account}]}])
1716

1817

1918
(defn view
2019
[]
21-
(let [state (reagent/atom {:type :status-account
22-
:networks? true
23-
:values {:ethereum {:amount 150}
24-
:optimism {:amount 50}
25-
:arbitrum {:amount 25}}})
20+
(let [state (reagent/atom {:type :status-account
21+
:networks-to-show {:ethereum {:amount 150}
22+
:optimism {:amount 50}
23+
:arbitrum {:amount 25}}})
2624
status-account-props {:customization-color :purple
2725
:size 32
2826
:emoji "🍑"

‎src/status_im/contexts/wallet/send/transaction_confirmation/style.cljs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,7 @@
2828
[theme]
2929
{:margin-bottom 8
3030
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
31+
32+
(def summary-container
33+
{:padding-horizontal 20
34+
:padding-bottom 16})

‎src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -135,27 +135,40 @@
135135
:saved-address :saved-account
136136
:account :status-account
137137
summary-type)]
138-
[rn/view
139-
{:style {:padding-horizontal 20
140-
:padding-bottom 16}}
138+
[rn/view {:style style/summary-container}
141139
[quo/text
142140
{:size :paragraph-2
143141
:weight :medium
144142
:style (style/section-label theme)
145143
:accessibility-label accessibility-label}
146144
label]
147145
[quo/summary-info
148-
{:type summary-info-type
149-
:networks? true
150-
:values (send-utils/network-values-for-ui network-values)
151-
:account-props (cond-> account-props
152-
(and account-to? (not bridge-tx?))
153-
(assoc
154-
:size 32
155-
:name (:label recipient)
156-
:full-name (:label recipient)
157-
:emoji (:emoji recipient)
158-
:customization-color (:customization-color recipient)))}]]))
146+
{:type summary-info-type
147+
:networks-to-show (when bridge-tx?
148+
(send-utils/network-values-for-ui network-values))
149+
:account-props (cond-> account-props
150+
(and account-to? (not bridge-tx?))
151+
(assoc
152+
:size 32
153+
:name (:label recipient)
154+
:full-name (:label recipient)
155+
:emoji (:emoji recipient)
156+
:customization-color (:customization-color recipient)))}]]))
157+
158+
(defn- network-summary
159+
[{:keys [theme label accessibility-label]}]
160+
(let [network (rf/sub [:wallet/send-selected-network])]
161+
(when network
162+
[rn/view {:style style/summary-container}
163+
[quo/text
164+
{:size :paragraph-2
165+
:weight :medium
166+
:style (style/section-label theme)
167+
:accessibility-label accessibility-label}
168+
label]
169+
[quo/summary-info
170+
{:type :network
171+
:network-props network}]])))
159172

160173
(defn- data-item
161174
[{:keys [title subtitle]}]
@@ -300,6 +313,7 @@
300313
:accessibility-label :summary-from-label
301314
:label (i18n/label :t/from-capitalized)
302315
:account-props from-account-props
316+
:bridge-tx? (= transaction-type :tx/bridge)
303317
:theme theme}]
304318
[user-summary
305319
{:summary-type (if (= transaction-type :tx/bridge)
@@ -313,4 +327,8 @@
313327
:recipient recipient
314328
:bridge-tx? (= transaction-type :tx/bridge)
315329
:account-to? true
316-
:theme theme}]]]]))
330+
:theme theme}]
331+
(when-not (= transaction-type :tx/bridge)
332+
[network-summary
333+
{:label (i18n/label :t/on-capitalized)
334+
:theme theme}])]]]))

‎src/status_im/contexts/wallet/sheets/buy_network_selection/view.cljs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
{:size :paragraph-2
2525
:weight :medium
2626
:style style/on}
27-
(i18n/label :t/on-uppercase)]
27+
(i18n/label :t/on-capitalized)]
2828
[quo/context-tag
2929
{:type :network
3030
:network-logo (:logo-url provider)

‎src/status_im/contexts/wallet/swap/swap_confirmation/view.cljs‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,13 @@
7575
:accessibility-label title-accessibility-label}
7676
label]
7777
[quo/summary-info
78-
{:type :token
79-
:networks? true
80-
:values (send-utils/network-values-for-ui network-values)
81-
:token-props {:token token-symbol
82-
:label (str amount " " token-symbol)
83-
:address (when token-address
84-
(address-utils/get-shortened-compressed-key token-address))
85-
:size 32}}]]))
78+
{:type :token
79+
:token-props {:token token-symbol
80+
:label (str amount " " token-symbol)
81+
:address (when token-address
82+
(address-utils/get-shortened-compressed-key token-address))
83+
:size 32}
84+
:networks-to-show (send-utils/network-values-for-ui network-values)}]]))
8685

8786
(defn- pay-section
8887
[]

‎src/status_im/subs/wallet/networks.cljs‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,12 @@
7171
{:amount amount-fixed :token-symbol token-symbol})))
7272
{}
7373
network-values))))
74+
75+
(re-frame/reg-sub
76+
:wallet/send-selected-network
77+
:<- [:wallet/wallet-send]
78+
(fn [{:keys [to-values-by-chain]}]
79+
(-> to-values-by-chain
80+
keys
81+
first
82+
network-utils/get-network-details)))

0 commit comments

Comments
 (0)