Merge pull request #4540 from roiLeo/feature/offer/withdraw

🔧 bsx withdraw offer as owner
kodadot · Jan 1, 2023 · 9673691 · 9673691
2 parents d2f92bb + 0ccdf99
commit 9673691
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 46 deletions.
diff --git a/components/bsx/Offer/MyOffer.vue b/components/bsx/Offer/MyOffer.vue
@@ -66,13 +66,13 @@
           type="is-orange"
           outlined
           icon-left="times"
-          @click="onClick(props.row)" />
+          @click="onClick(props.row, true)" />
         <b-button
           v-else
           type="is-success"
           outlined
           icon-left="money-bill"
-          @click="onClick(props.row)" />
+          @click="onClick(props.row, false)" />
       </b-table-column>
       <b-table-column
         v-slot="props"
@@ -119,7 +119,7 @@ const components = {
   filters: { formatDistanceToNow },
 })
 export default class MyOffer extends mixins(PrefixMixin, OfferMixin) {
-  protected offers: Offer[] = []
+  public offers: Offer[] = []
   public destinationAddress = ''
   @Prop({ type: String, default: '' }) public address!: string
   @Prop({ type: Boolean, default: false }) public hideHeading!: boolean
@@ -141,11 +141,11 @@ export default class MyOffer extends mixins(PrefixMixin, OfferMixin) {
     }
   }
 
