status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#16953] Implement change asset action in wallet send flow (#19393) 

* Refactor :wallet/tokens-filtered sub to filter only when `query` is provided

* Make token input logo pressable and make components more flexible

* Change asset-list's rn/scroll-view -> gesture/scroll-view to make it scrollable on bottom-sheets

* Add bottom-sheet to edit the token to send
This commit is contained in:
Ulises Manuel 2024-04-08 10:52:09 -06:00 committed by GitHub
parent ce69df19ac
commit 8e31dae33b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 82 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/quo/components/drawers/drawer_top/view.cljs
View File

@ -198,8 +198,9 @@
on-button-press
on-button-long-press
button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
profile-picture keycard? networks label full-name]}]
[rn/view {:style style/container}
profile-picture keycard? networks label full-name
container-style]}]
[rn/view {:style (merge style/container container-style)}
(when (left-image-supported-types type)
[rn/view {:style style/left-container}
[left-image

2
src/quo/components/list_items/token_network/schema.cljs
View File

@ -11,5 +11,5 @@
[:networks [:* [:map [:source :schema.common/image-source]]]]
[:on-press {:optional true} [:maybe fn?]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:state {:optional true} [:enum :default :active :selected]]]]
[:state {:optional true} [:maybe [:enum :default :active :selected]]]]]
:any])

3
src/quo/components/tags/network_tags/view.cljs
View File

