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 directory | Source files |
|---|---|
src | 352 |
supabase | 78 |
packages | 9 |
(root) | 6 |
scripts | 6 |
wallet-sim | 2 |
contracts | 1 |
wcc-cdp-bridge | 1 |
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.
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,- Line 73
sendAndConfirmTransaction,: Submits the signed transaction to the cluster. - Line 82
createMintToInstruction,: Mints new tokens. The mint authority must sign. - Line 83
createTransferInstruction,: An SPL token transfer through the Token Program.
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 },- Line 145
tx.add(createMintToInstruction(mintAddress, userAta, userPubkey, 1, [], TOKEN_PROGRAM_ID)): Mints new tokens. The mint authority must sign. - Line 148
const [metadataAddress] = PublicKey.findProgramAddressSync(: Derives a PDA from seeds and the program ID and returns the address with its canonical bump.
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());- Line 113
createTransferInstruction(: An SPL token transfer through the Token Program. - Line 124
const { blockhash } = await connection.getLatestBlockhash();: Fetches a recent blockhash. Transactions expire if it gets too old.
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, }, });- Line 62
const { blockhash } = await connection.getLatestBlockhash();: Fetches a recent blockhash. Transactions expire if it gets too old. - 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.
| Directory | Command | Runs |
|---|---|---|
. | npm run dev | node dev.js |
. | npm run build | vite build |
. | npm run lint | eslint . |
wcc-cdp-bridge | npm run start | node server.js |
What you could build from it
- Fork the SuperStack copy and extend it within the Other gaps listed on the idea page.
- Learn the pattern first: Program Derived Addresses (PDAs)
- Learn the pattern first: Cross-Program Invocations (CPIs)