From ecbfc93fa82c4f0992ccd5283193b8661923466d Mon Sep 17 00:00:00 2001
From: Zouheir Layine <zlayine@enjin.io>
Date: Tue, 22 Oct 2024 11:54:53 +0100
Subject: [PATCH 1/3] add offers

---
 resources/js/components/RadioGroupButton.vue         |  4 +++-
 resources/js/components/pages/Marketplace.vue        | 12 ++++++++++++
 .../js/components/pages/create/CreateListing.vue     |  2 +-
 resources/js/router/index.ts                         | 10 ++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/RadioGroupButton.vue b/resources/js/components/RadioGroupButton.vue
index 0b8d43fc..7a3392df 100644
--- a/resources/js/components/RadioGroupButton.vue
+++ b/resources/js/components/RadioGroupButton.vue
@@ -11,6 +11,8 @@
                 {
                     'md:grid-cols-2': cols === 2,
                     'md:grid-cols-3': cols === 3,
+                    'md:grid-cols-4': cols === 4,
+                    'md:grid-cols-5': cols === 5,
                 },
                 `mt-4 grid grid-cols-2 gap-y-6 gap-x-4`,
             ]"
@@ -26,7 +28,7 @@
                 <div
                     :class="[
                         active || checked ? 'ring-primary' : 'ring-light-stroke-strong dark:ring-dark-stroke-strong',
-                        'relative flex cursor-pointer rounded-lg ring-2 bg-light-surface-primary dark:bg-dark-surface-primary p-4 shadow-sm focus:outline-none transition-all',
+                        'relative flex cursor-pointer rounded-lg ring-2 bg-light-surface-primary dark:bg-dark-surface-primary p-4 outline-none transition-all',
                     ]"
                 >
                     <span class="flex flex-1 items-center break-words">
diff --git a/resources/js/components/pages/Marketplace.vue b/resources/js/components/pages/Marketplace.vue
index 24f90a04..57c445fc 100644
--- a/resources/js/components/pages/Marketplace.vue
+++ b/resources/js/components/pages/Marketplace.vue
@@ -25,6 +25,16 @@ const marketTypes = [
         label: 'Listings',
         value: 'ListingsList',
     },
