diff --git a/components/bsx/Gallery/Item/AvailableActions.vue b/components/bsx/Gallery/Item/AvailableActions.vue index 6cd8a603bb..4c07bc324c 100644 --- a/components/bsx/Gallery/Item/AvailableActions.vue +++ b/components/bsx/Gallery/Item/AvailableActions.vue @@ -28,7 +28,6 @@ diff --git a/components/rmrk/Gallery/Item/Sharing.vue b/components/rmrk/Gallery/Item/Sharing.vue index 2682f73e3f..24b7f54f7c 100644 --- a/components/rmrk/Gallery/Item/Sharing.vue +++ b/components/rmrk/Gallery/Item/Sharing.vue @@ -12,6 +12,13 @@ + + + + import { Component, Prop, Vue } from 'nuxt-property-decorator' import { IFrame, emptyIframe } from '../../types' +import { downloadImage } from '~/utils/download' const components = { ShowQRModal: () => import('@/components/shared/modals/ShowQRModal.vue'), @@ -92,7 +100,7 @@ const components = { export default class Sharing extends Vue { @Prop({ default: 'Check out this cool NFT on KodaDot' }) label!: string @Prop({ default: () => emptyIframe }) iframe!: IFrame - @Prop(Boolean) onlyCopyLink!: boolean + @Prop(Boolean) enableDownload!: boolean private active = false @@ -138,6 +146,10 @@ export default class Sharing extends Vue { this.$buefy.toast.open(message) } + get currentGalleryItemImage(): { image: string; name: string } { + return this.$store.getters['history/getCurrentlyViewedItem'] || {} + } + public async shareTooltip(): Promise { this.openFallbackShareTooltip() if (navigator.share) { @@ -154,6 +166,11 @@ export default class Sharing extends Vue { } } + protected downloadImage() { + const { image, name } = this.currentGalleryItemImage + image && downloadImage(image, name) + } + public openFallbackShareTooltip(): void { // only call this when share api is not available, example on web if (!navigator.share) { diff --git a/components/unique/Gallery/Item/AvailableActions.vue b/components/unique/Gallery/Item/AvailableActions.vue index 69dcba3189..3d3fa58b42 100644 --- a/components/unique/Gallery/Item/AvailableActions.vue +++ b/components/unique/Gallery/Item/AvailableActions.vue @@ -9,6 +9,7 @@ :type="iconType(action)[0]" outlined expanded + class="only-border-top" @click="handleAction(action)"> {{ action }} @@ -78,6 +79,7 @@ export default class AvailableActions extends mixins(RmrkVersionMixin) { @Prop() public nftId!: string @Prop(String) public collectionId!: string @Prop(Boolean) public frozen!: boolean + @Prop(Boolean) public isOwner!: boolean @Prop({ type: Array, default: () => [] }) public ipfsHashes!: string[] private selectedAction: NFTAction = NFTAction.NONE @@ -132,20 +134,6 @@ export default class AvailableActions extends mixins(RmrkVersionMixin) { ) } - get isOwner() { - this.$consola.log( - '{ currentOwnerId, accountId }', - this.currentOwnerId, - this.accountId - ) - - return ( - this.currentOwnerId && - this.accountId && - this.currentOwnerId === this.accountId - ) - } - get isAvailableToBuy() { const { price, accountId } = this return accountId && Number(price) > 0 @@ -311,3 +299,7 @@ export default class AvailableActions extends mixins(RmrkVersionMixin) { } } + + diff --git a/components/unique/Gallery/Item/GalleryItem.vue b/components/unique/Gallery/Item/GalleryItem.vue index 5d28068afd..043b464223 100644 --- a/components/unique/Gallery/Item/GalleryItem.vue +++ b/components/unique/Gallery/Item/GalleryItem.vue @@ -15,7 +15,7 @@

- +
@@ -72,6 +72,7 @@ - + @@ -119,6 +120,7 @@ import { resolveMedia, getSanitizer, } from '@/components/rmrk/utils' +import { isOwner } from '~/utils/account' import { emptyObject } from '@/utils/empty' import { notificationTypes, showNotification } from '@/utils/notification' @@ -141,6 +143,7 @@ import { Option } from '@polkadot/types' import { createTokenId, tokenIdToRoute } from '../../utils' import PrefixMixin from '~/utils/mixins/prefixMixin' import onApiConnect from '@/utils/api/general' +import AuthMixin from '~/utils/mixins/authMixin' @Component({ components: { @@ -161,7 +164,11 @@ import onApiConnect from '@/utils/api/general' orientation: Orientation, }, }) -export default class GalleryItem extends mixins(SubscribeMixin, PrefixMixin) { +export default class GalleryItem extends mixins( + SubscribeMixin, + PrefixMixin, + AuthMixin +) { private id = '' private collectionId = '' private nft: NFT = emptyObject() @@ -172,14 +179,14 @@ export default class GalleryItem extends mixins(SubscribeMixin, PrefixMixin) { public emotes: Emote[] = [] public message = '' - get accountId() { - return this.$store.getters.getAuthAddress - } - get emoteVisible() { return this.urlPrefix === 'rmrk' } + get isOwner(): boolean { + return isOwner(this.nft.currentOwner, this.accountId) + } + public async created() { this.checkId() this.fetchCollection() diff --git a/plugins/icons.ts b/plugins/icons.ts index e20a94fade..8a493abe1d 100644 --- a/plugins/icons.ts +++ b/plugins/icons.ts @@ -87,6 +87,7 @@ import { faChartLine, faListUl, faTable, + faDownload, } from '@fortawesome/free-solid-svg-icons' // throws error, idk why @@ -194,6 +195,7 @@ library.add( faWallet, faChartLine, faListUl, + faDownload, // Social faTwitter, diff --git a/styles/border.scss b/styles/border.scss new file mode 100644 index 0000000000..c01700aa58 --- /dev/null +++ b/styles/border.scss @@ -0,0 +1,5 @@ +.only-border-top { + border-bottom: none; + border-left: none; + border-right: none; +} diff --git a/utils/account.ts b/utils/account.ts index d49ec31b89..18e08b37ed 100644 --- a/utils/account.ts +++ b/utils/account.ts @@ -73,6 +73,13 @@ export const isSameAccount = ( return addressEq(address1, address2) } +export const isOwner = ( + account1?: KeyringAccount | string, + account2?: KeyringAccount | string +): boolean => { + return Boolean(account1 && account2 && isSameAccount(account1, account2)) +} + export const accountToEvm = (account: KeyringAccount | string): string => { const address = accountToAddress(account) return addressToEvm(address)?.toString() diff --git a/utils/shoppingActions.ts b/utils/shoppingActions.ts index 7c1bfb4eb8..318dcfc3bc 100644 --- a/utils/shoppingActions.ts +++ b/utils/shoppingActions.ts @@ -1,10 +1,6 @@ import { Interaction } from '@kodadot1/minimark' import { hasMarketplace } from './prefix' -enum OffChainActions { - DOWNLOAD = 'DOWNLOAD', -} - enum UniqueActions { DELEGATE = 'DELEGATE', FREEZE = 'FREEZE', @@ -17,10 +13,9 @@ enum BasiliskActions { SET_ROYALTY = 'SET_ROYALTY', } -export type ShoppingActions = Interaction | OffChainActions | BasiliskActions +export type ShoppingActions = Interaction | BasiliskActions export const ShoppingActions = { ...Interaction, - ...OffChainActions, ...BasiliskActions, } @@ -29,13 +24,11 @@ export const KeyboardValueToActionMap = { s: ShoppingActions.SEND, c: ShoppingActions.CONSUME, l: ShoppingActions.LIST, - d: ShoppingActions.DOWNLOAD, } export const ownerActions = [ ShoppingActions.SEND, ShoppingActions.CONSUME, - ShoppingActions.DOWNLOAD, ShoppingActions.LIST, ] @@ -113,7 +106,6 @@ export const iconResolver: Record = { [ShoppingActions.CONSUME]: ['is-danger'], [ShoppingActions.LIST]: ['is-light'], [ShoppingActions.BUY]: ['is-success is-dark'], - [ShoppingActions.DOWNLOAD]: ['is-warning'], [ShoppingActions.MAKE_OFFER]: ['is-orange'], }