holaplex/holaplex

Holaplex.com | Find, buy, and sell NFTs from incredible creators on Solana.

👋 Welcome to Holaplex - Tools built by creators, for creators, owned by creators.

Local project setup

First, install dependencies

yarn install

You might also want to setup a .env.local file with the following overrides:

# mainnet
NEXT_PUBLIC_SOLANA_ENDPOINT="https://holaplex.rpcpool.com/"
# devnet (comment out when you want to use real solana)
NEXT_PUBLIC_SOLANA_ENDPOINT="http://api.devnet.solana.com"

NFT_STORAGE_API_KEY="" # got to https://nft.storage and create an account, and get an API key.

NEXT_PUBLIC_MIXPANEL_TOKEN

Development

Then, simply run the development server:

PORT=3001 yarn dev

Replace 3001 with an available port on your machine for this and any of the following examples.

Open http://localhost:3001 with your browser to see the result.

The src/pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Graph QL Queries

We expose a Graph QL layer for data produced by the indexer.

https://graph.holaplex.com

View Available Data

View available data at https://docs.holaplex.com/

View and Use Existing Queries

Query code is generated from Graph QL queries. The query specs are located in ./src/graphql/*/.graphql. These specs are processed by the generate:graphql script in package.json. The script outputs typescript types and react hooks with documentation that can be used to fetch data from the Graph QL layer. See indexerTypes.ts for existing queries.

To use a query, use its hook as documented in the query example for the query in indexerTypes.ts.

Add a Query

To add a query, you need to define the Graph QL query spec and use it to generate the necessary types and hook. To do this

1. Build the query from available data (see above).
2. Save the query as a new .graphql file in the specs location (see above).
3. Generate the code with yarn generate:graphql. This produces code in indexerTypes.ts.
4. Finally, use the generated hook in your react component.

holaplex's Issues

Subdomain validation

When users create or edit stores, don't allow subdomains that

• contain .

hmm, that should cover it I guess?

Unredeemed Bid Logic is incorrect

The logic in this component that tells the user they have an unredeemed bid is inaccurate.

We don't currently index enough data to determine if a user has redeemed their bid or not. I believe we'd have to index the vault program to properly determine if a user has a bid to redeem. At the moment, this is logic will tell a lot of people they have a bid to redeem when in fact they have already redeemed it.

Storefront JSON Update Script

Goal

Holaplex engineers can patch storefront json of a storefront by executing a yarn command on a server with access to arweave private key.

Changes

• Add a node script to hacks directory. exp script

yarn run storefronts:update /path/to/storefront.json

• Script reads the json file provided, passes results to upsert arweave storefront sdk.

https://github.com/holaplex/holaplex/blob/dev/src/modules/arweave/client.ts#L237

The css string can be empty. No longer used. Ideally save the json contents to the data

Edit Holaplex.com Header for better support Flow

Fix the About page

Change FAQ Header → “Support” with dropdown menu:

• FAQ
• Setup a store
• Minting NFTs
• Selling NFTs
• Bidding and redeeming
• Submit a Ticket

Outbound link tracking

Display Storefront Twitter on Discovery Tool

Goal

As collectors are thumbing through active listings on the twitter handle of the storefront is displayed user.

Requirements

• Show twitter handle of storefront with the listing when available from the API.

Highlight how to remove banner images

NFT details page

Create the path:
holaplex.com/nfts/[nftAddress].tsx

Here is the NFT interface on the backend:
https://github.com/holaplex/solana-indexer/blob/dev/crates/graphql/src/schema/objects/nft.rs#L136

And here is the current Frontend:
https://github.com/holaplex/marketplace/blob/dev/src/types.d.ts#L52

Apparently we already have a we have a { nft(address: "") { ... } } query, please make that available for consumption on the holaplex.com frontend first. Then we'll look into porting over the NFT details page from marketplaces.

Accept an Offer on NFT

Goal

Owner of an NFT can accept an offer. Selling the NFT. When offer accepted cancel listing of the seller in the same transaction.

References

https://github.com/holaplex/marketplace/blob/dev/src/components/AcceptOfferForm/index.tsx#L52

Add edition info to listing cards

https://www.figma.com/file/8WjVJW9fa2rwGctm7ZVaCT/Design-System?node-id=4249%3A76487

Problem Statement

🔥 There is no way to tell if a listing is for a 1/1 or edition of many. This can make it hard to tell if it’s worth your time to click in to see details.

Project Summary

• Add edition info to the cards, maybe just if it’s not a 1/1?
• BONUS: clear up edition info on the details page

Auction time discrepancies

An individual auction page has a shorter auction time than what is stated on the home page.

example: https://celestialbody.holaplex.com/listings/7JAZCtspZQ52x6vmadAsfEjvenreUZ19BghgVR3aDdgy vs homepage listing.

Owned NFTs not loaded when account has big nr. of tokens (balance)

If there are a big number of tokens in users wallet, loading of NFTs fail.

bn.js:6 Uncaught (in promise) Error: Number can only safely store up to 53 bits
at r (bn.js:6:21)
at _t.o.toNumber (bn.js:547:7)
at t.loadMetadataForUsers (loadAccounts.js:48:46)
at index.tsx:38:35
at l (runtime.js:45:40)
at Generator._invoke (runtime.js:274:22)
at Generator.P.forEach.e. [as next] (runtime.js:97:21)

NFT details cleanup

Design QA pointers/measurement pics: https://www.figma.com/file/MxzeTx3eaLDISbxRBuI9JU/Miscellaneous?node-id=212%3A12421
NFT Detail design file: https://www.figma.com/file/snKvxHcJI50oFduGsVvsoi/?node-id=0%3A1

• Hide attributes accordion completely if NFT has no attributes

• For aspect ratios 1:1, 3:2, 5:4 use this standard layout - but for wider aspect ratios like 4:3, 16:9, wrap the NFT detail elements and set to full width so that image is centred and optimized. Example:

[Design here](https://www.figma.com/file/MxzeTx3eaLDISbxRBuI9JU/Miscellaneous?node-id=212%3A12421)

• Created by / Owned by labels should be Grey-300
  Currently looks like:

Should look like:

• Owned by elements should be right aligned
  Currently looks like:

Should look like:

• NFT name should be font size 24px / line height 32px / weight semibold
  Currently looks like:

Should look like:

• Anywhere there is a wallet address instead of a twitter handle (including creators in cards in owned tab) use space mono font being used elsewhere
  Currently looks like:

Should look like:

• Actions dropdown button should have a dropshadow so it appears to be floating (and keep dropshadow when button active) - some of these points are easier to see/compare in figma, have a look at the screenshot and design side by side for reference
  Currently looks like:

Should look like:

Dropdown menu

• Bg color should be Grey-900
• Dropdown should have 8px border radius
• Icons should be 16px by 16px (usually it's 24px but 16px looks best here)
• Dropdown should align with the right side of the icon button above it
  Currently looks like:

Should look like:

• All borders/dividers should be Grey-800 and have border radius 8px (accordions, attribute containers, dividers etc)
  Currently looks like:

Should look like:

Attributes containers

Make an Offer on NFT

/nfts/{address}/offers/new

query {
market(subdomain: "holaplex") {
  auctionHouse {
    ...
  }
}

nft(address: "") {
  offers {
    ...
  }
}
}

References

https://github.com/holaplex/marketplace/blob/dev/src/pages/nfts/%5Baddress%5D.tsx#L706

https://github.com/holaplex/marketplace/blob/dev/src/components/Offer/index.tsx#L47

Improve performance of Scroll holaplex.com

The scrolling on holaplex.com is a bit sluggish. We might be able to improve it with https://reactnative.dev/docs/virtualizedlist.

The relevant code is in pages/index.tsx#600. Let's see if we can make it faster and smoother using the virtualizedList, or another method.

Global search

Design

https://www.figma.com/file/LOgxgF3XOa8mNG7yDocSJn/Global-search?node-id=0%3A1

Solution

• Add a search bar to holaplex discovery tool

• Users can search for stores and NFTs based on:

• • store name
• • store description

• As the user enters text possible results should appear

• • When results are displayed user should be able to use the up and down arrow keys to traverse the list.
• • User should be able to press enter key to visit that store in a new tab

Add full support for Query param based filtering

Need to hook into the getServerSideProps function and extract query params from there.

Look into making this generalizable so we can add it in storefronts as well

Admin page bug

The admin page disappears after a few seconds for all creators who try to unwind an NFT from there.

This issue is likely universal, which means any creator who experiences a failure during listing also loses access to their NFTs.

Error: Cannot find module '@/modules/db'

while following the README.md, I ran SOLANA_PUBKEY=${SOLANA_PUBKEY} yarn run db:seed I am getting this `Error: Cannot find module '@/modules/db'

I tried yarn add -D node-modules modules but I guess it's not what the error meant me to do.. plz help!

Initial Profile / Activity page

Goal

Create a page where a user can review the activity for a pubkey.

Initial supported notifications / activities and actions

• Pubkey bid on an NFT → view auction
• Pubkey got outbid on an auction → view auction
• Auction ended and you lost → view auction
• Auction ended and you lost → redeem bid
• Your art was resold
• Request to verify NFT as co-creator

Indexer Endpoints needed

• getAuctionsAndBidsForPubkey
  • when we have details about auctions a pubkey has participated in (at least one bid) as well as all bidding information for those auctions, we can apply JS frontend logic to create a series of notification cards with actions
    • mostly view actions in this first iteration

Frontend components needed (suggestions)

• Page /profile/:pubkey
  • banner image
  • pfp
  • left section
  • FeedList
• fixed left section
• FeedList
• FeedListItem

Designs

https://www.figma.com/file/DC1T92jSoSIw9rvvEJytNK/Profiles---MVP?node-id=391%3A8874

Fix Upload remove icon being hidden for banner and PFP input fields in Storefront edit

Problem

Users can't seem to remove banner or PFP from storefront edit, but actually it's just that the remove icon blends in with the background.

Solution

Target the icon and fix it wit CSS. I tried a bit initially, but didn't find the right level to target / get the colour to propagate.

Relevant code is in /pages/storefronts/edit at the code below

  <Form.Item
                    label="Banner"
                    name={['theme', 'banner']}
                    tooltip="Sits at the top of your store, 1500px wide and 375px tall works best!"
                    rules={[{ required: false, message: 'Upload your Banner.' }]}
                  >
                    <Upload>
                      {(isEmpty(values.theme.banner) ||
                        !ifElse(
                          has('response'),
                          view(lensPath(['response', 'url'])),
                          prop('url')
                        )(values.theme.banner[0])) && (
                        <Button block type="primary" size="middle" icon={<UploadOutlined />}>
                          Upload Banner
                        </Button>
                      )}
                    </Upload>
                  </Form.Item>

Analytics/merchandising tab on profiles

When viewing a collector’s profile (currently all profiles) it’s not easy to get a high level picture of the person’s activity without reading a lot and browsing through the profile. This problem is amplified by the time sensitivity of auctions - it’s too time consuming to read through activity events in order to get a sense for the kind of person you’re bidding against.

Project Summary

• Provide collector analytics for things like
  • SOL balance
  • Total bid volume
  • Number of owned NFTs —> I think this should actually go into the “owned” tab (opensea, foundation, formfn all do this)

Add a link to home (logo?) in sticky Listings div

Problem:

No way to easily get back to home / top when you are near the bottom of the infinite scroll listings

Potential Solution:

Add a link to home (maybe that calls scrollToTop) in the sticky Current Listings div

cc @damianr @bellebellesol

Add socials below CTA section

How to set auction with an own splt token ?

Hi all, i've deployed my store but i can't find out to change the auction tocken (which is SOL by default) into my own token.

How can i manage that ? Is this possible ?
Thanks

Upgrade all repos to Node 16.14.0

Navbar updates

• About + Help dropdowns should have a fixed width of 14.5rem on desktop:

• Make about + help dropdowns into accordions in mobile navigation

• Compress 'Mint NFTs' and 'Edit store' / 'New store' links into a dropdown on desktop and accordion on mobile navigation. Only show create dropdown and options when a wallet is connected. Determine whether the wallet has a storefront or not and display either 'Edit store' or 'New store'. Design: https://www.figma.com/file/DC1T92jSoSIw9rvvEJytNK/Profiles---MVP?node-id=4474%3A8720

Change CTA for button after winning an auction

Current call to action is "redeem bid" if you won the auction. Change that to "Claim NFT".

Allow editing of profiles

Problem Statement

🔥 V1 of profiles don’t allow the wallet owner to attach any info to the wallet. 💡 We should consider making this a smart contract (akin to the social graph) that stores / updates all info listed below on-chain. Not unlike how we stored storefront configs in the beginning.

Project Summary

• Allow wallet owner to add / change
  • custom banner image
  • custom logo
  • name
  • description
  • social links
    • verified twitter handle
    • discord
    • website
    • instagram

Add cookie banner

We need a cookie banner for

• holaplex.com
• subdomain.holaplex.com

Sorting by "Ending Soonest" Not Working Properly

When sorting by "ending soonest" at holaplex.com, some auction listings ending in a week or more are rendering next to auctions ending in sub-24 hours. Example:

Bulk minter experience in Storefronts

Goal

When a store owner or white listed creator goes to create an NFT the bulk minter on is launched

Requirements

• Package the bulk minter into a holaplex npm package.
• Launch Holaplex bulk mint modal when store owner presses the create button in the user dropdown.
• Launch bulk mint modal on when user presess “Create NFT“ link in the header.

SOLANA_PUBKEY=${SOLANA_PUBKEY} yarn run db:seed ERROR

SOLANA_PUBKEY=${SOLANA_PUBKEY} yarn run db:seed
On running the script on windows this error is thrown :

List an Owned NFT from Profile

Goal

User can list their owned NFT from their profile.

Reference

https://github.com/holaplex/marketplace/blob/dev/src/components/SellNft/index.tsx#L43

Add Badge for Secondary Sales in disco tool & Listing card redesign

Let's let users discover secondary sales more easily. A well designed badge and a filter option would help a ton!

View offers on NFT

Goal

Users can see offer for the holaplex ah made on an nft from its detail page.

Query

nft(address: "") {
  offers {
    auctionHouse
    price
    buyer
  }
}

Offers are for any auction house. Need to filter list by the holaplex auction house before displaying to the user.

Followers/Following

General

• 'Followers' 'Following' 'Followed by' labels and 'Follow' 'Unfollow' 'Connect' text in buttons should all be medium font weight
• The follow and following number should be semi-bold font weight
  Currently looks like:

Should look like:

• Modal background color should be Grey-900 (#171717). Currently it's solid black
• If possible, style the scrollbar to be grey-500 and background color of grey-900
• Keep followers/following tabs sticky and full width
• Remove the padding from left, right and bottom of the user list so that on scroll it doesn't look to be cut off by padding
  Currently looks like:

Should look like:

• Give the PFP a background color of Grey-900 by default in case user has an SVG with transparent background
  Currently looks like:

Should look like:

• Follow button load state: only show load spinner on the button that was clicked and replace "Follow" text inside button with Grey-900 spinner icon while waiting for signature:

• After following the wallet, change the button on the profile and in the follower modal to "Unfollow" instead of "Following"
• Make "Unfollow" button Grey-800 with white text
  Currently looks like:

Should look like:

• Hover state for "Follow" button - change bg color to Grey-100 and text to Grey-700
  Should look like:

• Hover state for "Unfollow" button - change bg color to Grey-700 and text to Grey-100
  Should look like:

Profiles - General

Sticky pfp section on scroll

• If possible, for desktop only, make the pfp section sticky on scroll when it reaches the position of 40px below the navigation bar

Overall

• Remove the toast that appears when clicking the copy icon beside pubkey and instead replace copy icon with white 'check' icon used in toast. Show check icon for 2 seconds then switch back to copy icon

• On desktop screen sizes, change profile banner image height to 16rem (if it is not this size already)

• On mobile screen sizes, change profile banner image height to 10rem

Currently looks like:

Should look like:

• On desktop screen sizes, make activity images 80pxX80px

• If connected and viewing own profile, make 'You' and SOL amounts Grey 300. Only pubkeys, NFT names and store names should be white and all should link to profiles / storefronts accordingly

• In all activity events, show the square image of the NFT or listing that was interacted with instead of the round pfp of a wallet (except for follow events)

• Activity tab empty state container should be the same width as the tabs bar

• Add local search to activity

Currently looks like:

Should look like:

Use Buffer.from(Uint8Array).toString() instead of Uint8Array.toString()

Currently, stringifyNotarized uses signature.toString('base64') to convert the signature to base64 string.

Most(if not all) wallets return signatures as Uint8Arrays with the prototype of TypeArray, which does not provide the toString(base) functionality. (Phantom uses a different type, hence you can do Uint8Array.toString('base64')).

Use Buffer.from(signature).toString('base64') to fix this for other wallets.

In src/modules/notary/client.ts

Current

export const stringifyNotarized = <T>({
  payload,
  signature,
}: Notarized<T>): JsonString<NotarizedStr<T>> =>
  jsonStringify({ payload, signature: signature.toString('base64') as SignatureStr });

Recommended

export const stringifyNotarized = <T>({
  payload,
  signature,
}: Notarized<T>): JsonString<NotarizedStr<T>> =>
  jsonStringify({ payload, signature: Buffer.from(signature).toString('base64') as SignatureStr });

Proceeds from Participation NFT stuck in escrow

https://moonsnft.holaplex.com/listings/Fo6QrAQaqVFzzAsMjKSbq3HYvyMesJ8YTpwYmTDSRFhe/billing

This was an auction where the optional Participation NFTs being sold for 2 sol. Two participants chose to redeem that.

Auction creator can't redeem that 4 sol now, which is stuck in the escrow.

Here's what the creator sees when they try to settle funds-
https://solscan.io/tx/38sMv1cKkx3Nxq9MDASZN8iH32ezsj3Rt3RXghiUAqDycWXE4kAestvnu5GwKgqXiSy8eEvBptEDP1G11eNKyZFR

These participation NFTs were minted by a different wallet and I had the creator try to settle funds using that wallet too, but they're seeing the same error-

https://solscan.io/tx/3Lc3HJZnp3z2QgdHyjW1ThJP5RbVuRZ3SUbNtXHhazWG9ynEvdjrMsuAbG8pwsSTpjHZGvLuR8KCXJZvkhQ7ZEko

Init storefront from builder

Currently users go through an awkward flow when they create a storefront. They have to run a solana transaction from the admin panel.

New flow. User builds store.User runs the init transaction.User is taken to the create art section of the storefront.

Create Marketplace from Holaplex

Goal

DAO managers can create a marketplace from Holaplex picking a subdomain, specifying creator wallets for the marketplace, etc.

Requirements

• DAO options are saved on Arweave under the Holaplex wallet.
• A Metaplex storefront v2 is created with the uri field being set to the option url from Arweave.

Use SVG for SOL icon instead of Unicode char (◎)

Problem:

• Current SOL icon vertically aligns differently across browsers in an annoying way.

Goal:

• Use an SVG icon instead.

Questions:

• Does it make more sense to use the S style Solana logo or the double-circle style logo? What seems to be more prevalent across community? @damianr @bellebellesol

Optimize Image requests for profile pages

The graphql api takes an image(size: param) . Use that to make requests faster.

Collection Metadata is incorrect

The collection minting tool isn't properly setting the collection data. According to the metadata json uri structure, the collection key needs to be two key value pairs, not a string. https://docs.metaplex.com/nft-standard

ex:
{{ "collection": {"name": "Solflare X NFT","family": "Solflare"}}}

holaplex/pages/nfts/new.tsx

Line 66 in 675b05f

collection?: string;

This looks like the culprit

Image generation for social sharing

Pages to generate custom images for

• profile page
• individual listings
• in the new marketplaces: individual NFTs
• marketplace page
• collection page

Others:

• listings page

Inspo:

• https://github.com/lukechilds/merge-images
• https://github.com/Automattic/node-canvas

Look at what Spotify and Github are doing for social sharing

`run dev` hangs - "app crashed - waiting for file changes before starting"

I ran the instructions and changed the imports + package.json to be able to correctly seed the db

Also casted global to any to be able to compile

But then I get this when trying to run dev, it just hangs... any ideas?

Thanks!

Add curated badge for custom deployments

Example for monke.art

• needs 2 lists
• 1st party list of store subdomains that are owned by the DAO and very favored collaborators
• 3rd party list for stores they want to feature on their custom deployment, but not award a badge to
• badge icon would come from thier DAO badge, maybe uploaded as the same name in the different deployments

NB: Might be better to wait for custom marketplaces ref this Slack thread
https://holaplex.slack.com/archives/C02RFL1LCSX/p1643836663086239?thread_ts=1642807030.002700&cid=C02RFL1LCSX

Convert builder to wallet adapter

The builder should be using this.
https://github.com/solana-labs/wallet-adapter

Sharing Profile Page

Add metadata to the /profiles/:pubkey page so that renders a meaningful preview when shared on social media.

https://ogp.me/

Good things to include in sharing preview
Avatar of user
Name of user if connected twitter handle

Owned NFTs

• Search bar should be full width (less 1rem space between the end of it and display switcher on the right)

• Change placeholder text and search icon to Grey 500

Currently it looks like:

Should look like:

Design for reference: https://www.figma.com/file/DC1T92jSoSIw9rvvEJytNK/Profiles---MVP?node-id=4347%3A9293

• Truncate long NFT names / creator names in the same way we handle this for listing cards on discovery. Currently looks like:

Should look like: