OASIS Learn/Case Studies/Founder NFTs
Beginner ⏱ 45 min WEB4

🎖️ Case Study: Founder NFTs

The OASIS Founder NFT landing page is a focused WEB4 project — a marketing and minting site that lets early adopters claim a limited-edition Founder NFT via their OASIS Avatar. It demonstrates the full NFT lifecycle: avatar auth, whitelist checking, on-chain minting via multiple providers, and wallet display. A great starting point for any NFT launch project.

Tech stack

  • Frontend: Vanilla JS, CSS animations, canvas-based particle effects
  • OASIS WEB4: Avatar SSO, NFT minting (Solana + Ethereum), Wallet, Karma awards for founders
  • npm: @oasisomniverse/web4-api

Step 1 — Avatar Login

auth.js
import { OasisWeb4Client } from '@oasisomniverse/web4-api';

const oasis4 = new OasisWeb4Client({ baseUrl: 'https://api.web4.oasisomniverse.one' });

export async function loginOrRegister(email, password, isNew) {
  const fn = isNew ? oasis4.avatar.register : oasis4.avatar.authenticate;
  const { result, isError, message } = await fn.call(oasis4.avatar, { email, password });
  if (isError) throw new Error(message);
  oasis4.auth.setToken(result.token);
  return result.avatar;
}

Step 2 — Whitelist Check

whitelist.js
async function checkWhitelist(avatarId) {
  // Whitelist is a private Holon containing allowed avatar IDs
  const { result: wl } = await oasis4.data.loadHolonByCustomKey({ key: 'founder-whitelist' });
  const isWhitelisted = wl.customData.avatarIds.includes(avatarId);

  // Also check if they've already claimed
  const { result: wallet } = await oasis4.nft.getWallet({ avatarId });
  const alreadyClaimed = wallet.nfts.some(n => n.collectionId === 'founder-2025');

  return { isWhitelisted, alreadyClaimed };
}

Step 3 — Mint the Founder NFT

mint.js
async function claimFounderNFT(avatarId) {
  const { isWhitelisted, alreadyClaimed } = await checkWhitelist(avatarId);
  if (!isWhitelisted) throw new Error('Not whitelisted');
  if (alreadyClaimed)  throw new Error('Already claimed');

  const { result: nft } = await oasis4.nft.mint({
    avatarId,
    collectionId:  'founder-2025',
    title:         'OASIS Founder — Genesis Edition',
    description:   'One of 1,000 original OASIS Founders. Grants lifetime Luminary karma tier access.',
    imageUrl:      'https://cdn.oasisomniverse.one/nft/founder-genesis.mp4',
    providerType:  'SolanaOASIS',
    attributes: [
      { trait: 'Edition',    value: 'Genesis' },
      { trait: 'Year',       value: '2025' },
      { trait: 'Access',     value: 'Luminary' },
    ],
  });

  // Award founding karma — unlocks Luminary WEB6 AI tier
  await oasis4.karma.award({ avatarId, amount: 250000, reason: 'Founder NFT claimed' });

  return nft;
}

Step 4 — Displaying the Wallet

wallet-display.js
async function renderWallet(avatarId) {
  const { result: wallet } = await oasis4.nft.getWallet({ avatarId });
  const grid = document.querySelector('#nft-grid');

  wallet.nfts.forEach(nft => {
    const card = document.createElement('div');
    card.className = 'nft-card';
    card.innerHTML = `
      <video src="${nft.imageUrl}" autoplay loop muted></video>
      <div class="nft-title">${nft.title}</div>
      <div class="nft-chain">${nft.providerType}</div>
    `;
    grid.appendChild(card);
  });
}
💡
Source code

Browse the full Founder NFT site at github.com/NextGenSoftwareUK/OASIS/tree/master/NFTFoundersLandingPage ↗

Next steps