Code style

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

Lint fix

Add translations for not found state

Add empty state image

Lint fix

Update wallet events and subs to handle collectibles per account

Additionally,
 - Move collectibles related events to a new events namespace (status-im.contexts.wallet.events.collectibles).
 - Update tests to consider collectibles per account.

Move `def`s to top of the file

Remove stale event

Fix subscription and remove unused require

WIP

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/events.cljs

@@ -64,6 +64,12 @@
    {:db (assoc-in db [:wallet :ui :send :amount] amount)
     :fx [[:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]}))
 
+(rf/reg-event-fx
+ :wallet/send-select-collectible
+ (fn [{:keys [db]} [{:keys [collectible stack-id]}]]
+   {:db (assoc-in db [:wallet :ui :send :collectible] collectible)
+    :fx [[:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]}))
+
 (rf/reg-event-fx :wallet/get-suggested-routes
  (fn [{:keys [db now]} [amount]]
    (let [wallet-address          (get-in db [:wallet :current-viewing-account-address])

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.send.select-asset.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -17,13 +18,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 +44,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]
+                              (rf/dispatch
+                               [:wallet/send-select-collectible {:stack-id    :wallet-select-asset
+                                                                 :collectible collectible}]))}]))
+
+(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 +109,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/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -22,10 +22,11 @@
       :accessibility-label :send-label}
      (i18n/label :t/send)]
     [quo/summary-tag
-     {:token        token-symbol
-      :label        (str amount " " token-symbol)
-      :type         :token
-      :image-source :eth}]]
+     {:label        (str amount " " token-symbol)
+      :type         :collectible
+      :image-source nil
+      ;:image-source :eth
+      }]]
    [rn/view
     {:style {:flex-direction :row
              :margin-top     4}}
@@ -140,8 +141,6 @@
                                :address             (utils/get-shortened-address (:address account))}
         user-props            {:full-name to-address
                                :address   (utils/get-shortened-address to-address)}]
-    (prn route)
-
     (fn [{:keys [theme]}]
       [rn/view {:style {:flex 1}}
        [floating-button-page/view

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

src/status_im/subs/wallet/send.cljs

@@ -1,15 +1,13 @@
 (ns status-im.subs.wallet.send
   (:require
-    [re-frame.core :as rf]
-    [utils.number]))
-
-(rf/reg-sub
- :wallet/send-tab
- :<- [:wallet/ui]
- (fn [ui]
-   (get-in ui [:send :select-address-tab])))
+    [re-frame.core :as rf]))
 
 (rf/reg-sub
  :wallet/wallet-send
  :<- [:wallet/ui]
  :-> :send)
+
+(rf/reg-sub
+ :wallet/send-tab
+ :<- [:wallet-send]
+ :-> :select-address-tab)

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",