Display collectible info

Author: vkjr

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
-   ;; resolved
+  {;; Temporary fix until https://github.com/status-im/status-go/issues/3024 is 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

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
-    [quo/collection-avatar {:image collection-image}]
+   [rn/view {:style style/collection-container}
+    [rn/view {:style style/collection-avatar-container}
+     [quo/collection-avatar {:image collection-image-url}]]
     [quo/text
      {:weight :semi-bold
       :size   :paragraph-1}
@@ -103,7 +104,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 +114,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
-       {:source image
-        :style  style/preview}]
-      [header props]
+      [rn/view {:style style/preview-container}
+       [rn/image
+        {:source preview-url
+         :style  style/preview}]]
+      [header collectible-details]
       [cta-buttons]
       [tabs]
       [info]

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

@@ -19,9 +19,11 @@
         :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
-                                                 [:navigate-to
-                                                  :wallet-collectible])}])}])))
+                                     :on-press (fn []
+                                                 (rf/dispatch [:wallet/get-collectible-details id])
+                                                 (rf/dispatch
+                                                  [:navigate-to
+                                                   :wallet-collectible]))}])}])))

src/status_im2/contexts/wallet/events.cljs

@@ -199,6 +199,20 @@
 
 (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)
+
+(defn clear-stored-last-collectible-details
+  [{:keys [db]}]
+  {:db (update db :wallet dissoc :last-collectible-details)})
+
+(rf/reg-event-fx :wallet/clear-stored-last-collectible-details clear-stored-last-collectible-details)
+
 (rf/reg-event-fx :wallet/request-collectibles
  (fn [{:keys [db]} [{:keys [start-at-index new-request?]}]]
    (let [request-id          0
@@ -234,6 +248,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/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)))))