[Feature✨] Add curation tab to user profile

src/index.jsx

@@ -57,6 +57,7 @@ import Display from '@pages/profile'
 import Collections from '@pages/profile/collections'
 import Creations from '@pages/profile/creations'
 import Collabs from '@pages/profile/collabs'
+import Curation from '@pages/profile/curation'
 
 import Sync from '@pages/sync'
 import { Terms } from '@pages/terms'
@@ -83,6 +84,7 @@ const display_routes = (
   <>
     <Route index element={<Creations />} />
     <Route exact path="collection" element={<Collections />} />
+    <Route exact path="curation" element={<Curation />} />
     <Route exact path="collabs" element={<Collabs />} />
   </>
 )

src/pages/profile/curation.jsx

@@ -0,0 +1,49 @@
+import { gql } from 'graphql-request'
+import TokenCollection from '@atoms/token-collection'
+import { BaseTokenFieldsFragment } from '@data/api'
+import { useOutletContext } from 'react-router'
+
+export default function Curation() {
+  const { showRestricted, overrideProtections, address } = useOutletContext()
+
+  return (
+    <TokenCollection
+      showRestricted={showRestricted}
+      overrideProtections={overrideProtections}
+      label="Artist's Curation"
+      namespace="curation"
+      swrParams={[address]}
+      variables={{ address }}
+      emptyMessage="no curated tokens"
+      maxItems={null}
+      extractTokensFromResponse={(data) => {
+        return data.listings.map(({ token, seller_address }) => ({
+          ...token,
+          listing_seller_address: seller_address,
+          key: token.token_id,
+        }))
+      }}
+      query={gql`
+        ${BaseTokenFieldsFragment}
+        query curatorGallery($address: String!) {
+          listings(
+            where: {
+              token: { artist_address: { _neq: $address } }
+              seller_address: { _eq: $address }
+              status: { _eq: "active" }
+            }
+            distinct_on: token_id
+          ) {
+            seller_address
+            token {
+              ...baseTokenFields
+            }
+            contract_address
+            amount_left
+            price
+          }
+        }
+      `}
+    />
+  )
+}

src/pages/profile/index.jsx

@@ -124,6 +124,7 @@ export default function Display() {
   const TABS = [
     { title: 'Creations', to: '' },
     { title: 'Collection', to: 'collection' },
+    { title: 'Curation', to: 'curation' },
     { title: 'Collabs', to: 'collabs' },
   ]