Feature/dev 368

app/bot/src/listing/build-listing-embed.ts

@@ -15,9 +15,7 @@ export function buildListingEmbed(listing: Listing, creator: UserDocument) {
     .setDescription(i18next.t('listing.embed.description', { user: userMention(creator.discord.id) }))
     .setColor(0x00ff66)
     .setFields(fields(listing.items, listing.target))
-    .setURL(
-      frontendRoutes.listing.details.withQuery({ listing: listing }).getUrl({ slug: listing.target.collection.slug })
-    )
+    .setURL(frontendRoutes.listing.details.getUrl({ slug: listing.slug }))
 }
 
 function fields(items: NonEmptyArray<NftItem>, target: Listing['target']): APIEmbedField[] {

app/bot/src/listing/build-listing-link-button.ts

@@ -7,7 +7,7 @@ export function buildListingLinkButton(listing: Listing) {
   return new ActionRowBuilder<ButtonBuilder>().addComponents(
     new ButtonBuilder()
       .setLabel(i18next.t('listing.button'))
-      .setURL(frontendRoutes.listing.details.withQuery({ listing }).getUrl({ slug: listing.target.collection.slug }))
+      .setURL(frontendRoutes.listing.details.getUrl({ slug: listing.slug }))
       .setStyle(ButtonStyle.Link)
   )
 }

app/bot/src/offer/build-offer-link-button.ts

@@ -7,7 +7,7 @@ export function buildOfferLinkButton(offer: Offer) {
   return new ActionRowBuilder<ButtonBuilder>().addComponents(
     new ButtonBuilder()
       .setLabel(i18next.t('offer.button'))
-      .setURL(frontendRoutes.offer.details.withQuery({ offer }).getUrl({ username: offer.sender.username }))
+      .setURL(frontendRoutes.offer.details.getUrl({ slug: offer.slug }))
       .setStyle(ButtonStyle.Link)
   )
 }

app/bot/test/listing/build-listing-link-button.test.ts

@@ -12,7 +12,7 @@ describe('builders - buildNewListingButtons', () => {
 
   it('should build a new listing button with a link to the listing', () => {
     const result = buildListingLinkButton(listingMock)
-    const expectedLink = 'https://undefined/collection/pxmythics-genesis?listing=juzmtpgkm62mmhecmbn4'
+    const expectedLink = 'https://undefined/listing/juzmtpgkm62mmhecmbn4'
     expect(result).toBeInstanceOf(ActionRowBuilder)
     const components = result.components
     expect(components).toHaveLength(1)

app/frontend/src/app/collection/[slug]/page.tsx

@@ -14,8 +14,6 @@ import { toSwapsWithRole } from '@echo/frontend/lib/helpers/swap/to-swaps-with-r
 import type { Collection } from '@echo/model/types/collection'
 import type { OwnedNft } from '@echo/model/types/nft'
 import type { User } from '@echo/model/types/user'
-import type { ListingDetailsSearchParams } from '@echo/routing/types/frontend/search-params/listing-details-search-params'
-import { listingDetailsSearchParamsTransformSchema } from '@echo/routing/validators/frontend/listing/listing-details-search-params-transform-schema'
 import { CollectionPage } from '@echo/ui/pages/collection/collection-page'
 import type { Nullable } from '@echo/utils/types/nullable'
 import { notFound } from 'next/navigation'
@@ -25,11 +23,10 @@ interface Props {
   params: {
     slug: Lowercase<string>
   }
-  searchParams?: ListingDetailsSearchParams
   user: Nullable<User>
 }
 
-async function render({ params: { slug }, searchParams, user }: Props) {
+async function render({ params: { slug }, user }: Props) {
   const collection = await pipe(
     getCollection,
     otherwise<Nullable<Collection>>(pipe(captureAndLogError, always(undefined)))
@@ -45,7 +42,6 @@ async function render({ params: { slug }, searchParams, user }: Props) {
   const listings = await pipe(getListingsForCollection, andThen(toListingsWithRole(user)), otherwiseEmptyArray)(slug)
   const offers = await pipe(getOffersForCollection, andThen(toOffersWithRole(user)), otherwiseEmptyArray)(slug)
   const swaps = await pipe(getSwapsForCollection, andThen(toSwapsWithRole(user)), otherwiseEmptyArray)(slug)
-  const selection = listingDetailsSearchParamsTransformSchema.parse({ listings, searchParams })
 
   return (
     <CollectionPage
@@ -55,7 +51,6 @@ async function render({ params: { slug }, searchParams, user }: Props) {
       nfts={nfts}
       offers={offers}
       swaps={swaps}
-      selection={selection}
     />
   )
 }

app/frontend/src/app/listing/[slug]/loading.tsx

@@ -0,0 +1,11 @@
+import { HeaderSkeleton } from '@echo/ui/components/base/header/skeleton/header-skeleton'
+import { PageLayout } from '@echo/ui/components/base/layout/page-layout'
+
+export default function ListingLoading() {
+  return (
+    <PageLayout>
+      <HeaderSkeleton />
+      {/* TODO Skeleton view for listing details */}
+    </PageLayout>
+  )
+}

app/frontend/src/app/listing/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { getListing } from '@echo/firestore/crud/listing/get-listing'
+import { withUser } from '@echo/frontend/lib/decorators/with-user'
+import { toListingWithRole } from '@echo/frontend/lib/helpers/listing/to-listing-with-role'
+import type { User } from '@echo/model/types/user'
+import { Header } from '@echo/ui/components/base/header/header'
+import { MainSectionLayout } from '@echo/ui/components/base/layout/main-section-layout'
+import { PageLayout } from '@echo/ui/components/base/layout/page-layout'
+import { ListingDetails } from '@echo/ui/components/listing/details/listing-details'
+import { unlessNil } from '@echo/utils/helpers/unless-nil'
+import type { Nullable } from '@echo/utils/types/nullable'
+import { notFound } from 'next/navigation'
+import { andThen, isNil, pipe } from 'ramda'
+
+interface ListingPageProps {
+  params: {
+    slug: Lowercase<string>
+  }
+  user: Nullable<User>
+}
+
+async function render({ params: { slug }, user }: ListingPageProps) {
+  const listing = await pipe(getListing, andThen(unlessNil(toListingWithRole(user))))(slug)
+
+  if (isNil(listing)) {
+    notFound()
+  }
+
+  return (
+    <PageLayout>
+      <Header />
+      <MainSectionLayout>
+        <ListingDetails listing={listing} />
+      </MainSectionLayout>
+    </PageLayout>
+  )
+}
+
+export default withUser(render)

app/frontend/src/app/me/page.tsx

@@ -11,19 +11,16 @@ import { toOffersWithRole } from '@echo/frontend/lib/helpers/offer/to-offers-wit
 import { otherwiseEmptyArray } from '@echo/frontend/lib/helpers/otherwise-empty-array'
 import { toSwapsWithRole } from '@echo/frontend/lib/helpers/swap/to-swaps-with-role'
 import type { User } from '@echo/model/types/user'
-import type { SwapDetailsSearchParams } from '@echo/routing/types/frontend/search-params/swap-details-search-params'
-import { swapDetailsSearchParamsTransformSchema } from '@echo/routing/validators/frontend/swap/swap-details-search-params-transform-schema'
 import { ProfilePage } from '@echo/ui/pages/profile/profile-page'
 import type { OfferWithRole } from '@echo/ui/types/offer-with-role'
 import pFilter from 'p-filter'
 import { always, andThen, otherwise, pipe, prop } from 'ramda'
 
 interface Props {
   user: User
-  searchParams?: SwapDetailsSearchParams
 }
 
-async function render({ user, searchParams }: Props) {
+async function render({ user }: Props) {
   const nfts = await pipe(prop('username'), getNftsForOwner, otherwiseEmptyArray)(user)
   const listings = await pipe(
     prop('username'),
@@ -46,7 +43,6 @@ async function render({ user, searchParams }: Props) {
   const redeemableOffers = await pFilter<OfferWithRole>(offers, isOfferRedeemable(user.username))
   const offersCount = await pipe(prop('username'), getUserOffersCount, otherwise(always(0)))(user)
   const swaps = await pipe(prop('username'), getSwapsForUser, andThen(toSwapsWithRole(user)), otherwiseEmptyArray)(user)
-  const selection = swapDetailsSearchParamsTransformSchema.parse({ swaps, searchParams })
 
   return (
     <ProfilePage
@@ -63,7 +59,6 @@ async function render({ user, searchParams }: Props) {
       redeemableOffers={redeemableOffers}
       swaps={swaps}
       user={user}
-      selection={selection}
     />
   )
 }

app/frontend/src/app/offer/[slug]/loading.tsx

@@ -0,0 +1,11 @@
+import { HeaderSkeleton } from '@echo/ui/components/base/header/skeleton/header-skeleton'
+import { PageLayout } from '@echo/ui/components/base/layout/page-layout'
+
+export default function OfferLoading() {
+  return (
+    <PageLayout>
+      <HeaderSkeleton />
+      {/* TODO Skeleton view for offer details */}
+    </PageLayout>
+  )
+}

app/frontend/src/app/offer/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { getOffer } from '@echo/firestore/crud/offer/get-offer'
+import { withUser } from '@echo/frontend/lib/decorators/with-user'
+import { toOfferWithRole } from '@echo/frontend/lib/helpers/offer/to-offer-with-role'
+import type { User } from '@echo/model/types/user'
+import { Header } from '@echo/ui/components/base/header/header'
+import { MainSectionLayout } from '@echo/ui/components/base/layout/main-section-layout'
+import { PageLayout } from '@echo/ui/components/base/layout/page-layout'
+import { OfferDetails } from '@echo/ui/components/offer/details/offer-details'
+import { unlessNil } from '@echo/utils/helpers/unless-nil'
+import type { Nullable } from '@echo/utils/types/nullable'
+import { notFound } from 'next/navigation'
+import { andThen, isNil, pipe } from 'ramda'
+
+interface OfferPageProps {
+  params: {
+    slug: Lowercase<string>
+  }
+  user: Nullable<User>
+}
+
+async function render({ params: { slug }, user }: OfferPageProps) {
+  const offer = await pipe(getOffer, andThen(unlessNil(toOfferWithRole(user))))(slug)
+
+  if (isNil(offer)) {
+    notFound()
+  }
+
+  return (
+    <PageLayout>
+      <Header />
+      <MainSectionLayout>
+        <OfferDetails offer={offer} />
+      </MainSectionLayout>
+    </PageLayout>
+  )
+}
+
+export default withUser(render)

app/frontend/src/app/swap/[slug]/loading.tsx

@@ -0,0 +1,11 @@
+import { HeaderSkeleton } from '@echo/ui/components/base/header/skeleton/header-skeleton'
+import { PageLayout } from '@echo/ui/components/base/layout/page-layout'
+
+export default function SwapLoading() {
+  return (
+    <PageLayout>
+      <HeaderSkeleton />
+      {/* TODO Skeleton view for swap details */}
+    </PageLayout>
+  )
+}

app/frontend/src/app/swap/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { getSwap } from '@echo/firestore/crud/swap/get-swap'
+import { withUser } from '@echo/frontend/lib/decorators/with-user'
+import { toSwapWithRole } from '@echo/frontend/lib/helpers/swap/to-swap-with-role'
+import type { User } from '@echo/model/types/user'
+import { Header } from '@echo/ui/components/base/header/header'
+import { MainSectionLayout } from '@echo/ui/components/base/layout/main-section-layout'
+import { PageLayout } from '@echo/ui/components/base/layout/page-layout'
+import { SwapDetails } from '@echo/ui/components/swap/details/swap-details'
+import { unlessNil } from '@echo/utils/helpers/unless-nil'
+import type { Nullable } from '@echo/utils/types/nullable'
+import { notFound } from 'next/navigation'
+import { andThen, isNil, pipe } from 'ramda'
+
+interface SwapPageProps {
+  params: {
+    slug: Lowercase<string>
+  }
+  user: Nullable<User>
+}
+
+async function render({ params: { slug }, user }: SwapPageProps) {
+  const swap = await pipe(getSwap, andThen(unlessNil(toSwapWithRole(user))))(slug)
+
+  if (isNil(swap)) {
+    notFound()
+  }
+
+  return (
+    <PageLayout>
+      <Header />
+      <MainSectionLayout>
+        <SwapDetails swap={swap} />
+      </MainSectionLayout>
+    </PageLayout>
+  )
+}
+
+export default withUser(render)

app/frontend/src/app/user/[username]/page.tsx

@@ -12,8 +12,6 @@ import { otherwiseEmptyArray } from '@echo/frontend/lib/helpers/otherwise-empty-
 import { otherwiseUndefined } from '@echo/frontend/lib/helpers/otherwise-undefined'
 import { toSwapsWithRole } from '@echo/frontend/lib/helpers/swap/to-swaps-with-role'
 import type { User } from '@echo/model/types/user'
-import type { OfferDetailsSearchParams } from '@echo/routing/types/frontend/search-params/offer-details-search-params'
-import { offerDetailsSearchParamsTransformSchema } from '@echo/routing/validators/frontend/offer/offer-details-search-params-transform-schema'
 import { UserPage } from '@echo/ui/pages/user/user-page'
 import type { Nullable } from '@echo/utils/types/nullable'
 import { notFound } from 'next/navigation'
@@ -23,11 +21,10 @@ interface Props {
   params: {
     username: string
   }
-  searchParams?: OfferDetailsSearchParams
   user: Nullable<User>
 }
 
-async function render({ params: { username }, searchParams, user: authUser }: Props) {
+async function render({ params: { username }, user: authUser }: Props) {
   const user = await pipe(getUserByUsername, otherwiseUndefined)(username)
   if (isNil(user)) {
     notFound()
@@ -42,7 +39,6 @@ async function render({ params: { username }, searchParams, user: authUser }: Pr
   const offers = await pipe(getPendingOffersForUser, andThen(toOffersWithRole(authUser)), otherwiseEmptyArray)(username)
   const offersCount = await pipe(getUserOffersCount, otherwise(pipe(captureAndLogError, always(0))))(username)
   const swaps = await pipe(getSwapsForUser, andThen(toSwapsWithRole(user)), otherwiseEmptyArray)(username)
-  const selection = offerDetailsSearchParamsTransformSchema.parse({ offers, searchParams })
 
   return (
     <UserPage
@@ -58,7 +54,6 @@ async function render({ params: { username }, searchParams, user: authUser }: Pr
       offers={offers}
       swaps={swaps}
       user={user}
-      selection={selection}
     />
   )
 }

app/frontend/src/lib/helpers/listing/to-listing-with-role.ts

@@ -0,0 +1,12 @@
+import { listingDocumentToModel } from '@echo/firestore/converters/listing-document-to-model'
+import type { ListingDocument } from '@echo/firestore/types/model/listing-document'
+import type { User } from '@echo/model/types/user'
+import { setListingRoleForUser } from '@echo/ui/helpers/listing/set-listing-role-for-user'
+import type { Nullable } from '@echo/utils/types/nullable'
+import { pipe } from 'ramda'
+
+export function toListingWithRole(user: Nullable<User>) {
+  return function (listing: ListingDocument) {
+    return pipe(listingDocumentToModel, setListingRoleForUser(user))(listing)
+  }
+}

app/frontend/src/lib/helpers/listing/to-listings-with-role.ts

@@ -1,13 +1,12 @@
-import { listingDocumentToModel } from '@echo/firestore/converters/listing-document-to-model'
 import type { ListingDocument } from '@echo/firestore/types/model/listing-document'
+import { toListingWithRole } from '@echo/frontend/lib/helpers/listing/to-listing-with-role'
 import type { User } from '@echo/model/types/user'
-import { setListingRoleForUser } from '@echo/ui/helpers/listing/set-listing-role-for-user'
 import { promiseAll } from '@echo/utils/helpers/promise-all'
 import type { Nullable } from '@echo/utils/types/nullable'
-import { map, pipe } from 'ramda'
+import { map } from 'ramda'
 
 export function toListingsWithRole(user: Nullable<User>) {
   return function (listings: ListingDocument[]) {
-    return pipe(map(pipe(listingDocumentToModel, setListingRoleForUser(user))), promiseAll)(listings)
+    return promiseAll(map(toListingWithRole(user), listings))
   }
 }

app/frontend/src/lib/helpers/offer/to-offer-with-role.ts

@@ -0,0 +1,12 @@
+import { offerDocumentToModel } from '@echo/firestore/converters/offer-document-to-model'
+import type { OfferDocument } from '@echo/firestore/types/model/offer-document'
+import type { User } from '@echo/model/types/user'
+import { setOfferRoleForUser } from '@echo/ui/helpers/offer/set-offer-role-for-user'
+import type { Nullable } from '@echo/utils/types/nullable'
+import { pipe } from 'ramda'
+
+export function toOfferWithRole(user: Nullable<User>) {
+  return function (offer: OfferDocument) {
+    return pipe(offerDocumentToModel, setOfferRoleForUser(user))(offer)
+  }
+}

app/frontend/src/lib/helpers/offer/to-offers-with-role.ts

@@ -1,12 +1,11 @@
-import { offerDocumentToModel } from '@echo/firestore/converters/offer-document-to-model'
 import type { OfferDocument } from '@echo/firestore/types/model/offer-document'
+import { toOfferWithRole } from '@echo/frontend/lib/helpers/offer/to-offer-with-role'
 import type { User } from '@echo/model/types/user'
-import { setOfferRoleForUser } from '@echo/ui/helpers/offer/set-offer-role-for-user'
 import type { Nullable } from '@echo/utils/types/nullable'
-import { map, pipe } from 'ramda'
+import { map } from 'ramda'
 
 export function toOffersWithRole(user: Nullable<User>) {
   return function (offers: OfferDocument[]) {
-    return map(pipe(offerDocumentToModel, setOfferRoleForUser(user)), offers)
+    return map(toOfferWithRole(user))(offers)
   }
 }

app/frontend/src/lib/helpers/swap/to-swap-with-role.ts

@@ -0,0 +1,12 @@
+import { swapDocumentToModel } from '@echo/firestore/converters/swap-document-to-model'
+import type { SwapDocument } from '@echo/firestore/types/model/swap-document'
+import type { User } from '@echo/model/types/user'
+import { setSwapRoleForUser } from '@echo/ui/helpers/swap/set-swap-role-for-user'
+import type { Nullable } from '@echo/utils/types/nullable'
+import { pipe } from 'ramda'
+
+export function toSwapWithRole(user: Nullable<User>) {
+  return function (swap: SwapDocument) {
+    return pipe(swapDocumentToModel, setSwapRoleForUser(user))(swap)
+  }
+}

app/frontend/src/lib/helpers/swap/to-swaps-with-role.ts

@@ -1,12 +1,11 @@
-import { swapDocumentToModel } from '@echo/firestore/converters/swap-document-to-model'
 import type { SwapDocument } from '@echo/firestore/types/model/swap-document'
+import { toSwapWithRole } from '@echo/frontend/lib/helpers/swap/to-swap-with-role'
 import type { User } from '@echo/model/types/user'
-import { setSwapRoleForUser } from '@echo/ui/helpers/swap/set-swap-role-for-user'
 import type { Nullable } from '@echo/utils/types/nullable'
-import { map, pipe } from 'ramda'
+import { map } from 'ramda'
 
 export function toSwapsWithRole(user: Nullable<User>) {
   return function (swaps: SwapDocument[]) {
-    return map(pipe(swapDocumentToModel, setSwapRoleForUser(user)), swaps)
+    return map(toSwapWithRole(user))(swaps)
   }
 }