+    {
+        key: 'btn-offers',
+        label: 'Offers',
+        value: 'OffersList',
+    },
+    {
+        key: 'btn-counter-offers',
+        label: 'Counter Offers',
+        value: 'CounterOffersList',
+    },
     {
         key: 'btn-sales',
         label: 'Sales',
@@ -35,6 +45,8 @@ const marketTypes = [
 const martketRoutes = {
     BidsList: 'platform.marketplace.bids',
     ListingsList: 'platform.marketplace.listings',
+    OffersList: 'platform.marketplace.offers',
+    CounterOffersList: 'platform.marketplace.counter-offers',
     SalesList: 'platform.marketplace.sales',
 };
 
diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
index 1ac005a4..1f3d91c0 100644
--- a/resources/js/components/pages/create/CreateListing.vue
+++ b/resources/js/components/pages/create/CreateListing.vue
@@ -53,7 +53,7 @@
                         <FormCheckbox
                             v-model="enableTakeCollectionId"
                             name="enableTakeCollection"
-                            label="Enable offer"
+                            label="Ask for item"
                             description="Use this option to enable offering a different asset in exchange for the asset being sold."
                         />
 
diff --git a/resources/js/router/index.ts b/resources/js/router/index.ts
index 133229ae..a93f085a 100644
--- a/resources/js/router/index.ts
+++ b/resources/js/router/index.ts
@@ -103,6 +103,16 @@ const routes = [
                 name: 'platform.marketplace.listings',
                 component: () => import('../components/marketplace/ListingsList.vue'),
             },
+            {
+                path: 'offers',
+                name: 'platform.marketplace.offers',
+                component: () => import('../components/marketplace/OffersList.vue'),
+            },
+            {
+                path: 'counter-offers',
+                name: 'platform.marketplace.counter-offers',
+                component: () => import('../components/marketplace/CounterOffersList.vue'),
+            },
             {
                 path: 'sales',
                 name: 'platform.marketplace.sales',

From 1da20b37ed22e8035ab4e87f965f94fd7e264e21 Mon Sep 17 00:00:00 2001
From: Zouheir Layine <zlayine@enjin.io>
Date: Tue, 22 Oct 2024 12:28:35 +0100
Subject: [PATCH 2/3] add create offer

---
 .../marketplace/CounterOffersList.vue         | 359 ++++++++++++++++++
 .../js/components/marketplace/OffersList.vue  | 359 ++++++++++++++++++
 .../components/pages/create/CreateListing.vue |  15 +-
 .../components/pages/create/CreateOffer.vue   | 259 +++++++++++++
 .../mutation/marketplace/CreateListing.ts     |   5 +-
 resources/js/router/index.ts                  |   9 +
 6 files changed, 998 insertions(+), 8 deletions(-)
 create mode 100644 resources/js/components/marketplace/CounterOffersList.vue
 create mode 100644 resources/js/components/marketplace/OffersList.vue
 create mode 100644 resources/js/components/pages/create/CreateOffer.vue

diff --git a/resources/js/components/marketplace/CounterOffersList.vue b/resources/js/components/marketplace/CounterOffersList.vue
new file mode 100644
index 00000000..186a12b1
--- /dev/null
+++ b/resources/js/components/marketplace/CounterOffersList.vue
@@ -0,0 +1,359 @@
+<template>
+    <div
+        class="mb-1 mt-4 sm:mt-8 bg-light-surface-primary dark:bg-dark-surface-primary px-4 sm:px-6 lg:px-8 shadow rounded-lg overflow-y-auto h-full transition-all"
+    >
+        <div class="mt-4 flow-root">
+            <div class="sm:-mx-6 lg:-mx-8 transition-all">
+                <div class="flex lg:flex-row flex-col-reverse justify-between">
+                    <div class="gap-4 min-w-0 mb-2 py-2 sm:px-6 lg:px-8 transition-all">
+                        <h1
+                            class="block text-sm font-medium leading-6 text-light-content-strong dark:text-dark-content-strong"
+                        >
+                            Filters
+                        </h1>
+                        <div class="flex flex-wrap gap-4 mt-2">
+                            <CollapseFilter
+                                v-for="searchInput in searchInputs"
+                                :key="searchInput.name"
+                                v-model="searchInput.value"
+                                :label="searchInput.label"
+                                :name="searchInput.name"
+                                :placeholder="searchInput.placeholder"
+                                :type="searchInput.type"
+                                @change="searchChange"
+                            />
+                        </div>
+                    </div>
+                    <div class="flex gap-2 sm:px-6 lg:px-8 py-2 mb-2 items-end">
+                        <RouterLink :to="{ name: 'platform.create.listing' }">
+                            <Btn dusk="createBtn" primary> Create Listing </Btn>
+                        </RouterLink>
+                    </div>
+                </div>
+                <LoadingContent
+                    class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
+                    :is-loading="isLoading"
+                >
+                    <table
+                        id="listingsTable"
+                        class="min-w-full divide-y divide-light-stroke dark:divide-dark-stroke"
+                        v-if="listings.items?.length"
+                    >
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3 truncate"
+                                >
+                                    ID
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Listing ID
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Price
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Seller
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Sales
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Bids
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    State
+                                </th>
+                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-light-surface-primary dark:bg-dark-surface-primary">
+                            <tr
+                                v-for="(listing, idx) in listings.items"
+                                :key="listing.id"
+                                :class="
+                                    idx % 2 === 0
+                                        ? undefined
+                                        : 'bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50'
+                                "
+                            >
+                                <td
+                                    class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-3"
+                                >
+                                    <span
+                                        class="cursor-pointer"
+                                        @click="openModalSlide('DetailsListingSlideover', listing)"
+                                    >
+                                        {{ `#${listing.id}` }}
+                                    </span>
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ shortString(listing.listingId) }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ checkFormatPrice(listing.price, listing, currencySymbol) }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ addressShortHex(listing.seller) }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ listing.sales }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ listing.bids }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ listing.state.__typename }}
+                                </td>
+                                <td
+                                    class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3 flex justify-end"
+                                >
+                                    <DropdownMenu
+                                        :actions="actions"
+                                        @clicked="($event) => openModalSlide($event, listing)"
+                                    />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <NoItems v-else />
+                </LoadingContent>
+                <LoadingCircle v-if="isPaginationLoading" class="mx-auto py-4" />
+                <div ref="paginatorRef"></div>
+            </div>
+        </div>
+    </div>
+    <Slideover :open="modalSlide" @close="closeModalSlide" :item="slideComponent" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, watch, Ref } from 'vue';
+import { DTOMarketplaceFactory as DTOFactory } from '~/factory/marketplace';
+import LoadingCircle from '~/components/LoadingCircle.vue';
+import LoadingContent from '~/components/LoadingContent.vue';
+import debounce from 'lodash/debounce';
+import { addressShortHex } from '~/util/address';
+import { checkFormatPrice, currencySymbolByNetwork, formatData, shortString, snackbarErrors } from '~/util';
+import DropdownMenu from '~/components/DropdownMenu.vue';
+import Slideover from '~/components/Slideover.vue';
+import CollapseFilter from '~/components/CollapseFilter.vue';
+import NoItems from '~/components/NoItems.vue';
+import snackbar from '~/util/snackbar';
+import { MarketplaceApi } from '~/api/marketplace';
+import Btn from '../Btn.vue';
+import { useAppStore } from '~/store';
+
+const isLoading = ref(true);
+const isPaginationLoading = ref(false);
+const listings: Ref<{
+    items: any;
+    cursor: string | null;
+}> = ref({
+    items: [],
+    cursor: null,
+});
+const paginatorRef = ref();
+const modalSlide = ref(false);
+const slideComponent = ref();
+
+const searchInputs = ref([
+    {
+        name: 'ids',
+        label: 'IDs',
+        placeholder: 'Search by ID',
+        value: [],
+        type: 'text',
+    },
+    {
+        name: 'account',
+        label: 'Account',
+        placeholder: 'Search by account',
+        value: [],
+        type: 'text',
+    },
+    {
+        name: 'listingIds',
+        label: 'Listing IDs',
+        placeholder: 'Search by listing ID',
+        value: [],
+        type: 'text',
+    },
+]);
+
+const enablePagination = computed(() => !isLoading.value);
+
+const searchChanged = computed(() => {
+    return searchInputs.value.reduce((total, input) => total + input.value.length, 0);
+});
+
+const appStore = useAppStore();
+
+const currencySymbol = computed(() => currencySymbolByNetwork(appStore.config.network));
+
+const actions = [
+    {
+        key: 'details',
+        name: 'Details',
+        component: 'DetailsListingSlideover',
+    },
+    {
+        key: 'cancel',
+        name: 'Cancel',
+        component: 'CancelListingSlideover',
+    },
+    {
+        key: 'fill',
+        name: 'Fill',
+        component: 'FillListingSlideover',
+    },
+    {
+        key: 'finalize',
+        name: 'Finalize Auction',
+        component: 'FinalizeAuctionSlideover',
+    },
+    {
+        key: 'bid',
+        name: 'Place Bid',
+        component: 'PlaceBidSlideover',
+    },
+];
+
+const debouncedSearch = debounce(async () => {
+    await getListings();
+}, 1000);
+
+const cancelSearch = () => {
+    debouncedSearch.cancel();
+    getListings();
+};
+
+const searchChange = (e) => {
+    if (e.target.value) {
+        debouncedSearch();
+    } else {
+        cancelSearch();
+    }
+};
+
+const getSearchInputs = () => {
+    const inputs = {};
+
+    searchInputs.value.forEach((input) => {
+        inputs[input.name] = input.value;
+    });
+
+    return inputs;
+};
+
+const getListings = async () => {
+    isLoading.value = true;
+    try {
+        const res = await MarketplaceApi.getListings(
+            formatData({
+                ...getSearchInputs(),
+            })
+        );
+        listings.value = DTOFactory.forListings(res);
+    } catch (e) {
+        listings.value.items = [];
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Listings',
+            text: 'Error while fetching Listings',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const loadMoreItemsWithObserver = () => {
+    const observer = new IntersectionObserver(
+        async (entries) => {
+            if (entries[0].isIntersecting) {
+                if (!enablePagination.value) return;
+                try {
+                    if (!listings.value.cursor || isPaginationLoading.value) return;
+                    isPaginationLoading.value = true;
+                    const res = await MarketplaceApi.getListings(
+                        formatData({
+                            ...getSearchInputs(),
+                            after: listings.value.cursor,
+                        })
+                    );
+                    const data = DTOFactory.forListings(res);
+                    listings.value = { items: [...listings.value.items, ...data.items], cursor: data.cursor };
+                    isPaginationLoading.value = false;
+                } catch (error) {
+                    isPaginationLoading.value = false;
+                }
+            }
+        },
+        {
+            root: null,
+            rootMargin: '0px',
+            threshold: 1.0,
+        }
+    );
+    observer.observe(paginatorRef.value);
+};
+
+const openModalSlide = (componentName: string, collection) => {
+    let componentPath = 'marketplace';
+    if (componentName.toLowerCase().includes('transaction')) componentPath = 'common';
+    slideComponent.value = { componentName, componentPath, ...collection };
+    modalSlide.value = true;
+};
+
+const closeModalSlide = () => {
+    modalSlide.value = false;
+    setTimeout(() => {
+        slideComponent.value = null;
+    }, 500);
+};
+
+(async () => {
+    await getListings();
+})();
+
+onMounted(() => {
+    loadMoreItemsWithObserver();
+});
+
+watch(
+    () => searchChanged.value,
+    () => {
+        searchChange({ target: { value: '' } });
+    }
+);
+</script>
diff --git a/resources/js/components/marketplace/OffersList.vue b/resources/js/components/marketplace/OffersList.vue
new file mode 100644
index 00000000..7ff35833
--- /dev/null
+++ b/resources/js/components/marketplace/OffersList.vue
@@ -0,0 +1,359 @@
+<template>
+    <div
+        class="mb-1 mt-4 sm:mt-8 bg-light-surface-primary dark:bg-dark-surface-primary px-4 sm:px-6 lg:px-8 shadow rounded-lg overflow-y-auto h-full transition-all"
+    >
+        <div class="mt-4 flow-root">
+            <div class="sm:-mx-6 lg:-mx-8 transition-all">
+                <div class="flex lg:flex-row flex-col-reverse justify-between">
+                    <div class="gap-4 min-w-0 mb-2 py-2 sm:px-6 lg:px-8 transition-all">
+                        <h1
+                            class="block text-sm font-medium leading-6 text-light-content-strong dark:text-dark-content-strong"
+                        >
+                            Filters
+                        </h1>
+                        <div class="flex flex-wrap gap-4 mt-2">
+                            <CollapseFilter
+                                v-for="searchInput in searchInputs"
+                                :key="searchInput.name"
+                                v-model="searchInput.value"
+                                :label="searchInput.label"
+                                :name="searchInput.name"
+                                :placeholder="searchInput.placeholder"
+                                :type="searchInput.type"
+                                @change="searchChange"
+                            />
+                        </div>
+                    </div>
+                    <div class="flex gap-2 sm:px-6 lg:px-8 py-2 mb-2 items-end">
+                        <RouterLink :to="{ name: 'platform.create.offer' }">
+                            <Btn dusk="createBtn" primary> Create Offer </Btn>
+                        </RouterLink>
+                    </div>
+                </div>
+                <LoadingContent
+                    class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"
+                    :is-loading="isLoading"
+                >
+                    <table
+                        id="listingsTable"
+                        class="min-w-full divide-y divide-light-stroke dark:divide-dark-stroke"
+                        v-if="listings.items?.length"
+                    >
+                        <thead>
+                            <tr>
+                                <th
+                                    scope="col"
+                                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong sm:pl-3 truncate"
+                                >
+                                    ID
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Listing ID
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Price
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Seller
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Sales
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    Bids
+                                </th>
+                                <th
+                                    scope="col"
+                                    class="px-3 py-3.5 text-left text-sm font-semibold text-light-content-strong dark:text-dark-content-strong"
+                                >
+                                    State
+                                </th>
+                                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3"></th>
+                            </tr>
+                        </thead>
+                        <tbody class="bg-light-surface-primary dark:bg-dark-surface-primary">
+                            <tr
+                                v-for="(listing, idx) in listings.items"
+                                :key="listing.id"
+                                :class="
+                                    idx % 2 === 0
+                                        ? undefined
+                                        : 'bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50'
+                                "
+                            >
+                                <td
+                                    class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-light-content-strong dark:text-dark-content-strong sm:pl-3"
+                                >
+                                    <span
+                                        class="cursor-pointer"
+                                        @click="openModalSlide('DetailsListingSlideover', listing)"
+                                    >
+                                        {{ `#${listing.id}` }}
+                                    </span>
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ shortString(listing.listingId) }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ checkFormatPrice(listing.price, listing, currencySymbol) }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ addressShortHex(listing.seller) }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ listing.sales }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ listing.bids }}
+                                </td>
+                                <td
+                                    class="whitespace-nowrap px-3 py-4 text-sm text-light-content dark:text-dark-content"
+                                >
+                                    {{ listing.state.__typename }}
+                                </td>
+                                <td
+                                    class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3 flex justify-end"
+                                >
+                                    <DropdownMenu
+                                        :actions="actions"
+                                        @clicked="($event) => openModalSlide($event, listing)"
+                                    />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <NoItems v-else />
+                </LoadingContent>
+                <LoadingCircle v-if="isPaginationLoading" class="mx-auto py-4" />
+                <div ref="paginatorRef"></div>
+            </div>
+        </div>
+    </div>
+    <Slideover :open="modalSlide" @close="closeModalSlide" :item="slideComponent" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed, watch, Ref } from 'vue';
+import { DTOMarketplaceFactory as DTOFactory } from '~/factory/marketplace';
+import LoadingCircle from '~/components/LoadingCircle.vue';
+import LoadingContent from '~/components/LoadingContent.vue';
+import debounce from 'lodash/debounce';
+import { addressShortHex } from '~/util/address';
+import { checkFormatPrice, currencySymbolByNetwork, formatData, shortString, snackbarErrors } from '~/util';
+import DropdownMenu from '~/components/DropdownMenu.vue';
+import Slideover from '~/components/Slideover.vue';
+import CollapseFilter from '~/components/CollapseFilter.vue';
+import NoItems from '~/components/NoItems.vue';
+import snackbar from '~/util/snackbar';
+import { MarketplaceApi } from '~/api/marketplace';
+import Btn from '../Btn.vue';
+import { useAppStore } from '~/store';
+
+const isLoading = ref(true);
+const isPaginationLoading = ref(false);
+const listings: Ref<{
+    items: any;
+    cursor: string | null;
+}> = ref({
+    items: [],
+    cursor: null,
+});
+const paginatorRef = ref();
+const modalSlide = ref(false);
+const slideComponent = ref();
+
+const searchInputs = ref([
+    {
+        name: 'ids',
+        label: 'IDs',
+        placeholder: 'Search by ID',
+        value: [],
+        type: 'text',
+    },
+    {
+        name: 'account',
+        label: 'Account',
+        placeholder: 'Search by account',
+        value: [],
+        type: 'text',
+    },
+    {
+        name: 'listingIds',
+        label: 'Listing IDs',
+        placeholder: 'Search by listing ID',
+        value: [],
+        type: 'text',
+    },
+]);
+
+const enablePagination = computed(() => !isLoading.value);
+
+const searchChanged = computed(() => {
+    return searchInputs.value.reduce((total, input) => total + input.value.length, 0);
+});
+
+const appStore = useAppStore();
+
+const currencySymbol = computed(() => currencySymbolByNetwork(appStore.config.network));
+
+const actions = [
+    {
+        key: 'details',
+        name: 'Details',
+        component: 'DetailsListingSlideover',
+    },
+    {
+        key: 'cancel',
+        name: 'Cancel',
+        component: 'CancelListingSlideover',
+    },
+    {
+        key: 'fill',
+        name: 'Fill',
+        component: 'FillListingSlideover',
+    },
+    {
+        key: 'finalize',
+        name: 'Finalize Auction',
+        component: 'FinalizeAuctionSlideover',
+    },
+    {
+        key: 'bid',
+        name: 'Place Bid',
+        component: 'PlaceBidSlideover',
+    },
+];
+
+const debouncedSearch = debounce(async () => {
+    await getListings();
+}, 1000);
+
+const cancelSearch = () => {
+    debouncedSearch.cancel();
+    getListings();
+};
+
+const searchChange = (e) => {
+    if (e.target.value) {
+        debouncedSearch();
+    } else {
+        cancelSearch();
+    }
+};
+
+const getSearchInputs = () => {
+    const inputs = {};
+
+    searchInputs.value.forEach((input) => {
+        inputs[input.name] = input.value;
+    });
+
+    return inputs;
+};
+
+const getListings = async () => {
+    isLoading.value = true;
+    try {
+        const res = await MarketplaceApi.getListings(
+            formatData({
+                ...getSearchInputs(),
+            })
+        );
+        listings.value = DTOFactory.forListings(res);
+    } catch (e) {
+        listings.value.items = [];
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Listings',
+            text: 'Error while fetching Listings',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const loadMoreItemsWithObserver = () => {
+    const observer = new IntersectionObserver(
+        async (entries) => {
+            if (entries[0].isIntersecting) {
+                if (!enablePagination.value) return;
+                try {
+                    if (!listings.value.cursor || isPaginationLoading.value) return;
+                    isPaginationLoading.value = true;
+                    const res = await MarketplaceApi.getListings(
+                        formatData({
+                            ...getSearchInputs(),
+                            after: listings.value.cursor,
+                        })
+                    );
+                    const data = DTOFactory.forListings(res);
+                    listings.value = { items: [...listings.value.items, ...data.items], cursor: data.cursor };
+                    isPaginationLoading.value = false;
+                } catch (error) {
+                    isPaginationLoading.value = false;
+                }
+            }
+        },
+        {
+            root: null,
+            rootMargin: '0px',
+            threshold: 1.0,
+        }
+    );
+    observer.observe(paginatorRef.value);
+};
+
+const openModalSlide = (componentName: string, collection) => {
+    let componentPath = 'marketplace';
+    if (componentName.toLowerCase().includes('transaction')) componentPath = 'common';
+    slideComponent.value = { componentName, componentPath, ...collection };
+    modalSlide.value = true;
+};
+
+const closeModalSlide = () => {
+    modalSlide.value = false;
+    setTimeout(() => {
+        slideComponent.value = null;
+    }, 500);
+};
+
+(async () => {
+    await getListings();
+})();
+
+onMounted(() => {
+    loadMoreItemsWithObserver();
+});
+
+watch(
+    () => searchChanged.value,
+    () => {
+        searchChange({ target: { value: '' } });
+    }
+);
+</script>
diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
index 1f3d91c0..4fb72b85 100644
--- a/resources/js/components/pages/create/CreateListing.vue
+++ b/resources/js/components/pages/create/CreateListing.vue
@@ -281,12 +281,15 @@ const createListing = async () => {
                     collectionId: takeCollectionId.value,
                     tokenId: formatToken(takeTokenId.value),
                 },
-                auctionData: enableAuction.value
-                    ? {
-                          startBlock: auctionDataStart.value,
-                          endBlock: auctionDataEnd.value,
-                      }
-                    : null,
+                listingData: {
+                    type: enableAuction.value ? 'AUCTION' : 'FIXED_PRICE',
+                    auctionParams: enableAuction.value
+                        ? {
+                              startBlock: auctionDataStart.value,
+                              endBlock: auctionDataEnd.value,
+                          }
+                        : undefined,
+                },
                 idempotencyKey: idempotencyKey.value,
             })
         );
