+
+ + Get Started +
++ Create a new Avalanche application with the SDK +
+
+
+
+ Design System
++ Core UI components with theme-aware styling +
+
+ {/* Button Variants */}
+ New}
+ code={`import { Button } from '@avalanche-sdk/ui';
+
+
+
+
+
+
+
+
+`}
+ language="tsx"
+ >
+
+
+
+ New
+ Button Variants
+
+ Theme-aware button styles
+
+
+
+
+
+
+
+
+
+
+
+ {/* Badge Variants */}
+
+ Default
+ Secondary
+ Destructive
+ Outline
+ Success
+ Warning
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ Badge Variants
+ Status and category indicators
+
+
+
+
+
+
+ {/* Form Elements */}
+
+
+
+ Form Elements
+ Inputs and form controls
+
+
+ {
+ setAddressValue(value);
+ console.log('Address validation:', validation);
+ }}
+ showValidation={true}
+ />
+ setAmountValue(e.target.value)}
+ showMax={true}
+ showUSD={false}
+ placeholder="0.0"
+ />
+
+
+
+
+
+ {/* Chain Components */}
+ New}
+ code={`import { AvalancheProvider, ChainLogo, ChainRow, ChainSelectDropdown } from '@avalanche-sdk/ui';
+import { avalanche, avalancheFuji } from '@avalanche-sdk/client/chains';
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+ {/* Chain Logo */}
+ {
+ console.log('Selected:', chain);
+ }}
+ />
+
+ );
+}`}
+ language="tsx"
+ className="md:col-span-2 lg:col-span-1"
+ >
+
+
+
+ New
+ Chain Components
+
+ Avalanche chain identification and selection
+
+
+ {/* Chain Logo */}
+
+
+
+
+ {/* Token Components */}
+ New}
+ code={`import { AvalancheProvider, TokenImage, TokenChip, TokenRow } from '@avalanche-sdk/ui';
+import type { Token } from '@avalanche-sdk/ui';
+import { avalanche, avalancheFuji } from '@avalanche-sdk/client/chains';
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ const token: Token = {
+ address: '0x...',
+ symbol: 'USDC',
+ name: 'USD Coin',
+ decimals: 18,
+ chainId: 43114,
+ };
+
+ return (
+
+ {/* Token Image */}
+ console.log('Selected:', t)}
+ />
+
+ {/* Token Row */}
+ console.log('Clicked:', t)}
+ />
+
+ );
+}`}
+ language="tsx"
+ className="md:col-span-2 lg:col-span-1"
+ >
+
+
+
+ New
+ Token Components
+
+ Token display and selection
+
+
+
+
+
+
+
+ Default
+ Secondary
+ Destructive
+ Outline
+ Success
+ Warning
+
+
+ {
+ setAddress(value);
+ console.log('Validation:', validation);
+ }}
+ showValidation={true}
+ />
+ setAmount(e.target.value)}
+ showMax={true}
+ showUSD={false}
+ />
+
+
+
+ );
+}`}
+ language="tsx"
+ className="md:col-span-2 lg:col-span-3"
+ >
+
+
+
+
+
+ {/* Chain Row */}
+ + Chain Logo +
+
+
+
+
+
+
+ With Badge
++ P-Chain logo with badge overlay +
+
+
+
+
+ Without Badge
++ Clean logo without overlay +
+
+
+
+
+
+ {/* Chain Select Dropdown */}
+ + Chain Row +
+
+ {chainShowcaseOptions.slice(0, 3).map((chainOption) => (
+
+
+ {
+ setSelectedChainId(value);
+ console.log('Selected chain:', chain);
+ }}
+ placeholder="Select a chain"
+ />
+
+ + Chain Select Dropdown +
+
+
+
+
+
+ + Token Images +
+
+ {wellKnownTokens.map((token, idx) => (
+
+
+
+
+
+
+ + Token Chips +
+
+ {wellKnownTokens.map((token, idx) => (
+ console.log('Selected:', token.symbol)}
+ />
+ ))}
+ {wellKnownTokens[0] && (
+
+
+
+ + Token Rows +
+
+ {wellKnownTokens.map((token, idx) => (
+ console.log('Clicked:', t.symbol)}
+ />
+ ))}
+
+
+
+ + Wallet Integration +
++ Connect and manage wallet connections +
+
+ {/* Wallet Connect */}
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ Wallet Connect
+
+ Connect your wallet to interact with Avalanche
+
+
+
+
+
+
+
+ {/* Wallet Dropdown - With XP Addresses */}
+ showXPAddresses}
+ code={`import { AvalancheProvider, WalletProvider, WalletDropdown } from '@avalanche-sdk/ui';
+import { avalanche, avalancheFuji } from '@avalanche-sdk/client/chains';
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+
+ {/* With X-Chain and P-Chain addresses */}
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+
+ Wallet Dropdown
+ showXPAddresses
+
+
+ View wallet address with X-Chain and P-Chain addresses
+
+
+
+
+
+
+
+ {/* Wallet Dropdown - Without XP Addresses */}
+
+
+
+ Wallet Dropdown
+ default
+
+
+ View wallet address (C-Chain only)
+
+
+
+
+
+
+ {/* Wallet Message */}
+
+
+
+
+ Wallet Message
+
+ Display wallet connection status messages
+
+
+
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ Wallet Message
+
+ Display wallet connection status messages
+
+
+
+
+
+
+
+ {/* Network Selector */}
+
+
+
+
+ Network Selector
+
+ Switch between available networks
+
+
+
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ Network Selector
+
+ Switch between available networks
+
+
+
+
+
+
+
+ {/* Wallet Balance - C-Chain */}
+
+
+ {/* C-Chain balance */}
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ Wallet Balance
+
+ C-Chain balance display
+
+
+
+
+
+
+
+ {/* Wallet Portfolio */}
+ Glacier}
+ code={`import { AvalancheProvider, WalletProvider, WalletPortfolio } from '@avalanche-sdk/ui';
+import { avalanche, avalancheFuji } from '@avalanche-sdk/client/chains';
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ className="md:col-span-2"
+ >
+
+
+
+ Wallet Portfolio
+ Glacier
+
+
+ View ERC-20 token balances for your connected wallet
+
+
+
+
+
+
+
+ {/* Wallet Transactions */}
+ Glacier}
+ code={`import { AvalancheProvider, WalletProvider, WalletTransactions, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@avalanche-sdk/ui';
+import { avalanche, avalancheFuji } from '@avalanche-sdk/client/chains';
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+
+
+
+ Transaction History
+
+ View transaction history with input/output tokens
+
+
+
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+
+ Transaction History
+ Glacier
+
+
+ View transaction history with input/output tokens
+
+
+
+
+
+
+
+ {/* Wallet Activity - Combined Portfolio & Transactions */}
+ Glacier}
+ code={`import { AvalancheProvider, WalletProvider, WalletActivity, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@avalanche-sdk/ui';
+import { avalanche, avalancheFuji } from '@avalanche-sdk/client/chains';
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+
+
+
+ Wallet Activity
+
+ Combined view with tabs for token balances and transaction history
+
+
+
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+
+ Wallet Activity
+ Glacier
+
+
+ Combined view with tabs for token balances and transaction history
+
+
+
+
+
+
+
+
+
+ + Provider Configuration +
++ Configure chain providers and network settings +
+
+ Available Chains
+
+ Chains available from AvalancheProvider when constructed
+
+
+
+
+
+
+ {currentChain.name} (ID: {currentChain.id})
+
+
+
+ Current Chain:
+
+
+ All Available Chains:
+
+ {availableChains.map((chain) => (
+
+ {chain.name} (ID: {chain.id})
+
+ ))}
+
+
+
+ + Transfer Components +
++ Transfer AVAX and tokens across chains +
+
+
+
+ {
+ console.log('Cross-chain transfer successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Cross-chain transfer error:', error);
+ }}
+ />
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ Cross-Chain Transfer
+
+ Move AVAX between C-Chain, P-Chain, and X-Chain
+
+
+
+ {
+ console.log('Cross-chain transfer successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Cross-chain transfer error:', error);
+ }}
+ />
+
+
+
+
+
+
+ ('C');
+
+ const chains = [
+ { id: 'C' as const, name: 'C-Chain', description: 'Contract Chain' },
+ { id: 'P' as const, name: 'P-Chain', description: 'Platform Chain' },
+ { id: 'X' as const, name: 'X-Chain', description: 'Exchange Chain' },
+ ];
+
+ return (
+
+
+
+
+ {
+ console.log(\`\${selectedChain}-Chain transfer successful:\`, result);
+ }}
+ onError={(error) => {
+ console.error(\`\${selectedChain}-Chain transfer error:\`, error);
+ }}
+ />
+
+
+ );
+}
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+ {
+ setToAddress(predefinedAddress);
+ setAmount(predefinedAmount);
+ }, [setToAddress, setAmount]);
+
+ return (
+
+
+ Request Payment
+ Send AVAX on C-Chain with one click
+
+
+
+
+ );
+}
+
+function SimpleTransfer() {
+ return (
+ {
+ console.log('Transfer successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Transfer error:', error);
+ }}
+ >
+
+ );
+}
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+
+ Single Chain Transfer
+ Send AVAX to another address on the same chain
+
+
+
+ {chains.map((chain) => (
+
+ ))}
+
+
+ To: {predefinedAddress}
+
+
+ Amount: {predefinedAmount} AVAX
+
+
+
+ + Interchain Messaging +
++ Transfer tokens across Avalanche subnets +
+
+
+
+
+
+
+
+ {
+ console.log('ICTT bridge successful:', result);
+ }}
+ onError={(error) => {
+ console.error('ICTT bridge error:', error);
+ }}
+ />
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+
+
+ {
+ console.log('ICTT bridge successful:', result);
+ }}
+ onError={(error) => {
+ console.error('ICTT bridge error:', error);
+ }}
+ />
+
+
+
+
+
+ Interchain Token Transfer (ICTT)
+ Bridge tokens between different blockchain networks
+
+
+ Interchain Token Transfer (ICTT)
+ Bridge tokens between different blockchain networks
+
+
+ {
+ setFromChain(echo.id.toString());
+ setToChain(dispatch.id.toString());
+ }, [setFromChain, setToChain]);
+
+ React.useEffect(() => {
+ if (address) {
+ setRecipientAddress(address);
+ }
+ }, [address, setRecipientAddress]);
+
+ const fromChainData = React.useMemo(() =>
+ availableChains.find(chain => chain.id.toString() === fromChain),
+ [availableChains, fromChain]
+ );
+
+ const toChainData = React.useMemo(() =>
+ availableChains.find(chain => chain.id.toString() === toChain),
+ [availableChains, toChain]
+ );
+
+ return (
+ {
+ console.log('ICTT transfer successful:', result);
+ }}
+ onError={(error) => {
+ console.error('ICTT transfer error:', error);
+ }}
+ >
+
+
+ Quick Bridge
+ Transfer tokens from Echo L1 to Dispatch L1
+
+
+
+
+
+
+
+ );
+}
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji, echo, dispatch];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+ {
+ setFromChain(echo.id.toString());
+ setToChain(dispatch.id.toString());
+ }, [setFromChain, setToChain]);
+
+ React.useEffect(() => {
+ if (address) {
+ setRecipientAddress(address);
+ }
+ }, [address, setRecipientAddress]);
+
+ React.useEffect(() => {
+ if (availableTokens && availableTokens.length > 0) {
+ setSelectedToken(availableTokens[0]);
+ setAmount('15');
+ }
+ }, [availableTokens, setSelectedToken, setAmount]);
+
+ const fromChainData = React.useMemo(() =>
+ availableChains.find(chain => chain.id.toString() === fromChain),
+ [availableChains, fromChain]
+ );
+
+ const toChainData = React.useMemo(() =>
+ availableChains.find(chain => chain.id.toString() === toChain),
+ [availableChains, toChain]
+ );
+
+ return (
+ {
+ console.log('ICTT transfer successful:', result);
+ }}
+ onError={(error) => {
+ console.error('ICTT transfer error:', error);
+ }}
+ >
+
+
+ Instant Bridge
+ One-click token bridge from Echo L1 to Dispatch L1
+
+
+
+
+
+
+
+ );
+}
+
+function App() {
+ const availableChains = [avalanche, avalancheFuji, echo, dispatch];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+
+
+ );
+}
+
+function SimpleICTT1() {
+ return (
+
+
+
+
+ {fromChainData && (
+
+
+
+
+
+ From
+ {fromChainData?.name || 'Echo L1'}
+
+
+
+
+ To
+ {toChainData?.name || 'Dispatch L1'}
+
+ {toChainData && (
+
+
+ );
+}
+
+function SimpleICTT2() {
+ return (
+
+
+
+
+ {fromChainData && (
+
+
+
+
+
+ From
+ {fromChainData?.name || 'Echo L1'}
+
+
+
+
+ To
+ {toChainData?.name || 'Dispatch L1'}
+
+ {toChainData && (
+
+
+ + Staking Components +
++ Stake AVAX and manage validators +
+
+
+ + Earn Components +
++ Earn yield on your assets with AAVE and Benqi liquidity pools +
+
+ {/* Earn Component - Full Featured */}
+
+
+ {
+ console.log('Earn action successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Earn error:', error);
+ }}
+ onStatusChange={(status) => {
+ console.log('Earn status:', status);
+ }}
+ />
+
+
+ );
+}`}
+ language="tsx"
+ >
+ {
+ console.log('Earn action successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Earn error:', error);
+ }}
+ onStatusChange={(status) => {
+ console.log('Earn status:', status);
+ }}
+ />
+
+
+ {/* Single Pool Demos */}
+
+
+ {
+ console.log('Single pool action successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Single pool error:', error);
+ }}
+ />
+ );
+}
+
+function App() {
+ const availableChains = [avalanche];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+ {
+ console.log('Single pool action successful:', result);
+ }}
+ onError={(error) => {
+ console.error('Single pool error:', error);
+ }}
+ />
+ );
+}
+
+function App() {
+ const availableChains = [avalanche];
+
+ return (
+
+
+
+
+ );
+}`}
+ language="tsx"
+ >
+
+
+