status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Connect collectible overview page to backend (#17884)

This commit is contained in:
Volodymyr Kozieiev 2023-11-22 19:40:26 +00:00 committed by GitHub
parent 73e9f67dbd
commit 0c1a18b444
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 109 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/ethereum/subscriptions.cljs
View File

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

3
src/status_im2/contexts/profile/config.cljs
View File

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

20
src/status_im2/contexts/wallet/collectible/style.cljs
View File

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

64
src/status_im2/contexts/wallet/collectible/view.cljs
View File

@ -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]

10
src/status_im2/contexts/wallet/common/collectibles_tab/view.cljs
View File

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

50
src/status_im2/contexts/wallet/common/temp.cljs
View File

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

34
src/status_im2/contexts/wallet/events.cljs
View File

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

11
src/status_im2/contexts/wallet/events_test.cljs
View File

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

6
src/status_im2/subs/wallet/collectibles.cljs
View File

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