status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-16 19:54:45 +00:00
Code Issues Projects Releases Wiki Activity

chore(wallet): add options menu for collectibles

Browse Source
This commit is contained in:
Jamie Caprani 2024-04-10 17:50:07 +01:00 committed by GitHub
parent 7987e537c8
commit ec53f17897
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 160 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/quo/components/profile/collectible/view.cljs
View File

@ -124,9 +124,10 @@
[remaining-tiles (- (count remaining-images) 3)]])]])))) [remaining-tiles (- (count remaining-images) 3)]])]]))))
(defn collectible (defn collectible
[{:keys [images on-press]}] [{:keys [images on-press on-long-press]}]
[rn/view {:style style/tile-outer-container} [rn/view {:style style/tile-outer-container}
[rn/pressable [rn/pressable
{:on-press on-press {:on-press on-press
:style style/tile-inner-container} :on-long-press on-long-press
:style style/tile-inner-container}
[tile-container {:images images}]]]) [tile-container {:images images}]]])

5
src/status_im/config.cljs
View File

@ -29,6 +29,11 @@
(def mainnet-chain-explorer-link "https://etherscan.io/address/") (def mainnet-chain-explorer-link "https://etherscan.io/address/")
(def optimism-mainnet-chain-explorer-link "https://optimistic.etherscan.io/address/") (def optimism-mainnet-chain-explorer-link "https://optimistic.etherscan.io/address/")
(def arbitrum-mainnet-chain-explorer-link "https://arbiscan.io/address/") (def arbitrum-mainnet-chain-explorer-link "https://arbiscan.io/address/")
(def sepolia-chain-explorer-link "https://sepolia.etherscan.io/address/")
(def optimism-sepolia-chain-explorer-link "https://sepolia-optimistic.etherscan.io/address/")
(def arbitrum-sepolia-chain-explorer-link "https://sepolia.arbiscan.io/address/")
(def goerli-chain-explorer-link "https://goerli.etherscan.io/address/")
(def optimism-goerli-chain-explorer-link "https://goerli-optimistic.etherscan.io/address/")
(def opensea-api-key OPENSEA_API_KEY) (def opensea-api-key OPENSEA_API_KEY)
(def bootnodes-settings-enabled? (enabled? (get-config :BOOTNODES_SETTINGS_ENABLED "1"))) (def bootnodes-settings-enabled? (enabled? (get-config :BOOTNODES_SETTINGS_ENABLED "1")))
(def mailserver-confirmations-enabled? (enabled? (get-config :MAILSERVER_CONFIRMATIONS_ENABLED))) (def mailserver-confirmations-enabled? (enabled? (get-config :MAILSERVER_CONFIRMATIONS_ENABLED)))

10
src/status_im/contexts/wallet/account/tabs/view.cljs
View File

