Collectibles list on accounts page connected to backend (#17751)

* Collectibles list displayed

src/status_im/ethereum/subscriptions.cljs

@@ -74,9 +74,12 @@
             "blockNumber" blockNumber
             "accounts"    accounts)
   (case type
-    "new-transfers"              (new-transfers cofx blockNumber accounts)
+    "new-transfers"                            (new-transfers cofx blockNumber accounts)
-    "recent-history-fetching"    (recent-history-fetching-started cofx accounts)
+    "recent-history-fetching"                  (recent-history-fetching-started cofx accounts)
-    "recent-history-ready"       (recent-history-fetching-ended cofx event)
+    "recent-history-ready"                     (recent-history-fetching-ended cofx event)
-    "fetching-history-error"     (fetching-error cofx event)
+    "fetching-history-error"                   (fetching-error cofx event)
-    "non-archival-node-detected" (non-archival-node-detected cofx event)
+    "non-archival-node-detected"               (non-archival-node-detected cofx event)
+    "wallet-owned-collectibles-filtering-done" {:fx [[:dispatch
+                                                      [:wallet/owned-collectibles-filtering-done
+                                                       event]]]}
     (log/warn ::unknown-wallet-event :type type :event event)))

src/status_im2/common/log.cljs

@@ -1,5 +1,6 @@
 (ns status-im2.common.log
   (:require
+    [clojure.pprint :as p]
     [clojure.string :as string]
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
@@ -37,10 +38,14 @@
                                 string/lower-case
                                 keyword))
         (log/merge-config!
-         {:output-fn (fn [& data]
+         {:output-fn  (fn [& data]
-                       (let [res (apply log/default-output-fn data)]
+                        (let [res (apply log/default-output-fn data)]
-                         (add-log-entry res)
+                          (add-log-entry res)
-                         res))})
+                          res))
+          :middleware [(fn [data]
+                         (update data
+                                 :vargs
+                                 (partial mapv #(if (string? %) % (with-out-str (p/pprint %))))))]})
         (native-module/init-status-go-logging logging-params)))))
 
 (re-frame/reg-fx

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

@@ -3,14 +3,12 @@
     [quo.core :as quo]
     [react-native.core :as rn]
     [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab]
-    [status-im2.contexts.wallet.common.temp :as temp]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-
 (defn view
   []
-  (let [collectible-list temp/collectible-list]
+  (let [collectible-list (rf/sub [:wallet/collectibles])]
     (if (empty? collectible-list)
       [empty-tab/view
        {:title        (i18n/label :t/no-collectibles)
@@ -21,7 +19,9 @@
         :style                   {:flex 1}
         :content-container-style {:align-items :center}
         :num-columns             2
-        :render-fn               (fn [item] [quo/collectible
+        :render-fn               (fn [{:keys [preview-url]}]
-                                             {:images   (repeat 1 item)
+                                   [quo/collectible
-                                              :on-press #(rf/dispatch [:navigate-to
+                                    {:images   [preview-url]
-                                                                       :wallet-collectible])}])}])))
+                                     :on-press #(rf/dispatch
+                                                 [:navigate-to
+                                                  :wallet-collectible])}])}])))

src/status_im2/contexts/wallet/events.cljs

@@ -1,10 +1,15 @@
 (ns status-im2.contexts.wallet.events
   (:require
+    [camel-snake-kebab.core :as csk]
+    [camel-snake-kebab.extras :as cske]
+    [clojure.string :as string]
     [native-module.core :as native-module]
     [status-im2.common.data-store.wallet :as data-store]
     [taoensso.timbre :as log]
+    [utils.ethereum.chain :as chain]
     [utils.re-frame :as rf]
-    [utils.security.core :as security]))
+    [utils.security.core :as security]
+    [utils.transforms :as types]))
 
 (rf/defn get-wallet-token
   {:events [:wallet/get-wallet-token]}
@@ -95,3 +100,58 @@
                            data-store/<-rpc)
                      data)}]
      {:db (assoc db :wallet/networks network-data)})))
