@@ -59,7 +59,8 @@
diff --git a/components/trade/overviewModal/TradeOverviewModal.vue b/components/trade/overviewModal/TradeOverviewModal.vue
new file mode 100644
index 0000000000..5733e559dd
--- /dev/null
+++ b/components/trade/overviewModal/TradeOverviewModal.vue
@@ -0,0 +1,226 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/trade/overviewModal/TypeOffer.vue b/components/trade/overviewModal/TypeOffer.vue
new file mode 100644
index 0000000000..3b50bd86a4
--- /dev/null
+++ b/components/trade/overviewModal/TypeOffer.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+ {{ desiredFormatted }}
+
+
+
+
+
+
+
+
+
+
diff --git a/components/trade/overviewModal/TypeSwap.vue b/components/trade/overviewModal/TypeSwap.vue
new file mode 100644
index 0000000000..0aff0f3572
--- /dev/null
+++ b/components/trade/overviewModal/TypeSwap.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+ {{ desiredFormatted }}
+
+
+
+
+
+
+
+
+
+ {{ oferredFormatted }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/trade/overviewModal/utils.ts b/components/trade/overviewModal/utils.ts
new file mode 100644
index 0000000000..f822a920ff
--- /dev/null
+++ b/components/trade/overviewModal/utils.ts
@@ -0,0 +1,17 @@
+import type { OverviewMode } from '@/components/trade/OfferOverviewModal.vue'
+
+export const useIsTradeOverview = (trade) => {
+ const { accountId } = useAuth()
+ const { isOwnerOfNft } = useIsTrade(computed(() => trade), accountId)
+
+ const mode = computed
(() => isOwnerOfNft.value ? 'incoming' : 'owner')
+
+ const isMyTrade = computed(() => mode.value === 'owner')
+ const isIncomingTrade = computed(() => mode.value === 'incoming')
+
+ return {
+ isMyTrade,
+ isIncomingTrade,
+ mode,
+ }
+}
diff --git a/components/offer/types.ts b/components/trade/types.ts
similarity index 100%
rename from components/offer/types.ts
rename to components/trade/types.ts
diff --git a/composables/useIsOffer.ts b/composables/useIsOffer.ts
deleted file mode 100644
index e94debe114..0000000000
--- a/composables/useIsOffer.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function (offer: ComputedRef, target: MaybeRef) {
- const isOwnerOfOffer = computed(() => offer.value?.caller === unref(target))
- const isOwnerOfNft = computed(() => offer.value?.desired.currentOwner === unref(target))
-
- return {
- isOwnerOfOffer,
- isOwnerOfNft,
- }
-}
diff --git a/composables/useIsTrade.ts b/composables/useIsTrade.ts
new file mode 100644
index 0000000000..37d6317e44
--- /dev/null
+++ b/composables/useIsTrade.ts
@@ -0,0 +1,9 @@
+export default function (trade: ComputedRef, target: MaybeRef) {
+ const isCreatorOfTrade = computed(() => trade.value?.caller === unref(target))
+ const isOwnerOfNft = computed(() => trade.value?.desired.currentOwner === unref(target))
+
+ return {
+ isCreatorOfTrade,
+ isOwnerOfNft,
+ }
+}
diff --git a/composables/useOffers.ts b/composables/useTrades.ts
similarity index 56%
rename from composables/useOffers.ts
rename to composables/useTrades.ts
index f04300dd73..bd0e68468c 100644
--- a/composables/useOffers.ts
+++ b/composables/useTrades.ts
@@ -1,14 +1,18 @@
import { addHours } from 'date-fns'
-type NFTOfferStatus = 'ACTIVE' | 'EXPIRED' | 'WITHDRAWN' | 'ACCEPTED'
+type TradeStatus = 'ACTIVE' | 'EXPIRED' | 'WITHDRAWN' | 'ACCEPTED'
-type NFTOffer = {
+type BaseTrade = {
id: string
price: string
expiration: string
blockNumber: string
- status: NFTOfferStatus
+ status: TradeStatus
caller: string
+ offered: {
+ id: string
+ sn: string
+ }
desired: {
id: string
name: string
@@ -17,39 +21,69 @@ type NFTOffer = {
}
}
-export type NFTOfferItem = {
+export enum TradeType {
+ SWAP,
+ OFFER,
+}
+
+type Swap = BaseTrade & {
+ surcharge: string | null
+}
+
+type Offer = BaseTrade
+
+type Trade = Swap | Offer
+
+export type TradeNftItem = Trade & {
expirationDate?: Date
-} & NFTOffer
+ type: TradeType
+}
+
+export const TRADES_QUERY_MAP: Record = {
+ [TradeType.SWAP]: {
+ queryName: 'swapsList',
+ dataKey: 'swaps',
+ },
+ [TradeType.OFFER]: {
+ queryName: 'offersList',
+ dataKey: 'offers',
+ },
+}
const BLOCKS_PER_HOUR = 300
const currentBlock = ref(0)
-export default function ({ where = {}, limit = 100, disabled = computed(() => false) }: {
+export default function ({ where = {}, limit = 100, disabled = computed(() => false), type = TradeType.SWAP }: {
where?: MaybeRef>
limit?: number
disabled?: ComputedRef
+ type?: TradeType
}) {
const variables = computed(() => ({
where: unref(where),
limit: limit,
}))
+ const { queryName, dataKey } = TRADES_QUERY_MAP[type]
+
const {
data,
loading: fetching,
refetch,
- } = useGraphql<{ offers: NFTOffer[] }>({
- queryName: 'offersList',
+ } = useGraphql<{ offers: BaseTrade[] }>({
+ queryName,
variables: variables.value,
disabled,
})
- const offers = computed(() => {
- return data.value?.offers.map((offer) => {
+ const items = computed(() => {
+ return data.value?.[dataKey]?.map((trade) => {
return {
- ...offer,
- expirationDate: currentBlock.value ? addHours(new Date(), (Number(offer.expiration) - currentBlock.value) / BLOCKS_PER_HOUR) : undefined,
- }
+ ...trade,
+ expirationDate: currentBlock.value ? addHours(new Date(), (Number(trade.expiration) - currentBlock.value) / BLOCKS_PER_HOUR) : undefined,
+ offered: trade.nft,
+ type,
+ } as TradeNftItem
}) || []
})
@@ -74,7 +108,7 @@ export default function ({ where = {}, limit = 100, disabled = computed(() => fa
}
return {
- offers,
+ items,
refetch,
loading,
}
diff --git a/locales/en.json b/locales/en.json
index 61277caac1..6d232787c6 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1787,6 +1787,13 @@
"support": {
"tooltip": "Cover costs mean that users help to support initial costs for Koda which stores your JPEG on your behalf."
},
+ "swap": {
+ "acceptSwap": "Accept Swap",
+ "cancelSwap": "Cancel Swap",
+ "incomingSwap": "Incoming Swap",
+ "yourSwap": "Your Swap"
+ },
+ "swaps": "Swaps",
"tabs": {
"activity": "Activity",
"chart": "Chart",
diff --git a/queries/subsquid/general/offersList.graphql b/queries/subsquid/general/offersList.graphql
index 4a5cb61d92..0d5a5754f9 100644
--- a/queries/subsquid/general/offersList.graphql
+++ b/queries/subsquid/general/offersList.graphql
@@ -6,6 +6,10 @@ query offersList($where: OfferWhereInput!, $orderBy: [OfferOrderByInput!] = [blo
price
status
caller
+ nft {
+ id
+ sn
+ }
desired {
id
name
diff --git a/queries/subsquid/general/swapsList.graphql b/queries/subsquid/general/swapsList.graphql
new file mode 100644
index 0000000000..ccbbedd7d4
--- /dev/null
+++ b/queries/subsquid/general/swapsList.graphql
@@ -0,0 +1,21 @@
+query swapsList($where: SwapWhereInput!, $orderBy: [SwapOrderByInput!] = [blockNumber_DESC]) {
+ swaps(where: $where, orderBy: $orderBy) {
+ id
+ expiration
+ blockNumber
+ status
+ caller
+ surcharge
+ price
+ nft {
+ id
+ sn
+ }
+ desired {
+ id
+ name
+ sn
+ currentOwner
+ }
+ }
+}
diff --git a/stores/makeOffer.ts b/stores/makeOffer.ts
index db3a484983..9614e9ccfb 100644
--- a/stores/makeOffer.ts
+++ b/stores/makeOffer.ts
@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { computed } from 'vue'
-import type { MakingOfferItem } from '@/components/offer/types'
+import type { MakingOfferItem } from '@/components/trade/types'
export const useMakingOfferStore = defineStore('makingOffer', () => {
const {
From 6751e68143213f44f63926adf1bc748d0258f8f3 Mon Sep 17 00:00:00 2001
From: hassnian <44554284+hassnian@users.noreply.github.com>
Date: Wed, 20 Nov 2024 08:49:03 +0500
Subject: [PATCH 02/20] add(swaps): gallery item table image and name
---
.../GalleryItemTradesTable.vue | 38 ++++++++++++++++++-
components/profile/activityTab/OfferRow.vue | 4 +-
components/trade/TradeOwnerButton.vue | 12 +++---
.../overviewModal/TradeOverviewModal.vue | 2 +-
composables/useTrades.ts | 20 +++++-----
queries/subsquid/general/offersList.graphql | 4 ++
queries/subsquid/general/swapsList.graphql | 4 ++
7 files changed, 64 insertions(+), 20 deletions(-)
diff --git a/components/gallery/GalleryItemTabsPanel/GalleryItemTradesTable.vue b/components/gallery/GalleryItemTabsPanel/GalleryItemTradesTable.vue
index 3d8a525493..c0727ddb4a 100644
--- a/components/gallery/GalleryItemTabsPanel/GalleryItemTradesTable.vue
+++ b/components/gallery/GalleryItemTabsPanel/GalleryItemTradesTable.vue
@@ -19,8 +19,42 @@
hoverable
class="py-5 max-md:!top-0"
>
+
+
+
+
+
+
+
+
+
+ {{ row.offered.name }}
+
+
+
+
@@ -181,7 +181,7 @@