chore: ArNS Marketplace UI

package.json

@@ -29,11 +29,15 @@
     "@ar.io/wayfinder-core": "^1.0.4",
     "@ar.io/wayfinder-react": "^1.0.11",
     "@ardrive/turbo-sdk": "^1.23.1",
+    "@blockydevs/arns-marketplace-data": "^0.2.0",
+    "@blockydevs/arns-marketplace-ui": "^0.1.0",
     "@permaweb/aoconnect": "0.0.69",
     "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@sentry/react": "^7.45.0",
     "@stripe/react-stripe-js": "^3.6.0",
     "@stripe/stripe-js": "^7.0.0",
@@ -48,6 +52,7 @@
     "arweave-graphql": "^0.0.5",
     "arweave-wallet-connector": "^1.0.2",
     "axios": "^1.1.3",
+    "class-variance-authority": "^0.7.1",
     "dayjs": "^1.11.13",
     "emoji-regex": "^10.3.0",
     "eventemitter3": "^5.0.0",
@@ -60,6 +65,7 @@
     "puny-coder": "^1.0.1",
     "radix-ui": "^1.1.3",
     "react": "^18.2.0",
+    "react-day-picker": "^9.9.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-markdown": "6",

src/App.tsx

@@ -1,5 +1,6 @@
 import { Logger } from '@ar.io/sdk/web';
 import * as Sentry from '@sentry/react';
+import { usePrefetchMarketplaceData } from '@src/hooks/listings/usePrefetchMarketplaceData';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import React, { Suspense, useMemo } from 'react';
@@ -19,14 +20,26 @@ import NetworkSettings from './components/pages/Settings/NetworkSettings';
 import DevTools from './components/pages/Settings/devtools/DevTools';
 import useSyncSettings from './hooks/useSyncSettings/useSyncSettings';
 import useWanderEvents from './hooks/useWanderEvents/useWanderEvents';
-import './index.css';
 import { useGlobalState } from './state';
 
 // set the log level of ar-io-sdk
 Logger.default.setLogLevel('none');
 
+const MyANTs = React.lazy(() => import('./components/pages/MyANTs/MyANTs'));
+const MyANTsNewListing = React.lazy(
+  () => import('./components/pages/MyANTs/NewListing'),
+);
 const Manage = React.lazy(() => import('./components/pages/Manage/Manage'));
 const Home = React.lazy(() => import('./components/pages/Home/Home'));
+
+const Listings = React.lazy(
+  () => import('./components/pages/Listings/Listings'),
+);
+const Details = React.lazy(
+  () => import('./components/pages/Listings/Details/Details'),
+);
+const Confirm = React.lazy(() => import('./components/pages/Listings/Confirm'));
+
 const ManageANT = React.lazy(
   () => import('./components/pages/ManageANT/ManageANT'),
 );