+
+(def collectibles-request-batch-size 1000)
+
+(defn displayable-collectible?
+  [{:keys [image-url animation-url]}]
+  (or (not (string/blank? animation-url))
+      (not (string/blank? image-url))))
+
+(defn store-collectibles
+  [{:keys [db]} [collectibles]]
+  (let [stored-collectibles      (get-in db [:wallet :collectibles])
+        displayable-collectibles (filter displayable-collectible? collectibles)]
+    {:db (assoc-in db
+          [:wallet :collectibles]
+          (reduce conj displayable-collectibles stored-collectibles))}))
+
+(rf/reg-event-fx :wallet/store-collectibles store-collectibles)
+
+(defn clear-stored-collectibles
+  [{:keys [db]}]
+  {:db (update db :wallet dissoc :collectibles)})
+
+(rf/reg-event-fx :wallet/clear-stored-collectibles clear-stored-collectibles)
+
+(rf/reg-event-fx :wallet/request-collectibles
+ (fn [{:keys [db]} [{:keys [start-at-index new-request?]}]]
+   (let [request-params [0
+                         [(chain/chain-id db)]
+                         (map :address (:profile/wallet-accounts db))
+                         start-at-index
+                         collectibles-request-batch-size]]
+     {:json-rpc/call [{:method     "wallet_filterOwnedCollectiblesAsync"
+                       :params     request-params
+                       :on-success #()
+                       :on-error   (fn [error]
+                                     (log/error "failed to request collectibles"
+                                                {:event  :wallet/request-collectibles
+                                                 :error  error
+                                                 :params request-params}))}]
+      :fx            (if new-request?
+                       [[:dispatch [:wallet/clear-stored-collectibles]]]
+                       [])})))
+
+(rf/reg-event-fx :wallet/owned-collectibles-filtering-done
+ (fn [_ [{:keys [message]}]]
+   (let [response                               (cske/transform-keys csk/->kebab-case-keyword
+                                                                     (types/json->clj message))
+         {:keys [collectibles has-more offset]} response
+         start-at-index                         (+ offset (count collectibles))]
+     {:fx
+      [[:dispatch [:wallet/store-collectibles collectibles]]
+       (when has-more
+         [:dispatch
+          [:wallet/request-collectibles
+           {:start-at-index start-at-index}]])]})))

src/status_im2/contexts/wallet/events_test.cljs

@@ -20,3 +20,35 @@
             effects     (events/clean-scanned-address {:db db})
             result-db   (:db effects)]
         (is (= result-db expected-db))))))
+
+(deftest store-collectibles
+  (testing "(displayable-collectible?) helper function"
+    (let [expected-results [[true {:image-url "https://..." :animation-url "https://..."}]
+                            [true {:image-url "" :animation-url "https://..."}]
+                            [true {:image-url nil :animation-url "https://..."}]
+                            [true {:image-url "https://..." :animation-url ""}]
+                            [true {:image-url "https://..." :animation-url nil}]
+                            [false {:image-url "" :animation-url nil}]
+                            [false {:image-url nil :animation-url nil}]
+                            [false {:image-url nil :animation-url ""}]
+                            [false {:image-url "" :animation-url ""}]]]
+      (doseq [[result collection] expected-results]
+        (is (= result (events/displayable-collectible? collection))))))
+  (testing "save-collectibles-request-details"
+    (let [db           {:wallet {}}
+          collectibles [{:image-url "https://..." :animation-url "https://..."}
+                        {:image-url "" :animation-url "https://..."}
+                        {:image-url "" :animation-url nil}]
+          expected-db  {:wallet {:collectibles [{:image-url "https://..." :animation-url "https://..."}
+                                                {:image-url "" :animation-url "https://..."}]}}
+          effects      (events/store-collectibles {:db db} [collectibles])
+          result-db    (:db effects)]
+      (is (= result-db expected-db)))))
+
+(deftest clear-stored-collectibles
+  (let [db {:wallet {:collectibles [{:id 1} {:id 2}]}}]
+    (testing "clear-stored-collectibles"
+      (let [expected-db {:wallet {}}
+            effects     (events/clear-stored-collectibles {:db db})
+            result-db   (:db effects)]
+        (is (= result-db expected-db))))))

src/status_im2/contexts/wallet/home/view.cljs

@@ -57,6 +57,9 @@
 (defn view
   []
   (rf/dispatch [:wallet/get-wallet-token])
+  (rf/dispatch [:wallet/request-collectibles
+                {:start-at-index 0
+                 :new-request?   true}])
   (let [selected-tab (reagent/atom (:id (first tabs-data)))]
     (fn []
       (let [accounts (rf/sub [:profile/wallet-accounts])

src/status_im2/subs/root.cljs

@@ -11,6 +11,7 @@
     status-im2.subs.pairing
     status-im2.subs.profile
     status-im2.subs.shell
+    status-im2.subs.wallet.collectibles
     status-im2.subs.wallet.networks
     status-im2.subs.wallet.wallet))
 
@@ -151,6 +152,7 @@
 (reg-root-key-sub :activity-center :activity-center)
 
 ;;wallet
+(reg-root-key-sub :wallet :wallet)
 (reg-root-key-sub :wallet/scanned-address :wallet/scanned-address)
 (reg-root-key-sub :wallet/create-account :wallet/create-account)
 (reg-root-key-sub :wallet/networks :wallet/networks)

src/status_im2/subs/wallet/collectibles.cljs

@@ -0,0 +1,20 @@
+(ns status-im2.subs.wallet.collectibles
+  (:require
+    [clojure.string :as string]
+    [re-frame.core :as re-frame]))
+
+(defn- preview-url
+  [{:keys [image-url animation-url animation-media-type]}]
+  (if (and (not (string/blank? animation-url))
+           (not= animation-media-type "image/svg+xml"))
+    animation-url
+    image-url))
+
+(re-frame/reg-sub
+ :wallet/collectibles
+ :<- [:wallet]
+ (fn [wallet]
+   (map (fn [collectible]
+          (assoc collectible :preview-url (preview-url collectible)))
+        (:collectibles wallet))))
+