From 052d88b531a4f499c3b5aa165e70a1c834646659 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Wed, 7 Feb 2024 16:55:14 +0400 Subject: [PATCH] Wallet: bridging - assets list (#18713) Wallet: bridging - assets list --- .../contexts/wallet/account/bridge/view.cljs | 54 ++++++++----------- .../wallet/common/asset_list/view.cljs | 37 +++++++++++++ src/status_im/contexts/wallet/events.cljs | 2 +- .../wallet/send/select_asset/view.cljs | 45 ++++------------ 4 files changed, 70 insertions(+), 68 deletions(-) create mode 100644 src/status_im/contexts/wallet/common/asset_list/view.cljs diff --git a/src/status_im/contexts/wallet/account/bridge/view.cljs b/src/status_im/contexts/wallet/account/bridge/view.cljs index 300ea7f10d..d3806ef942 100644 --- a/src/status_im/contexts/wallet/account/bridge/view.cljs +++ b/src/status_im/contexts/wallet/account/bridge/view.cljs @@ -1,42 +1,34 @@ (ns status-im.contexts.wallet.account.bridge.view (:require [quo.core :as quo] - [quo.foundations.resources :as quo.resources] [react-native.core :as rn] + [reagent.core :as reagent] [status-im.contexts.wallet.account.bridge.style :as style] [status-im.contexts.wallet.common.account-switcher.view :as account-switcher] - [status-im.contexts.wallet.common.temp :as temp] + [status-im.contexts.wallet.common.asset-list.view :as asset-list] [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn network-logo - [item] - {:source (quo.resources/get-network (:network-name item))}) - -(defn- bridge-token-component - [] - (fn [token] - (let [on-press #(rf/dispatch [:wallet/select-bridge-to - {:token token - :stack-id :wallet-bridge}])] - [quo/token-network (assoc token :on-press on-press)]))) - (defn view [] - (let [networks (rf/sub [:wallet/network-details]) - networks-logos (map network-logo networks)] - [rn/view {:style {:flex 1}} - [account-switcher/view - {:on-press #(rf/dispatch [:navigate-back]) - :accessibility-label :top-bar}] - [quo/text-combinations - {:container-style style/header-container - :title (i18n/label :t/bridge)}] - [quo/input - {:container-style style/input-container - :icon-name :i/search - :placeholder (i18n/label :t/search-assets)}] - [rn/flat-list - {:data (temp/bridge-token-list networks-logos) - :render-fn bridge-token-component - :content-container-style style/list-content-container}]])) + (let [search-text (reagent/atom "")] + (fn [] + [rn/view {:style {:flex 1}} + [account-switcher/view + {:on-press #(rf/dispatch [:navigate-back]) + :accessibility-label :top-bar}] + [quo/text-combinations + {:container-style style/header-container + :title (i18n/label :t/bridge)}] + [quo/input + {:container-style style/input-container + :icon-name :i/search + :on-change-text #(reset! search-text %) + :placeholder (i18n/label :t/search-assets)}] + [asset-list/view + {:search-text @search-text + :on-token-press (fn [token] + (rf/dispatch [:wallet/bridge-select-token + {:token token + :stack-id :wallet-bridge}]))}]]))) + diff --git a/src/status_im/contexts/wallet/common/asset_list/view.cljs b/src/status_im/contexts/wallet/common/asset_list/view.cljs new file mode 100644 index 0000000000..2132cb3424 --- /dev/null +++ b/src/status_im/contexts/wallet/common/asset_list/view.cljs @@ -0,0 +1,37 @@ +(ns status-im.contexts.wallet.common.asset-list.view + (:require + [quo.core :as quo] + [react-native.core :as rn] + [status-im.contexts.wallet.common.utils :as utils] + [utils.re-frame :as rf])) + +(defn- asset-component + [token _ _ {:keys [currency currency-symbol on-token-press]}] + (let [token-units (utils/total-token-units-in-all-chains token) + crypto-formatted (utils/get-standard-crypto-format token token-units) + fiat-value (utils/total-token-fiat-value currency token) + 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)) + :fiat-value fiat-formatted + :networks (:networks token) + :on-press #(on-token-press token)}])) + +(defn view + [{:keys [search-text on-token-press]}] + (let [filtered-tokens (rf/sub [:wallet/tokens-filtered search-text]) + currency (rf/sub [:profile/currency]) + currency-symbol (rf/sub [:profile/currency-symbol])] + [rn/flat-list + {:data filtered-tokens + :render-data {:currency currency + :currency-symbol currency-symbol + :on-token-press on-token-press} + :style {:flex 1} + :content-container-style {:padding-horizontal 8} + :keyboard-should-persist-taps :handled + :key-fn :symbol + :on-scroll-to-index-failed identity + :render-fn asset-component}])) diff --git a/src/status_im/contexts/wallet/events.cljs b/src/status_im/contexts/wallet/events.cljs index 5c856ff7da..f911e0c3f2 100644 --- a/src/status_im/contexts/wallet/events.cljs +++ b/src/status_im/contexts/wallet/events.cljs @@ -202,7 +202,7 @@ (first derived-address-details)]))] {:fx [[:dispatch [:wallet/create-derived-addresses account-details on-success]]]}))) -(rf/reg-event-fx :wallet/select-bridge-to +(rf/reg-event-fx :wallet/bridge-select-token (fn [{:keys [db]} [{:keys [token stack-id]}]] {:db (assoc-in db [:wallet :ui :send :token] token) :fx [[:navigate-to-within-stack [:wallet-bridge-to stack-id]]]})) 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 9c81f267fe..c5d081b1b8 100644 --- a/src/status_im/contexts/wallet/send/select_asset/view.cljs +++ b/src/status_im/contexts/wallet/send/select_asset/view.cljs @@ -6,8 +6,8 @@ [react-native.core :as rn] [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.collectibles-tab.view :as collectibles-tab] - [status-im.contexts.wallet.common.utils :as utils] [status-im.contexts.wallet.send.select-asset.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -16,39 +16,6 @@ [{:id :tab/assets :label (i18n/label :t/assets) :accessibility-label :assets-tab} {:id :tab/collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}]) -(defn- asset-component - [token _ _ {:keys [currency currency-symbol]}] - (let [on-press #(rf/dispatch [:wallet/send-select-token - {:token token - :stack-id :wallet-select-asset}]) - token-units (utils/total-token-units-in-all-chains token) - crypto-formatted (utils/get-standard-crypto-format token token-units) - fiat-value (utils/total-token-fiat-value currency token) - 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)) - :fiat-value fiat-formatted - :networks (:networks token) - :on-press on-press}])) - -(defn- asset-list - [search-text] - (let [filtered-tokens (rf/sub [:wallet/tokens-filtered search-text]) - currency (rf/sub [:profile/currency]) - currency-symbol (rf/sub [:profile/currency-symbol])] - [rn/flat-list - {:data filtered-tokens - :render-data {:currency currency - :currency-symbol currency-symbol} - :style {:flex 1} - :content-container-style {:padding-horizontal 8} - :keyboard-should-persist-taps :handled - :key-fn :id - :on-scroll-to-index-failed identity - :render-fn asset-component}])) - (defn- search-input [search-text on-change-text] [rn/view {:style style/search-input-container} @@ -75,12 +42,18 @@ (let [unfiltered-collectibles (rf/sub [:wallet/current-viewing-account-collectibles]) show-search-input? (or (= selected-tab :tab/assets) (and (= selected-tab :tab/collectibles) - (seq unfiltered-collectibles)))] + (seq unfiltered-collectibles))) + on-token-press (fn [token] + (rf/dispatch [:wallet/send-select-token + {:token token + :stack-id :wallet-select-asset}]))] [:<> (when show-search-input? [search-input search-text on-change-text]) (case selected-tab - :tab/assets [asset-list search-text] + :tab/assets [asset-list/view + {:search-text search-text + :on-token-press on-token-press}] :tab/collectibles [collectibles-grid search-text])]))