> ## Documentation Index > Fetch the complete documentation index at: https://luminouslabs-cc5545c6-swen-add-code-runner.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # The Light Token Program (Beta) > Light token is a high performance token program that reduces the cost of account creations by 200x, while being more CU efficient than SPL on hot paths. export const RentLifecycleVisualizer = () => { const [, setTime] = useState(0); const [lamports, setLamports] = useState(0); const [isRunning, setIsRunning] = useState(false); const [phase, setPhase] = useState('uninitialized'); const [hasUserClicked, setHasUserClicked] = useState(false); const [showControls, setShowControls] = useState(false); const containerRef = useRef(null); const [isHighlighted, setIsHighlighted] = useState(false); const [activeArrows, setActiveArrows] = useState([]); const [activeLines, setActiveLines] = useState([]); const [isButtonPressed, setIsButtonPressed] = useState(false); const [flyingArrows, setFlyingArrows] = useState([]); const [floatingAmounts, setFloatingAmounts] = useState([]); const [resetCount, setResetCount] = useState(0); const [timelineStarted, setTimelineStarted] = useState(false); const LAMPORTS_PER_TICK = 58.2; const INITIAL_RENT = 6208; const TOPUP_LAMPORTS = 776; const TOPUP_THRESHOLD = 776; const COLD_THRESHOLD = 388; const GREY = { r: 161, g: 161, b: 170 }; const RED = { r: 227, g: 89, b: 48 }; const BLUE = { r: 120, g: 140, b: 180 }; const txLines = [{ id: 0, x1: 5, y1: 20, x2: 50, y2: 50 }, { id: 1, x1: 95, y1: 15, x2: 50, y2: 50 }, { id: 2, x1: 0, y1: 50, x2: 50, y2: 50 }, { id: 3, x1: 100, y1: 55, x2: 50, y2: 50 }, { id: 4, x1: 10, y1: 85, x2: 50, y2: 50 }, { id: 5, x1: 90, y1: 90, x2: 50, y2: 50 }, { id: 6, x1: 50, y1: 0, x2: 50, y2: 50 }]; const interpolateColor = (c1, c2, t) => { const clamp = v => Math.max(0, Math.min(255, Math.round(v))); return { r: clamp(c1.r + (c2.r - c1.r) * t), g: clamp(c1.g + (c2.g - c1.g) * t), b: clamp(c1.b + (c2.b - c1.b) * t) }; }; const colorToRgba = (c, alpha = 1) => `rgba(${c.r}, ${c.g}, ${c.b}, ${alpha})`; const formatLamports = l => { if (l <= 0) return '0'; const rounded = Math.round(l / 500) * 500; return `~${rounded.toLocaleString()}`; }; const arrowIdRef = useRef(0); const flyingArrowIdRef = useRef(0); const floatingAmountIdRef = useRef(0); const triggerFlyingArrow = (amount, lineIndex) => { const id = flyingArrowIdRef.current++; setFlyingArrows(prev => [...prev, id]); setTimeout(() => { setFlyingArrows(prev => prev.filter(a => a !== id)); }, 600); const amountId = floatingAmountIdRef.current++; const line = txLines[lineIndex] || txLines[0]; setFloatingAmounts(prev => [...prev, { id: amountId, amount, x: line.x1, y: line.y1 }]); setTimeout(() => { setFloatingAmounts(prev => prev.filter(a => a.id !== amountId)); }, 800); }; const triggerHighlight = () => { setIsHighlighted(true); setTimeout(() => setIsHighlighted(false), 500); const arrowId = arrowIdRef.current++; setActiveArrows(prev => [...prev, arrowId]); setTimeout(() => { setActiveArrows(prev => prev.filter(id => id !== arrowId)); }, 500); }; const triggerTransaction = lineIndex => { setActiveLines(prev => [...prev, { id: lineIndex, startTime: Date.now() }]); setTimeout(() => { setActiveLines(prev => prev.filter(l => l.id !== lineIndex)); }, 500); }; const txLineIndexRef = useRef(0); const lastLineIndexRef = useRef(0); const getNextLineIndex = () => { const index = txLineIndexRef.current; txLineIndexRef.current = (txLineIndexRef.current + 1) % txLines.length; lastLineIndexRef.current = index; return index; }; const getAccountColor = () => { if (phase === 'uninitialized') return GREY; if (phase === 'cold') return BLUE; if (lamports > TOPUP_THRESHOLD) { return RED; } else if (lamports > COLD_THRESHOLD) { const t = 1 - (lamports - COLD_THRESHOLD) / (TOPUP_THRESHOLD - COLD_THRESHOLD); return interpolateColor(RED, BLUE, t); } else { return BLUE; } }; const handleTopup = () => { triggerTransaction(getNextLineIndex()); setIsButtonPressed(true); setTimeout(() => setIsButtonPressed(false), 200); if (phase === 'uninitialized' || phase === 'cold' || lamports === 0) { setLamports(INITIAL_RENT); setPhase('hot'); triggerHighlight(); triggerFlyingArrow(INITIAL_RENT, lastLineIndexRef.current); return; } if (lamports < TOPUP_THRESHOLD) { setLamports(l => l + TOPUP_LAMPORTS); triggerHighlight(); triggerFlyingArrow(TOPUP_LAMPORTS, lastLineIndexRef.current); } }; const txTimesRef = useRef([1.3, 2, 2.7, 3.3, 4, 4.7, 5.3, 6, 6.7, 7.3, 8, 8.7, 9.3, 10.1, 11.5, 12.8, 16, 16.7, 17.3, 18, 18.7, 19.3, 20, 20.7, 21.3, 22, 22.7, 23.3, 24, 24.7, 25.5, 26.8]); const handleReset = () => { setTime(0); setLamports(0); setPhase('uninitialized'); setIsRunning(true); setTimelineStarted(false); setActiveLines([]); setActiveArrows([]); setFlyingArrows([]); setResetCount(c => c + 1); txLineIndexRef.current = 0; arrowIdRef.current = 0; flyingArrowIdRef.current = 0; }; const handleDiamondClick = () => { if (!hasUserClicked) { setHasUserClicked(true); setIsRunning(true); setShowControls(true); } }; useEffect(() => { if (!isRunning) return; const interval = setInterval(() => { setTime(t => { const newTime = t + 0.1; if (t < 1.0 && newTime >= 1.0) { setLamports(INITIAL_RENT); setPhase('hot'); setTimelineStarted(true); triggerHighlight(); triggerTransaction(getNextLineIndex()); } txTimesRef.current.forEach(txTime => { if (newTime >= txTime && t < txTime) { triggerTransaction(getNextLineIndex()); if (phase === 'cold') { setLamports(INITIAL_RENT); setPhase('hot'); triggerHighlight(); triggerFlyingArrow(INITIAL_RENT, lastLineIndexRef.current); } else if (phase === 'hot') { setLamports(currentLamports => { if (currentLamports > 0 && currentLamports < TOPUP_THRESHOLD) { triggerHighlight(); triggerFlyingArrow(TOPUP_LAMPORTS, lastLineIndexRef.current); return currentLamports + TOPUP_LAMPORTS; } return currentLamports; }); } } }); if ((phase === 'hot' || phase === 'cold') && newTime > 0.1) { setLamports(l => { const tickAmount = LAMPORTS_PER_TICK; const newLamports = Math.max(0, l - tickAmount); if (newLamports < COLD_THRESHOLD) { setPhase('cold'); } return newLamports; }); } if (newTime >= 29) { setPhase('uninitialized'); setLamports(0); setHasUserClicked(false); setIsRunning(false); setShowControls(false); setTimelineStarted(false); txLineIndexRef.current = 0; return 0; } return newTime; }); }, 100); return () => clearInterval(interval); }, [isRunning, phase]); const accountColor = getAccountColor(); const generateDiamondDots = () => { const dots = []; const size = 5; const centerSize = 4; for (let row = -size; row <= size; row++) { const width = size - Math.abs(row); for (let col = -width; col <= width; col++) { const distFromCenter = Math.max(Math.abs(row), Math.abs(col)); const fadeProgress = distFromCenter / size; const dotSize = Math.max(0.3, centerSize * Math.pow(1 - fadeProgress, 1.5)); const opacity = Math.pow(1 - fadeProgress, 2.5); dots.push({ x: 50 + col * 6, y: 50 + row * 6, size: dotSize, opacity }); } } return dots; }; const diamondDots = generateDiamondDots(); const isLineActive = lineId => activeLines.some(l => l.id === lineId); return
{} {}
{} {txLines.map(line => { const active = isLineActive(line.id); return {} {} {active && } ; })} {} {floatingAmounts.map(({id, amount, x, y}) => +{amount.toLocaleString()} )} {}
{}
{[...Array(34).keys()].map(i => i * 3).concat([...Array(34).keys()].map(i => i * 3)).map((h, i) =>
{h}h
)}
{}
{}
0 ? 'drop-shadow(0 0 25px rgba(227, 89, 48, 0.7)) drop-shadow(0 0 10px rgba(255, 150, 50, 0.8))' : 'none', transition: 'filter 0.15s ease' }}> {diamondDots.map((dot, i) => )} {} {!hasUserClicked &&
Press to see the Rent Config over time!
}
{}
{}
{}
{activeArrows.map(arrowId => ↑ )} {flyingArrows.map(id => ↑ )}
{formatLamports(lamports)} lamports
Rent Balance
{}
; }; export const CompressibleRentCalculator = () => { const [hours, setHours] = useState(24); const [lamportsPerWrite, setLamportsPerWrite] = useState(776); const [showCustomHours, setShowCustomHours] = useState(false); const [showCustomLamports, setShowCustomLamports] = useState(false); const [showFormula, setShowFormula] = useState(false); const DATA_LEN = 260; const BASE_RENT = 128; const LAMPORTS_PER_BYTE_PER_EPOCH = 1; const MINUTES_PER_EPOCH = 90; const COMPRESSION_INCENTIVE = 11000; const LAMPORTS_PER_SOL = 1_000_000_000; const HOURS_MAX = 36; const LAMPORTS_MAX = 6400; const numEpochs = Math.ceil(hours * 60 / MINUTES_PER_EPOCH); const rentPerEpoch = BASE_RENT + DATA_LEN * LAMPORTS_PER_BYTE_PER_EPOCH; const totalPrepaidRent = rentPerEpoch * numEpochs; const totalCreationCost = totalPrepaidRent + COMPRESSION_INCENTIVE; const handleHoursChange = value => { const num = Math.max(3, Math.min(168, Number.parseInt(value) || 3)); setHours(num); }; const handleLamportsChange = value => { const num = Math.max(0, Math.min(100000, Number.parseInt(value) || 0)); setLamportsPerWrite(num); }; const hoursPresets = [24]; const lamportsPresets = [776]; const SliderMarkers = ({max, step}) => { const marks = []; for (let i = step; i < max; i += step) { const percent = i / max * 100; marks.push(
); } return <>{marks}; }; return
{}
Prepaid Epochs in Hours
{hoursPresets.map(h => )} {showCustomHours ? handleHoursChange(e.target.value)} className="w-16 px-2 py-1 text-right text-xs font-mono font-medium bg-blue-500/10 dark:bg-blue-500/20 border border-blue-500/50 rounded-lg backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50" autoFocus /> : }
≈ {(hours * 60 / MINUTES_PER_EPOCH).toFixed(1)} epochs / {hours.toFixed(1)}h
{ setHours(Number.parseInt(e.target.value)); setShowCustomHours(false); }} className="relative w-full h-1.5 bg-black/[0.03] dark:bg-white/20 rounded-full appearance-none cursor-pointer backdrop-blur-sm z-10" />
{}
Lamports per Write
{lamportsPresets.map(l => )} {showCustomLamports ? handleLamportsChange(e.target.value)} className="w-20 px-2 py-1 text-right text-xs font-mono font-medium bg-blue-500/10 dark:bg-blue-500/20 border border-blue-500/50 rounded-lg backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50" autoFocus /> : }
≈ {(lamportsPerWrite / rentPerEpoch).toFixed(1)} epochs / {(lamportsPerWrite / rentPerEpoch * MINUTES_PER_EPOCH / 60).toFixed(1)}h
{ setLamportsPerWrite(Number.parseInt(e.target.value)); setShowCustomLamports(false); }} className="relative w-full h-1.5 bg-black/[0.03] dark:bg-white/20 rounded-full appearance-none cursor-pointer backdrop-blur-sm z-10" />
{}
Total Creation Cost
{totalCreationCost.toLocaleString()}
lamports
≈ {(totalCreationCost / LAMPORTS_PER_SOL).toFixed(6)} SOL
Top-up Amount
{lamportsPerWrite.toLocaleString()}
lamports
≈ {(lamportsPerWrite / LAMPORTS_PER_SOL).toFixed(6)} SOL
{}
{showFormula &&
Total cost for {DATA_LEN}-byte light-token account:
total_creation_cost = prepaid_rent + compression_incentive

rent_per_epoch = base_rent + (data_len × lamports_per_byte_per_epoch)
rent_per_epoch = {BASE_RENT} + ({DATA_LEN} × {LAMPORTS_PER_BYTE_PER_EPOCH}) = {rentPerEpoch} lamports
compression_incentive = {COMPRESSION_INCENTIVE.toLocaleString()} lamports
}
; }; export const CTokenVsSplCalculator = () => { const [numAccounts, setNumAccounts] = useState(100000); const [showCustomAccounts, setShowCustomAccounts] = useState(false); const ACCOUNT_STORAGE_OVERHEAD = 128; const LAMPORTS_PER_BYTE = 6960; const DATA_LEN = 165; const CTOKEN_DEFAULT_CREATION_COST = 17208; const LAMPORTS_PER_SOL = 1_000_000_000; const ACCOUNTS_MAX = 1000000; const splCost = numAccounts * (ACCOUNT_STORAGE_OVERHEAD + DATA_LEN) * LAMPORTS_PER_BYTE; const ctokenCost = numAccounts * CTOKEN_DEFAULT_CREATION_COST; const savings = splCost - ctokenCost; const savingsPercent = (savings / splCost * 100).toFixed(1); const handleAccountsChange = value => { const num = Math.max(1, Math.min(1000000, Number.parseInt(value) || 1)); setNumAccounts(num); }; const formatSOL = lamports => { const sol = lamports / LAMPORTS_PER_SOL; if (sol >= 1000) { return sol.toLocaleString(undefined, { maximumFractionDigits: 2 }); } else if (sol >= 1) { return sol.toFixed(4); } return sol.toFixed(6); }; const accountsPresets = [10000, 100000, 500000]; const SliderMarkers = ({max, step}) => { const marks = []; for (let i = step; i < max; i += step) { const percent = i / max * 100; marks.push(
); } return <>{marks}; }; return
{}
Number of Token Accounts
{accountsPresets.map(a => )} {showCustomAccounts ? handleAccountsChange(e.target.value)} className="w-24 px-2 py-1 text-right text-xs font-mono font-medium bg-blue-500/10 dark:bg-blue-500/20 border border-blue-500/50 rounded-lg backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50" autoFocus /> : }
{numAccounts.toLocaleString()} accounts
{ setNumAccounts(Number.parseInt(e.target.value)); setShowCustomAccounts(false); }} className="relative w-full h-1.5 bg-black/[0.03] dark:bg-white/20 rounded-full appearance-none cursor-pointer backdrop-blur-sm z-10" />
{}
SPL Token
{formatSOL(splCost)}
SOL
Light Token
{formatSOL(ctokenCost)}
SOL
Savings
{savingsPercent}%
{formatSOL(savings)} SOL
; }; 1. Light-mints and token accounts are equivalent to SPL mints and tokens. 2. The key difference is light-mint and token accounts do not require you to pay rent-exemption upon creation. 3. Light token accounts are interoperable with SPL and Token 2022 mints. ### Creation Cost | | SPL | Light | | :---------------- | :------------------- | :-------------------- | | **Mint Account** | \~1,500,000 lamports | **15,000** lamports | | **Token Account** | \~2,000,000 lamports | \~**11,000** lamports | ### CU Performance | | Light Token CU | SPL-Token CU | | :-------------------------------- | :------------- | :----------- | | **ATA Creation** | 4,348 | 14,194 | | **Transfer** (base path) | 312 | 4,645 | | **Transfer** (rent-free hot path) | 1,885 | 4,645 | Uniquely represent a token and store its global metadata. Light-mints are compressed accounts and rent-free. Each light-token account can hold units of one light, SPL, or Token 2022 mint. Custom rent config reduces account creation cost. If you simply want to **distribute tokens**, please refer to [this page](/compressed-tokens). # Quickstart ### Installation Install packages in your working directory: ```bash theme={null} npm install @lightprotocol/stateless.js@alpha \ @lightprotocol/compressed-token@alpha ``` Install the CLI globally: ```bash theme={null} npm install -g @lightprotocol/zk-compression-cli@alpha ``` Install packages in your working directory: ```bash theme={null} yarn add @lightprotocol/stateless.js@alpha \ @lightprotocol/compressed-token@alpha ``` Install the CLI globally: ```bash theme={null} yarn global add @lightprotocol/zk-compression-cli@alpha ``` Install packages in your working directory: ```bash theme={null} pnpm add @lightprotocol/stateless.js@alpha \ @lightprotocol/compressed-token@alpha ``` Install the CLI globally: ```bash theme={null} pnpm add -g @lightprotocol/zk-compression-cli@alpha ``` ### Get Started ## Integration Toolkits | | | | :---------------------------------------------------------------- | :--------------------------------------------------------- | | [for Stablecoin Payments](/light-token/toolkits/for-payments) | Process payments and transfers using light-token | | [for Wallets](/light-token/toolkits/for-wallets) | Allow your users to store and swap tokens more efficiently | | [for Streaming Mints](/light-token/toolkits/for-streaming-mints) | Stream light-mint accounts | | [for Indexing Tokens](/light-token/toolkits/for-streaming-tokens) | Index light-token accounts | ## Cookbook
TypeScript Client Rust Client Program Guide
Create Mint Create light-mints with token metadata x x x
Create ATA Create associated light-token accounts x x x
Create Token Account Create light-token accounts x x
Mint To Mint tokens to light-token accounts x x x
Close Token Account Close and reclaim rent x x
Transfer Transfer between light-token and SPL accounts x x x
Wrap & Unwrap Convert between SPL/T22 and light-token x
# Next Steps