diff --git a/resources/js/components/pages/create/CreateOffer.vue b/resources/js/components/pages/create/CreateOffer.vue
new file mode 100644
index 00000000..7fb714ef
--- /dev/null
+++ b/resources/js/components/pages/create/CreateOffer.vue
@@ -0,0 +1,259 @@
+<template>
+    <div class="px-4 sm:px-6 lg:px-8 py-4 pb-20 overflow-y-auto transition-all">
+        <div class="flow-root space-y-4 pb-4 max-w-3xl mx-auto">
+            <div class="mb-4">
+                <h1 class="text-xl md:text-2xl text-light-content-strong dark:text-dark-content-strong">
+                    Create Listing
+                </h1>
+            </div>
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createListing"
+            >
+                <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow rounded-lg sm:p-6">
+                    <div class="space-y-6">
+                        <div class="">
+                            <h3
+                                class="text-base font-semibold leading-6 text-light-content-strong dark:text-dark-content-strong"
+                            >
+                                Parameters
+                            </h3>
+                            <p class="mt-1 text-sm text-light-content dark:text-dark-content">Places a sell order.</p>
+                        </div>
+
+                        <div class="space-y-2">
+                            <div>
+                                <h3 class="text-sm leading-6 text-light-content-strong dark:text-dark-content-strong">
+                                    Make Asset ID
+                                    <span class="text-red-500">&nbsp;*</span>
+                                </h3>
+                                <p class="mt-1 text-sm text-light-content dark:text-dark-content">
+                                    The collection and token ID of the asset being sold.
+                                </p>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4">
+                                <FormSelect
+                                    v-model="makeCollectionId"
+                                    name="makeCollectionId"
+                                    placeholder="Select a collection ID"
+                                    :options="collectionIds"
+                                />
+                                <TokenIdInput
+                                    class="col-span-1"
+                                    v-model="makeTokenId"
+                                    placeholder="Token ID"
+                                    name="makeTokenId"
+                                />
+                            </div>
+                        </div>
+
+                        <FormInput
+                            v-model="amount"
+                            name="amount"
+                            label="Amount"
+                            description="The number of units being sold."
+                            type="number"
+                            required
+                        />
+
+                        <FormInput
+                            v-model="price"
+                            name="price"
+                            label="Price"
+                            description="The requested price for each unit. If it’s an auction, this is the minimum bid."
+                            type="number"
+                            required
+                            :prefix="currencySymbol"
+                        />
+
+                        <FormInput
+                            v-model="expiration"
+                            name="expiration"
+                            label="Expiration"
+                            description="The expiration time for the offer."
+                            required
+                        />
+                        <span class="text-sm text-light-content">Current block: {{ currentBlock }}</span>
+
+                        <FormInput
+                            v-if="appStore.advanced"
+                            v-model="salt"
+                            name="salt"
+                            label="Salt"
+                            description="Can be used to differentiate listings."
+                        />
+
+                        <FormInput
+                            v-if="appStore.advanced"
+                            v-model="idempotencyKey"
+                            name="idempotencyKey"
+                            label="Idempotency Key"
+                            description="The idempotency key to set. It is recommended to use a UUID for this."
+                            tooltip="In mathematical and computer science terms, idempotency is a property of certain operations that can be applied repeated times without changing the initial result of the application."
+                            readmore="Idempotency Key"
+                        />
+                    </div>
+                </div>
+
+                <div class="flex space-x-3 justify-end">
+                    <RouterLink
+                        :to="{ name: 'platform.marketplace' }"
+                        type="button"
+                        class="rounded-md bg-light-surface-primary dark:bg-dark-surface-primary py-2 px-3 text-sm font-semibold text-light-content-strong dark:text-dark-content-strong shadow-sm ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong hover:bg-light-surface-background hover:dark:bg-dark-surface-background !bg-opacity-50"
+                    >
+                        Cancel
+                    </RouterLink>
+                    <Btn :loading="isLoading" :disabled="isLoading" primary is-submit>Create</Btn>
+                </div>
+            </Form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { Form } from 'vee-validate';
+import * as yup from 'yup';
+import Btn from '~/components/Btn.vue';
+import snackbar from '~/util/snackbar';
+import { onBeforeRouteLeave, useRouter } from 'vue-router';
+import FormInput from '~/components/FormInput.vue';
+import { currencySymbolByNetwork, formatData, formatToken, snackbarErrors } from '~/util';
+import TokenIdInput from '~/components/TokenIdInput.vue';
+import { TokenIdSelectType } from '~/types/types.enums';
+import { useAppStore } from '~/store';
+import {
+    numberNotRequiredSchema,
+    numberRequiredSchema,
+    stringNotRequiredSchema,
+    stringRequiredSchema,
+} from '~/util/schemas';
+import { MarketplaceApi } from '~/api/marketplace';
+import FormSelect from '~/components/FormSelect.vue';
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const isLoading = ref(false);
+const amount = ref('');
+const price = ref('');
+const salt = ref('');
+const expiration = ref();
+const currentBlock = ref();
+const blockInterval = ref();
+const makeCollectionId = ref('');
+const makeTokenId = ref({
+    tokenId: '',
+    tokenType: TokenIdSelectType.Integer,
+});
+const idempotencyKey = ref('');
+const formRef = ref();
+
+const currencySymbol = computed(() => currencySymbolByNetwork(appStore.config.network));
+const collectionIds = computed(() => appStore.collections);
+
+const validation = yup.object({
+    amount: numberRequiredSchema.typeError('Amount must be a number'),
+    price: numberRequiredSchema.typeError('Price must be a number'),
+    salt: stringNotRequiredSchema.typeError('Salt must be a string'),
+    takeCollectionId: yup.string().when('enableTakeCollection', {
+        is: true,
+        then: () => numberRequiredSchema.typeError('Collection ID is required'),
+        otherwise: () => yup.string().notRequired(),
+    }),
+    takeTokenId: yup.string().when('enableTakeCollection', {
+        is: true,
+        then: () => stringRequiredSchema.typeError('Token ID is required'),
+        otherwise: () => yup.string().notRequired(),
+    }),
+    makeCollectionId: numberRequiredSchema.typeError('Collection ID is required'),
+    makeTokenId: stringRequiredSchema.required('Token ID is required'),
+    expiration: numberNotRequiredSchema.typeError('Expiration must be a number'),
+    idempotencyKey: stringNotRequiredSchema,
+});
+
+const isValid = async () => {
+    await formRef.value.validate();
+    return formRef.value.getMeta().valid;
+};
+
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
+const createListing = async () => {
+    if (!(await isValid())) {
+        return;
+    }
+
+    try {
+        isLoading.value = true;
+        const res = await MarketplaceApi.createListing(
+            formatData({
+                amount: amount.value,
+                price: price.value,
+                salt: salt.value,
+                makeAssetId: {
+                    collectionId: makeCollectionId.value,
+                    tokenId: formatToken(makeTokenId.value),
+                },
+                listingData: {
+                    type: 'OFFER',
+                    offerParams: {
+                        expiration: expiration.value ?? undefined,
+                    },
+                },
+                idempotencyKey: idempotencyKey.value,
+            })
+        );
+
+        const id = res.data?.CreateListing?.id;
+
+        if (id) {
+            snackbar.success({
+                title: 'Listing created',
+                text: `Listing created with transaction id ${id}`,
+                event: id,
+            });
+            router.push({ name: 'platform.marketplace.listings' });
+        }
+    } catch (e) {
+        if (snackbarErrors(e)) return;
+        snackbar.error({
+            title: 'Listing creation',
+            text: 'Listing creation failed',
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const getCurrentBlock = async () => {
+    try {
+        const res = await MarketplaceApi.getCurrentBlock();
+        currentBlock.value = res.data?.GetBlocks?.edges[0].node.number;
+    } catch (e) {
+        snackbar.error({
+            title: 'Failed to get current block',
+            text: 'Please try again.',
+        });
+    }
+};
+
+onMounted(() => {
+    getCurrentBlock();
+    blockInterval.value = setInterval(() => {
+        getCurrentBlock();
+    }, 12100);
+});
+
+onBeforeRouteLeave(() => {
+    clearInterval(blockInterval.value);
+});
+</script>
diff --git a/resources/js/graphql/mutation/marketplace/CreateListing.ts b/resources/js/graphql/mutation/marketplace/CreateListing.ts
index 10f64f22..ca71e6a8 100644
--- a/resources/js/graphql/mutation/marketplace/CreateListing.ts
+++ b/resources/js/graphql/mutation/marketplace/CreateListing.ts
@@ -1,11 +1,12 @@
-export default `mutation CreateListing($makeAssetId: MultiTokenIdInput!, $takeAssetId: MultiTokenIdInput!, $amount: BigInt!, $price: BigInt!, $salt: String, $auctionData: AuctionDataInputType, $idempotencyKey: String) {
+export default `mutation CreateListing($makeAssetId: MultiTokenIdInput!, $takeAssetId: MultiTokenIdInput!, $amount: BigInt!, $price: BigInt!, $salt: String, $listingData: ListingDataInput, $signingAccount: String, $idempotencyKey: String) {
     CreateListing(
       makeAssetId: $makeAssetId
       takeAssetId: $takeAssetId
       amount: $amount
       price: $price
       salt: $salt
-      auctionData: $auctionData
+      listingData: $listingData
+      signingAccount: $signingAccount
       idempotencyKey: $idempotencyKey
     ) {
       id
diff --git a/resources/js/router/index.ts b/resources/js/router/index.ts
index a93f085a..e4004312 100644
--- a/resources/js/router/index.ts
+++ b/resources/js/router/index.ts
@@ -165,6 +165,15 @@ const routes = [
             requiresToken: true,
         },
     },
+    {
+        path: '/create/offer',
+        name: 'platform.create.offer',
+        component: () => import('../components/pages/create/CreateOffer.vue'),
+        meta: {
+            requiresAuth: true,
+            requiresToken: true,
+        },
+    },
     {
         path: '/create/batch',
         name: 'platform.create.batch',

From 2685d2e04a032f09cd4306fe88aa3626673602aa Mon Sep 17 00:00:00 2001
From: Zouheir Layine <zlayine@enjin.io>
Date: Tue, 22 Oct 2024 12:52:20 +0100
Subject: [PATCH 3/3] fix offer form

---
 .../components/pages/create/CreateListing.vue |   2 +-
 .../components/pages/create/CreateOffer.vue   | 120 +++++++++++++-----
 2 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
index 4fb72b85..5607c92c 100644
--- a/resources/js/components/pages/create/CreateListing.vue
+++ b/resources/js/components/pages/create/CreateListing.vue
@@ -150,7 +150,7 @@
 
                 <div class="flex space-x-3 justify-end">
                     <RouterLink
-                        :to="{ name: 'platform.marketplace' }"
+                        :to="{ name: 'platform.marketplace.listings' }"
                         type="button"
                         class="rounded-md bg-light-surface-primary dark:bg-dark-surface-primary py-2 px-3 text-sm font-semibold text-light-content-strong dark:text-dark-content-strong shadow-sm ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong hover:bg-light-surface-background hover:dark:bg-dark-surface-background !bg-opacity-50"
                     >
diff --git a/resources/js/components/pages/create/CreateOffer.vue b/resources/js/components/pages/create/CreateOffer.vue
index 7fb714ef..fd6bd838 100644
--- a/resources/js/components/pages/create/CreateOffer.vue
+++ b/resources/js/components/pages/create/CreateOffer.vue
@@ -3,7 +3,7 @@
         <div class="flow-root space-y-4 pb-4 max-w-3xl mx-auto">
             <div class="mb-4">
                 <h1 class="text-xl md:text-2xl text-light-content-strong dark:text-dark-content-strong">
-                    Create Listing
+                    Create Offer
                 </h1>
             </div>
             <Form
@@ -11,7 +11,7 @@
                 class="space-y-6"
                 :validation-schema="validation"
                 @invalid-submit="invalidSubmit"
-                @submit="createListing"
+                @submit="createOffer"
             >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow rounded-lg sm:p-6">
                     <div class="space-y-6">
@@ -21,40 +21,76 @@
                             >
                                 Parameters
                             </h3>
-                            <p class="mt-1 text-sm text-light-content dark:text-dark-content">Places a sell order.</p>
+                            <p class="mt-1 text-sm text-light-content dark:text-dark-content">Places an offer order.</p>
                         </div>
 
                         <div class="space-y-2">
                             <div>
                                 <h3 class="text-sm leading-6 text-light-content-strong dark:text-dark-content-strong">
-                                    Make Asset ID
+                                    Take Asset ID
                                     <span class="text-red-500">&nbsp;*</span>
                                 </h3>
                                 <p class="mt-1 text-sm text-light-content dark:text-dark-content">
-                                    The collection and token ID of the asset being sold.
+                                    The collection and token ID of the asset being bought.
                                 </p>
                             </div>
                             <div class="grid grid-cols-2 gap-4">
-                                <FormSelect
-                                    v-model="makeCollectionId"
-                                    name="makeCollectionId"
-                                    placeholder="Select a collection ID"
-                                    :options="collectionIds"
+                                <FormInput
+                                    v-model="takeCollectionId"
+                                    class="col-span-1"
+                                    name="takeCollectionId"
+                                    placeholder="Collection ID"
+                                    type="number"
                                 />
                                 <TokenIdInput
+                                    v-model="takeTokenId"
                                     class="col-span-1"
-                                    v-model="makeTokenId"
                                     placeholder="Token ID"
-                                    name="makeTokenId"
+                                    name="takeTokenId"
                                 />
                             </div>
+
+                            <FormCheckbox
+                                v-model="enableTakeCollectionId"
+                                name="enableTakeCollection"
+                                label="Ask for item"
+                                description="Use this option to enable offering a different asset in exchange for the asset being bought."
+                            />
+
+                            <template v-if="enableTakeCollectionId">
+                                <div>
+                                    <h3
+                                        class="text-sm leading-6 text-light-content-strong dark:text-dark-content-strong"
+                                    >
+                                        Make Asset ID
+                                        <span class="text-red-500">&nbsp;*</span>
+                                    </h3>
+                                    <p class="mt-1 text-sm text-light-content dark:text-dark-content">
+                                        The collection and token ID of the asset being requested.
+                                    </p>
+                                </div>
+                                <div class="grid grid-cols-2 gap-4">
+                                    <FormSelect
+                                        v-model="makeCollectionId"
+                                        name="makeCollectionId"
+                                        placeholder="Select a collection ID"
+                                        :options="collectionIds"
+                                    />
+                                    <TokenIdInput
+                                        v-model="makeTokenId"
+                                        name="makeTokenId"
+                                        class="col-span-1"
+                                        placeholder="Token ID"
+                                    />
+                                </div>
+                            </template>
                         </div>
 
                         <FormInput
                             v-model="amount"
                             name="amount"
                             label="Amount"
-                            description="The number of units being sold."
+                            description="The number of units being bought."
                             type="number"
                             required
                         />
@@ -68,16 +104,17 @@
                             required
                             :prefix="currencySymbol"
                         />
-
-                        <FormInput
-                            v-model="expiration"
-                            name="expiration"
-                            label="Expiration"
-                            description="The expiration time for the offer."
-                            required
-                        />
-                        <span class="text-sm text-light-content">Current block: {{ currentBlock }}</span>
-
+                        <Toggle v-model:toggle="enableExpiration" name="enableExpiration" label="Enable expiration" />
+                        <InputHeader description="Enable this option to set an expiration time for the offer." />
+                        <template v-if="enableExpiration">
+                            <FormInput
+                                v-model="expiration"
+                                name="expiration"
+                                label="Expiration"
+                                description="The block number the offer ends at."
+                            />
+                            <span class="text-sm text-light-content">Current block: {{ currentBlock }}</span>
+                        </template>
                         <FormInput
                             v-if="appStore.advanced"
                             v-model="salt"
@@ -100,7 +137,7 @@
 
                 <div class="flex space-x-3 justify-end">
                     <RouterLink
-                        :to="{ name: 'platform.marketplace' }"
+                        :to="{ name: 'platform.marketplace.offers' }"
                         type="button"
                         class="rounded-md bg-light-surface-primary dark:bg-dark-surface-primary py-2 px-3 text-sm font-semibold text-light-content-strong dark:text-dark-content-strong shadow-sm ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong hover:bg-light-surface-background hover:dark:bg-dark-surface-background !bg-opacity-50"
                     >
@@ -133,6 +170,9 @@ import {
 } from '~/util/schemas';
 import { MarketplaceApi } from '~/api/marketplace';
 import FormSelect from '~/components/FormSelect.vue';
+import FormCheckbox from '~/components/FormCheckbox.vue';
+import Toggle from '~/components/Toggle.vue';
+import InputHeader from '~/components/InputHeader.vue';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -144,11 +184,18 @@ const salt = ref('');
 const expiration = ref();
 const currentBlock = ref();
 const blockInterval = ref();
-const makeCollectionId = ref('');
-const makeTokenId = ref({
+const enableTakeCollectionId = ref(false);
+const enableExpiration = ref(false);
+const takeCollectionId = ref();
+const takeTokenId = ref({
     tokenId: '',
     tokenType: TokenIdSelectType.Integer,
 });
+const makeCollectionId = ref('0');
+const makeTokenId = ref({
+    tokenId: '0',
+    tokenType: TokenIdSelectType.Integer,
+});
 const idempotencyKey = ref('');
 const formRef = ref();
 
@@ -187,11 +234,20 @@ const invalidSubmit = () => {
     });
 };
 
-const createListing = async () => {
+const createOffer = async () => {
     if (!(await isValid())) {
         return;
     }
 
+    if (expiration.value && expiration.value < currentBlock.value) {
+        snackbar.error({
+            title: 'Expiration block',
+            text: 'Expiration block must be greater than the current block',
+        });
+
+        return;
+    }
+
     try {
         isLoading.value = true;
         const res = await MarketplaceApi.createListing(
@@ -217,17 +273,17 @@ const createListing = async () => {
 
         if (id) {
             snackbar.success({
-                title: 'Listing created',
-                text: `Listing created with transaction id ${id}`,
+                title: 'Offer created',
+                text: `Offer created with transaction id ${id}`,
                 event: id,
             });
-            router.push({ name: 'platform.marketplace.listings' });
+            router.push({ name: 'platform.marketplace.offers' });
         }
     } catch (e) {
         if (snackbarErrors(e)) return;
         snackbar.error({
-            title: 'Listing creation',
-            text: 'Listing creation failed',
+            title: 'Offer creation',
+            text: 'Offer creation failed',
         });
     } finally {
         isLoading.value = false;