Spawned Wallet-Connect Integration Tutorial for Token Websites
This guide walks developers through integrating Wallet Connect with a token website created using Spawned's AI builder. You'll learn how to establish secure wallet sessions, handle transactions for your launched token, and manage user interactions. Proper integration is essential for enabling trading, staking, or holder reward features directly on your site.
Try It NowKey Benefits
The Problem
Traditional solutions are complex, time-consuming, and often require technical expertise.
The Solution
Spawned provides an AI-powered platform that makes building fast, simple, and accessible to everyone.
Why Wallet Connect is Essential for Your Spawned Token
Wallet Connect isn't just a convenience—it's a direct revenue and engagement channel.
Integrating Wallet Connect transforms your static token website into an interactive platform. Without it, holders must leave your site to trade on decentralized exchanges, missing direct engagement opportunities. With Wallet Connect, you enable on-site actions like claiming the 0.30% holder rewards, participating in token-gated content, or executing trades that generate the 0.30% creator revenue. For tokens launched on Spawned, this integration is particularly valuable post-graduation, as it facilitates interaction with the 1% perpetual fee structure managed through Token-2022. Learn about launching gaming tokens to see full token lifecycle integration.
Step 1: Prerequisites and Initial Setup
Before coding, ensure your environment is ready. You need a live token website built with Spawned's AI builder (saving you $29-99/month on development tools). You'll also need your token's mint address from your Spawned launch, which cost 0.1 SOL (~$20). Install the necessary packages: @walletconnect/modal, @walletconnect/sign-client, and @solana/web3.js. Create a project ID at Wallet Connect Cloud. This ID is required for initializing the connection. Store it securely as an environment variable, not in your client-side code.
Step 2: Establishing the Wallet Connection
The connection moment is your first interactive touchpoint with potential holders.
Initialize the Wallet Connect modal in your website's frontend. Configure it with your project ID, chain ID for Solana (mainnet-beta or devnet), and required methods like solana_signTransaction. Present the modal to users with a clear call-to-action, such as 'Connect Wallet to Claim Rewards'. Upon successful connection, store the session data in the browser's local storage for persistence across page refreshes. This step is where users first engage with your token's utility. Consider prompting connection when users visit pages about the 0.30% holder rewards or trading features.
Step 3: Handling Transactions and Signing
Once connected, your website can propose transactions. A common use case is allowing holders to claim their portion of the 0.30% ongoing reward pool. Construct the transaction using @solana/web3.js, specifying the token mint, reward vault address, and user's wallet address. Use the Wallet Connect session to request signing. Always display transaction details clearly before requesting signatures—show the SOL amount, token amount, and any fees. For trades, remember that each transaction on your site can generate the 0.30% creator revenue. Handle errors gracefully; if a user rejects, provide a clear message and option to retry. See how gaming tokens use transactions.
Step 4: Session Management and Security
Managing the connection lifecycle is critical for user experience and security.
- Auto-reconnect: Check for existing sessions on page load. If a valid session exists in local storage, reconnect silently without showing the modal.
- Disconnection flow: Provide a clear 'Disconnect' button. When clicked, terminate the session both locally and via Wallet Connect's API. Clear all local storage references.
- Event listeners: Listen for
session_deleteevents, which occur if the user disconnects from their wallet app. Update your UI immediately to reflect the disconnected state. - Chain switching: If your site supports multiple chains, handle
chainChangedevents. For Spawned tokens, you'll primarily use Solana, but prepare for future compatibility.
Spawned-Specific Integration Benefits
Your Spawned launch parameters become interactive features.
Integrating Wallet Connect with a Spawned-launched token provides distinct advantages over generic integrations.
With Spawned Integration:
- Direct access to your token's 0.30% creator revenue from on-site trades.
- Ability to distribute the 0.30% holder rewards directly through your UI.
- Seamless transition post-graduation to Token-2022's 1% perpetual fee structure.
- No monthly website builder fees ($29-99 value) to maintain your platform.
Generic Integration:
- Must manually track creator revenue from external DEX trades.
- Holder rewards require separate claiming interfaces or manual distributions.
- Post-graduation fee management is disconnected from the website experience.
- Ongoing website hosting and development costs apply.
The integration directly ties your token's economic model to your community site.
Common Implementation Patterns and Examples
Here are practical patterns to implement on your token website:
- Reward Claim Button:
connectWallet().then(claimRewards)pattern. Displays estimated SOL reward based on holder's token balance before confirming. - Trade Widget: Integrate a simple swap interface using Jupiter API. Show the 0.30% creator fee as a separate line item in the transaction preview.
- Token-Gated Content: Check wallet balance before revealing exclusive content. Use the connection to verify holdings without requiring a new signature.
- Holder Dashboard: After connection, display key metrics: token balance, earned rewards (0.30% pool), and trading activity that generated creator fees.
Ready to Integrate Wallet Connect?
Your Spawned token website is waiting to become an interactive hub for your community. By integrating Wallet Connect, you turn visitors into active participants in your token's economy—claiming rewards, generating creator revenue through trades, and building loyalty. If you haven't launched your token yet, start with a 0.1 SOL launch on Spawned and use the included AI website builder. For existing Spawned token creators, implement this guide to unlock your site's full potential. Need a token idea? Explore creating a gaming token as your first project.
Related Topics
Frequently Asked Questions
No, Wallet Connect itself is free to integrate. Your Spawned launch includes the AI website builder at no additional monthly cost (saving $29-99/month). The only cost is the initial 0.1 SOL (~$20) launch fee. You'll use standard web development packages available via npm at no charge.
Yes, absolutely. Wallet Connect integration works at any stage of your token's lifecycle. In fact, implementing it early helps build community engagement before graduation. Your site can already facilitate trades that generate the 0.30% creator revenue and distribute the 0.30% holder rewards. Post-graduation, the same integration will work with the Token-2022 1% perpetual fee structure.
Wallet Connect supports major Solana wallets including Phantom, Solflare, Backpack, and Glow. The protocol handles the connection standardization, so you don't need to code individual wallet integrations. When you initialize the modal, users see all their installed compatible wallets, providing a familiar experience.
When a trade transaction is signed via Wallet Connect, the 0.30% fee is automatically routed to your creator wallet as defined in your Spawned token launch parameters. Your integration doesn't need to manually calculate or transfer this fee—it's handled at the protocol level. Your website simply needs to facilitate the trade transaction through a swap interface like Jupiter.
Wallet Connect session data in local storage contains connection identifiers but not private keys. Private keys never leave the user's wallet. For enhanced security, you can implement short session timeouts or offer users the option to disable session persistence. Always use HTTPS for your Spawned-built website to encrypt all communications.
Yes, the Wallet Connect modal offers customization options for colors, logos, and wording. Since your website is built with Spawned's AI builder, you can ensure the modal's appearance aligns with your site's design. Match primary colors and consider adding your token's logo to create a cohesive experience from website to wallet connection.
Your code should include error handling for disconnected sessions. Listen for disconnection events and update the UI to reflect the disconnected state. If a transaction is in progress when disconnection occurs, cancel the transaction request and prompt the user to reconnect. Always validate wallet connection status before initiating any transaction signing request.
Once connected, your website can query the reward distribution smart contract to determine the user's claimable amount. You then construct a claim transaction that the user signs via Wallet Connect. The integration makes the reward system interactive—users can see their accumulated rewards and claim them with one click directly on your site, increasing engagement and utility.
Ready to get started?
Join thousands of users who are already building with Spawned. Start your project today - no credit card required.