From 2a5c102b1c08b396a54db394d027a79e01358d4c Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Fri, 15 Dec 2023 15:37:08 +0000 Subject: [PATCH] Add collectible menu (#18185) --- .../contexts/wallet/collectible/view.cljs | 50 +++++++++++++++---- src/status_im2/contexts/wallet/events.cljs | 6 ++- .../contexts/wallet/home/style.cljs | 14 +++++- src/status_im2/contexts/wallet/home/view.cljs | 14 ++---- translations/en.json | 6 ++- 5 files changed, 67 insertions(+), 23 deletions(-) diff --git a/src/status_im2/contexts/wallet/collectible/view.cljs b/src/status_im2/contexts/wallet/collectible/view.cljs index de1b7facb0..4e62dbe5e9 100644 --- a/src/status_im2/contexts/wallet/collectible/view.cljs +++ b/src/status_im2/contexts/wallet/collectible/view.cljs @@ -3,6 +3,7 @@ [clojure.string :as string] [quo.core :as quo] [quo.foundations.resources :as quo.resources] + [quo.theme :as quo.theme] [react-native.core :as rn] [status-im2.common.scroll-page.view :as scroll-page] [status-im2.contexts.wallet.collectible.style :as style] @@ -10,11 +11,11 @@ [utils.re-frame :as rf])) (defn header - [{:keys [name description] :as _collectible-details} collection-image-url] + [collectible-name description collection-image-url] [rn/view {:style style/header} [quo/text {:weight :semi-bold - :size :heading-1} name] + :size :heading-1} collectible-name] [rn/view {:style style/collection-container} [rn/view {:style style/collection-avatar-container} [quo/collection-avatar {:image collection-image-url}]] @@ -86,7 +87,8 @@ (let [network (rf/sub [:wallet/network-details-by-chain-id chain-id]) network-keyword (get network :network-name) - network-name (string/capitalize (name network-keyword))] + network-name (when network-keyword + (string/capitalize (name network-keyword)))] [rn/view {:style style/info-container} [rn/view {:style style/account} @@ -110,29 +112,55 @@ :subtitle network-name :subtitle-type :network}]]])) -(defn view +(defn collectible-actions-sheet [] - (let [collectible (rf/sub [:wallet/last-collectible-details]) + [quo/action-drawer + [[{:icon :i/messages + :accessibility-label :share-opensea-link + :label (i18n/label :t/share-opensea-link)} + {:icon :i/link + :accessibility-label :view-on-eth + :label (i18n/label :t/view-on-eth)} + {:icon :i/download + :accessibility-label :save-image-to-photos + :label (i18n/label :t/save-image-to-photos)} + {:icon :i/copy + :accessibility-label :copy-all-details + :label (i18n/label :t/copy-all-details)} + {:icon :i/share + :accessibility-label :share-details + :label (i18n/label :t/share-details)}]]]) + +(defn view-internal + [{:keys [theme] :as _props}] + (let [collectible (rf/sub [:wallet/last-collectible-details]) {:keys [collectible-data preview-url - collection-data]} collectible - {:keys [traits description]} collectible-data - chain-id (rf/sub [:wallet/last-collectible-chain-id])] + collection-data]} collectible + {traits :traits + collectible-name :name + description :description} collectible-data + chain-id (rf/sub [:wallet/last-collectible-chain-id])] [scroll-page/scroll-page {:navigate-back? true :height 148 :page-nav-props {:type :title-description - :title name + :title collectible-name :description description :right-side [{:icon-name :i/options - :on-press #(js/alert "pressed")}] + :on-press #(rf/dispatch + [:show-bottom-sheet + {:content collectible-actions-sheet + :theme theme}])}] :picture preview-url}} [rn/view {:style style/container} [rn/view {:style style/preview-container} [rn/image {:source preview-url :style style/preview}]] - [header collectible-data (:image-url collection-data)] + [header collectible-name description (:image-url collection-data)] [cta-buttons] [tabs] [info chain-id] [traits-section traits]]])) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/events.cljs b/src/status_im2/contexts/wallet/events.cljs index 8fe50930da..df60a6e86d 100644 --- a/src/status_im2/contexts/wallet/events.cljs +++ b/src/status_im2/contexts/wallet/events.cljs @@ -67,6 +67,10 @@ db (data-store/rpc->accounts wallet-accounts)) :fx [[:dispatch [:wallet/get-wallet-token]] + [:dispatch + [:wallet/request-collectibles + {:start-at-index 0 + :new-request? true}]] (when new-account? [:dispatch [:wallet/navigate-to-new-account navigate-to-account]])]}))) @@ -276,7 +280,7 @@ :max-cache-age-seconds max-cache-age-seconds} request-params [request-id [(chain/chain-id db)] - (map :address (:profile/wallet-accounts db)) + (keys (get-in db [:wallet :accounts])) collectibles-filter start-at-index collectibles-request-batch-size diff --git a/src/status_im2/contexts/wallet/home/style.cljs b/src/status_im2/contexts/wallet/home/style.cljs index b0f065e298..7d13643240 100644 --- a/src/status_im2/contexts/wallet/home/style.cljs +++ b/src/status_im2/contexts/wallet/home/style.cljs @@ -1,4 +1,6 @@ -(ns status-im2.contexts.wallet.home.style) +(ns status-im2.contexts.wallet.home.style + (:require + [react-native.safe-area :as safe-area])) (def tabs {:padding-horizontal 20 @@ -23,3 +25,13 @@ {:justify-content :center :flex 1 :margin-bottom 44}) + +(def separator + {:width 12}) + +(def selected-tab-container + {:padding-horizontal 8}) + +(def home-container + {:margin-top (safe-area/get-top) + :flex 1}) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index b40c110eea..286a48d539 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -2,8 +2,8 @@ (:require [quo.core :as quo] [react-native.core :as rn] - [react-native.safe-area :as safe-area] [reagent.core :as reagent] + [status-im.ui.screens.wallet.components.styles :as styles] [status-im2.common.home.top-nav.view :as common.top-nav] [status-im2.contexts.wallet.common.activity-tab.view :as activity] [status-im2.contexts.wallet.common.collectibles-tab.view :as collectibles] @@ -40,16 +40,12 @@ (defn view [] - (rf/dispatch [:wallet/request-collectibles - {:start-at-index 0 - :new-request? true}]) - (let [top (safe-area/get-top) - selected-tab (reagent/atom (:id (first tabs-data)))] + (let [selected-tab (reagent/atom (:id (first tabs-data)))] (fn [] (let [networks (rf/sub [:wallet/network-details]) account-cards-data (rf/sub [:wallet/account-cards-data]) cards (conj account-cards-data (new-account-card-data))] - [rn/view {:style {:margin-top top :flex 1}} + [rn/view {:style style/home-container} [common.top-nav/view] [rn/view {:style style/overview-container} [quo/wallet-overview (temp/wallet-overview-state networks)]] @@ -59,7 +55,7 @@ :content-container-style style/accounts-list-container :data cards :horizontal true - :separator [rn/view {:style {:width 12}}] + :separator [rn/view {:style styles/separator}] :render-fn quo/account-card :shows-horizontal-scroll-indicator false}] [quo/tabs @@ -73,6 +69,6 @@ {:render-fn quo/token-value :data temp/tokens :key :assets-list - :content-container-style {:padding-horizontal 8}}] + :content-container-style style/selected-tab-container}] :collectibles [collectibles/view] [activity/view])])))) diff --git a/translations/en.json b/translations/en.json index 058f6e6a5c..864a0eee22 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2429,5 +2429,9 @@ "backup-step-4": "I know I can only see it once", "reveal-phrase": "Reveal phrase", "i-have-written": "I have written it down on paper", - "next-you-will": "Next, you will be asked to confirm the position of certain words in your recovery phrase" + "next-you-will": "Next, you will be asked to confirm the position of certain words in your recovery phrase", + "share-opensea-link": "Share OpenSea link", + "save-image-to-photos": "Save image to Photos", + "copy-all-details": "Copy all details", + "share-details": "Share details" }