-  public onClick = async (offer: Offer) => {
+  public onClick = async (offer: Offer, withdraw: boolean) => {
     const { caller, nft } = offer
     const { id: collectionId, item } = tokenIdToRoute(nft.id)
     this.isLoading = true
-    await this.submit(caller, item, collectionId, this.fetchMyOffers)
+    await this.submit(caller, item, collectionId, withdraw, this.fetchMyOffers)
   }
 
   @Emit('offersIncoming')

diff --git a/components/bsx/Offer/OfferList.vue b/components/bsx/Offer/OfferList.vue
@@ -16,12 +16,12 @@
 import { Component, Emit, Prop, mixins } from 'nuxt-property-decorator'
 import { isSameAccount } from '~/utils/account'
 import { Offer, OfferResponse } from './types'
-import PrefixMixin from '~/utils/mixins/prefixMixin'
 import { createTokenId } from '~/components/unique/utils'
 import offerListByNftId from '@/queries/subsquid/bsx/offerListByNftId.graphql'
 import SubscribeMixin from '~/utils/mixins/subscribeMixin'
 import UseApiMixin from '~/utils/mixins/useApiMixin'
 import OfferMixin from '~/utils/mixins/offerMixin'
+import PrefixMixin from '~/utils/mixins/prefixMixin'
 
 const components = {
   Loader: () => import('@/components/shared/Loader.vue'),
@@ -37,8 +37,8 @@ export default class OfferList extends mixins(
   UseApiMixin,
   OfferMixin
 ) {
-  protected offers: Offer[] = []
-  protected total = 0
+  public offers: Offer[] = []
+  public total = 0
   @Prop(String) public currentOwnerId!: string
   @Prop(String) public collectionId!: string
   @Prop(String) public nftId!: string
@@ -51,15 +51,7 @@ export default class OfferList extends mixins(
     )
   }
 
-  // fetch() {
-  //   this.fetchOffers()
-  // }
-
-  get tokenId(): [string, string] {
-    return [this.collectionId, this.nftId]
-  }
-
-  public mounted() {
+  fetch() {
     this.$apollo.addSmartQuery<OfferResponse>('offers', {
       client: this.urlPrefix,
       query: offerListByNftId,
@@ -98,9 +90,15 @@ export default class OfferList extends mixins(
     }
   }
 
-  public async onOfferSelected(maker: string) {
+  public async onOfferSelected(data: { caller: string; withdraw: boolean }) {
     const { collectionId, nftId } = this
-    await this.submit(maker, nftId, collectionId, this.fetchOffers)
+    await this.submit(
+      data.caller,
+      nftId,
+      collectionId,
+      data.withdraw,
+      this.fetchOffers
+    )
   }
 }
 </script>
diff --git a/components/bsx/Offer/OfferTable.vue b/components/bsx/Offer/OfferTable.vue
@@ -99,23 +99,26 @@
         :label="$t('offer.action')"
         width="120"
         sortable>
-        <b-button
-          v-if="props.row.caller === accountId"
-          type="is-orange"
-          outlined
-          icon-left="times"
-          @click="tellFrens(props.row.caller)" />
-        <b-tooltip
-          v-else-if="isOwner"
-          :label="$t('offer.expired')"
-          :active="calcExpirationTime(props.row.expiration) === 'expired'">
+        <div class="buttons">
+          <b-tooltip
+            v-if="isOwner"
+            :label="$t('offer.expired')"
+            :active="calcExpirationTime(props.row.expiration) === 'expired'"
+            class="mr-2">
+            <b-button
+              type="is-success"
+              outlined
+              icon-left="money-bill"
+              :disabled="calcExpirationTime(props.row.expiration) === 'expired'"
+              @click="tellFrens(props.row.caller, false)" />
+          </b-tooltip>
           <b-button
-            type="is-success"
+            v-if="props.row.caller === accountId || isOwner"
+            type="is-orange"
             outlined
-            icon-left="money-bill"
-            :disabled="calcExpirationTime(props.row.expiration) === 'expired'"
-            @click="tellFrens(props.row.caller)" />
-        </b-tooltip>
+            icon-left="times"
+            @click="tellFrens(props.row.caller, true)" />
+        </div>
       </b-table-column>
       <b-table-column
         v-if="isBsxStats"
@@ -154,6 +157,7 @@ import { formatDistanceToNow } from 'date-fns'
 
 import { Offer } from './types'
 import OfferMixin from '@/utils/mixins/offerMixin'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 import { getKusamaAssetId } from '@/utils/api/bsx/query'
 
 const components = {
@@ -163,7 +167,7 @@ const components = {
 }
 
 @Component({ components, filters: { formatDistanceToNow } })
-export default class OfferTable extends mixins(OfferMixin) {
+export default class OfferTable extends mixins(OfferMixin, PrefixMixin) {
   @Prop({ type: Array, default: () => emptyArray<Attribute>() })
   public offers!: Offer[]
   @Prop(Boolean) public isOwner!: boolean
@@ -173,14 +177,14 @@ export default class OfferTable extends mixins(OfferMixin) {
   @Prop({ type: Boolean, default: false }) public displayCollection!: boolean
   public currentBlock = 0
   public itemsPerPage = 20
-  private currentPage = parseInt(this.$route.query?.page as string) || 1
+  public currentPage = parseInt(this.$route.query?.page as string) || 1
 
   @Emit('select')
-  tellFrens(caller: string) {
-    return caller
-  }
-  get urlPrefix() {
-    return this.$store.getters.currentUrlPrefix
+  tellFrens(caller: string, withdraw: boolean) {
+    return {
+      caller,
+      withdraw,
+    }
   }
 
   get assetId() {

diff --git a/utils/mixins/offerMixin.ts b/utils/mixins/offerMixin.ts
@@ -1,6 +1,5 @@
 import { Component, mixins } from 'nuxt-property-decorator'
 
-import { isSameAccount } from '~/utils/account'
 import AuthMixin from '~/utils/mixins/authMixin'
 import MetaTransactionMixin from '~/utils/mixins/metaMixin'
 import { notificationTypes, showNotification } from '~/utils/notification'
@@ -78,27 +77,29 @@ export default class OfferMixin extends mixins(
     return endDate(this.calcSecondsToBlock(expirationBlock))
   }
 
-  public isExpired(expirationBlock): boolean {
+  public isExpired(expirationBlock: number): boolean {
     return this.currentBlock >= expirationBlock
   }
 
   protected async submit(
     maker: string,
     nftId: string,
     collectionId: string,
+    withdraw: boolean,
     onSuccess?: () => void
   ) {
     try {
       const api = await this.useApi()
       this.initTransactionLoader()
-      const isMe = isSameAccount(this.accountId, maker)
-      const cb = !isMe
+      const cb = !withdraw
         ? api.tx.marketplace.acceptOffer
         : api.tx.marketplace.withdrawOffer
       const args = [collectionId, nftId, maker]
 
       await this.howAboutToExecute(this.accountId, cb, args, (blockNumber) => {
-        const msg = !isMe ? this.$t('offer.accept') : this.$t('offer.withdraw')
+        const msg = !withdraw
+          ? this.$t('offer.accept')
+          : this.$t('offer.withdraw')
         showNotification(
           `[OFFER] Since block ${blockNumber}, ${msg}`,
           notificationTypes.success