@escapehub/token-creator Svelte Demo

A complete SvelteKit implementation of the EscapeHub Token Creator, demonstrating how to integrate @escapehub/token-creator SDK into a Svelte application with wagmi for wallet connections.

Features

• Multi-step wizard for token creation
• Simple and advanced configuration modes
• Real-time form validation with Svelte 5 runes
• Vanity address mining with progress feedback
• Wallet connection via Reown AppKit (WalletConnect)
• Support for 40+ EVM chains

Prerequisites

• Node.js 18+
• A Reown (WalletConnect) project ID from cloud.reown.com

Quick Start

# Install dependencies
npm install

# Copy environment file and add your Reown project ID
cp .env.example .env

# Start development server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── lib/
│   ├── components/
│   │   ├── steps/          # Wizard step components
│   │   │   ├── BasicsStep.svelte
│   │   │   ├── FeaturesStep.svelte
│   │   │   ├── FeesStep.svelte
│   │   │   ├── LimitsStep.svelte
│   │   │   ├── SecurityStep.svelte
│   │   │   ├── AdvancedStep.svelte
│   │   │   ├── VanityStep.svelte
│   │   │   └── ReviewStep.svelte
│   │   ├── ui/             # Reusable UI components
│   │   │   ├── Card.svelte
│   │   │   ├── Toggle.svelte
│   │   │   ├── FormInput.svelte
│   │   │   └── ...
│   │   └── TokenCreatorWizard.svelte
│   ├── stores/
│   │   ├── deploy.ts       # Token deployment store
│   │   └── vanity.ts       # Vanity mining store
│   ├── config/
│   │   └── web3.ts         # Wagmi/Reown configuration
│   ├── types.ts            # TypeScript types
│   └── constants.ts        # Default form values
├── routes/
│   └── +page.svelte
└── app.html

SDK Integration

Token Deployment

import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

// Get ethers signer from wagmi walletClient
const provider = new BrowserProvider(walletClient, walletClient.chain.id);
const signer = await provider.getSigner();

// Build config using SDK helper
const config = createDefaultConfig('My Token', 'MTK', '1000000', ownerAddress, {
  burnEnabled: true,
  feesEnabled: true,
  buyFeeBps: 300,
  // ... more options
});

// Get chain config (includes factory address, RPC, etc.)
const chainConfig = getChainConfig(chainId);

// Deploy
const result = await deployToken(signer, config, chainConfig, salt);
console.log('Token deployed:', result.tokenAddress);

Using Svelte Stores

<script lang="ts">
  import { deployStore, deployStatus, deployTokenAddress } from '$lib/stores/deploy';
  import { vanityStore, vanitySalt, vanityIsActive } from '$lib/stores/vanity';

  async function handleDeploy() {
    await deployStore.deploy(formData, $vanitySalt);
  }

  function startVanityMining() {
    vanityStore.start(chainId, pattern, 'prefix', false);
  }
</script>

{#if $deployStatus === 'confirming'}
  <p>Confirm in your wallet...</p>
{:else if $deployStatus === 'success'}
  <p>Deployed at: {$deployTokenAddress}</p>
{/if}

Supported Chains

This demo supports all 40+ chains from the SDK, including:

• Ethereum, Sepolia
• Base, Base Sepolia
• BNB Smart Chain, BSC Testnet
• Polygon, Polygon Amoy
• Arbitrum One, Arbitrum Sepolia
• And many more...

See the SDK documentation for the full list.

Links

• SDK Documentation
• NPM Package
• Full Application

Tech Stack

• SvelteKit 2
• Svelte 5 (with runes)
• TypeScript
• Vite
• @wagmi/core v2
• Reown AppKit
• Tailwind CSS v4
• @escapehub/token-creator SDK

License

MIT