What Broke

In https://github.com/glow-xyz/nftoken/pull/155, I merged this change to _app.tsx:

https://github.com/glow-xyz/nftoken/blob/782b1086831083d9f0f4e5944e0b4050ae07adc7/docs/pages/_app.tsx#L25-L27

This should’ve been /docs instead of docs, which meant that the <DocsPage /> layout didn’t render when it was supposed to. DocsPage includes the sidebar, mobile nav, and GlowProvider, which caused the missing sidebar, mobile nav not working, and minting not working.

Before merging the new NFT detail page I wasn’t careful enough about check the docs part of the site, so I didn’t notice that the docs were broken.

Fix

• Replaced docs with /docs.
• Moved the mobile nav to <Header />, so every time the mobile nav menu button is rendered in the header there’s also an actual mobile nav.

Test Checklist

Tested using https://nftoken-git-fix-revert.luma-dev.com

• [x] Splash page looks good in desktop and mobile.
• [x] “Learn more” and “Create an NFT” links work.
• [x] Docs logo goes to Overview.
• [x] GitHub link works.
• [x] Forward and back buttons on each page go to the correct place.
• [x] Glow and Twitter buttons in footer work.
• [x] Sidebar and header show on docs pages and are position: sticky when scrolling.
• [x] Docs look good on mobile.
• [x] Mobile nav works on docs and on NFT detail page.
• [x] Mobile nav works even when scrolled down the page.
• [x] Mobile nav closes when a link is clicked.
• [x] Page is not scrollable while mobile nav is open.
• [x] Mobile nav links work.
• [ ] Connect/disconnect wallet works on Live Minting Demo, and so does filling out the form and clicking Create NFT.
• [x] Live Minting Demo looks good on mobile.
• [x] Code blocks are legible and can be copied via button in top right corner.
• [x] NFT detail page has header whose mobile nav can be expanded, but no sidebar on desktop.
• [x] NFT detail page’s mobile nav works when opened while scrolled partially down the page.
• [x] NFT detail page looks good on mobile.
• [x] Copying Solana addresses on NFT detail page works and causes a success toast to appear.
• [x] Clicking logo on NFT detail page goes to Overview.
• [x] Clicking links in mobile nav on NFT detail page works.
• [x] All pages look good when browser font size is increased (in settings, not cmd+/cmd-).
• [x] All pages look good in dark mode.
• [x] All pages look good in Safari.
• [x] All pages look good in Firefox.

Let me know if there’s anything else I should add to this checklist!

Outstanding Problems

• [ ] I can’t connect wallet for the Live Minting Demo on iOS Safari. Is it a problem with it being a Vercel staging URL?

I chose some photos from Unsplash that looked cool. Demo: https://nftoken-git-l-5357-give-suggestions-for-images-to-use-for.luma-dev.com/create-an-nft

What do you think of the photos?

I did Unsplash because the photos can be freely used, whereas I know for example DALL-E explicitly says you can’t use their art for NFTs.

Two options for confetti:

1. https://share.cleanshot.com/0KIJoP
2. https://share.cleanshot.com/9JlXAB

Any other things you’d want to see? The little “Your NFT has been minted!” message could be spiced up, but I’m not quite sure how.

Put together a first iteration of a simple splash page. The design is based off of Kunj’s designs in Figma, and it’s pretty bold (although I like it) so let me know what you think.

Adds a Sign in with Glow button in the top right corner.

| | Glow installed | Glow not installed | | --- | --- | --- | | Desktop | | | | Mobile | |

Lingering questions

• [ ] How do I make Typescript happy with using window.glow?
• [ ] How do I persist logged-in state? Currently, when you refresh it goes back to being logged out.

This introduces two levels of navigation: one for the entire NFToken site, and one just for the NFToken docs.

https://share.cleanshot.com/y932U5

I’m not too sure about the design of the mobile docs nav — happy to hear suggestions for other options!

To do

• [ ] Scrolling down on a docs page on mobile and then navigating to another page causes the underline on the primary nav to fly up weirdly.

Checklist

• [ ] Splash page looks good in desktop and mobile.
• [ ] “Learn more” and “Create an NFT” links work.
• [ ] Sidebar and header show on docs pages and are position: sticky when scrolling.
• [ ] Docs look good on mobile.
• [ ] Mobile nav works even when scrolled down the page.
• [ ] Mobile nav closes when a link is clicked.
• [ ] Page is not scrollable while mobile nav is open.
• [ ] Live Minting Demo works.
• [ ] All pages look good when browser font size is increased (in settings, not cmd+/cmd-).
• [ ] All pages look good in dark mode.
• [ ] All pages look good in Safari.
• [ ] All pages look good in Firefox.

