Merge pull request #3373 from zhengow/main

feat: Keep top border only on action buttons for on-chain actions

components/bsx/Gallery/Item/AvailableActions.vue

@@ -28,7 +28,6 @@
 <script lang="ts">
 import { NFTAction } from '@/components/unique/NftUtils'
 import { createTokenId } from '@/components/unique/utils'
-import { isSameAccount } from '@/utils/account'
 import { bsxParamResolver, getApiCall } from '@/utils/gallery/abstractCalls'
 import AuthMixin from '@/utils/mixins/authMixin'
 import KeyboardEventsMixin from '@/utils/mixins/keyboardEventsMixin'
@@ -69,6 +68,7 @@ export default class AvailableActions extends mixins(
   @Prop(String) public nftId!: string
   @Prop(String) public collectionId!: string
   @Prop(Boolean) public isMakeOffersAllowed!: boolean
+  @Prop(Boolean) public isOwner!: boolean
   @Prop({ type: Array, default: () => [] }) public ipfsHashes!: string[]
 
   private selectedAction: ShoppingActions | '' = ''
@@ -94,20 +94,6 @@ export default class AvailableActions extends mixins(
     return false
   }
 
-  get isOwner(): boolean {
-    this.$consola.log(
-      '{ currentOwnerId, accountId }',
-      this.currentOwnerId,
-      this.accountId
-    )
-
-    return Boolean(
-      this.currentOwnerId &&
-        this.accountId &&
-        isSameAccount(this.currentOwnerId, this.accountId)
-    )
-  }
-
   get showSubmit() {
     return this.selectedAction && (!this.showMeta || this.metaValid)
   }

components/bsx/Gallery/Item/GalleryItem.vue

@@ -17,7 +17,7 @@
             </p>
           </div>
           <div class="column">
-            <Sharing onlyCopyLink />
+            <Sharing :enableDownload="isOwner" />
           </div>
         </div>
       </b-message>
@@ -82,6 +82,7 @@
                         <AvailableActions
                           ref="actions"
                           :account-id="accountId"
+                          :is-owner="isOwner"
                           :current-owner-id="nft.currentOwner"
                           :price="nft.price"
                           :nftId="id"
@@ -102,7 +103,7 @@
                       <span>{{ $t('general.balance') }}: </span>
                       <Money :value="balance" inline />
                     </p>
-                    <Sharing class="mb-4" />
+                    <Sharing :enableDownload="isOwner" class="mb-4" />
                   </div>
                 </div>
               </template>
@@ -151,6 +152,7 @@ import resolveQueryPath from '~/utils/queryPathResolver'
 import { getMetadata, getOwner, getPrice, hasAllPallets } from './utils'
 import { isEmpty } from '@kodadot1/minimark'
 import { royaltyOf } from '@/utils/royalty'
+import { isOwner } from '~/utils/account'
 import { generateNftImage } from '~/utils/seoImageGenerator'
 import { formatBsxBalanceEmptyOnZero } from '~/utils/format/balance'
 
@@ -217,6 +219,10 @@ export default class GalleryItem extends mixins(
     })
   }
 
+  get isOwner(): boolean {
+    return isOwner(this.nft.currentOwner, this.accountId)
+  }
+
   get balance(): string {
     return this.$store.getters.getAuthBalance
   }

components/moonsama/Gallery/Item/GalleryItem.vue

@@ -17,7 +17,7 @@
             </p>
           </div>
           <div class="column">
-            <Sharing onlyCopyLink />
+            <Sharing :enableDownload="isOwner" />
           </div>
         </div>
       </b-message>
@@ -78,7 +78,7 @@
                         <Auth class="mt-4" evm />
                       </p>
                     </div>
-                    <Sharing class="mb-4" />
+                    <Sharing :enableDownload="isOwner" class="mb-4" />
                   </div>
                 </div>
               </template>
@@ -120,6 +120,7 @@ import PrefixMixin from '~/utils/mixins/prefixMixin'
 import resolveQueryPath from '~/utils/queryPathResolver'
 import { isEmpty } from '@kodadot1/minimark'
 import { royaltyOf } from '@/utils/royalty'
+import { isOwner } from '~/utils/account'
 
 @Component<GalleryItem>({
   components: {
@@ -200,6 +201,10 @@ export default class GalleryItem extends mixins(
     this.fetchMetadata()
   }
 
+  get isOwner(): boolean {
+    return isOwner(this.nft.currentOwner, this.accountId)
+  }
+
   onImageError(e: any) {
     this.$consola.warn('Image error', e)
   }

components/rmrk/Gallery/AvailableActions.vue

@@ -5,7 +5,7 @@
       <ShareNetwork
         v-if="identity && identity.twitter && this.isOwner"
         tag="button"
-        class="button is-info is-dark is-outlined is-fullwidth twitter-btn"
+        class="button is-info is-dark is-outlined is-fullwidth twitter-btn only-border-top"
         network="twitter"
         :hashtags="'KodaDot'"
         :url="realworldFullPath"
@@ -18,6 +18,7 @@
           v-for="action in actions"
           :key="action"
           :type="iconType(action)[0]"
+          class="only-border-top"
           outlined
           @click="handleAction(action)"
           expanded>
@@ -27,6 +28,7 @@
       <template v-else-if="isForSale">
         <b-tooltip :active="buyDisabled" :label="$t('tooltip.buyDisabled')">
           <b-button
+            class="only-border-top"
             :type="iconType(ShoppingActions.BUY)[0]"
             :disabled="buyDisabled || !isAvailableToBuy"
             style="border-width: 2px"
@@ -78,7 +80,6 @@ import { get } from 'idb-keyval'
 import { identityStore } from '@/utils/idbStore'
 import { emptyObject } from '~/utils/empty'
 import { isAddress } from '@polkadot/util-crypto'
-import { downloadImage } from '@/utils/download'
 import { createInteraction, JustInteraction } from '@kodadot1/minimark'
 import {
   ShoppingActions,
@@ -97,7 +98,6 @@ const iconResolver: Record<string, DescriptionTuple> = {
   [ShoppingActions.CONSUME]: ['is-danger'],
   [ShoppingActions.LIST]: ['is-light'],
   [ShoppingActions.BUY]: ['is-success is-dark'],
-  [ShoppingActions.DOWNLOAD]: ['is-warning'],
 }
 
 const components = {
@@ -118,6 +118,7 @@ export default class AvailableActions extends mixins(
   @Prop() public originialOwner!: string
   @Prop() public price!: string
   @Prop() public nftId!: string
+  @Prop(Boolean) public isOwner!: boolean
   @Prop({ default: () => [] }) public ipfsHashes!: string[]
   @Prop({ default: false }) public buyDisabled!: boolean
   private selectedAction: ShoppingActions | '' = ''
@@ -208,11 +209,6 @@ export default class AvailableActions extends mixins(
         case ShoppingActions.SEND:
           this.addressInput?.focusInput()
           break
-        case ShoppingActions.DOWNLOAD: {
-          const { image, name } = this.currentGalleryItemImage
-          image && downloadImage(image, name)
-          break
-        }
         default:
           break
       }
@@ -238,20 +234,6 @@ export default class AvailableActions extends mixins(
     return this.selectedAction === ''
   }
 
-  get isOwner(): boolean {
-    this.$consola.log(
-      '{ currentOwnerId, accountId }',
-      this.currentOwnerId,
-      this.accountId
-    )
-
-    return Boolean(
-      this.currentOwnerId &&
-        this.accountId &&
-        this.currentOwnerId === this.accountId
-    )
-  }
-
   get isAvailableToBuy(): boolean {
     const { price, accountId } = this
     return Boolean(accountId && Number(price) > 0)
@@ -291,10 +273,6 @@ export default class AvailableActions extends mixins(
     return `${window.location.origin}${this.$route.fullPath}`
   }
 
-  get currentGalleryItemImage(): { image: string; name: string } {
-    return this.$store.getters['history/getCurrentlyViewedItem'] || {}
-  }
-
   @Watch('originialOwner', { immediate: true })
   async watchOwnerAddress(newAddress: Address, oldAddress: Address) {
     if (shouldUpdate(newAddress, oldAddress)) {
@@ -419,6 +397,7 @@ export default class AvailableActions extends mixins(
 }
 </script>
 <style scoped lang="scss">
+@import '@/styles/border';
 .joy {
   font-size: 16px;
   margin-top: 2px;

components/rmrk/Gallery/GalleryItem.vue

@@ -18,7 +18,7 @@
             </p>
           </div>
           <div class="column">
-            <Sharing onlyCopyLink />
+            <Sharing :enableDownload="isOwner" />
           </div>
         </div>
       </b-message>
@@ -86,6 +86,7 @@
                         <AvailableActions
                           ref="actions"
                           :current-owner-id="nft.currentOwner"
+                          :is-owner="isOwner"
                           :price="nft.price"
                           :originialOwner="nft.issuer"
                           :nft-id="nft.id"
@@ -105,7 +106,7 @@
                     </p>
                   </div>
 
-                  <Sharing class="mb-4" />
+                  <Sharing :enableDownload="isOwner" class="mb-4" />
                 </div>
               </div>
             </div>
@@ -160,6 +161,7 @@ import Orientation from '@/utils/directives/DeviceOrientation'
 import PrefixMixin from '~/utils/mixins/prefixMixin'
 import { Debounce } from 'vue-debounce-decorator'
 import AvailableActions from './AvailableActions.vue'
+import { isOwner } from '~/utils/account'
 
 @Component<GalleryItem>({
   name: 'GalleryItem',
@@ -298,6 +300,10 @@ export default class GalleryItem extends mixins(PrefixMixin) {
     this.priceChartData = data
   }
 
+  get isOwner(): boolean {
+    return isOwner(this.nft.currentOwner, this.accountId)
+  }
+
   @Debounce(500)
   private async updateEventList() {
     const { data } = await this.$apollo.query<{ nft }>({

components/rmrk/Gallery/Item/ActionList.vue

@@ -13,6 +13,7 @@
         "
         outlined
         expanded
+        class="only-border-top"
         @click="handleActionSelect(action)">
         {{ actionLabel(action) }}
       </b-button>
@@ -51,3 +52,7 @@ export default class ActionList extends Vue {
   }
 }
 </script>
+
+<style scoped lang="scss">
+@import '@/styles/border';
+</style>

components/rmrk/Gallery/Item/Sharing.vue

@@ -12,6 +12,13 @@
         <b-icon size="is-small" pack="fas" icon="link" />
       </b-button>
 
+      <b-button
+        v-if="enableDownload"
+        @click="downloadImage()"
+        type="is-primary is-bordered-light share-button">
+        <b-icon size="is-small" pack="fas" icon="download" />
+      </b-button>
+
       <b-tooltip
         position="is-left"
         class="share__tooltip"
@@ -82,6 +89,7 @@
 <script lang="ts">
 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<void> {
     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) {

components/unique/Gallery/Item/AvailableActions.vue

@@ -9,6 +9,7 @@
         :type="iconType(action)[0]"
         outlined
         expanded
+        class="only-border-top"
         @click="handleAction(action)">
         {{ action }}
       </b-button>
@@ -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) {
   }
 }
 </script>
+
+<style scoped lang="scss">
+@import '@/styles/border';
+</style>