Wallet: bridging - assets list (#18713)

Wallet: bridging - assets list

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])
+  (let [search-text (reagent/atom "")]
-        networks-logos (map network-logo networks)]
+    (fn []
-    [rn/view {:style {:flex 1}}
+      [rn/view {:style {:flex 1}}
-     [account-switcher/view
+       [account-switcher/view
-      {:on-press            #(rf/dispatch [:navigate-back])
+        {:on-press            #(rf/dispatch [:navigate-back])
-       :accessibility-label :top-bar}]
+         :accessibility-label :top-bar}]
-     [quo/text-combinations
+       [quo/text-combinations
-      {:container-style style/header-container
+        {:container-style style/header-container
-       :title           (i18n/label :t/bridge)}]
+         :title           (i18n/label :t/bridge)}]
-     [quo/input
+       [quo/input
-      {:container-style style/input-container
+        {:container-style style/input-container
-       :icon-name       :i/search
+         :icon-name       :i/search
-       :placeholder     (i18n/label :t/search-assets)}]
+         :on-change-text  #(reset! search-text %)
-     [rn/flat-list
+         :placeholder     (i18n/label :t/search-assets)}]
-      {:data                    (temp/bridge-token-list networks-logos)
+       [asset-list/view
-       :render-fn               bridge-token-component
+        {:search-text    @search-text
-       :content-container-style style/list-content-container}]]))
+         :on-token-press (fn [token]
+                           (rf/dispatch [:wallet/bridge-select-token
+                                         {:token    token
+                                          :stack-id :wallet-bridge}]))}]])))
+

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}]))

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]]]}))

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])]))