From 0c1a18b444d9c7ff15a5ed0206c207f76c835922 Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Wed, 22 Nov 2023 19:40:26 +0000 Subject: [PATCH] Connect collectible overview page to backend (#17884) --- src/status_im/ethereum/subscriptions.cljs | 3 + src/status_im2/contexts/profile/config.cljs | 3 +- .../contexts/wallet/collectible/style.cljs | 20 ++++-- .../contexts/wallet/collectible/view.cljs | 64 ++++++++++--------- .../wallet/common/collectibles_tab/view.cljs | 10 +-- .../contexts/wallet/common/temp.cljs | 50 --------------- src/status_im2/contexts/wallet/events.cljs | 34 ++++++++++ .../contexts/wallet/events_test.cljs | 11 ++++ src/status_im2/subs/wallet/collectibles.cljs | 6 ++ 9 files changed, 109 insertions(+), 92 deletions(-) diff --git a/src/status_im/ethereum/subscriptions.cljs b/src/status_im/ethereum/subscriptions.cljs index 75f8e27ade..1dbb7dd498 100644 --- a/src/status_im/ethereum/subscriptions.cljs +++ b/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))) diff --git a/src/status_im2/contexts/profile/config.cljs b/src/status_im2/contexts/profile/config.cljs index 722fc9c5e7..5ad914493c 100644 --- a/src/status_im2/contexts/profile/config.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/collectible/style.cljs b/src/status_im2/contexts/wallet/collectible/style.cljs index c19c02b92e..50c6a0cb44 100644 --- a/src/status_im2/contexts/wallet/collectible/style.cljs +++ b/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 - {:margin-horizontal 20 - :margin-top 8}) +(def traits-title-container + {:margin-left 20 + :margin-top 8}) (def traits-item - {:margin-horizontal 6 - :flex 1}) + {:margin 6 + :flex 1}) (def traits-container {:margin-horizontal 14 diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index f9162c7265..eea88279f6 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/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} @@ -57,25 +58,26 @@ (defn traits-section [traits] - [rn/view {:style style/traits-section} - [quo/section-label - {:section (i18n/label :t/traits)}]] - - [rn/flat-list - {:render-fn (fn [{:keys [title subtitle]}] - [rn/view {:style style/traits-item} - [quo/data-item - {:description :default - :card? true - :status :default - :size :default - :title title - :subtitle subtitle}]]) - :data traits - :key :collectibles-list - :key-fn :id - :num-columns 2 - :content-container-style style/traits-container}]) + (when (pos? (count traits)) + [rn/view + [quo/section-label + {:section (i18n/label :t/traits) + :container-style style/traits-title-container}] + [rn/flat-list + {:render-fn (fn [{:keys [trait-type value]}] + [quo/data-item + {:description :default + :card? true + :status :default + :size :default + :title trait-type + :subtitle value + :container-style style/traits-item}]) + :data traits + :key :collectibles-list + :key-fn :id + :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 - {: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] diff --git a/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs b/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs index c2e1d3c4b6..4f0dddeedb 100644 --- a/src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs +++ b/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 - [:navigate-to - :wallet-collectible])}])}]))) + :on-press (fn [] + (rf/dispatch [:wallet/get-collectible-details id]) + (rf/dispatch + [:navigate-to + :wallet-collectible]))}])}]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index c322ffa7f7..864ed462e5 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/events.cljs b/src/status_im2/contexts/wallet/events.cljs index 5e83369eaf..70c545b856 100644 --- a/src/status_im2/contexts/wallet/events.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/events_test.cljs b/src/status_im2/contexts/wallet/events_test.cljs index 3b56919a84..b403575305 100644 --- a/src/status_im2/contexts/wallet/events_test.cljs +++ b/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))))) diff --git a/src/status_im2/subs/wallet/collectibles.cljs b/src/status_im2/subs/wallet/collectibles.cljs index b257b20d70..c2ad6bc265 100644 --- a/src/status_im2/subs/wallet/collectibles.cljs +++ b/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)))))