Connect collectible overview page to backend (#17884)

src/status_im/ethereum/subscriptions.cljs

@@ -82,4 +82,7 @@
     "wallet-owned-collectibles-filtering-done" {:fx [[:dispatch
                                                       [:wallet/owned-collectibles-filtering-done
                                                        event]]]}
+    "wallet-get-collectibles-details-done"     {:fx [[:dispatch
+                                                      [:wallet/get-collectible-details-done
+                                                       event]]]}
     (log/warn ::unknown-wallet-event :type type :event event)))

src/status_im2/contexts/profile/config.cljs

@@ -8,8 +8,7 @@
 
 (defn login
   []
-  {;; Temporary fix until https://github.com/status-im/status-go/issues/3024 is
+  {;; Temporary fix until https://github.com/status-im/status-go/issues/3024 is resolved
-   ;; resolved
    :wakuV2Nameserver            "8.8.8.8"
    :openseaAPIKey               config/opensea-api-key
    :poktToken                   config/POKT_TOKEN

src/status_im2/contexts/wallet/collectible/style.cljs

@@ -4,10 +4,15 @@
   {:margin-top    100
    :margin-bottom 34})
 
-(def preview
+(def preview-container
   {:margin-horizontal 8
    :margin-top        12})
 
+(def preview
+  {:width         "100%"
+   :aspect-ratio  1
+   :border-radius 16})
+
 (def header
   {:margin-horizontal 20
    :margin-top        16
@@ -17,6 +22,9 @@
   {:flex-direction :row
    :margin-top     6})
 
+(def collection-avatar-container
+  {:margin-right 8})
+
 (def buttons-container
   {:flex-direction    :row
    :align-items       :stretch
@@ -50,13 +58,13 @@
   {:margin-left 6
    :flex        1})
 
-(def traits-section
+(def traits-title-container
-  {:margin-horizontal 20
+  {:margin-left 20
-   :margin-top        8})
+   :margin-top  8})
 
 (def traits-item
-  {:margin-horizontal 6
+  {:margin 6
-   :flex              1})
+   :flex   1})
 
 (def traits-container
   {:margin-horizontal 14

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

@@ -4,17 +4,18 @@
     [react-native.core :as rn]
     [status-im2.common.scroll-page.view :as scroll-page]
     [status-im2.contexts.wallet.collectible.style :as style]
-    [status-im2.contexts.wallet.common.temp :as temp]
+    [utils.i18n :as i18n]
-    [utils.i18n :as i18n]))
+    [utils.re-frame :as rf]))
 
 (defn header
-  [{:keys [name description collection-image]}]
+  [{:keys [name description collection-image-url]}]
   [rn/view {:style style/header}
    [quo/text
     {:weight :semi-bold
      :size   :heading-1} name]
-   [rn/view style/collection-container
+   [rn/view {:style style/collection-container}
-    [quo/collection-avatar {:image collection-image}]
+    [rn/view {:style style/collection-avatar-container}
+     [quo/collection-avatar {:image collection-image-url}]]
     [quo/text
      {:weight :semi-bold
       :size   :paragraph-1}
@@ -57,25 +58,26 @@
 
 (defn traits-section
   [traits]
-  [rn/view {:style style/traits-section}
+  (when (pos? (count traits))
-   [quo/section-label
+    [rn/view
-    {:section (i18n/label :t/traits)}]]
+     [quo/section-label
-
+      {:section         (i18n/label :t/traits)
-  [rn/flat-list
+       :container-style style/traits-title-container}]
-   {:render-fn               (fn [{:keys [title subtitle]}]
+     [rn/flat-list
-                               [rn/view {:style style/traits-item}
+      {:render-fn               (fn [{:keys [trait-type value]}]
-                                [quo/data-item
+                                  [quo/data-item
-                                 {:description :default
+                                   {:description     :default
-                                  :card?       true
+                                    :card?           true
-                                  :status      :default
+                                    :status          :default
-                                  :size        :default
+                                    :size            :default
-                                  :title       title
+                                    :title           trait-type
-                                  :subtitle    subtitle}]])
+                                    :subtitle        value
-    :data                    traits
+                                    :container-style style/traits-item}])
-    :key                     :collectibles-list
+       :data                    traits
-    :key-fn                  :id
+       :key                     :collectibles-list
-    :num-columns             2
+       :key-fn                  :id
-    :content-container-style style/traits-container}])
+       :num-columns             2
+       :content-container-style style/traits-container}]]))
 
 (defn info
   []
@@ -103,7 +105,8 @@
 
 (defn view
   []
-  (let [{:keys [name description image traits] :as props} temp/collectible-details]
+  (let [collectible-details                           (rf/sub [:wallet/last-collectible-details])
+        {:keys [name description preview-url traits]} collectible-details]
     [scroll-page/scroll-page
      {:navigate-back? true
       :height         148
@@ -112,12 +115,13 @@
                        :description description
                        :right-side  [{:icon-name :i/options
                                       :on-press  #(js/alert "pressed")}]
-                       :picture     image}}
+                       :picture     preview-url}}
      [rn/view {:style style/container}
-      [rn/image
+      [rn/view {:style style/preview-container}
-       {:source image
+       [rn/image
-        :style  style/preview}]
+        {:source preview-url
-      [header props]
+         :style  style/preview}]]
+      [header collectible-details]
       [cta-buttons]
       [tabs]
       [info]

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

@@ -21,11 +21,13 @@
         :style                   {:flex 1}
         :content-container-style {:align-items :center}
         :num-columns             2
-        :render-fn               (fn [{:keys [preview-url]}]
+        :render-fn               (fn [{:keys [preview-url id]}]
                                    [quo/collectible
                                     {:images   [preview-url]
-                                     :on-press #(rf/dispatch
+                                     :on-press (fn []
-                                                 [:navigate-to
+                                                 (rf/dispatch [:wallet/get-collectible-details id])
-                                                  :wallet-collectible])}])}])))
+                                                 (rf/dispatch
+                                                  [:navigate-to
+                                                   :wallet-collectible]))}])}])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -63,56 +63,6 @@
                           :percentage-change "0.00"
                           :fiat-change       "€0.00"}}])
 
