Skip to content

Commit 618f512

Browse files
briansztamfaterbriansztamfater
committed
feat: transaction confirmation page ui
1 parent 7edc310 commit 618f512

File tree

4 files changed

+162
-1
lines changed

4 files changed

+162
-1
lines changed

‎src/status_im2/contexts/wallet/send/select_asset/view.cljs

+3-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@
3131
(defn- asset-component
3232
[]
3333
(fn [token _ _ _]
34-
(let [on-press #(js/alert "Not implemented yet")
34+
(let [on-press #(rf/dispatch [:navigate-to-within-stack
35+
[:wallet-transaction-confirmation
36+
:wallet-select-asset]])
3537
total-balance (reduce +
3638
(map #(js/parseFloat (:balance %))
3739
(vals (:balancesPerChain token))))

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
(ns status-im2.contexts.wallet.send.transaction-confirmation.style)
2+
3+
(defn container
4+
[margin-top]
5+
{:flex 1
6+
:margin-top margin-top})
7+
8+
(def title-container
9+
{:margin-horizontal 20
10+
:margin-vertical 12})
11+
12+
(def empty-container-style
13+
{:justify-content :center
14+
:flex 1
15+
:margin-bottom 44})
16+
17+
(def search-input-container
18+
{:padding-horizontal 20
19+
:padding-vertical 8})

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

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
(ns status-im2.contexts.wallet.send.transaction-confirmation.view
2+
(:require
3+
[clojure.string :as string]
4+
[quo.core :as quo]
5+
[quo.foundations.resources :as quo.resources]
6+
[quo.theme :as quo.theme]
7+
[react-native.core :as rn]
8+
[react-native.safe-area :as safe-area]
9+
[reagent.core :as reagent]
10+
[status-im2.contexts.wallet.send.transaction-confirmation.style :as style]
11+
[utils.i18n :as i18n]
12+
[utils.re-frame :as rf]))
13+
14+
(def tabs-data
15+
[{:id :tab/assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
16+
{:id :tab/collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}])
17+
18+
(defn- network-names
19+
[balances-per-chain]
20+
(mapv (fn [chain-id-keyword]
21+
(let [chain-id-str (name chain-id-keyword)
22+
chain-id (js/parseInt chain-id-str)]
23+
(case chain-id
24+
10 {:source (quo.resources/get-network :optimism)}
25+
42161 {:source (quo.resources/get-network :arbitrum)}
26+
5 {:source (quo.resources/get-network :ethereum)}
27+
1 {:source (quo.resources/get-network :ethereum)}
28+
:unknown))) ; Default case if the chain-id is not recognized
29+
(keys balances-per-chain)))
30+
31+
(defn- asset-component
32+
[]
33+
(fn [token _ _ _]
34+
(let [on-press #(js/alert "Not implemented yet")
35+
total-balance (reduce +
36+
(map #(js/parseFloat (:balance %))
37+
(vals (:balancesPerChain token))))
38+
total-balance-formatted (.toFixed total-balance 2)
39+
currency :usd
40+
currency-symbol "$"
41+
price-fiat-currency (get-in token [:marketValuesPerCurrency currency :price])
42+
balance-fiat (* total-balance price-fiat-currency)
43+
balance-fiat-formatted (.toFixed balance-fiat 2)
44+
networks-list (network-names (:balancesPerChain token))]
45+
[quo/token-network
46+
{:token (quo.resources/get-token (keyword (string/lower-case (:symbol token))))
47+
:label (:name token)
48+
:token-value (str total-balance-formatted " " (:symbol token))
49+
:fiat-value (str currency-symbol balance-fiat-formatted)
50+
:networks networks-list
51+
:on-press on-press}])))
52+
53+
(defn- asset-list
54+
[account-address search-text]
55+
(let [tokens (rf/sub [:wallet/tokens])
56+
account-tokens (get tokens (keyword account-address))
57+
sorted-tokens (sort-by :name compare account-tokens)
58+
filtered-tokens (filter #(or (string/starts-with? (string/lower-case (:name %))
59+
(string/lower-case search-text))
60+
(string/starts-with? (string/lower-case (:symbol %))
61+
(string/lower-case search-text)))
62+
sorted-tokens)]
63+
[rn/view {:style {:flex 1}}
64+
[rn/flat-list
65+
{:data filtered-tokens
66+
:content-container-style {:padding-horizontal 8}
67+
:keyboard-should-persist-taps :handled
68+
:key-fn :id
69+
:on-scroll-to-index-failed identity
70+
:render-fn asset-component}]]))
71+
72+
(defn- tab-view
73+
[account search-text selected-tab]
74+
(case selected-tab
75+
:tab/assets [asset-list account search-text]
76+
:tab/collectibles [quo/empty-state
77+
{:title (i18n/label :t/no-collectibles)
78+
:description (i18n/label :t/no-collectibles-description)
79+
:placeholder? true
80+
:container-style style/empty-container-style}]))
81+
82+
(defn- search-input
83+
[search-text]
84+
(let [on-change-text #(reset! search-text %)]
85+
(fn []
86+
[rn/view {:style style/search-input-container}
87+
[quo/input
88+
{:small? true
89+
:placeholder (i18n/label :t/search-assets)
90+
:icon-name :i/search
91+
:value @search-text
92+
:on-change-text on-change-text}]])))
93+
94+
(defn- f-view-internal
95+
[account-address]
96+
(let [margin-top (safe-area/get-top)
97+
selected-tab (reagent/atom (:id (first tabs-data)))
98+
search-text (reagent/atom "")
99+
account-address (string/lower-case (or account-address
100+
(rf/sub [:get-screen-params :wallet-accounts])))
101+
on-close #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])]
102+
(fn []
103+
[rn/scroll-view
104+
{:content-container-style (style/container margin-top)
105+
:keyboard-should-persist-taps :handled
106+
:scroll-enabled false}
107+
[quo/page-nav
108+
{:icon-name :i/arrow-left
109+
:on-press on-close
110+
:accessibility-label :top-bar
111+
:right-side :account-switcher
112+
:account-switcher {:customization-color :purple
113+
:on-press #(js/alert "Not implemented yet")
114+
:state :default
115+
:emoji "🍑"}}]
116+
[quo/text-combinations
117+
{:title (i18n/label :t/select-asset)
118+
:container-style style/title-container
119+
:title-accessibility-label :title-label}]
120+
[quo/segmented-control
121+
{:size 32
122+
:blur? false
123+
:symbol false
124+
:default-active :tab/assets
125+
:container-style {:margin-horizontal 20
126+
:margin-vertical 8}
127+
:data tabs-data
128+
:on-change #(reset! selected-tab %)}]
129+
[search-input search-text]
130+
[tab-view account-address @search-text @selected-tab]])))
131+
132+
(defn- view-internal
133+
[{:keys [account-address]}]
134+
[:f> f-view-internal account-address])
135+
136+
(def view (quo.theme/with-theme view-internal))

‎src/status_im2/navigation/screens.cljs

+4
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
[status-im2.contexts.wallet.scan-account.view :as scan-address]
4949
[status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
5050
[status-im2.contexts.wallet.send.select-asset.view :as wallet-select-asset]
51+
[status-im2.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation]
5152
[status-im2.navigation.options :as options]
5253
[status-im2.navigation.transitions :as transitions]))
5354

@@ -276,6 +277,9 @@
276277
{:name :wallet-select-asset
277278
:component wallet-select-asset/view}
278279

280+
{:name :wallet-transaction-confirmation
281+
:component wallet-transaction-confirmation/view}
282+
279283
{:name :scan-address
280284
:options (merge
281285
options/dark-screen

0 commit comments

Comments
 (0)