@@ -72,6 +85,7 @@ const sentryCreateBrowserRouter =
 function App() {
   useWanderEvents();
   useSyncSettings();
+  usePrefetchMarketplaceData();
   const [{ turboNetwork }] = useGlobalState();
 
   const stripePromise = useMemo(() => {
@@ -336,6 +350,66 @@ function App() {
               </Suspense>
             }
           />
+          <Route
+            path="/listings"
+            element={
+              <Suspense
+                fallback={
+                  <PageLoader loading={true} message={'Loading, please wait'} />
+                }
+              >
+                <Listings />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/listings/:id"
+            element={
+              <Suspense
+                fallback={
+                  <PageLoader loading={true} message={'Loading, please wait'} />
+                }
+              >
+                <Details />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/listings/:id/confirm-purchase"
+            element={
+              <Suspense
+                fallback={
+                  <PageLoader loading={true} message={'Loading, please wait'} />
+                }
+              >
+                <Confirm />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/my-ants"
+            element={
+              <Suspense
+                fallback={
+                  <PageLoader loading={true} message={'Loading, please wait'} />
+                }
+              >
+                <MyANTs />
+              </Suspense>
+            }
+          />
+          <Route
+            path="/my-ants/new-listing/:antProcessId"
+            element={
+              <Suspense
+                fallback={
+                  <PageLoader loading={true} message={'Loading, please wait'} />
+                }
+              >
+                <MyANTsNewListing />
+              </Suspense>
+            }
+          />
           <Route
             path="*"
             element={

src/components/cards/NavMenuCard/NavMenuCard.tsx

@@ -363,7 +363,7 @@ function NavMenuCard() {
                     >
                       What are ARIO tokens?
                     </Link>
-                  </span>{' '}
+                  </span>
                   <span className="flex flex-row" style={{ gap: '10px' }}>
                     <Settings2Icon
                       className="text-grey"

src/components/data-display/tables/DomainsTable.tsx

@@ -41,7 +41,7 @@ import { ANTStateError } from '@src/utils/errors';
 import { queryClient } from '@src/utils/network';
 import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { capitalize } from 'lodash';
-import { CircleCheck, Star } from 'lucide-react';
+import { BookCopy, CircleCheck, Star } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { ReactNode } from 'react-markdown';
 import { Link, useNavigate } from 'react-router-dom';
@@ -470,7 +470,7 @@ const DomainsTable = ({
           case 'action': {
             return (
               <div className="flex justify-end w-full">
-                <span className="flex  pr-3 w-fit gap-3">
+                <span className="flex pr-3 w-fit gap-3">
                   {row.getValue('role') === 'owner' ? (
                     <Tooltip
                       message={
@@ -530,6 +530,25 @@ const DomainsTable = ({
                   ) : (
                     <></>
                   )}
+                  {row.getValue('role') === 'owner' && (
+                    <Tooltip
+                      message="Sell"
+                      icon={
+                        <button
+                          disabled={row.original.version < MIN_ANT_VERSION}
+                          onClick={() =>
+                            navigate(
+                              `/my-ants/new-listing/${
+                                row.original.processId
+                              }?name=${lowerCaseDomain(row.original.name)}`,
+                            )
+                          }
+                        >
+                          <BookCopy className="w-[18px] text-grey" />
+                        </button>
+                      }
+                    />
+                  )}
                   <ManageAssetButtons
                     id={lowerCaseDomain(row.getValue('name') as string)}
                     assetType="names"

src/components/layout/Navbar/NavGroup/NavGroup.tsx

@@ -54,7 +54,6 @@ function NavGroup() {
     <div className="flex-right flex size-fit gap-4 items-center">
       {!isMobile ? (
         <>
-          {' '}
           <NotificationMenu />
           {links}
           {!wallet || !walletAddress ? <ConnectButton /> : <NavMenuCard />}

src/components/pages/Listings/ActiveListingsTab.tsx

@@ -0,0 +1,73 @@
+import { fetchActiveListings } from '@blockydevs/arns-marketplace-data';
+import {
+  ActiveListingTable,
+  Card,
+  Pagination,
+  useCursorPagination,
+} from '@blockydevs/arns-marketplace-ui';
+import { useAntsMetadata } from '@src/hooks/listings/useAntsMetadata';
+import { usePrepareListings } from '@src/hooks/listings/usePrepareListings';
+import { useGlobalState } from '@src/state';
+import {
+  BLOCKYDEVS_MARKETPLACE_PROCESS_ID,
+  marketplaceQueryKeys,
+} from '@src/utils/marketplace';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+const PAGE_SIZE = 20;
+
+const ActiveListingsTab = () => {
+  const [{ aoClient }] = useGlobalState();
+  const pagination = useCursorPagination(PAGE_SIZE);
+  const queryAntsMetadata = useAntsMetadata();
+  const queryActiveListings = useQuery({
+    refetchInterval: 15 * 1000,
+    structuralSharing: false,
+    queryKey: marketplaceQueryKeys.listings.list('active', {
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      cursor: pagination.cursor,
+    }),
+    queryFn: () => {
+      return fetchActiveListings({
+        ao: aoClient,
+        marketplaceProcessId: BLOCKYDEVS_MARKETPLACE_PROCESS_ID,
+        limit: pagination.pageSize,
+        cursor: pagination.cursor,
+      });
+    },
+  });
+
+  const preparedItems = usePrepareListings(queryActiveListings.data);
+  const { totalItems } = queryActiveListings.data ?? {};
+  const totalPages = pagination.getTotalPages(totalItems);
+  const isPending =
+    queryActiveListings.isPending || queryAntsMetadata.isPending;
+
+  useEffect(() => {
+    if (!queryActiveListings.data) return;
+
+    const { nextCursor, hasMore } = queryActiveListings.data;
+    pagination.storeNextCursor(nextCursor, !!hasMore);
+  }, [queryActiveListings.data, pagination.storeNextCursor]);
+
+  return (
+    <Card className="flex flex-col gap-8">
+      <ActiveListingTable
+        data={preparedItems}
+        isPending={isPending}
+        error={queryActiveListings.error?.message}
+      />
+      {!isPending && (
+        <Pagination
+          totalPages={totalPages}
+          activeIndex={pagination.page}
+          onPageChange={pagination.setPage}
+        />
+      )}
+    </Card>
+  );
+};
+
+export default ActiveListingsTab;

src/components/pages/Listings/CompletedListingsTab.tsx

@@ -0,0 +1,73 @@
+import { fetchCompletedListings } from '@blockydevs/arns-marketplace-data';
+import {
+  Card,
+  CompletedListingTable,
+  Pagination,
+  useCursorPagination,
+} from '@blockydevs/arns-marketplace-ui';
+import { useAntsMetadata } from '@src/hooks/listings/useAntsMetadata';
+import { usePrepareListings } from '@src/hooks/listings/usePrepareListings';
+import { useGlobalState } from '@src/state';
+import {
+  BLOCKYDEVS_MARKETPLACE_PROCESS_ID,
+  marketplaceQueryKeys,
+} from '@src/utils/marketplace';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+const PAGE_SIZE = 20;
+
+const CompletedListingsTab = () => {
+  const [{ aoClient }] = useGlobalState();
+  const pagination = useCursorPagination(PAGE_SIZE);
+  const queryAntsMetadata = useAntsMetadata();
+  const queryCompletedListings = useQuery({
+    refetchInterval: 15 * 1000,
+    enabled: Boolean(aoClient),
+    queryKey: marketplaceQueryKeys.listings.list('completed', {
+      page: pagination.page,
+      pageSize: pagination.pageSize,
+      cursor: pagination.cursor,
+    }),
+    queryFn: () => {
+      return fetchCompletedListings({
+        ao: aoClient,
+        marketplaceProcessId: BLOCKYDEVS_MARKETPLACE_PROCESS_ID,
+        limit: pagination.pageSize,
+        cursor: pagination.cursor,
+      });
+    },
+  });
+
+  const preparedItems = usePrepareListings(queryCompletedListings.data);
+  const { totalItems } = queryCompletedListings.data ?? {};
+  const totalPages = pagination.getTotalPages(totalItems);
+  const isPending =
+    queryCompletedListings.isPending || queryAntsMetadata.isPending;
+
+  useEffect(() => {
+    if (!queryCompletedListings.data) return;
+
+    const { nextCursor, hasMore } = queryCompletedListings.data;
+    pagination.storeNextCursor(nextCursor, !!hasMore);
+  }, [queryCompletedListings.data, pagination.storeNextCursor]);
+
+  return (
+    <Card className="flex flex-col gap-8">
+      <CompletedListingTable
+        data={preparedItems}
+        isPending={isPending}
+        error={queryCompletedListings.error?.message}
+      />
+      {!isPending && (
+        <Pagination
+          totalPages={totalPages}
+          activeIndex={pagination.page}
+          onPageChange={pagination.setPage}
+        />
+      )}
+    </Card>
+  );
+};
+
+export default CompletedListingsTab;