Sol.College

Full lesson

solana-style-studio

What it does

From the project README:

1. Open WCC studio on Lovable. 2. Describe the theme to the AI assistant ("cyberpunk neon, electric purple", "Linear minimal", "luxury gold"…). 3. Preview the result in the in-app wallet mockup. 4. Mint the theme as a Solana NFT (devnet). 5. Click ⚡ in the gallery — Supabase Realtime broadcasts the mask to the local overlay agent. 6. Open Phantom popup in Chrome — the agent paints the themed mask on top. Type your password, click Unlock; the real Phantom unlocks. After the wallet navigates away from the password screen, the overlay auto-hides.
Original
Alexanfr-God/solana-style-studio
SuperStack fork
Blockchains/solana-style-studio @ b781362
Stars
0
Last push (original)
2026-05-11
Languages
TypeScript, JavaScript, HTML, Swift, PLpgSQL, Python
Detected stack
Metaplexweb3.js
Categories
Other
Licence
MIT

Architecture

455 source files. By extension: .tsx ×223, .ts ×215, .js ×14, .py ×2, .sol ×1.

Top-level directorySource files
src352
supabase78
packages9
(root)6
scripts6
wallet-sim2
contracts1
wcc-cdp-bridge1

Dapp: deploying

This fork is queued for its own live dapp on Sol.College, with a Devnet/Mainnet switch. It appears here, at /dapps/solana-style-studio/, once it is deployed and checked on devnet. Until then, run it locally with the commands below.

Key code, explained

Excerpts chosen automatically where the code uses the most Solana concepts, pinned to the fork's commit.

Alexanfr-God/solana-style-studio · supabase/functions/mint-nft-solana/index.ts L61–84 @ b781362 · MIT · original
      return jsonResponse(500, {        success: false,        message: 'Server wallet not configured. Please add SOLANA_DEVNET_KEYPAIR secret.',      });    }     const {      Connection,      Keypair,      PublicKey,      Transaction,      SystemProgram,      sendAndConfirmTransaction,      LAMPORTS_PER_SOL,    } = await import('npm:@solana/web3.js@1.98.2');     const {      TOKEN_PROGRAM_ID,      ASSOCIATED_TOKEN_PROGRAM_ID,      createInitializeMintInstruction,      createAssociatedTokenAccountInstruction,      createMintToInstruction,      createTransferInstruction,      getAssociatedTokenAddress,
  1. Line 73 sendAndConfirmTransaction,: Submits the signed transaction to the cluster.
  2. Line 82 createMintToInstruction,: Mints new tokens. The mint authority must sign.
  3. Line 83 createTransferInstruction,: An SPL token transfer through the Token Program.
Alexanfr-God/solana-style-studio · supabase/functions/mint-nft-build/index.ts L133–156 @ b781362 · MIT · original
    // Instruction 3: Initialize mint    tx.add(createInitializeMintInstruction(mintAddress, 0, userPubkey, userPubkey, TOKEN_PROGRAM_ID));     // Instruction 4: Get/Create ATA for user    const userAta = await getAssociatedTokenAddress(      mintAddress, userPubkey, false, TOKEN_PROGRAM_ID, ASSOCIATED_TOKEN_PROGRAM_ID    );    tx.add(createAssociatedTokenAccountInstruction(      userPubkey, userAta, userPubkey, mintAddress, TOKEN_PROGRAM_ID, ASSOCIATED_TOKEN_PROGRAM_ID    ));     // Instruction 5: Mint 1 token    tx.add(createMintToInstruction(mintAddress, userAta, userPubkey, 1, [], TOKEN_PROGRAM_ID));     // Instruction 6: Create Metadata Account V3 (Metaplex)    const [metadataAddress] = PublicKey.findProgramAddressSync(      [Buffer.from("metadata"), MPL_TOKEN_METADATA_PROGRAM_ID.toBuffer(), mintAddress.toBuffer()],      MPL_TOKEN_METADATA_PROGRAM_ID    );     tx.add(createCreateMetadataAccountV3Instruction(      { metadata: metadataAddress, mint: mintAddress, mintAuthority: userPubkey, payer: userPubkey, updateAuthority: userPubkey },      { createMetadataAccountArgsV3: {        data: { name, symbol, uri: metadataUri, sellerFeeBasisPoints: 0, creators: null, collection: null, uses: null },
  1. Line 145 tx.add(createMintToInstruction(mintAddress, userAta, userPubkey, 1, [], TOKEN_PROGRAM_ID)): Mints new tokens. The mint authority must sign.
  2. Line 148 const [metadataAddress] = PublicKey.findProgramAddressSync(: Derives a PDA from seeds and the program ID and returns the address with its canonical bump.
Alexanfr-God/solana-style-studio · src/hooks/useNftEscrow.ts L109–132 @ b781362 · MIT · original
      }       // Add transfer instruction (NFT amount = 1)      transaction.add(        createTransferInstruction(          fromTokenAccount,          toTokenAccount,          fromPubkey,          1,          [],          TOKEN_PROGRAM_ID        )      );       // Get recent blockhash      const { blockhash } = await connection.getLatestBlockhash();      transaction.recentBlockhash = blockhash;      transaction.feePayer = fromPubkey;       console.log('[escrow] Signing transaction via AppKit...');      const signed = await provider.signTransaction(transaction);       console.log('[escrow] Sending transaction...');      const signature = await connection.sendRawTransaction(signed.serialize());
  1. Line 113 createTransferInstruction(: An SPL token transfer through the Token Program.
  2. Line 124 const { blockhash } = await connection.getLatestBlockhash();: Fetches a recent blockhash. Transactions expire if it gets too old.
Alexanfr-God/solana-style-studio · src/hooks/usePlaceBid.ts L61–84 @ b781362 · MIT · original
         const { blockhash } = await connection.getLatestBlockhash();        transaction.recentBlockhash = blockhash;        transaction.feePayer = publicKey;         const signedTx = await provider.signTransaction(transaction);        signature = await connection.sendRawTransaction(signedTx.serialize());         toast.info('Confirming transaction...');        await connection.confirmTransaction(signature, 'confirmed');        toast.success('SOL transferred to escrow!');      }       toast.info('Creating bid...');       const { data, error } = await supabase.functions.invoke('auction', {        body: {          action: 'bid',          auction_id,          bidder_wallet: address,          bid_price_lamports,          tx_signature: signature,        },      });
  1. Line 62 const { blockhash } = await connection.getLatestBlockhash();: Fetches a recent blockhash. Transactions expire if it gets too old.
  2. Line 76 const { data, error } = await supabase.functions.invoke('auction', {: Makes a cross-program invocation into another program.

How to run, build and test

These commands come from the repo's own manifests (package.json scripts, Anchor.toml, Cargo, go.mod, Makefile). Check the README for prerequisites and environment variables.

DirectoryCommandRuns
.npm run devnode dev.js
.npm run buildvite build
.npm run linteslint .
wcc-cdp-bridgenpm run startnode server.js

What you could build from it