#[16978] Select collectible to send (#18404)

* Show collectibles to send and add filter capabilities

Additionally,
* Replace the sub `:wallet/collectibles-per-account` by `:wallet/current-viewing-account-collectibles` since 
    it was only used for the current viewing account and simplified the code.
* Refactor the select-asset view.
* Generalize collectibles-tab view
* Add translations for "not found" state

src/status_im/contexts/wallet/account/tabs/view.cljs

@@ -7,18 +7,24 @@
     [status-im.contexts.wallet.common.activity-tab.view :as activity]
     [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
     [status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
-    [utils.i18n :as i18n]))
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (defn view
   [{:keys [selected-tab]}]
-  [rn/view {:style {:flex 1}}
-   (case selected-tab
-     :assets       [assets/view]
-     :collectibles [collectibles/view]
-     :activity     [activity/view]
-     :permissions  [empty-tab/view
-                    {:title        (i18n/label :t/no-permissions)
-                     :description  (i18n/label :t/no-collectibles-description)
-                     :placeholder? true}]
-     :dapps        [dapps/view]
-     [about/view])])
+  (let [collectible-list (rf/sub [:wallet/current-viewing-account-collectibles])]
+    [rn/view {:style {:flex 1}}
+     (case selected-tab
+       :assets       [assets/view]
+       :collectibles [collectibles/view
+                      {:collectibles         collectible-list
+                       :on-collectible-press (fn [id]
+                                               (rf/dispatch [:wallet/get-collectible-details id])
+                                               (rf/dispatch [:navigate-to :wallet-collectible]))}]
+       :activity     [activity/view]
+       :permissions  [empty-tab/view
+                      {:title        (i18n/label :t/no-permissions)
+                       :description  (i18n/label :t/no-collectibles-description)
+                       :placeholder? true}]
+       :dapps        [dapps/view]
+       [about/view])]))

src/status_im/contexts/wallet/common/collectibles_tab/view.cljs

@@ -5,32 +5,34 @@
     [react-native.core :as rn]
     [status-im.common.resources :as resources]
     [status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.i18n :as i18n]))
 
 (defn- view-internal
-  [{:keys [theme]}]
-  (let [specific-address (rf/sub [:wallet/current-viewing-account-address])
-        collectible-list (if specific-address
-                           (rf/sub [:wallet/collectibles-per-account specific-address])
-                           (rf/sub [:wallet/all-collectibles]))]
-    (if (empty? collectible-list)
+  [{:keys [theme collectibles filtered? on-collectible-press]}]
+  (let [no-results-match-query? (and filtered? (empty? collectibles))]
+    (cond
+      no-results-match-query?
+      [rn/view {:style {:flex 1 :justify-content :center}}
+       [quo/empty-state
+        {:title       (i18n/label :t/nothing-found)
+         :description (i18n/label :t/try-to-search-something-else)
+         :image       (resources/get-themed-image :no-collectibles theme)}]]
+
+      (empty? collectibles)
       [empty-tab/view
        {:title       (i18n/label :t/no-collectibles)
         :description (i18n/label :t/no-collectibles-description)
         :image       (resources/get-themed-image :no-collectibles theme)}]
+
+      :else
       [rn/flat-list
-       {:data                    collectible-list
+       {:data                    collectibles
         :style                   {:flex 1}
         :content-container-style {:align-items :center}
         :num-columns             2
         :render-fn               (fn [{:keys [preview-url id]}]
                                    [quo/collectible
                                     {:images   [preview-url]
-                                     :on-press (fn []
-                                                 (rf/dispatch [:wallet/get-collectible-details id])
-                                                 (rf/dispatch
-                                                  [:navigate-to
-                                                   :wallet-collectible]))}])}])))
+                                     :on-press #(on-collectible-press id)}])}])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/home/tabs/view.cljs

@@ -4,12 +4,18 @@
     [status-im.contexts.wallet.common.activity-tab.view :as activity]
     [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
     [status-im.contexts.wallet.home.tabs.assets.view :as assets]
-    [status-im.contexts.wallet.home.tabs.style :as style]))
+    [status-im.contexts.wallet.home.tabs.style :as style]
+    [utils.re-frame :as rf]))
 
 (defn view
   [{:keys [selected-tab]}]
-  [rn/view {:style style/container}
-   (case selected-tab
-     :assets       [assets/view]
-     :collectibles [collectibles/view]
-     [activity/view])])
+  (let [collectible-list (rf/sub [:wallet/all-collectibles])]
+    [rn/view {:style style/container}
+     (case selected-tab
+       :assets       [assets/view]
+       :collectibles [collectibles/view
+                      {:collectibles         collectible-list
+                       :on-collectible-press (fn [id]
+                                               (rf/dispatch [:wallet/get-collectible-details id])
+                                               (rf/dispatch [:navigate-to :wallet-collectible]))}]
+       [activity/view])]))

src/status_im/contexts/wallet/send/select_asset/view.cljs

@@ -1,11 +1,12 @@
 (ns status-im.contexts.wallet.send.select-asset.view
   (:require
+    [clojure.string :as string]
     [quo.core :as quo]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [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.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]
@@ -18,14 +19,13 @@
 (defn- asset-component
   []
   (fn [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)
+    (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)]
+          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)
@@ -50,34 +50,49 @@
       :on-scroll-to-index-failed    identity
       :render-fn                    asset-component}]))
 