@ -4,6 +4,7 @@
[status-im.contexts.wallet.account.tabs.about.view :as about] [status-im.contexts.wallet.account.tabs.about.view :as about]
[status-im.contexts.wallet.account.tabs.assets.view :as assets] [status-im.contexts.wallet.account.tabs.assets.view :as assets]
[status-im.contexts.wallet.account.tabs.dapps.view :as dapps] [status-im.contexts.wallet.account.tabs.dapps.view :as dapps]
[status-im.contexts.wallet.collectible.options.view :as options-drawer]
[status-im.contexts.wallet.common.activity-tab.view :as activity] [status-im.contexts.wallet.common.activity-tab.view :as activity]
[status-im.contexts.wallet.common.collectibles-tab.view :as collectibles] [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
[status-im.contexts.wallet.common.empty-tab.view :as empty-tab] [status-im.contexts.wallet.common.empty-tab.view :as empty-tab]
@ -21,7 +22,14 @@
:on-end-reached #(rf/dispatch :on-end-reached #(rf/dispatch
[:wallet/request-collectibles-for-current-viewing-account]) [:wallet/request-collectibles-for-current-viewing-account])
:on-collectible-press (fn [{:keys [id]}] :on-collectible-press (fn [{:keys [id]}]
(rf/dispatch [:wallet/get-collectible-details id]))}] (rf/dispatch [:wallet/get-collectible-details id]))
:on-collectible-long-press (fn [{:keys [preview-url collectible-details]}]
(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[options-drawer/view
{:name (:name collectible-details)
:image (:uri preview-url)}])}]))}]
:activity [activity/view] :activity [activity/view]
:permissions [empty-tab/view :permissions [empty-tab/view
{:title (i18n/label :t/no-permissions) {:title (i18n/label :t/no-permissions)

41
src/status_im/contexts/wallet/collectible/options/view.cljs Normal file
View File

@ -0,0 +1,41 @@
(ns status-im.contexts.wallet.collectible.options.view
(:require
[quo.core :as quo]
[react-native.platform :as platform]
[status-im.contexts.wallet.common.utils.external-links :as external-links]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[utils.url :as url]))
(defn view
[{:keys [image name chain-id address]}]
(let [uri (url/replace-port image (rf/sub [:mediaserver/port]))]
[quo/action-drawer
[[{:icon :i/link
:accessibility-label :view-on-etherscan
:on-press (fn []
(rf/dispatch [:wallet/navigate-to-chain-explorer-from-bottom-sheet
(external-links/get-explorer-url-by-chain-id chain-id)
address]))
:label (i18n/label :t/view-on-eth)
:right-icon :i/external}]
[{:icon :i/save
:accessibility-label :save-image
:label (i18n/label :t/save-image-to-photos)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch
[:lightbox/save-image-to-gallery
uri
#(rf/dispatch [:toasts/upsert
{:id :random-id
:type :positive
:container-style {:bottom (when platform/android? 20)}
:text (i18n/label :t/photo-saved)}])]))}]
[{:icon :i/share
:accessibility-label :share-collectible
:label (i18n/label :t/share-collectible)
:on-press #(rf/dispatch [:wallet/share-collectible
{:in-sheet? true
:title name
:uri uri}])}]]]))

90
src/status_im/contexts/wallet/collectible/view.cljs
View File