-(def collectibles
-  [{:image (status.resources/get-mock-image :collectible1)
-    :id    1}
-   {:image (status.resources/get-mock-image :collectible2)
-    :id    2}
-   {:image (status.resources/get-mock-image :collectible3)
-    :id    3}
-   {:image (status.resources/get-mock-image :collectible4)
-    :id    4}
-   {:image (status.resources/get-mock-image :collectible5)
-    :id    5}
-   {:image (status.resources/get-mock-image :collectible6)
-    :id    6}])
-
-(def collectible-details
-  nil
-  #_{:name             "#5946"
-     :description      "Bored Ape Yacht Club"
-     :image            (status.resources/get-mock-image :collectible-monkey)
-     :collection-image (status.resources/get-mock-image :bored-ape)
-     :traits           [{:title    "Background"
-                         :subtitle "Blue"
-                         :id       1}
-                        {:title    "Clothes"
-                         :subtitle "Bayc T Black"
-                         :id       2}
-                        {:title    "Eyes"
-                         :subtitle "Sleepy"
-                         :id       3}
-                        {:title    "Fur"
-                         :subtitle "Black"
-                         :id       4}
-                        {:title    "Hat"
-                         :subtitle "Beanie"
-                         :id       5}
-                        {:title    "Mouth"
-                         :subtitle "Bored Pipe"
-                         :id       6}]})
-
-(def account-overview-state
-  {:current-value       "€0.00"
-   :account-name        "Account 1"
-   :account             :default
-   :customization-color :blue})
-
-(def network-names
-  [{:network-name :ethereum :short-name "eth"}
-   {:network-name :optimism :short-name "opt"}
-   {:network-name :arbitrum :short-name "arb1"}])
-
 (def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4")
 
 (def data-item-state

src/status_im2/contexts/wallet/events.cljs

@@ -223,6 +223,14 @@
 
 (rf/reg-event-fx :wallet/clear-stored-collectibles clear-stored-collectibles)
 
+(defn store-last-collectible-details
+  [{:keys [db]} [collectible]]
+  {:db (assoc-in db
+        [:wallet :last-collectible-details]
+        collectible)})
+
+(rf/reg-event-fx :wallet/store-last-collectible-details store-last-collectible-details)
+
 (rf/reg-event-fx
  :wallet/request-collectibles
  (fn [{:keys [db]} [{:keys [start-at-index new-request?]}]]
@@ -259,6 +267,32 @@
           [:wallet/request-collectibles
            {:start-at-index start-at-index}]])]})))
 
+(rf/reg-event-fx :wallet/get-collectible-details
+ (fn [_ [collectible-id]]
+   (let [request-id               0
+         collectible-id-converted (cske/transform-keys csk/->PascalCaseKeyword collectible-id)
+         request-params           [request-id [collectible-id-converted]]]
+     {:json-rpc/call [{:method   "wallet_getCollectiblesDetailsAsync"
+                       :params   request-params
+                       :on-error (fn [error]
+                                   (log/error "failed to request collectible"
+                                              {:event  :wallet/get-collectible-details
+                                               :error  error
+                                               :params request-params}))}]})))
+
+(rf/reg-event-fx :wallet/get-collectible-details-done
+ (fn [_ [{:keys [message]}]]
+   (let [response               (cske/transform-keys csk/->kebab-case-keyword
+                                                     (types/json->clj message))
+         {:keys [collectibles]} response
+         collectible            (first collectibles)]
+     (if collectible
+       {:fx
+        [[:dispatch [:wallet/store-last-collectible-details collectible]]]}
+       (log/error "failed to get collectible details"
+                  {:event    :wallet/get-collectible-details-done
+                   :response response})))))
+
 (rf/reg-event-fx :wallet/fetch-address-suggestions
  (fn [{:keys [db]} [address]]
    {:db (assoc db

src/status_im2/contexts/wallet/events_test.cljs

@@ -52,3 +52,14 @@
             effects     (events/clear-stored-collectibles {:db db})
             result-db   (:db effects)]
         (is (= result-db expected-db))))))
+
+(deftest store-last-collectible-details
+  (testing "store-last-collectible-details"
+    (let [db               {:wallet {}}
+          last-collectible {:description "Pandaria"
+                            :image-url   "https://..."}
+          expected-db      {:wallet {:last-collectible-details {:description "Pandaria"
+                                                                :image-url   "https://..."}}}
+          effects          (events/store-last-collectible-details {:db db} [last-collectible])
+          result-db        (:db effects)]
+      (is (= result-db expected-db)))))

src/status_im2/subs/wallet/collectibles.cljs

@@ -18,3 +18,9 @@
           (assoc collectible :preview-url (preview-url collectible)))
         (:collectibles wallet))))
 
+(re-frame/reg-sub
+ :wallet/last-collectible-details
+ :<- [:wallet]
+ (fn [wallet]
+   (let [last-collectible (:last-collectible-details wallet)]
+     (assoc last-collectible :preview-url (preview-url last-collectible)))))