Noun Market ⌐◨-◨

A Nouns marketplace for originals and derivatives projects.

T.O.C.

Why?

  • Create a free marketplace for secondary sales of Nouns.
  • Facilitate the derivatives ecosystem: make it easier to search and discover the Nouns ecosystem.
  • Build distribution for the NounsDAO: build community and liquidity that NounsDAO can use to potentially curate in the future.

Considerations:

  • 0% fees
  • No official endorsement of derivatives
  • Linked to from nouns.wtf header
  • Feels nounish in branding and aesthetic
  • Entirely open source
  • Low barrier to entry for derivatives to be added to the marketplace
    • This will be manually operated to start and managed by the marketplace pod.
    • We can work on an automated and more trustless way to recognize derivatives and get closer to permissionless listings.

Getting started:

(note: This is a GitHub template - so all you need to do is click on the BIG GREEN "Use this template" Button to create a new repo under your GH account - we recommend using ▲ Vercel for deployment)

Clone the repo

git clone https://github.com/ourzora/nouns-marketplace.git

Install dependencies

cd nouns-marketplace
yarn

Run locally on port 3000

yarn dev

Environment Variables

Public (Included in repo):

NEXT_PUBLIC_SITE_TITLE='Your App Name'
NEXT_PUBLIC_SITE_DESCRIPTION='Your app description'
NEXT_PUBLIC_TWITTER_HANDLE='Your twitter handle'
NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000' (modify this VAR in your deployment to reflect the Public URL)
NEXT_PUBLIC_NETWORK_URL=1 (Mainnet - thats what we're working with here)
NEXT_PUBLIC_GA_TRACKING_ID= IF you want to add this sort of thing.
NEXT_PUBLIC_GALACTUS_BASE_URL=https://api.zora.co/graphql

Private (Don't commit to repo, reference .env.local.example) - .env.local

NEXT_PUBLIC_ZORA_API_KEY=
NEXT_PUBLIC_INFURA_ID=
NEXT_PUBLIC_RPC_URL=

Dependencies:

First and foremost this is a Next.js App. Additionally this project consumes a number of Zora dependencies along with some key tooling built by like-minded teams.

Zora Ecosystem:

This project levereges the zora-api for most data fetching. We are actively integrating additional noun specific functionality into our endpoints. Integrations will be tracked in this project's changelog.

Direct message @ZORAEngineering on Twitter for an API key if your needs require greater than 30 requests per minute. To access the API with a key, add a header in your requests with the key X-API-KEY.

Packages:

A note on Zord!

Zord is a general purpose UI library built on top of Vanilla Extract. Currently Zord is in alpha and used extensively through Zora's frontends. More robust documentation is in the works along with theming options. You will find that it is an extremely robust library, that does require knowledge of vanilla extract to extend... so check the Vanilla Extract Docs.

We have created this playground for the curious to explore the layout elements available.


Additional Dependencies:

The codebase is configured to use Alchemy as the RPC provider.

In general we use Wagmi as a convenience for interacting with Ethereum.

RainbowKit for wallet connect UI.

Ethers.js for more specific Ethereum interactions.

Codebase Structure:

You may notice that there are a number of directories prefixed with the @ symbol. These sit outside of the conventional next.js app application structure. The reasoning behind this is that we would like to treat this codebase as an incubator for potential packages that could be broken out and included in a variety of other applications alongside this one. You will find further documentation within these directories. Note that these are a work in progress, and we welcome input around features and api design.

Currently we have included:

  • @filter: Component suite designed to accomplish NFT display and filtering.
  • @noun-auction: Componentry, provider, hooks designed for interaction and display of nounish auction activity.
  • @market: Zora Protocol market interaction components / providers / hooks. Currently supporting Zora V3 Asks (public + private list / buy). Along with module approvals. More functionality on the roadmap!
  • @media: NFT display componentry.
  • @shared: Catch-all for util functions, hooks, constants and components used both in the primary apps and the above (more tightly scoped) pieces of functionality.

How to Contribute:

  • Before making contributions please study the codebase and follow the code patterns present as closely as possible.
  • Do not add additional dependencies amidst other work, please propose dependency additions in advance as an issue.
  • Please label issues appropriately.