• Extracts the key/value table into <ValueList />
• Adds a button linking an NFT to its collection (if it exists)

• Adds a collection page with information about the collection and listing all its NFTs.
  • https://nftoken-git-l-5178-create-collection-detail-page.luma-dev.com/collection/3nj6H9cGutWBZeTzT5EDWLiWMh7XwVn6nsscUJLqzws7
  • https://nftoken-git-l-5178-create-collection-detail-page.luma-dev.com/collection/BqMWbhw36dekDaSqMtLgCBomcgK5Lgu9Z5Y5mTtfQ1B2

This styles the NFT detail page (/nft/[address]) page with a developer-y table of attributes and their values.

Solana addresses are copyable, and links are clickable. Traits (if present) are listed under a separate table.

Examples:

• https://nftoken-git-l-5177-create-nft-detail-page.luma-dev.com/nft/uERDSnn8x7Hjv6zPMFpGXrbXEvGVwwBAaViFrDdjXr6
• https://nftoken-git-l-5177-create-nft-detail-page.luma-dev.com/nft/GtmTbLRKJxPAo4ZREr8sWq928sbG9xJo845U5eQNmL2f

This PR adds NetworkContext which allows changing between mainnet and devnet for the entire docs site, and persists it to local storage.

On the Create NFT component itself, there’s a LuxMenu that allows switching network:

Feature overview: https://www.loom.com/share/22e0fe0f7f264529a719046d01d0d8a2

Extras:

• The nft card component used both on the mintlist and collection page has been extracted into the NftCard component. cc @benborgers

QA: You can use the following mintlist to test on devnet: https://nftoken-git-l-5182-allow-minting-from-mintlist.luma-dev.com/mintlist/heT9rmaXNQNttfwe5vPn6xymgEJg33cMDnNDGF6RuRo?network=devnet

• Add the /mintlists page that gives overview of all the mintlists created by the wallet

• Add the mintlist/[mintlistAddress] page that displays the mintlist details

There can be multiple writes to an account in the same block, so we can support much faster mintlist creation by allowing the add_mint_infos instruction to specify the following info:

• start_idx
• mint_infos_to_add

Then the program needs to be a bit smarter about figuring out the number of NFTs that have been configured since it's possible that we are overwriting a mint info that has already been configured.

The root of this issue is that a delegate can not freeze the token. Only update authority can. This means you can't do something like cardinal-staking, or escrowless marketplace listings. These kinds of dapps are popular because holder-verification continues to work, and the token shows in their wallet.

Currently, without freeze authority being delegatable, a dapp given delegate authority may break or have stale data if the user removes the delegate authority without interacting with said dapp - or transfers the token.

If we remove is_frozen from nft_update, and add new instructions to manage this property, we can solve this problem.

Delegate moving forward will act as transfer and freeze authority.

When frozen, the token can not be acted upon. Any action except for metadata update should error. nft_burn needs to be patched. (#196 )

These changes can be made with backwards compatibility with v1.

The new instructions could be:

nft_freeze and nft_thaw. Each would check if the delegate is the signer of the ix, and if so, update is_frozen

We can scan mainnet for any current calls to nft_update and see if anyone is using args.is_frozen before making a decision but I think shooting for retro-active ^1.0.1 support here would be a massive win.

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• [ ] Update dependency @glow-app/glow-react to v0.6.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• [ ] Update dependency @markdoc/markdoc to v0.1.3
• [ ] Update dependency @types/jest to v28.1.2
• [ ] Update dependency typescript to v4.7.4
• [ ] Update dependency @glow-app/glow-client to v0.6.0
• [ ] Update dependency @glow-app/solana-client to v0.6.1
• [ ] Update dependency @solana/web3.js to v1.44.1
• [ ] Update dependency eslint to v8.18.0
• [ ] Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• [ ] Update dependency @markdoc/next.js to v0.1.4
• [ ] Update dependency @types/react to v18.0.14
• [ ] Update dependency ts-jest to v28.0.5
• [ ] Update dependency @metaplex-foundation/beet to v0.3.0
• [ ] Update dependency prettier to v2.7.1
• [ ] Update react monorepo to v18.2.0 (react, react-dom)
• [ ] Update typescript-eslint monorepo to v5.28.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• [ ] Update dependency camelcase to v7

Detected dependencies

• [ ] Check this box to trigger a request for Renovate to run again on this repository

Let's say we add Hierarchical Collections #65 in the second version of the CollectionAccount. How do we let Anchor / Rust serialize one account or the other? Will we have to move serialization code from the Anchor macro to inside the instruction?