Customizing Wallet Connect on Your Spawned Token Website
This guide provides developers with a complete process for customizing the Wallet Connect integration on a token website built with Spawned's AI builder. It covers configuration options, fee settings, and advanced UI controls to optimize user experience and token holder engagement. You'll learn how to adjust the wallet modal, set up transaction parameters, and connect to the Spawned launchpad backend.
Try It NowKey Benefits
Setup Recommendation: Use the Spawned Admin Dashboard
Where should you start your customization?
For most projects, the fastest and most reliable way to customize Wallet Connect is through the Spawned project admin dashboard. This centralized interface connects your AI-built website directly to the launchpad's backend APIs and fee structures. Avoid manual Wallet Connect library integration unless you require highly specific, non-standard behavior not supported by Spawned's template system. The dashboard automatically handles the 0.30% creator fee per trade and the 0.30% holder reward logic, ensuring accuracy from launch.
Step-by-Step: Dashboard Configuration
The core setup is handled in five key steps.
Follow these steps in your Spawned project dashboard to configure the wallet connection.
- Access Project Settings: Log into your Spawned account, select your launched token project, and navigate to 'Website' > 'Wallet Integration'.
- Enter WalletConnect Project ID: Input your Project ID from WalletConnect Cloud. A new project costs nothing to create. This ID enables the secure connection protocol.
- Select Supported Networks: By default, Solana Mainnet is selected. You can add Solana Devnet for testing. For multi-chain projects, you can add Ethereum or Base, but ensure your token's contract address is correct for each chain. Related guides: How to launch a gaming token on Solana, How to launch a gaming token on Ethereum.
- Configure Default Callbacks: Set the default RPC endpoint. Spawned recommends using its optimized endpoint for reliability, but you can specify a custom QuickNode or Helius RPC URL here.
- Save & Generate Snippet: Click 'Update Integration'. The dashboard will generate a code snippet or confirm the API update. Your AI-built site will automatically reflect these changes.
UI and Modal Customization Options
Beyond basic connectivity, you can adjust how the wallet modal looks and behaves to match your token's brand.
- Modal Theme: Choose between 'light', 'dark', or 'auto' (based on user's system preference).
- Position & Animation: Set the modal to appear as a centered dialog, a bottom sheet, or a side panel. Control animation speed.
- Supported Wallets List: Curate the displayed wallet options. By default, Phantom, Solflare, Backpack, and WalletConnect-based mobile wallets are shown. You can reorder or highlight a specific wallet.
- Custom CSS Overrides: For advanced users, the dashboard provides a CSS input field to override specific modal styles (e.g., button colors, border radius, fonts).
- Connection Triggers: Decide if the modal appears on page load, after a delay, or only when a user clicks a specific 'Connect Wallet' button you place.
Integrating Spawned's Fee Structure
A critical part of the customization is ensuring transactions honor Spawned's unique fee model. This is not a standard Wallet Connect feature but is managed through Spawned's backend. When a user connects their wallet and initiates a buy/sell transaction via your website's interface, the system automatically calculates fees.
- The 0.30% creator fee per trade is deducted and routed to your project wallet.
- The 0.30% holder reward is simultaneously distributed to existing token holders. Your Wallet Connect customization does not directly handle this math; instead, it ensures the user's transaction request is correctly signed and sent to Spawned's trading contract where this logic is executed.
Post-graduation from the launchpad, when your token migrates to use Token-2022, the 1% perpetual fee is managed at the program level. Your website's wallet connection needs to point to the new Token-2022 mint address. Update the 'Default Token Address' in the dashboard after migration to maintain full functionality.
Advanced Actions and Event Listening
For developers building custom trading interfaces or dashboards, you can listen to wallet events.
- Connection Events: Hook into
on('connect')andon('disconnect')events to update UI state or fetch user token balances. - Network Switching: Listen for network change events to inform users if they switch from Solana Mainnet to another chain.
- Transaction Simulation: Before sending a transaction, you can use Spawned's API to simulate it, estimating the 0.30% fees and showing the user a preview.
- Error Handling: Implement custom error messages for common issues like insufficient SOL for fees, transaction timeouts, or rejected signatures.
Testing and Final Deployment
A methodical testing process prevents user-facing issues.
Never deploy wallet changes without thorough testing.
- Use Devnet: In your dashboard, switch the network to 'Solana Devnet'. Fund a test wallet with Devnet SOL.
- Test Connection Flow: Go to your site's staging URL (provided by Spawned) and test connecting with a Phantom Devnet wallet.
- Test a Mock Transaction: Use a test token mint on Devnet to simulate a buy transaction. Verify the UI feedback and console logs for errors.
- Switch to Mainnet: Once confirmed, return to the dashboard and change the network back to 'Solana Mainnet'.
- Clear Cache: Instruct users to hard refresh (Ctrl+F5) their browsers to ensure they load the latest wallet integration code.
Ready to Customize Your Token's Wallet Experience?
A well-integrated wallet connection is vital for user trust and smooth trading. By customizing Spawned's Wallet Connect setup, you maintain the benefits of the 0.30% creator revenue and holder rewards while providing a branded experience. If you haven't launched your token yet, start by creating your token and website with Spawned's AI builder, which includes this Wallet Connect system from the beginning, saving you $29-99/month on separate website tools.
Related Topics
Frequently Asked Questions
Yes, the Wallet Connect integration is a built-in feature of every token website created with the Spawned AI builder. There is no additional monthly cost for this functionality, unlike standalone web3 tools which can charge $29-99/month. The 0.1 SOL launch fee covers the initial setup and deployment of your site with a pre-configured wallet connector.
Absolutely. While Spawned provides a default ID for basic functionality, using your own Project ID from WalletConnect Cloud is recommended for production. This gives you direct access to analytics and control over the project settings within the WalletConnect dashboard. The Spawned admin interface has a dedicated field for you to paste your custom ID.
The wallet connection itself does not calculate fees. It facilitates the transaction signing. When a user approves a trade via your website, the transaction is sent to Spawned's smart contract system. That system is programmed to automatically deduct the 0.30% creator fee and distribute the 0.30% holder reward. Your customization ensures the transaction data is correctly formatted for this contract.
After graduation, when your token adopts the Token-2022 standard for the 1% perpetual fee, you need to update one setting. In your Spawned website dashboard, update the 'Default Token Address' to your new Token-2022 mint address. The Wallet Connect integration will continue to function, now pointing to the upgraded token program.
Technically yes, you can add these networks in the dashboard's configuration. However, your primary token contract must exist on those chains for it to be useful. This is common for multi-chain gaming tokens. Refer to our guides for [creating a token on Ethereum](/use-cases/token/how-to-create-gaming-token-on-ethereum) or [on Base](/use-cases/token/how-to-create-gaming-token-on-base) for more context.
The most common error is forgetting to switch the dashboard network back to 'Solana Mainnet' after testing on Devnet. This leaves the website pointing to the wrong blockchain, preventing users from connecting their mainnet wallets or seeing their real token balance. Always double-check this setting before announcing live updates.
Yes, but positively. The Wallet Connect modal is responsive by default. Your customizations for theme, button styles, and wallet list order apply consistently across desktop and mobile devices. The bottom sheet modal option is particularly recommended for mobile as it slides up from the bottom, a familiar pattern for mobile users.
Ready to get started?
Join thousands of users who are already building with Spawned. Start your project today - no credit card required.