Code Tabs Test Page
Code Tabs Component Test
This page tests the new multi-language code tabs component.
Basic Example
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3
4const umi = createUmi('https://api.devnet.solana.com')
5
6const asset = await create(umi, {
7 name: 'My NFT',
8 uri: 'https://example.com/metadata.json'
9}).sendAndConfirm(umi)
10
11console.log('Asset created:', asset.publicKey)
1use mpl_core::instructions::CreateV1;
2use solana_sdk::signer::Signer;
3
4let asset = CreateV1 {
5 name: "My NFT".to_string(),
6 uri: "https://example.com/metadata.json".to_string(),
7 ..Default::default()
8};
9
10let instruction = asset.instruction();
11
12println!("Asset created: {:?}", asset);
1import com.metaplex.lib.Metaplex
2import com.metaplex.lib.modules.nfts.models.NFT
3
4val metaplex = Metaplex(connection)
5
6val nft = metaplex.nft().create(
7 name = "My NFT",
8 uri = "https://example.com/metadata.json"
9).getOrThrow()
10
11println("Asset created: ${nft.address}")
TypeScript Example
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create, CreateArgs } from '@metaplex-foundation/mpl-core'
3import { PublicKey } from '@metaplex-foundation/umi'
4
5const umi = createUmi('https://api.devnet.solana.com')
6
7const args: CreateArgs = {
8 name: 'My NFT',
9 uri: 'https://example.com/metadata.json',
10}
11
12const asset = await create(umi, args).sendAndConfirm(umi)
13
14console.log('Asset created:', asset.publicKey.toString())
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3
4const umi = createUmi('https://api.devnet.solana.com')
5
6const asset = await create(umi, {
7 name: 'My NFT',
8 uri: 'https://example.com/metadata.json',
9}).sendAndConfirm(umi)
10
11console.log('Asset created:', asset.publicKey)
Features to Test
- Language Switching - Click between tabs to switch languages
- Persistence - Refresh the page, your language choice should be remembered
- Syntax Highlighting - Code should be properly highlighted
- Copy Button - Copy button should work in each tab
- Keyboard Navigation - Use Tab/Arrow keys to navigate
- Mobile - Test on mobile viewport
Expected Behavior
- ✅ Tabs appear above the code block
- ✅ Active tab is highlighted
- ✅ Clicking a tab switches the visible code
- ✅ Language preference persists across page reloads
- ✅ Syntax highlighting works for all languages
- ✅ Copy button is visible and functional
- ✅ Keyboard accessible (tab to focus, arrow keys to switch)
- ✅ Screen reader compatible (ARIA labels present)
Single Language (No Tabs)
Regular code blocks should still work:
// This is a regular code block without tabs
const x = 1
console.log(x)
🎯 PROOF OF CONCEPT: Centralized Code Examples
This section demonstrates loading code from a centralized location!
Example 1: Create an Asset
Code loaded from src/examples/core/create-asset/ (native .js and .rs files)
All Frameworks (Kit, Umi, Shank, Anchor)
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5// Initialize UMI
6const umi = createUmi('https://api.devnet.solana.com')
7 .use(mplCore())
8
9// Create a new NFT asset
10const asset = await create(umi, {
11 name: 'My NFT',
12 uri: 'https://example.com/metadata.json'
13}).sendAndConfirm(umi)
14
15console.log('Asset created:', asset.publicKey)
1use mpl_core::instructions::CreateV1;
2use solana_sdk::signer::Signer;
3
4// Create a new NFT asset
5let create_ix = CreateV1 {
6 name: "My NFT".to_string(),
7 uri: "https://example.com/metadata.json".to_string(),
8 ..Default::default()
9};
10
11let instruction = create_ix.instruction();
12
13println!("Asset instruction created");
1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod create_asset {
7 use super::*;
8
9 // Create a new NFT asset
10 pub fn create(
11 ctx: Context<CreateAsset>,
12 name: String,
13 uri: String
14 ) -> Result<()> {
15 let asset = &mut ctx.accounts.asset;
16 asset.name = name;
17 asset.uri = uri;
18 asset.owner = ctx.accounts.owner.key();
19
20 msg!("Asset created: {}", asset.key());
21 Ok(())
22 }
23}
24
25#[derive(Accounts)]
26pub struct CreateAsset<'info> {
27 #[account(init, payer = owner, space = 8 + 200)]
28 pub asset: Account<'info, Asset>,
29 #[account(mut)]
30 pub owner: Signer<'info>,
31 pub system_program: Program<'info, System>,
32}
33
34#[account]
35pub struct Asset {
36 pub name: String,
37 pub uri: String,
38 pub owner: Pubkey,
39}
Only JavaScript Frameworks (Kit + Umi)
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5// Initialize UMI
6const umi = createUmi('https://api.devnet.solana.com')
7 .use(mplCore())
8
9// Create a new NFT asset
10const asset = await create(umi, {
11 name: 'My NFT',
12 uri: 'https://example.com/metadata.json'
13}).sendAndConfirm(umi)
14
15console.log('Asset created:', asset.publicKey)
Only Rust Frameworks (Shank + Anchor)
1use mpl_core::instructions::CreateV1;
2use solana_sdk::signer::Signer;
3
4// Create a new NFT asset
5let create_ix = CreateV1 {
6 name: "My NFT".to_string(),
7 uri: "https://example.com/metadata.json".to_string(),
8 ..Default::default()
9};
10
11let instruction = create_ix.instruction();
12
13println!("Asset instruction created");
1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod create_asset {
7 use super::*;
8
9 // Create a new NFT asset
10 pub fn create(
11 ctx: Context<CreateAsset>,
12 name: String,
13 uri: String
14 ) -> Result<()> {
15 let asset = &mut ctx.accounts.asset;
16 asset.name = name;
17 asset.uri = uri;
18 asset.owner = ctx.accounts.owner.key();
19
20 msg!("Asset created: {}", asset.key());
21 Ok(())
22 }
23}
24
25#[derive(Accounts)]
26pub struct CreateAsset<'info> {
27 #[account(init, payer = owner, space = 8 + 200)]
28 pub asset: Account<'info, Asset>,
29 #[account(mut)]
30 pub owner: Signer<'info>,
31 pub system_program: Program<'info, System>,
32}
33
34#[account]
35pub struct Asset {
36 pub name: String,
37 pub uri: String,
38 pub owner: Pubkey,
39}
Just Umi
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { create } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4
5// Initialize UMI
6const umi = createUmi('https://api.devnet.solana.com')
7 .use(mplCore())
8
9// Create a new NFT asset
10const asset = await create(umi, {
11 name: 'My NFT',
12 uri: 'https://example.com/metadata.json'
13}).sendAndConfirm(umi)
14
15console.log('Asset created:', asset.publicKey)
Example 2: Transfer an Asset
Code loaded from src/examples/core/transfer-asset/ (native .js and .rs files)
All Frameworks - Transfer Asset
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { transfer } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4import { publicKey } from '@metaplex-foundation/umi'
5
6// Initialize UMI
7const umi = createUmi('https://api.devnet.solana.com')
8 .use(mplCore())
9
10// Transfer an existing NFT asset to a new owner
11const result = await transfer(umi, {
12 asset: publicKey('AssetAddressHere...'),
13 newOwner: publicKey('RecipientAddressHere...'),
14}).sendAndConfirm(umi)
15
16console.log('Asset transferred:', result.signature)
1use mpl_core::instructions::TransferV1;
2use solana_sdk::{pubkey::Pubkey, signer::Signer};
3
4// Asset and recipient addresses
5let asset = Pubkey::from_str("AssetAddressHere...").unwrap();
6let new_owner = Pubkey::from_str("RecipientAddressHere...").unwrap();
7
8// Transfer an existing NFT asset to a new owner
9let transfer_ix = TransferV1 {
10 asset,
11 new_owner,
12 ..Default::default()
13};
14
15let instruction = transfer_ix.instruction();
16
17println!("Transfer instruction created");
1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod transfer_asset {
7 use super::*;
8
9 // Transfer an existing NFT asset to a new owner
10 pub fn transfer(
11 ctx: Context<TransferAsset>
12 ) -> Result<()> {
13 let asset = &mut ctx.accounts.asset;
14
15 // Verify current owner
16 require!(
17 asset.owner == ctx.accounts.current_owner.key(),
18 ErrorCode::Unauthorized
19 );
20
21 // Transfer ownership
22 asset.owner = ctx.accounts.new_owner.key();
23
24 msg!("Asset transferred to: {}", asset.owner);
25 Ok(())
26 }
27}
28
29#[derive(Accounts)]
30pub struct TransferAsset<'info> {
31 #[account(mut)]
32 pub asset: Account<'info, Asset>,
33 pub current_owner: Signer<'info>,
34 /// CHECK: New owner can be any account
35 pub new_owner: AccountInfo<'info>,
36}
37
38#[account]
39pub struct Asset {
40 pub name: String,
41 pub uri: String,
42 pub owner: Pubkey,
43}
44
45#[error_code]
46pub enum ErrorCode {
47 #[msg("Unauthorized: You are not the owner of this asset")]
48 Unauthorized,
49}
JavaScript Only - Transfer Asset
1import { createUmi } from '@metaplex-foundation/umi-bundle-defaults'
2import { transfer } from '@metaplex-foundation/mpl-core'
3import { mplCore } from '@metaplex-foundation/mpl-core'
4import { publicKey } from '@metaplex-foundation/umi'
5
6// Initialize UMI
7const umi = createUmi('https://api.devnet.solana.com')
8 .use(mplCore())
9
10// Transfer an existing NFT asset to a new owner
11const result = await transfer(umi, {
12 asset: publicKey('AssetAddressHere...'),
13 newOwner: publicKey('RecipientAddressHere...'),
14}).sendAndConfirm(umi)
15
16console.log('Asset transferred:', result.signature)
Rust Only - Transfer Asset
1use mpl_core::instructions::TransferV1;
2use solana_sdk::{pubkey::Pubkey, signer::Signer};
3
4// Asset and recipient addresses
5let asset = Pubkey::from_str("AssetAddressHere...").unwrap();
6let new_owner = Pubkey::from_str("RecipientAddressHere...").unwrap();
7
8// Transfer an existing NFT asset to a new owner
9let transfer_ix = TransferV1 {
10 asset,
11 new_owner,
12 ..Default::default()
13};
14
15let instruction = transfer_ix.instruction();
16
17println!("Transfer instruction created");
1use anchor_lang::prelude::*;
2
3declare_id!("Fg6PaFpoGXkYsidMpWTK6W2BeZ7FEfcYkg476zPFsLnS");
4
5#[program]
6pub mod transfer_asset {
7 use super::*;
8
9 // Transfer an existing NFT asset to a new owner
10 pub fn transfer(
11 ctx: Context<TransferAsset>
12 ) -> Result<()> {
13 let asset = &mut ctx.accounts.asset;
14
15 // Verify current owner
16 require!(
17 asset.owner == ctx.accounts.current_owner.key(),
18 ErrorCode::Unauthorized
19 );
20
21 // Transfer ownership
22 asset.owner = ctx.accounts.new_owner.key();
23
24 msg!("Asset transferred to: {}", asset.owner);
25 Ok(())
26 }
27}
28
29#[derive(Accounts)]
30pub struct TransferAsset<'info> {
31 #[account(mut)]
32 pub asset: Account<'info, Asset>,
33 pub current_owner: Signer<'info>,
34 /// CHECK: New owner can be any account
35 pub new_owner: AccountInfo<'info>,
36}
37
38#[account]
39pub struct Asset {
40 pub name: String,
41 pub uri: String,
42 pub owner: Pubkey,
43}
44
45#[error_code]
46pub enum ErrorCode {
47 #[msg("Unauthorized: You are not the owner of this asset")]
48 Unauthorized,
49}
Benefits of Centralized Examples
✅ Single Source of Truth - Code lives in src/examples/core/create-asset.js ✅ Multi-Language Docs - Same code across EN/JA/KO pages ✅ Easy Maintenance - Edit once, updates everywhere ✅ Testable - Can run examples in CI ✅ Reusable - Same example on multiple pages ✅ Framework Filtering - Show only relevant frameworks
Next Steps
If this test page works correctly:
- Migrate high-traffic pages to use CodeTabs
- Add more language examples
- Create documentation for content editors
- Set up analytics tracking