diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index 4e62dbe5e94b..34bf56a73085 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/src/status_im2/contexts/wallet/collectible/view.cljs @@ -5,8 +5,10 @@ [quo.foundations.resources :as quo.resources] [quo.theme :as quo.theme] [react-native.core :as rn] + [reagent.core :as reagent] [status-im2.common.scroll-page.view :as scroll-page] [status-im2.contexts.wallet.collectible.style :as style] + [status-im2.contexts.wallet.temp :as temp] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -40,24 +42,19 @@ :icon-left :i/opensea} (i18n/label :t/opensea)]]) -(defn tabs - [] - [quo/tabs - {:size 32 - :style style/tabs - :scrollable? true - :data [{:id :overview - :label (i18n/label :t/overview) - :accessibility-label :overview-tab} - {:id :activity - :label (i18n/label :t/activity) - :accessibility-label :activity-tab} - {:id :permissions - :label (i18n/label :t/permissions) - :accessibility-label :permissions-tab} - {:id :about - :label (i18n/label :t/about) - :accessibility-label :about-tab}]}]) +(def tabs-data + [{:id :overview + :label (i18n/label :t/overview) + :accessibility-label :overview-tab} + {:id :activity + :label (i18n/label :t/activity) + :accessibility-label :activity-tab} + {:id :permissions + :label (i18n/label :t/permissions) + :accessibility-label :permissions-tab} + {:id :about + :label (i18n/label :t/about) + :accessibility-label :about-tab}]) (defn traits-section [traits] @@ -82,6 +79,21 @@ :num-columns 2 :content-container-style style/traits-container}]])) +(defn activity-item + [item] + [:<> + [quo/divider-date (:timestamp item)] + [quo/wallet-activity + (merge {:on-press #(js/alert "Item pressed")} + item)]]) + +(defn activity-section + [] + [rn/flat-list + {:data temp/collectible-activities + :style {:flex 1} + :render-fn activity-item}]) + (defn info [chain-id] (let [network (rf/sub [:wallet/network-details-by-chain-id @@ -112,6 +124,25 @@ :subtitle network-name :subtitle-type :network}]]])) +(defn tabs + [_] + (let [selected-tab (reagent/atom (:id (first tabs-data)))] + (fn [{:keys [traits chain-id] :as _props}] + [:<> + [quo/tabs + {:size 32 + :style style/tabs + :scrollable? true + :default-active @selected-tab + :data tabs-data + :on-change #(reset! selected-tab %)}] + (condp = @selected-tab + :overview [:<> + [info chain-id] + [traits-section traits]] + :activity [activity-section] + [rn/view])]))) + (defn collectible-actions-sheet [] [quo/action-drawer @@ -159,8 +190,8 @@ :style style/preview}]] [header collectible-name description (:image-url collection-data)] [cta-buttons] - [tabs] - [info chain-id] - [traits-section traits]]])) + [tabs + {:traits traits + :chain-id chain-id}]]])) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/temp.cljs b/src/status_im2/contexts/wallet/temp.cljs index 7262e2b10679..be5e9ece52c2 100644 --- a/src/status_im2/contexts/wallet/temp.cljs +++ b/src/status_im2/contexts/wallet/temp.cljs @@ -1,5 +1,6 @@ (ns status-im2.contexts.wallet.temp (:require [clojure.string :as string] + [quo.foundations.resources :as quo.resources] [status-im2.common.resources :as resources] [status-im2.contexts.wallet.item-types :as types])) @@ -57,3 +58,51 @@ (let [all-addresses [address-local-suggestion-saved-address-mock address-local-suggestion-mock]] (vec (filter #(string/starts-with? (:address %) substring) all-addresses)))) + +(def collectible-activities + [{:transaction :receive + :timestamp "Today 22:20" + :status :finalised + :counter 1 + :first-tag {:size 24 + :type :collectible + :collectible (resources/mock-images :collectible) + :collectible-name "Collectible" + :collectible-number "123"} + :second-tag-prefix :t/from + :second-tag {:size 24 + :type :default + :full-name "Aretha Gosling" + :profile-picture (resources/mock-images :user-picture-female2)} + :third-tag-prefix :t/to + :third-tag {:size 24 + :type :account + :account-name "Piggy bank" + :emoji "🐷"} + + :fourth-tag-prefix :t/via + :fourth-tag {:size 24 + :type :network + :network-logo (quo.resources/get-network :ethereum) + :network-name "Mainnet"} + } + {:transaction :mint + :timestamp "Yesterday" + :status :finalised + :counter 1 + :first-tag {:size 24 + :type :collectible + :collectible (resources/mock-images :collectible) + :collectible-name "Collectible" + :collectible-number "123"} + :second-tag-prefix :t/at + :second-tag + {:size 24 + :type :address + :address + "0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"} + :third-tag-prefix :t/on + :third-tag {:size 24 + :type :network + :network-logo (quo.resources/get-network :ethereum) + :network-name "Mainnet"}}])