Redirecting Objects to Walrus Sites

Consider a collection of NFTs, such as the one published by https://flatland.wal.app. As shown there, each minted NFT has its own Walrus Site, which can be personalized based on the contents, for example, the color, of the NFT itself.

To achieve this, add a "redirect" in the NFT's Display property. Each time an NFT's object ID is browsed through a portal, the portal checks the Display of the NFT and, if it encounters the walrus site address key, it fetches the Walrus Site that is at the corresponding object ID.

When creating the Display of the NFT, you can include the key-value pair that points to the Walrus Site that is to be used:

...
const VISUALIZATION_SITE: address = @0x901fb0...;
display.add(b"walrus site address".to_string(), VISUALIZATION_SITE.to_string());
...

This example only opens the specified Walrus Site when browsing the object ID of the NFT. To ensure that the properties of the NFT can be used to personalize the site, this needs to be done in the VISUALIZATION_SITE. Since the subdomain is still pointing to the NFT's object ID, the Walrus Site that is loaded can check its origin in JavaScript, and use the subdomain to determine the NFT, fetch it from chain, and use its internal fields to modify the displayed site.

For an end-to-end example, see the flatland example.