@ -3,15 +3,14 @@
[quo.core :as quo] [quo.core :as quo]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.platform :as platform]
[react-native.svg :as svg] [react-native.svg :as svg]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.common.scroll-page.view :as scroll-page] [status-im.common.scroll-page.view :as scroll-page]
[status-im.contexts.wallet.collectible.options.view :as options-drawer]
[status-im.contexts.wallet.collectible.style :as style] [status-im.contexts.wallet.collectible.style :as style]
[status-im.contexts.wallet.collectible.tabs.view :as tabs] [status-im.contexts.wallet.collectible.tabs.view :as tabs]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf] [utils.re-frame :as rf]))
[utils.url :as url]))
(defn header (defn header
[collectible-name collection-name collection-image-url] [collectible-name collection-name collection-image-url]
@ -51,51 +50,6 @@
:label (i18n/label :t/about) :label (i18n/label :t/about)
:accessibility-label :about-tab}]) :accessibility-label :about-tab}])
(defn collectible-actions-sheet
[]
[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 options-drawer
[images index]
(let [{:keys [image]} (nth images index)
uri (url/replace-port image (rf/sub [:mediaserver/port]))]
[quo/action-drawer
[[{:icon :i/link
:accessibility-label :view-on-etherscan
:label (i18n/label :t/view-on-eth)}]
[{:icon :i/save
:accessibility-label :save-image
:label (i18n/label :t/save-image-to-photos)
:on-press (fn []
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch
[:lightbox/save-image-to-gallery
uri
#(rf/dispatch [:toasts/upsert
{:id :random-id
:type :positive
:container-style {:bottom (when platform/android? 20)}
:text (i18n/label :t/photo-saved)}])]))}]
[{:icon :i/share
:accessibility-label :share-collectible
:label (i18n/label :t/share-collectible)
:right-icon :i/external}]]]))
(defn f-view-internal (defn f-view-internal
[{:keys [theme] :as _props}] [{:keys [theme] :as _props}]
(let [selected-tab (reagent/atom :overview) (let [selected-tab (reagent/atom :overview)
@ -112,7 +66,17 @@
token-id (:token-id id) token-id (:token-id id)
{collection-image :image-url {collection-image :image-url
collection-name :name} collection-data collection-name :name} collection-data
{collectible-name :name} collectible-data] {collectible-name :name} collectible-data
collectible-image {:image preview-uri
:image-width 300
; collectibles don't have width/height
; but we need to pass something
; without it animation doesn't work smoothly
; and :border-radius not applied
:image-height 300
:id token-id
:header collectible-name
:description collection-name}]
(rn/use-unmount #(rf/dispatch [:wallet/clear-last-collectible-details])) (rn/use-unmount #(rf/dispatch [:wallet/clear-last-collectible-details]))
[scroll-page/scroll-page [scroll-page/scroll-page
{:navigate-back? true {:navigate-back? true
@ -123,7 +87,9 @@
:right-side [{:icon-name :i/options :right-side [{:icon-name :i/options
:on-press #(rf/dispatch :on-press #(rf/dispatch
[:show-bottom-sheet [:show-bottom-sheet
{:content collectible-actions-sheet {:content (fn [] [options-drawer/view
{:name collectible-name
:image preview-uri}])
:theme theme}])}] :theme theme}])}]
:picture preview-uri}} :picture preview-uri}}
[rn/view {:style style/container} [rn/view {:style style/container}
@ -136,24 +102,14 @@
(rf/dispatch (rf/dispatch
[:lightbox/navigate-to-lightbox [:lightbox/navigate-to-lightbox
token-id token-id
{:images [{:image preview-uri {:images [collectible-image]
:image-width 300 ; collectibles don't have
; width/height but we need
; to pass something
:image-height 300 ; without it animation
; doesn't work smoothly
; and :border-radius not
; applied
:id token-id
:header collectible-name
:description collection-name}]
:index 0 :index 0
:on-options-press (fn [images index] :on-options-press #(rf/dispatch [:show-bottom-sheet
(rf/dispatch [:show-bottom-sheet {:content
{:content (fn [] (fn []
[options-drawer [options-drawer/view
images {:name collectible-name
index])}]))}])))} :image preview-uri}])}])}])))}
(if svg? (if svg?
[rn/view [rn/view
{:style (assoc style/preview :overflow :hidden) {:style (assoc style/preview :overflow :hidden)

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

@ -8,7 +8,7 @@
[utils.i18n :as i18n])) [utils.i18n :as i18n]))
(defn- view-internal (defn- view-internal
[{:keys [theme collectibles filtered? on-collectible-press on-end-reached]}] [{:keys [theme collectibles filtered? on-collectible-press on-collectible-long-press on-end-reached]}]
(let [no-results-match-query? (and filtered? (empty? collectibles))] (let [no-results-match-query? (and filtered? (empty? collectibles))]
(cond (cond
no-results-match-query? no-results-match-query?
@ -33,9 +33,11 @@
:num-columns 2 :num-columns 2
:render-fn (fn [{:keys [preview-url] :as collectible}] :render-fn (fn [{:keys [preview-url] :as collectible}]
[quo/collectible [quo/collectible
{:images [preview-url] {:images [preview-url]
:on-press #(when on-collectible-press :on-press #(when on-collectible-press
(on-collectible-press collectible))}]) (on-collectible-press collectible))
:on-long-press #(when on-collectible-long-press
(on-collectible-long-press collectible))}])
:on-end-reached on-end-reached :on-end-reached on-end-reached
:on-end-reached-threshold 4}]))) :on-end-reached-threshold 4}])))