-(defn- tab-view
-  [search-text selected-tab]
-  (case selected-tab
-    :tab/assets       [asset-list 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 (safe-area/get-top))}]))
-
 (defn- search-input
+  [search-text on-change-text]
+  [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 collectibles-grid
   [search-text]
-  (let [on-change-text #(reset! search-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}]])))
+  (let [collectibles      (rf/sub [:wallet/current-viewing-account-collectibles-filtered search-text])
+        search-performed? (not (string/blank? search-text))]
+    [collectibles-tab/view
+     {:collectibles         collectibles
+      :filtered?            search-performed?
+      :on-collectible-press (fn [collectible-id]
+                              (js/alert (str "Collectible to send: \n"
+                                             collectible-id
+                                             "\nNavigation not implemented yet")))}]))
+
+(defn- tab-view
+  [search-text selected-tab on-change-text]
+  (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)))]
+    [:<>
+     (when show-search-input?
+       [search-input search-text on-change-text])
+     (case selected-tab
+       :tab/assets       [asset-list search-text]
+       :tab/collectibles [collectibles-grid search-text])]))
+
 
 (defn- f-view-internal
   []
-  (let [selected-tab (reagent/atom (:id (first tabs-data)))
-        search-text  (reagent/atom "")
-        on-close     #(rf/dispatch [:navigate-back-within-stack
-                                    :wallet-select-asset])]
+  (let [selected-tab   (reagent/atom (:id (first tabs-data)))
+        search-text    (reagent/atom "")
+        on-change-text #(reset! search-text %)
+        on-change-tab  #(reset! selected-tab %)
+        on-close       #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])]
     (fn []
       [rn/safe-area-view {:style style/container}
        [rn/scroll-view
@@ -100,9 +115,8 @@
           :container-style {:margin-horizontal 20
                             :margin-vertical   8}
           :data            tabs-data
-          :on-change       #(reset! selected-tab %)}]
-        [search-input search-text]
-        [tab-view @search-text @selected-tab]]])))
+          :on-change       on-change-tab}]
+        [tab-view @search-text @selected-tab on-change-text]]])))
 
 (defn- view-internal
   []

src/status_im/subs/wallet/collectibles.cljs

@@ -10,15 +10,17 @@
     animation-url
     image-url))
 
+(defn add-collectibles-preview-url
+  [collectibles]
+  (map (fn [{:keys [collectible-data] :as collectible}]
+         (assoc collectible :preview-url (preview-url collectible-data)))
+       collectibles))
+
 (re-frame/reg-sub
- :wallet/collectibles-per-account
- :<- [:wallet]
- (fn [wallet [_ address]]
-   (as-> wallet $
-     (get-in $ [:accounts address :collectibles])
-     (map (fn [{:keys [collectible-data] :as collectible}]
-            (assoc collectible :preview-url (preview-url collectible-data)))
-          $))))
+ :wallet/current-viewing-account-collectibles
+ :<- [:wallet/current-viewing-account]
+ (fn [current-account]
+   (-> current-account :collectibles add-collectibles-preview-url)))
 
 (re-frame/reg-sub
  :wallet/all-collectibles
@@ -27,8 +29,18 @@
    (->> wallet
         :accounts
         (mapcat (comp :collectibles val))
-        (map (fn [{:keys [collectible-data] :as collectible}]
-               (assoc collectible :preview-url (preview-url collectible-data)))))))
+        (add-collectibles-preview-url))))
+
+(re-frame/reg-sub
+ :wallet/current-viewing-account-collectibles-filtered
+ :<- [:wallet/current-viewing-account-collectibles]
+ (fn [current-account-collectibles [_ search-text]]
+   (let [search-text-lower-case (string/lower-case search-text)]
+     (filter (fn [{{collection-name :name}  :collection-data
+                   {collectible-name :name} :collectible-data}]
+               (or (string/includes? (string/lower-case collection-name) search-text-lower-case)
+                   (string/includes? (string/lower-case collectible-name) search-text-lower-case)))
+             current-account-collectibles))))
 
 (re-frame/reg-sub
  :wallet/last-collectible-details

src/status_im/subs/wallet/wallet.cljs

@@ -124,10 +124,10 @@
  :<- [:wallet/balances]
  :<- [:profile/currency-symbol]
  (fn [[accounts current-viewing-account-address balances currency-symbol]]
-   (let [current-viewing-account (utils/get-account-by-address accounts current-viewing-account-address)
-         balance                 (get balances current-viewing-account-address)
-         formatted-balance       (utils/prettify-balance currency-symbol balance)]
-     (-> current-viewing-account
+   (let [balance           (get balances current-viewing-account-address)
+         formatted-balance (utils/prettify-balance currency-symbol balance)]
+     (-> accounts
+         (utils/get-account-by-address current-viewing-account-address)
          (assoc :balance           balance
                 :formatted-balance formatted-balance)))))
 

translations/en.json

@@ -1793,6 +1793,8 @@
     "community-info-not-found": "Community information not found",
     "community-info": "Community info",
     "not-found": "Not found",
+    "nothing-found": "Nothing found",
+    "try-to-search-something-else": "Try to search something else",
     "activity": "Activity",
     "reject-and-delete": "Reject and delete",
     "accept-and-add": "Accept and add",