diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index f495bc5373..b200c706e1 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/src/quo/components/drawers/drawer_top/view.cljs @@ -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 diff --git a/src/quo/components/list_items/token_network/schema.cljs b/src/quo/components/list_items/token_network/schema.cljs index a6563540e5..619696ac00 100644 --- a/src/quo/components/list_items/token_network/schema.cljs +++ b/src/quo/components/list_items/token_network/schema.cljs @@ -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]) diff --git a/src/quo/components/tags/network_tags/view.cljs b/src/quo/components/tags/network_tags/view.cljs index cb9d9a412a..059e46bb66 100644 --- a/src/quo/components/tags/network_tags/view.cljs +++ b/src/quo/components/tags/network_tags/view.cljs @@ -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 diff --git a/src/quo/components/wallet/token_input/view.cljs b/src/quo/components/wallet/token_input/view.cljs index c330ee537c..8f37edd903 100644 --- a/src/quo/components/wallet/token_input/view.cljs +++ b/src/quo/components/wallet/token_input/view.cljs @@ -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) diff --git a/src/status_im/contexts/wallet/common/asset_list/view.cljs b/src/status_im/contexts/wallet/common/asset_list/view.cljs index 0209a841b5..89284c2760 100644 --- a/src/status_im/contexts/wallet/common/asset_list/view.cljs +++ b/src/status_im/contexts/wallet/common/asset_list/view.cljs @@ -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 diff --git a/src/status_im/contexts/wallet/send/events.cljs b/src/status_im/contexts/wallet/send/events.cljs index e9f3a4782f..4804852bf0 100644 --- a/src/status_im/contexts/wallet/send/events.cljs +++ b/src/status_im/contexts/wallet/send/events.cljs @@ -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)})) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index 6e274ce7b7..4c77587c70 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/src/status_im/contexts/wallet/send/input_amount/view.cljs @@ -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 diff --git a/src/status_im/contexts/wallet/send/select_asset/view.cljs b/src/status_im/contexts/wallet/send/select_asset/view.cljs index c88f05a89f..27c2e4675f 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -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))) diff --git a/src/status_im/subs/wallet/wallet.cljs b/src/status_im/subs/wallet/wallet.cljs index 9a7a9833ef..897ef861b6 100644 --- a/src/status_im/subs/wallet/wallet.cljs +++ b/src/status_im/subs/wallet/wallet.cljs @@ -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