32
src/status_im/contexts/wallet/common/utils/external_links.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns status-im.contexts.wallet.common.utils.external-links
(:require [status-im.config :as config]
[status-im.constants :as constants]))
(defn get-explorer-url-by-chain-id
[chain-id]
(cond
(= chain-id constants/ethereum-mainnet-chain-id)
config/mainnet-chain-explorer-link
(= chain-id constants/arbitrum-mainnet-chain-id)
config/arbitrum-mainnet-chain-explorer-link
(= chain-id constants/optimism-mainnet-chain-id)
config/optimism-mainnet-chain-explorer-link
(= chain-id constants/ethereum-goerli-chain-id)
config/goerli-chain-explorer-link
(= chain-id constants/optimism-goerli-chain-id)
config/optimism-goerli-chain-explorer-link
(= chain-id constants/ethereum-sepolia-chain-id)
config/sepolia-chain-explorer-link
(= chain-id constants/arbitrum-sepolia-chain-id)
config/arbitrum-sepolia-chain-explorer-link
(= chain-id constants/optimism-sepolia-chain-id)
config/optimism-sepolia-chain-explorer-link
:else config/mainnet-chain-explorer-link))

22
src/status_im/contexts/wallet/events/collectibles.cljs
View File

@ -182,3 +182,25 @@
:wallet/clear-last-collectible-details :wallet/clear-last-collectible-details
(fn [{:keys [db]}] (fn [{:keys [db]}]
{:db (update-in db [:wallet] dissoc :last-collectible-details)})) {:db (update-in db [:wallet] dissoc :last-collectible-details)}))
(rf/reg-event-fx :wallet/trigger-share-collectible
(fn [_ [{:keys [title uri]}]]
{:fx [[:effects.share/open
{:title title
:message title
:url uri}]]}))
(rf/reg-event-fx :wallet/share-collectible
(fn [_ [{:keys [title uri in-sheet?]}]]
(if in-sheet?
{:fx [[:dispatch
[:hide-bottom-sheet]]
[:dispatch-later
{:ms 600
:dispatch [:wallet/trigger-share-collectible
{:title title
:uri uri}]}]]}
{:fx [[:dispatch
[:wallet/trigger-share-collectible
{:title title
:uri uri}]]]})))

22
src/status_im/contexts/wallet/home/tabs/view.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.contexts.wallet.home.tabs.view (ns status-im.contexts.wallet.home.tabs.view
(:require (:require
[react-native.core :as rn] [react-native.core :as rn]
[status-im.contexts.wallet.collectible.options.view :as options-drawer]
[status-im.contexts.wallet.common.activity-tab.view :as activity] [status-im.contexts.wallet.common.activity-tab.view :as activity]
[status-im.contexts.wallet.common.collectibles-tab.view :as collectibles] [status-im.contexts.wallet.common.collectibles-tab.view :as collectibles]
[status-im.contexts.wallet.home.tabs.assets.view :as assets] [status-im.contexts.wallet.home.tabs.assets.view :as assets]
@ -16,8 +17,21 @@
(case selected-tab (case selected-tab
:assets [assets/view] :assets [assets/view]
:collectibles [collectibles/view :collectibles [collectibles/view
{:collectibles collectible-list {:collectibles collectible-list
:on-end-reached request-collectibles :on-collectible-long-press (fn [{:keys [preview-url collectible-details id]}]
:on-collectible-press (fn [{:keys [id]}] (let [chain-id (get-in id [:contract-id :chain-id])
(rf/dispatch [:wallet/get-collectible-details id]))}] address (get-in id [:contract-id :address])]
(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[options-drawer/view
{:chain-id chain-id
:address address
:name (:name
collectible-details)
:image (:uri
preview-url)}])}])))
:on-end-reached request-collectibles
:on-collectible-press (fn [{:keys [id]}]
(rf/dispatch [:wallet/get-collectible-details id]))}]
[activity/view])])) [activity/view])]))