add search input

status-im · Nov 2, 2023 · 3d4e68b · 3d4e68b
1 parent c26eed8
commit 3d4e68b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/src/status_im2/contexts/wallet/send/select_asset/style.cljs b/src/status_im2/contexts/wallet/send/select_asset/style.cljs
@@ -22,7 +22,6 @@
    :flex            1
    :margin-bottom   44})
 
-(def button
-  {:justify-self      :flex-end
-   :margin-bottom     46
-   :margin-horizontal 20})
+(def search-input-container
+  {:padding-horizontal 20
+   :padding-vertical   8})
diff --git a/src/status_im2/contexts/wallet/send/select_asset/view.cljs b/src/status_im2/contexts/wallet/send/select_asset/view.cljs
@@ -29,36 +29,49 @@
         :fiat-value  "€0.00"}])))
 
 (defn- asset-list
-  [account-address]
+  [account-address search-text]
+  (println search-text)
   (fn []
-    (let [tokens (rf/sub [:wallet/tokens])]
+    (let [tokens          (rf/sub [:wallet/tokens])
+          account-tokens  (get tokens (keyword account-address))
+          filtered-tokens (filter #(string/starts-with? (:name %) search-text) account-tokens)]
       [rn/view {:style {:flex 1}}
        [rn/flat-list
-        {:data                      (get tokens (keyword account-address))
+        {:data                      filtered-tokens
          :content-container-style   {:flex-grow          1
                                      :padding-horizontal 8}
          :key-fn                    :id
          :on-scroll-to-index-failed identity
          :render-fn                 asset-component}]])))
 
 (defn- tab-view
-  [account selected-tab]
+  [account search-text selected-tab]
   (case selected-tab
-    :tab/assets       [asset-list account]
+    :tab/assets       [asset-list account search-text]
     :tab/collectibles [quo/empty-state
                        {:title           (i18n/label :t/no-collectibles)
                         :description     (i18n/label :t/no-collectibles-description)
                         :placeholder?    true
                         :container-style style/empty-container-style}]))
 
 (defn- search-input
-  []
-  (fn []
-    [rn/view]))
+  [search-text]
+  (let [on-change-text (fn [text]
+                         (println text)
+                         (reset! search-text text))]
+    (fn []
+      [rn/view {:style style/search-input-container}
+       [quo/input
+        {:small?         true
+         :placeholder    (i18n/label :t/search-assets)
+         :icon-name      :i/search
+         :value          @search-text
+         :on-change-text on-change-text}]])))
 
 (defn- f-view-internal
   [account-address]
   (let [margin-top      (safe-area/get-top)
+        search-text     (reagent/atom "")
         selected-tab    (reagent/atom (:id (first tabs-data)))
         account-address (string/lower-case (or account-address
                                                (rf/sub [:get-screen-params :wallet-accounts])))
@@ -86,11 +99,12 @@
          :blur?           false
          :symbol          false
          :default-active  :tab/assets
-         :container-style {:margin-horizontal 20}
+         :container-style {:margin-horizontal 20
+                           :margin-vertical   8}
          :data            tabs-data
          :on-change       #(reset! selected-tab %)}]
-       [search-input]
-       [tab-view account-address @selected-tab]])))
+       [search-input search-text]
+       [tab-view account-address @search-text @selected-tab]])))
 
 (defn- view-internal
   [{:keys [account-address]}]

diff --git a/translations/en.json b/translations/en.json
@@ -2374,5 +2374,6 @@
     "reveal-address": "Reveal address",
     "derive-addresses": "Derive addresses",
     "address-activity": "This address has activity",
-    "select-asset": "Select asset"
+    "select-asset": "Select asset",
+    "search-assets": "Search assets"
 }