id,language,category,name,description,code,imports_or_contract,notes
1,javascript,pagination,swr-pagination,"SWR-based pagination for transactions","const fetcher = (url: string) => fetch(url).then(res => res.json()); const {data isLoading} = useSWR(`/api/activities?page=${page}&limit=${limit}` fetcher { keepPreviousData: true }); const totalPages = useMemo(() => data?.total ? Math.ceil(data.total / limit) : 0 [data?.total limit])","import useSWR from 'swr'; import { useMemo } from 'react'","keepPreviousData prevents flicker during page changes; calculate pages in useMemo"
2,javascript,activities,activity-summary-stats,"Fetch and display activity summary statistics","const {data: summaryData} = useSWR('/api/activities_summary' fetcher); const stats = { dailyVolume: summaryData?.daily_volume_stx || 0 dailyVolumeUsd: summaryData?.daily_volume_usd || 0 uniqueAddresses: summaryData?.unique_addresses || 0 totalTxs: summaryData?.total_transactions || 0 }","import useSWR from 'swr'","Aggregate metrics for dashboard; combine with STX price API for USD conversion"
3,javascript,activities,format-activity-type,"Color-code transaction types in activity feed","const getActivityColor = (type: string) => { switch(type) { case 'BUY': return '#22c55e'; case 'SELL': return '#ef4444'; case 'TRANSFER': return '#3b82f6'; default: return '#6b7280' }}; const getBadgeClass = (type: string) => `bg-${getActivityColor(type)} text-white px-2 py-1 rounded`","None","Consistent color coding: green=buy red=sell blue=transfer gray=other"
4,javascript,launchpad,token-deployment-flow,"No-code token deployment with template replacement","const deployToken = async (metadata) => { const contractCode = await replacePlaceholders(templateCode { TOKEN_NAME: metadata.name TOKEN_SYMBOL: metadata.symbol TOKEN_SUPPLY: metadata.supply TOKEN_DECIMALS: metadata.decimals TOKEN_URI: metadataUrl }); const response = await request('stx_deployContract' { name: metadata.slug clarityCode: contractCode clarityVersion: 3 network: 'mainnet' postConditions: [paymentPostCondition] fee: 100000 }); return response.txid }","import { request } from '@stacks/connect'","Upload logo/metadata first; replace template placeholders; deploy with payment post-condition"
5,javascript,launchpad,flexible-deployment-payment,"Accept multiple payment tokens for deployment","const buildPaymentPostCondition = (paymentToken amount userAddress) => { if (paymentToken === 'STX') { return Pc.principal(userAddress).willSendEq(amount).ustx() } else { const [contractAddr contractName assetName] = paymentToken.split('.'); return Pc.principal(userAddress).willSendEq(amount).ft(contractAddr + '.' + contractName assetName) }}","import { Pc } from '@stacks/transactions'","Support STX or custom tokens (WELSH VELAR); calculate equivalent amounts; add 0.1% token allocation"
6,javascript,launchpad,metadata-upload-ipfs,"Upload token metadata to IPFS via API","const uploadMetadata = async (tokenData) => { const metadata = { name: tokenData.name description: tokenData.description image: tokenData.logoUrl xlink: tokenData.twitter homepage: tokenData.website telegram: tokenData.telegram discord: tokenData.discord }; const formData = new FormData(); formData.append('file' new Blob([JSON.stringify(metadata)] {type: 'application/json'})); formData.append('type' 'uri'); const response = await fetch('/api/upload' {method: 'POST' body: formData}); return response.json().url }","None (FormData native)","Upload logo first then metadata JSON; type='uri' for metadata type='logo' for images"
7,javascript,presale,presale-wizard-state,"Multi-step wizard state management for presale creation","const [currentStep setCurrentStep] = useState(1); const [presaleData setPresaleData] = useState({ tokenAddress: '' softCap: 0 hardCap: 0 minBuy: 0 maxBuy: 0 tokenPrice: 0 liquidityPercent: 70 startBlock: 0 endBlock: 0 whitelistEnabled: false vestingMilestones: [] }); const nextStep = () => setCurrentStep(prev => Math.min(prev + 1 6)); const prevStep = () => setCurrentStep(prev => Math.max(prev - 1 1))","import { useState } from 'react'","6-step wizard: token selection → parameters → AMM config → timeframe → vesting → deploy"
8,javascript,presale,vesting-milestone-config,"Configure token vesting milestones for presale","const [vestingMilestones setVestingMilestones] = useState([ { blockHeight: startBlock + 2100 percentage: 25 description: 'First unlock' } { blockHeight: startBlock + 4200 percentage: 25 description: 'Second unlock' } { blockHeight: startBlock + 6300 percentage: 50 description: 'Final unlock' } ]); const totalPercentage = vestingMilestones.reduce((sum m) => sum + m.percentage 0); const isValid = totalPercentage === 100","import { useState } from 'react'","Block-based vesting; 2100 blocks ≈ 2 weeks; validate total = 100%"
9,javascript,presale,presale-participation-tx,"Build presale participation transaction","const participateInPresale = async (presaleContract amount) => { const response = await request('stx_callContract' { contract: presaleContract functionName: 'participate' functionArgs: [] postConditions: [ Pc.principal(userAddress).willSendEq(amount).ustx() ] postConditionMode: 'deny' network: 'mainnet' fee: 100000 }); return response }","import { request } from '@stacks/connect'; import { Pc } from '@stacks/transactions'","Post-condition protects buyer; contract validates min/max buy limits; check whitelist status first"
10,javascript,presale,claim-vested-tokens,"Claim vested tokens from presale","const claimVestedTokens = async (presaleContract milestoneIndex) => { const response = await request('stx_callContract' { contract: presaleContract functionName: 'claim-milestone' functionArgs: [uintCV(milestoneIndex)] postConditions: [ Pc.principal(presaleContract).willSendGte(0).ft(tokenContract tokenName) ] network: 'mainnet' }); return response }","import { request } from '@stacks/connect'; import { Pc uintCV } from '@stacks/transactions'","Milestone-based claiming; check block height >= milestone block; partial claims supported"
11,javascript,lottery,lottery-status-fetch,"Fetch current lottery round status","const getLotteryStatus = async () => { const response = await fetch('/api/lottery-4-winners/contract-calls/get-lottery-status'); const data = await response.json(); return { lotteryId: data.lottery_id active: data.active ticketsSold: data.tickets_sold totalRaised: data.total_raised goal: data.goal ticketPrice: data.ticket_price maxTickets: data.max_tickets winnerRevealed: data.winner_revealed winners: data.winners || [] }}","fetch","Poll every 10 seconds while lottery active; update UI in real-time"
12,javascript,lottery,buy-lottery-ticket,"Purchase lottery ticket with STX","const buyTicket = async (ticketPrice) => { const response = await request('stx_callContract' { contract: `${lotteryAddress}.${lotteryContract}` functionName: 'buy-ticket' functionArgs: [] postConditions: [ Pc.principal(userAddress).willSendEq(ticketPrice).ustx() ] postConditionMode: 'deny' network: 'mainnet' fee: 100000 }); return response }","import { request } from '@stacks/connect'; import { Pc } from '@stacks/transactions'","Exact ticket price required; no change given; auto-assigns ticket ID"
13,javascript,lottery,buy-ticket-for-friend,"Gift lottery ticket to another address","const buyTicketForFriend = async (friendAddress ticketPrice) => { const response = await request('stx_callContract' { contract: `${lotteryAddress}.${lotteryContract}` functionName: 'buy-ticket-for-friend' functionArgs: [principalCV(friendAddress)] postConditions: [ Pc.principal(userAddress).willSendEq(ticketPrice).ustx() ] postConditionMode: 'deny' network: 'mainnet' }); return response }","import { request } from '@stacks/connect'; import { Pc principalCV } from '@stacks/transactions'","Sender pays; friend receives ticket; useful for gifting or promotions"
14,javascript,lottery,reveal-lottery-winners,"Reveal lottery winners (admin only)","const revealWinners = async (goal) => { const response = await request('stx_callContract' { contract: `${lotteryAddress}.${lotteryContract}` functionName: 'reveal-winner' functionArgs: [] postConditions: [ Pc.principal(`${lotteryAddress}.${lotteryContract}`).willSendLte(goal).ustx() ] postConditionMode: 'deny' network: 'mainnet' fee: 100000 }); return response }","import { request } from '@stacks/connect'; import { Pc } from '@stacks/transactions'","Contract sends prizes; VRF-based random selection; 4 winners for 4-winners lottery"
15,javascript,lottery,get-user-lottery-tickets,"Get all tickets owned by user","const getUserTickets = async (userAddress) => { const response = await fetch(`/api/lottery-4-winners/contract-calls/get-user-tickets?user_address=${userAddress}`); const tickets = await response.json(); return tickets.map(ticket => ({ ticketId: ticket.ticket_id purchaseBlock: ticket.purchase_block isWinner: ticket.is_winner || false }))}","fetch","Returns array of ticket objects; check isWinner to highlight winning tickets"
16,javascript,lottery,lottery-winner-animation,"Confetti animation for lottery winners","const showWinnerAnimation = () => { const balloonCount = 20; const balloons = Array.from({length: balloonCount} (__ i) => ({ id: i color: ['#FF6B6B' '#4ECDC4' '#45B7D1' '#FFA07A' '#98D8C8'][i % 5] delay: i * 300 left: Math.random() * 80 + 10 })); return balloons.map(b => ( <div key={b.id} className='balloon' style={{ backgroundColor: b.color animationDelay: `${b.delay}ms` left: `${b.left}%` }} /> ))}","import { useMemo } from 'react'","20 balloons; staggered animation (300ms); 5 colors; random horizontal position"
17,javascript,portfolio,multi-wallet-fetch,"Fetch data for multiple wallets in parallel","const fetchMultiWalletData = async (addresses) => { const fetchPromises = addresses.map(address => Promise.all([ fetch(`/api/profile/overview?address=${address}`).then(r => r.json()) fetch(`/api/profile/portfolio?address=${address}`).then(r => r.json()) fetch(`/api/profile/nft_stats?address=${address}`).then(r => r.json()) fetch(`/api/profile/bonding_holdings?address=${address}`).then(r => r.json()) ])); return Promise.all(fetchPromises)}","fetch","Parallel fetching; combine results client-side; cache with SWR"
18,javascript,portfolio,combine-wallet-portfolios,"Aggregate portfolio data from multiple wallets","const combinePortfolios = (portfolios) => { return portfolios.reduce((combined current) => ({ stxBalance: combined.stxBalance + current.stxBalance totalUsdValue: combined.totalUsdValue + current.totalUsdValue tokens: mergeTokenArrays(combined.tokens current.tokens) nfts: [...combined.nfts ...current.nfts] bondingCurveHoldings: [...combined.bondingCurveHoldings ...current.bondingCurveHoldings] }) {stxBalance: 0 totalUsdValue: 0 tokens: [] nfts: [] bondingCurveHoldings: []})}","None","Sum balances; merge token arrays (combine duplicates); concat NFT/bonding arrays"
19,javascript,portfolio,token-balance-with-price,"Calculate token balance with USD value","const enrichTokenBalance = (token tokenPrices) => { const priceData = tokenPrices.find(p => p.contract_id === token.tokenContract); const priceUsd = priceData?.metrics.price_usd || 0; const realBalance = token.balance / Math.pow(10 token.decimals); const totalUsdValue = priceUsd * realBalance; return { ...token realBalance priceUsd totalUsdValue }}","None","Divide by 10^decimals for real balance; multiply by USD price; handle missing prices"
20,javascript,portfolio,portfolio-doughnut-chart,"Render portfolio allocation doughnut chart","const portfolioChartData = { labels: ['STX' ...tokens.map(t => t.symbol)] datasets: [{ data: [stxValue ...tokens.map(t => t.totalUsdValue)] backgroundColor: ['#FF6384' '#36A2EB' '#FFCE56' '#4BC0C0' '#9966FF' '#FF9F40'] borderWidth: 2 }]}; <Doughnut data={portfolioChartData} options={{plugins: {legend: {position: 'bottom'}}}} />","import { Doughnut } from 'react-chartjs-2'","Use Chart.js; show STX + all fungible tokens; color-coded segments; legend below chart"
21,javascript,portfolio,nft-stats-aggregate,"Aggregate NFT statistics across collections","const aggregateNftStats = (nftData) => { const stats = { totalCollections: new Set(nftData.map(nft => nft.collectionId)).size totalNfts: nftData.length totalFloorValue: nftData.reduce((sum nft) => sum + (nft.floorPrice || 0) 0) topCollections: Object.entries(groupBy(nftData 'collectionId')).sort((a b) => b[1].length - a[1].length).slice(0 5) }; return stats}","None","Count unique collections; sum floor values; rank by NFT count; top 5 collections"
22,javascript,responsive,mobile-accordion-table,"Mobile-responsive table with accordion rows","const MobileTable = ({data}) => ( <Accordion variant='splitted'> {data.map(row => ( <AccordionItem key={row.id} title={<div><span>{row.name}</span><span>{row.value}</span></div>}> <div className='grid grid-cols-2 gap-2'> <div>Type: {row.type}</div> <div>Time: {timeAgo(row.timestamp)}</div> <div>Amount: {formatNumber(row.amount)}</div> <div>Status: {row.status}</div> </div> </AccordionItem> ))} </Accordion>)","import { Accordion AccordionItem } from '@nextui-org/react'","Desktop: full table; Mobile: accordion with summary in title; details in expandable content"
23,javascript,responsive,conditional-table-render,"Conditionally render mobile vs desktop tables","const TableView = ({data isMobile}) => { if (isMobile) { return <MobileAccordionTable data={data} /> } return ( <Table aria-label='Desktop table'> <TableHeader>{columns.map(c => <TableColumn key={c.key}>{c.label}</TableColumn>)}</TableHeader> <TableBody>{data.map(row => <TableRow key={row.id}>{cells}</TableRow>)}</TableBody> </Table> )}","import { useMediaQuery } from 'react-responsive'","useMediaQuery to detect mobile; render different components; same data source"
24,javascript,modal,quick-trade-modal,"Quick trade modal from activity feed","const [isQuickTradeOpen setIsQuickTradeOpen] = useState(false); const [selectedToken setSelectedToken] = useState(null); const openQuickTrade = (token) => { setSelectedToken(token); setIsQuickTradeOpen(true) }; <Modal isOpen={isQuickTradeOpen} onClose={() => setIsQuickTradeOpen(false)}> <QuickTrade token={selectedToken} onSuccess={() => {setIsQuickTradeOpen(false); mutate()}} /> </Modal>","import { Modal } from '@nextui-org/react'","Click row → open modal → trade → mutate() refreshes list"
25,javascript,notifications,themed-sweetalert,"Theme-aware SweetAlert notifications","const showAlert = (title text icon) => { Swal.fire({ icon title text confirmButtonText: 'OK' confirmButtonColor: '#3085d6' background: theme === 'dark' ? '#131C32' : '#fff' color: theme === 'dark' ? '#fff' : '#000' })}","import Swal from 'sweetalert2'; import { useTheme } from 'next-themes'","Dark mode support; consistent styling; accessible colors"
26,javascript,time,relative-time-display,"Display relative time (timeAgo)","function timeAgo(dateParam: Date): string { const now = new Date(); const date = new Date(dateParam); const seconds = Math.floor((now.getTime() - date.getTime()) / 1000); if (seconds < 60) return `${seconds}s ago`; const minutes = Math.floor(seconds / 60); if (minutes < 60) return `${minutes}m ago`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours}h ago`; const days = Math.floor(hours / 24); if (days < 30) return `${days}d ago`; const months = Math.floor(days / 30); if (months < 12) return `${months}M ago`; const years = Math.floor(months / 12); return `${years}y ago`}","None","Human-readable timestamps; always singular suffix; no pluralization"
27,javascript,formatting,mobile-number-abbreviation,"Format numbers for mobile display with K/M/B suffixes","function formatNumberForMobile(num: number): string { const absNum = Math.abs(num); if (absNum < 1 && absNum > 0) return num.toFixed(2); if (absNum < 1000) return Math.floor(num).toString(); if (absNum < 1000000) { const k = Math.floor(num / 1000); const hundreds = Math.floor((num % 1000) / 100); return k + 'k' + (hundreds || '') } if (absNum < 1000000000) { const m = Math.floor(num / 1000000); const hundredK = Math.floor((num % 1000000) / 100000); return m + 'M' + (hundredK || '') } const b = Math.floor(num / 1000000000); return b + 'B'}","None","< 1: 2 decimals; < 1K: integer; ≥ 1K: K/M/B suffix with single decimal"
28,javascript,contract,contract-template-replacement,"Replace placeholders in Clarity contract template","function replacePlaceholders(template params) { let result = template; Object.entries(params).forEach(([key value]) => { const placeholder = new RegExp(`\\$${key}` 'g'); result = result.replace(placeholder String(value)) }); return result}; const modifiedCode = replacePlaceholders(templateCode { TOKEN_NAME: name TOKEN_SYMBOL: symbol TOKEN_SUPPLY: supply TOKEN_DECIMALS: decimals TOKEN_URI: uri DEPLOYER_ADDRESS: deployerAddr })","None","Use $VARIABLE placeholders; escape regex special chars; convert values to string"
29,javascript,image,upload-with-preview,"Upload image with preview and validation","const [preview setPreview] = useState(''); const handleImageUpload = async (e) => { const file = e.target.files[0]; if (file.size > 5 * 1024 * 1024) { alert('File too large (max 5MB)'); return } const reader = new FileReader(); reader.onloadend = () => setPreview(reader.result); reader.readAsDataURL(file); const formData = new FormData(); formData.append('file' file); formData.append('type' 'logo'); const res = await fetch('/api/upload' {method: 'POST' body: formData}); return res.json().url}","None (FileReader native)","Validate size client-side; show preview before upload; FormData for multipart"
30,javascript,skeleton,loading-skeleton-pattern,"Display skeleton loaders during data fetch","const TableSkeleton = () => ( <div className='space-y-3'> {Array.from({length: 10}).map((__ i) => ( <div key={i} className='flex space-x-4'> <Skeleton className='h-12 w-12 rounded-full' /> <div className='space-y-2 flex-1'> <Skeleton className='h-4 w-3/4' /> <Skeleton className='h-4 w-1/2' /> </div> </div> ))} </div>); return isLoading ? <TableSkeleton /> : <Table data={data} />","import { Skeleton } from '@nextui-org/react'","Match shape of actual content; 10 rows typical; fade-in when data arrives"
31,javascript,postConditions,multi-asset-post-conditions,"Build post-conditions for multi-asset transactions","const buildPostConditions = (transfers) => { return transfers.map(transfer => { if (transfer.asset === 'STX') { return Pc.principal(transfer.from).willSendEq(transfer.amount).ustx() } else if (transfer.asset === 'NFT') { return Pc.principal(transfer.from).willSendAsset().nft(transfer.contract transfer.tokenId) } else { return Pc.principal(transfer.from).willSendEq(transfer.amount).ft(transfer.contract transfer.assetName) }})}","import { Pc } from '@stacks/transactions'","Support STX, NFT, and FT in same transaction; map over transfer array; use willSendEq for exact amounts"
32,javascript,initialization,prevent-double-initialization,"Prevent double initialization in React Strict Mode","const initialized = useRef(false); useEffect(() => { if (initialized.current) return; initialized.current = true; fetchData() }, []); const [data setData] = useState(null); const fetchData = async () => { const result = await fetch('/api/data'); setData(result) }","import { useRef useEffect useState } from 'react'","useRef persists across re-renders; protects against React 18 double-mount in dev mode"
33,javascript,debounce,debounced-search-input,"Debounce search input to reduce API calls","const [searchTerm setSearchTerm] = useState(''); const [debouncedTerm setDebouncedTerm] = useState(''); useEffect(() => { const timer = setTimeout(() => setDebouncedTerm(searchTerm) 500); return () => clearTimeout(timer) }, [searchTerm]); const {data} = useSWR(debouncedTerm ? `/api/search?q=${debouncedTerm}` : null fetcher)","import { useState useEffect } from 'react'; import useSWR from 'swr'","500ms delay; cancel timer on new input; only fetch when debouncedTerm changes"
34,javascript,infiniteScroll,infinite-scroll-pattern,"Infinite scroll for activity feeds","const [page setPage] = useState(1); const [allData setAllData] = useState([]); const {data} = useSWR(`/api/activities?page=${page}` fetcher); useEffect(() => { if (data?.items) setAllData(prev => [...prev ...data.items]) }, [data]); const loadMore = () => setPage(p => p + 1); <IntersectionObserver onIntersect={loadMore}> <div>Loading more...</div> </IntersectionObserver>","import useSWR from 'swr'; import { useState useEffect } from 'react'","Append new data to existing; increment page on scroll; use IntersectionObserver for trigger"
35,javascript,copy,copy-to-clipboard-with-toast,"Copy text to clipboard with visual feedback","const copyToClipboard = async (text) => { try { await navigator.clipboard.writeText(text); toast.success('Copied to clipboard!' { position: 'bottom-right' duration: 2000 })} catch (err) { toast.error('Failed to copy') }}; <button onClick={() => copyToClipboard(walletAddress)}> <Copy size={16} /> Copy </button>","import toast from 'react-hot-toast'; import { Copy } from 'lucide-react'","Use Clipboard API; show toast feedback; graceful error handling; icon for UX"
36,javascript,confirmation,confirmation-modal-pattern,"Confirmation modal for destructive actions","const [isConfirmOpen setIsConfirmOpen] = useState(false); const [actionToConfirm setActionToConfirm] = useState(null); const confirmDelete = async () => { await actionToConfirm(); setIsConfirmOpen(false); mutate() }; <Modal isOpen={isConfirmOpen}> <ModalHeader>Confirm Action</ModalHeader> <ModalBody>Are you sure? This cannot be undone.</ModalBody> <ModalFooter> <Button color='danger' onPress={confirmDelete}>Confirm</Button> <Button variant='light' onPress={() => setIsConfirmOpen(false)}>Cancel</Button> </ModalFooter> </Modal>","import { Modal ModalHeader ModalBody ModalFooter Button } from '@nextui-org/react'","Store action as callback; confirm modal triggers it; mutate() refreshes data after action"
37,javascript,zustand,zustand-wallet-store,"Zustand store for wallet state management","import create from 'zustand'; interface WalletState { isConnected: boolean; address: string | null; userData: any; connect: () => Promise<void>; disconnect: () => void }; const useWalletStore = create<WalletState>((set) => ({ isConnected: false address: null userData: null connect: async () => { const userData = await connectWallet(); set({isConnected: true address: userData.address userData})} disconnect: () => set({isConnected: false address: null userData: null}) }))","import create from 'zustand'","Centralized wallet state; async connect action; disconnect resets state; use throughout app"
38,javascript,cache,swr-cache-invalidation,"Invalidate SWR cache on mutation","import { useSWRConfig } from 'swr'; const { mutate } = useSWRConfig(); const deleteItem = async (id) => { await fetch(`/api/items/${id}` {method: 'DELETE'}); mutate('/api/items'); mutate(`/api/items/${id}`)}; const updateItem = async (id data) => { await fetch(`/api/items/${id}` {method: 'PUT' body: JSON.stringify(data)}); mutate(`/api/items/${id}`) mutate('/api/items')}","import { useSWRConfig } from 'swr'","Call mutate() after mutations; revalidate specific keys; cascade to list endpoints"
39,javascript,filtering,multi-filter-state,"Manage multiple filter states for data tables","const [filters setFilters] = useState({ search: '' status: 'all' dateRange: null sortBy: 'date' sortOrder: 'desc' }); const updateFilter = (key value) => setFilters(prev => ({...prev [key]: value})); const filteredData = useMemo(() => { let result = data; if (filters.search) result = result.filter(item => item.name.includes(filters.search)); if (filters.status !== 'all') result = result.filter(item => item.status === filters.status); return result.sort((a b) => filters.sortOrder === 'asc' ? a[filters.sortBy] - b[filters.sortBy] : b[filters.sortBy] - a[filters.sortBy]) }, [data filters])","import { useState useMemo } from 'react'","Single filter object; partial updates; compute filtered data in useMemo; chain filters"
40,javascript,export,export-table-to-csv,"Export table data to CSV file","const exportToCSV = (data filename) => { const headers = Object.keys(data[0]); const csvContent = [ headers.join(',') ...data.map(row => headers.map(h => JSON.stringify(row[h] || '')).join(',')) ].join('\\n'); const blob = new Blob([csvContent] {type: 'text/csv;charset=utf-8;'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; link.click()}; <button onClick={() => exportToCSV(tableData 'export.csv')}>Export CSV</button>","None (native Blob and URL APIs)","Extract headers from first row; JSON.stringify handles commas in values; trigger download"