@ -16,7 +16,8 @@
[preview-list/view
{:type :network
:number (count networks)
:size :size-16} networks]
:size :size-16}
networks]
[text/text
{:weight :medium
:size :paragraph-2

17
src/quo/components/wallet/token_input/view.cljs
View File

@ -75,7 +75,7 @@
[token-name-text theme text]])
(defn input-section
[{:keys [on-change-text value value-atom on-selection-change]}]
[{:keys [on-change-text value value-atom on-selection-change on-token-press]}]
(let [input-ref (atom nil)
set-ref #(reset! input-ref %)
focus-input #(when-let [ref ^js @input-ref]
@ -95,13 +95,14 @@
(fn [{:keys [theme token customization-color show-keyboard? crypto? currency value error?
selection]
:or {show-keyboard? true}}]
[rn/pressable
{:on-press focus-input
:style {:flex 1}}
[token/view
{:token token
:size :size-32}]
[rn/view {:style style/text-input-container}
[rn/view {:style {:flex 1}}
[rn/pressable {:on-press on-token-press}
[token/view
{:token token
:size :size-32}]]
[rn/pressable
{:style style/text-input-container
:on-press focus-input}
[rn/text-input
(cond-> {:style (style/text-input theme error?)
:placeholder-text-color (style/placeholder-text theme)

33
src/status_im/contexts/wallet/common/asset_list/view.cljs
View File

@ -1,12 +1,17 @@
(ns status-im.contexts.wallet.common.asset-list.view
(:require
[quo.core :as quo]
[react-native.core :as rn]
[react-native.gesture :as gesture]
[status-im.contexts.wallet.common.utils :as utils]
[utils.re-frame :as rf]))
(defn- asset-component
[{:keys [total-balance] :as token} _ _ {:keys [currency currency-symbol on-token-press]}]
[{token-symbol :symbol
token-name :name
total-balance :total-balance
:as token}
_ _
{:keys [currency currency-symbol on-token-press preselected-token-symbol]}]
(let [fiat-value (utils/calculate-token-fiat-value
{:currency currency
:balance total-balance
@ -14,25 +19,29 @@
crypto-formatted (utils/get-standard-crypto-format token total-balance)
fiat-formatted (utils/get-standard-fiat-format crypto-formatted currency-symbol fiat-value)]
[quo/token-network
{:token (:symbol token)
:label (:name token)
:token-value (str crypto-formatted " " (:symbol token))
{:token token-symbol
:label token-name
:token-value (str crypto-formatted " " token-symbol)
:fiat-value fiat-formatted
:networks (seq (:networks token))
:on-press #(on-token-press token)}]))
:on-press #(on-token-press token)
:state (when (= preselected-token-symbol token-symbol)
:selected)}]))
(defn view
[{:keys [search-text on-token-press]}]
[{:keys [content-container-style search-text on-token-press preselected-token-symbol]
:or {content-container-style {:padding-horizontal 8}}}]
(let [filtered-tokens (rf/sub [:wallet/current-viewing-account-tokens-filtered search-text])
currency (rf/sub [:profile/currency])
currency-symbol (rf/sub [:profile/currency-symbol])]
[rn/flat-list
[gesture/flat-list
{:data filtered-tokens
:render-data {:currency currency
:currency-symbol currency-symbol
:on-token-press on-token-press}
:render-data {:currency currency
:currency-symbol currency-symbol
:on-token-press on-token-press
:preselected-token-symbol preselected-token-symbol}
:style {:flex 1}
:content-container-style {:padding-horizontal 8}
:content-container-style content-container-style
:keyboard-should-persist-taps :handled
:key-fn :symbol
:on-scroll-to-index-failed identity

10
src/status_im/contexts/wallet/send/events.cljs
View File

@ -79,7 +79,8 @@
(fn [{:keys [db]} [selected-networks]]
{:db (assoc-in db [:wallet :ui :send :selected-networks] selected-networks)}))
(rf/reg-event-fx :wallet/send-select-token
(rf/reg-event-fx
:wallet/send-select-token
(fn [{:keys [db]} [{:keys [token stack-id start-flow?]}]]
{:db (-> db
(update-in [:wallet :ui :send] dissoc :collectible)
@ -91,6 +92,13 @@
:start-flow? start-flow?
:flow-id :wallet-flow}]]]}))
(rf/reg-event-fx
:wallet/edit-token-to-send
(fn [{:keys [db]} [token]]
{:db (assoc-in db [:wallet :ui :send :token] token)
:fx [[:dispatch [:hide-bottom-sheet]]
[:dispatch [:wallet/clean-suggested-routes]]]}))
(rf/reg-event-fx :wallet/clean-selected-token
(fn [{:keys [db]}]
{:db (update-in db [:wallet :ui :send] dissoc :token :tx-type)}))

26
src/status_im/contexts/wallet/send/input_amount/view.cljs
View File

@ -7,6 +7,7 @@
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
[status-im.contexts.wallet.common.asset-list.view :as asset-list]
[status-im.contexts.wallet.common.utils :as utils]
[status-im.contexts.wallet.common.utils.send :as send-utils]
[status-im.contexts.wallet.send.input-amount.style :as style]
@ -120,6 +121,21 @@
:title (i18n/label :t/user-gets {:name receiver})
:subtitle amount}]])
(defn select-asset-bottom-sheet
[clear-input!]
(let [{preselected-token-symbol :symbol} (rf/sub [:wallet/wallet-send-token])]
[:<> ;; Need to be a `:<>` to keep `asset-list` scrollable.
[quo/drawer-top
{:title (i18n/label :t/select-asset)
:container-style {:padding-bottom 8}}]
[asset-list/view
{:content-container-style {:padding-horizontal 8
:padding-bottom 8}
:preselected-token-symbol preselected-token-symbol
:on-token-press (fn [token]
(rf/dispatch [:wallet/edit-token-to-send token])
(clear-input!))}]]))
(defn- f-view-internal
;; crypto-decimals, limit-crypto and initial-crypto-currency? args are needed
;; for component tests only
@ -135,6 +151,7 @@
(let [_ (rn/dismiss-keyboard!)
bottom (safe-area/get-bottom)
input-value (reagent/atom "")
clear-input! #(reset! input-value "")
input-error (reagent/atom false)
crypto-currency? (reagent/atom initial-crypto-currency?)
input-selection (reagent/atom {:start 0 :end 0})
@ -244,7 +261,11 @@
fee-formatted (when fee-in-fiat
(utils/get-standard-fiat-format fee-in-crypto-formatted
currency-symbol
fee-in-fiat))]
fee-in-fiat))
show-select-asset-sheet #(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[select-asset-bottom-sheet clear-input!])}])]
(rn/use-mount
(fn []
(let [dismiss-keyboard-fn #(when (= % "active") (rn/dismiss-keyboard!))
@ -279,7 +300,8 @@
:currency current-currency
:token-symbol token-symbol
:limit-fiat fiat-limit
:limit-crypto crypto-limit})}]
:limit-crypto crypto-limit})
:on-token-press show-select-asset-sheet}]
[routes/view
{:amount amount-text
:routes best-routes

2
src/status_im/contexts/wallet/send/select_asset/view.cljs
View File

@ -44,6 +44,7 @@
{:collectible %
:amount 1
:stack-id :screen/wallet.select-asset}])))}]))
(defn- tab-view
[search-text selected-tab on-change-text]
(let [unfiltered-collectibles (rf/sub [:wallet/current-viewing-account-collectibles])
@ -63,7 +64,6 @@
:on-token-press on-token-press}]
:tab/collectibles [collectibles-grid search-text])]))
(defn- f-view-internal
[]
(let [selected-tab (reagent/atom (:id (first tabs-data)))

24
src/status_im/subs/wallet/wallet.cljs
View File

@ -222,18 +222,18 @@
:<- [:wallet/current-viewing-account]
:<- [:wallet/network-details]
(fn [[account networks] [_ query]]
(let [tokens (map (fn [token]
(assoc token
:networks (utils/network-list token networks)
:total-balance (utils/calculate-total-token-balance token)))
(:tokens account))
sorted-tokens (sort-by :name compare tokens)
filtered-tokens (filter #(or (string/starts-with? (string/lower-case (:name %))
(string/lower-case query))
(string/starts-with? (string/lower-case (:symbol %))
(string/lower-case query)))
sorted-tokens)]
filtered-tokens)))
(let [tokens (map (fn [token]
(assoc token
:networks (utils/network-list token networks)
:total-balance (utils/calculate-total-token-balance token)))
(:tokens account))
sorted-tokens (sort-by :name compare tokens)]
(if query
(let [query-string (string/lower-case query)]
(filter #(or (string/starts-with? (string/lower-case (:name %)) query-string)
(string/starts-with? (string/lower-case (:symbol %)) query-string))
sorted-tokens))
sorted-tokens))))
(rf/reg-sub
:wallet/token-by-symbol