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.

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

@@ -7,18 +7,20 @@
     [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}]
+       :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

@@ -9,28 +9,30 @@
     [utils.re-frame :as rf]))
 
 (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)
-      [empty-tab/view
-       {:title       (i18n/label :t/no-collectibles)
-        :description (i18n/label :t/no-collectibles-description)
-        :image       (resources/get-themed-image :no-collectibles theme)}]
-      [rn/flat-list
-       {:data                    collectible-list
-        :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]))}])}])))
+  [{:keys [theme collectibles filtered?]}]
+  (cond
+    (and filtered? (empty? collectibles))
+    [rn/view]
+
+    (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                    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]))}])}]))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -4,12 +4,14 @@
     [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}]
+       [activity/view])]))

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

@@ -3,9 +3,9 @@
     [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.send.select-asset.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -17,13 +17,12 @@
 (defn- asset-component
   []
   (fn [token _ _ _]
-    (let [on-press
-          #(rf/dispatch [:wallet/send-select-token
-                         {:token    token
-                          :stack-id :wallet-select-asset}])
+    (let [on-press                #(rf/dispatch [:wallet/send-select-token
+                                                 {:token    token
+                                                  :stack-id :wallet-select-asset}])
           total-balance-formatted (.toFixed (:total-balance token) 2)
-          balance-fiat-formatted (.toFixed (:total-balance-fiat token) 2)
-          currency-symbol (rf/sub [:profile/currency-symbol])]
+          balance-fiat-formatted  (.toFixed (:total-balance-fiat token) 2)
+          currency-symbol         (rf/sub [:profile/currency-symbol])]
       [quo/token-network
        {:token       (:symbol token)
         :label       (:name token)
@@ -44,34 +43,45 @@
       :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-filtered (rf/sub [:wallet/current-viewing-account-collectibles-filtered
+                                       search-text])]
+    [collectibles-tab/view
+     {:collectibles collectibles-filtered
+      :filtered?    true}]))
+
+(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
@@ -94,9 +104,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,7 @@
    (->> 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/last-collectible-details
@@ -57,3 +58,14 @@
    (let [address (:address (first (:ownership collectible)))
          account (get-in wallet [:accounts address])]
      account)))
+
+(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))))