#3203 add table to show currently standing offers for user

components/bsx/Gallery/OffersUserTable.vue

@@ -0,0 +1,120 @@
+<template>
+  <b-table :data="offers">
+    <b-table-column
+      cell-class="is-vcentered is-narrow"
+      field="nft.name"
+      :label="$t('nft.offer.item')"
+      v-slot="props"
+      sortable>
+      <nuxt-link :to="`/${urlPrefix}/gallery/${props.row.nft.id}`">
+        <p
+          class="limit-width-text"
+          :title="props.row.nft.name ? props.row.nft.name : props.row.nft.id">
+          {{ props.row.nft.name || props.row.nft.id }}
+        </p>
+      </nuxt-link>
+    </b-table-column>
+    <b-table-column
+      cell-class="is-vcentered is-narrow"
+      field="status"
+      :label="$t('nft.offer.status')"
+      v-slot="props"
+      sortable>
+      <p>{{ props.row.status || '-' }}</p>
+    </b-table-column>
+
+    <b-table-column
+      cell-class="is-vcentered is-narrow"
+      field="price"
+      :label="$t('offer.price')"
+      v-slot="props"
+      sortable>
+      <Money :value="props.row.price" inline />
+    </b-table-column>
+    <b-table-column
+      field="createdAt"
+      cell-class="is-vcentered is-narrow"
+      :label="$t('nft.offer.date')"
+      v-slot="props"
+      sortable
+      ><p>
+        {{ timestampOffer(props.row.createdAt) }}
+      </p></b-table-column
+    >
+    <b-table-column
+      cell-class="is-vcentered is-narrow"
+      :label="$t('offer.action')"
+      v-slot="props"
+      width="120">
+      <b-button
+        v-if="props.row.status === 'ACTIVE'"
+        type="is-orange"
+        outlined
+        icon-left="times"
+        @click="withdrawOffer(props.row)" />
+    </b-table-column>
+  </b-table>
+</template>
+
+<script lang="ts">
+import { Attribute, emptyArray } from '@kodadot1/minimark'
+import { Component, mixins, Prop } from 'nuxt-property-decorator'
+import { formatDistanceToNow } from 'date-fns'
+import { Offer } from '../Offer/types'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
+import Connector from '@kodadot1/sub-api'
+import AuthMixin from '~/utils/mixins/authMixin'
+import MetaTransactionMixin from '~/utils/mixins/metaMixin'
+import SubscribeMixin from '~/utils/mixins/subscribeMixin'
+import { notificationTypes, showNotification } from '~/utils/notification'
+import { tokenIdToRoute } from '~/components/unique/utils'
+
+const components = {
+  Identity: () => import('@/components/shared/format/Identity.vue'),
+  Money: () => import('@/components/shared/format/Money.vue'),
+}
+
+@Component({ components, filters: { formatDistanceToNow } })
+export default class OffersUserTable extends mixins(
+  PrefixMixin,
+  AuthMixin,
+  MetaTransactionMixin,
+  SubscribeMixin
+) {
+  @Prop({ type: Array, default: () => emptyArray<Attribute>() })
+  public offers!: Offer[]
+
+  public timestampOffer(date) {
+    return formatDistanceToNow(new Date(date), { addSuffix: true })
+  }
+
+  async withdrawOffer(offer) {
+    const { caller, nft } = offer
+    try {
+      const { api } = Connector.getInstance()
+      this.initTransactionLoader()
+      const cb = api.tx.marketplace.withdrawOffer
+      const { id, item } = tokenIdToRoute(nft.id)
+      const args = [id, item, caller]
+      await this.howAboutToExecute(this.accountId, cb, args, (blockNumber) => {
+        const msg = 'your offer has been withdrawn'
+        showNotification(
+          `[OFFER] Since block ${blockNumber} ${msg}`,
+          notificationTypes.success
+        )
+      })
+    } catch (e: any) {
+      showNotification(`[OFFER::ERR] ${e}`, notificationTypes.danger)
+      this.$consola.error(e)
+      this.isLoading = false
+    }
+  }
+}
+</script>
+<style scoped>
+.limit-width-text {
+  max-width: 20ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

components/rmrk/Profile/ProfileDetail.vue

@@ -219,6 +219,12 @@
           </template>
           <UserGainHistory :account-id="id" />
         </b-tab-item>
+        <b-tab-item
+          v-if="isBsx"
+          :label="`Offers Made - ${userOfferList.length}`"
+          value="offers">
+          <OffersUserTable :offers="userOfferList" hideCollapse />
+        </b-tab-item>
       </b-tabs>
     </section>
   </section>
@@ -244,6 +250,7 @@ import collectionListByAccount from '@/queries/rmrk/subsquid/collectionListByAcc
 import { Debounce } from 'vue-debounce-decorator'
 import { CollectionChartData as ChartData } from '@/utils/chart'
 import allEventsByProfile from '@/queries/rmrk/subsquid/allEventsByProfile.graphql'
+import offerListUser from '@/queries/subsquid/bsx/offerListUser.graphql'
 import recentSalesForCreator from '@/queries/rmrk/subsquid/recentSalesForCreator.graphql'
 import { sortedEventByDate } from '~/utils/sorting'
 import ChainMixin from '~/utils/mixins/chainMixin'
@@ -261,6 +268,7 @@ import allNftSaleEventsByAccountId from '~/queries/rmrk/subsquid/allNftSaleEvent
 import allNftSaleEventsHistoryByAccountId from '~/queries/rmrk/subsquid/allNftSaleEventsHistoryByAccountId.graphql'
 import { hasExplorer, getExplorer } from './utils'
 import { NftHolderEvent } from '../Gallery/Holder/Holder.vue'
+import { Offer, OfferResponse } from '~/components/bsx/Offer/types'
 
 const components = {
   GalleryCardList: () =>
@@ -281,6 +289,7 @@ const components = {
   UserGainHistory: () =>
     import('@/components/rmrk/Gallery/UserGainHistory.vue'),
   History: () => import('@/components/rmrk/Gallery/History.vue'),
+  OffersUserTable: () => import('@/components/bsx/Gallery/OffersUserTable.vue'),
   Sales: () => import('@/components/rmrk/Profile/Sales.vue'),
   ScrollTopButton: () => import('@/components/shared/ScrollTopButton.vue'),
 }
@@ -325,6 +334,7 @@ export default class Profile extends mixins(
   protected isLoading = false
   protected collections: CollectionWithMeta[] = []
   public eventsOfNftCollection: Interaction[] | [] = []
+  public userOfferList: Offer[] = []
   public eventsOfSales: Interaction[] | [] = []
   public priceChartData: [Date, number][][] = []
   protected priceData: [ChartData[], ChartData[]] | [] = []
@@ -549,6 +559,10 @@ export default class Profile extends mixins(
     return this.urlPrefix === 'moonsama'
   }
 
+  get isBsx(): boolean {
+    return this.urlPrefix === 'bsx'
+  }
+
   get activeTab(): string {
     return (this.$route.query.tab as string) || 'nft'
   }
@@ -719,12 +733,7 @@ export default class Profile extends mixins(
         .catch(this.$consola.warn /*Navigation Duplicate err fix later */)
     }
 
-    if (this.activeTab === 'history') {
-      this.fetchCollectionEvents()
-    }
-    if (this.activeTab === 'sales') {
-      this.fetchSalesEventByCreator()
-    }
+    this.fetchCurrentTabData()
   }
 
   protected handleIdentity(identityFields: Record<string, string>) {
@@ -794,6 +803,24 @@ export default class Profile extends mixins(
     }
   }
 
+  // Get offers for user
+  protected async fetchOfferEvents() {
+    try {
+      const { data } = await this.$apollo.query<OfferResponse>({
+        query: offerListUser,
+        client: this.client,
+        variables: {
+          id: this.id,
+        },
+      })
+      if (data?.offers?.length) {
+        this.userOfferList = data.offers
+      }
+    } catch (e) {
+      showNotification(`${e}`, notificationTypes.warn)
+    }
+  }
+
   @Watch('accountId')
   public async fetchMyNftByIssuer() {
     if (this.id && shouldUpdate(this.accountId, this.id)) {
@@ -819,23 +846,25 @@ export default class Profile extends mixins(
       this.resetPage()
       this.fetchProfile()
 
-      if (this.activeTab === 'history') {
-        this.fetchCollectionEvents()
-      }
-      if (this.activeTab === 'sales') {
-        this.fetchSalesEventByCreator()
-      }
+      this.fetchCurrentTabData()
     }
   }
 
   @Watch('activeTab')
   protected onTabChange(): void {
+    this.fetchCurrentTabData()
+  }
+
+  protected fetchCurrentTabData() {
     if (this.activeTab === 'history') {
       this.fetchCollectionEvents()
     }
     if (this.activeTab === 'sales') {
       this.fetchSalesEventByCreator()
     }
+    if (this.activeTab === 'offers') {
+      this.fetchOfferEvents()
+    }
   }
 }
 </script>

queries/subsquid/bsx/offerListUser.graphql

@@ -0,0 +1,15 @@
+query offerListUser($id: String!) {
+  offers(orderBy: createdAt_DESC, where: { caller_eq: $id }) {
+    blockNumber
+    caller
+    createdAt
+    id
+    price
+    status
+    updatedAt
+    nft {
+      name
+      id
+    }
+  }
+}