Build Your Own Token Creator: Integrating @escapehub/token-creator SDK with React, Vue, and Svelte

Creating ERC20 tokens has traditionally required deep Solidity knowledge and complex deployment scripts. The @escapehub/token-creator SDK changes that by providing a simple, framework-agnostic JavaScript library for deploying feature-rich tokens across 40+ EVM chains.

This guide shows you how to integrate the SDK into React, Vue, and Svelte applications — complete with wallet connections, vanity address mining, and multi-step token configuration wizards.

What is @escapehub/token-creator?

The @escapehub/token-creator SDK is a TypeScript library that handles:

• Token deployment to 40+ EVM-compatible blockchains
• Vanity address mining — generate custom token addresses (e.g., starting with 0xCAFE...)
• Configurable token features — burns, fees, limits, security options
• Chain configuration — built-in factory addresses, RPCs, and explorers for all supported networks

Supported Chains

The SDK supports major networks including:

• Ethereum & Sepolia
• Base & Base Sepolia
• BNB Smart Chain & BSC Testnet
• Polygon & Polygon Amoy
• Arbitrum One & Arbitrum Sepolia
• Avalanche, Fantom, Optimism, and 30+ more

Live Examples

Before diving into code, check out these production implementations:

• bnbtoken.ai/explore — BNB Chain token creator
• moonbeamtoken.ai/explore — Moonbeam token creator
• basetokencreator.ai/explore — Base chain token creator
• app.escapehub.ai/token-creator/explore — Multi-chain creator

Core SDK Usage

The SDK is framework-agnostic. Here’s the core pattern used across all frameworks:

Installation

npm install @escapehub/token-creator ethers

Token Deployment

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

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

// Build token configuration
const config = createDefaultConfig('My Token', 'MTK', '1000000', ownerAddress, {
burnEnabled: true,
feesEnabled: true,
buyFeeBps: 300, // 3% buy fee
sellFeeBps: 300, // 3% sell fee
// ... more options
});

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

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

Vanity Address Mining

Want your token address to start with 0xDEAD or 0xCAFE? The SDK includes async vanity mining:

import {
generateSaltAsync,
getImplementation,
getMinimalProxyInitCodeHash,
getChainConfig,
} from '@escapehub/token-creator';

const chainConfig = getChainConfig(chainId);
const implementation = await getImplementation(provider, chainConfig.factoryAddress);
const initCodeHash = getMinimalProxyInitCodeHash(implementation);

const result = await generateSaltAsync(chainConfig.factoryAddress, initCodeHash, {
pattern: 'CAFE',
mode: 'prefix', // or 'suffix', 'contains'
maxAttempts: 10_000_000,
onProgress: (attempts, hashRate) => {
console.log(`Mining: ${attempts} attempts at ${hashRate} H/s`);
},
});

if (result) {
console.log('Found address:', result.address);
console.log('Use this salt:', result.salt);
}

Framework Integrations

Now let’s see how to wrap the SDK for each framework. The core logic is identical — only the state management differs.

React Integration

Tech Stack: React 18, TypeScript, wagmi v2, Reown AppKit, Tailwind CSS

Create a custom hook for deployment:

// hooks/useTokenDeploy.ts
import { useState } from 'react';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

export function useTokenDeploy() {
const [status, setStatus] = useState<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
const [tokenAddress, setTokenAddress] = useState<string | null>(null);
const [error, setError] = useState<Error | null>(null);

async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
setStatus('confirming');
try {
const provider = new BrowserProvider(walletClient, walletClient.chain.id);
const signer = await provider.getSigner();

const config = createDefaultConfig(
formData.name,
formData.symbol,
formData.supply,
formData.owner,
formData.options
);

const chainConfig = getChainConfig(walletClient.chain.id);
setStatus('deploying');

const result = await deployToken(signer, config, chainConfig, salt);
setTokenAddress(result.tokenAddress);
setStatus('success');
return result;
} catch (e) {
setError(e as Error);
setStatus('error');
throw e;
}
}

return { deploy, status, tokenAddress, error };
}

Usage in a component:

function TokenCreator() {
const { deploy, status, tokenAddress } = useTokenDeploy();

return (
<div>
{status === 'confirming' && <p>Confirm in your wallet...</p>}
{status === 'deploying' && <p>Deploying token...</p>}
{status === 'success' && <p>Deployed at: {tokenAddress}</p>}
<button onClick={() => deploy(walletClient, formData)}>
Deploy Token
</button>
</div>
);
}

Full demo: github.com/escapehub-ai/token-creator-react

Vue Integration

Tech Stack: Vue 3.5 (Composition API), TypeScript, wagmi v2, Reown AppKit, Tailwind CSS

Create a composable for deployment:

// composables/useTokenDeploy.ts
import { ref } from 'vue';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

export function useTokenDeploy() {
const status = ref<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
const tokenAddress = ref<string | null>(null);
const error = ref<Error | null>(null);

async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
status.value = 'confirming';
try {
const provider = new BrowserProvider(walletClient, walletClient.chain.id);
const signer = await provider.getSigner();

const config = createDefaultConfig(
formData.name,
formData.symbol,
formData.supply,
formData.owner,
formData.options
);

const chainConfig = getChainConfig(walletClient.chain.id);
status.value = 'deploying';

const result = await deployToken(signer, config, chainConfig, salt);
tokenAddress.value = result.tokenAddress;
status.value = 'success';
return result;
} catch (e) {
error.value = e as Error;
status.value = 'error';
throw e;
}
}

return { deploy, status, tokenAddress, error };
}

Usage in a component:

<script setup lang="ts">
import { useTokenDeploy } from '@/composables/useTokenDeploy';
import { useVanityMining } from '@/composables/useVanityMining';

const { deploy, status, tokenAddress } = useTokenDeploy();
const { mine, salt, mining, progress } = useVanityMining({
chainId: 11155111,
pattern: 'CAFE',
mode: 'prefix',
});

async function handleDeploy() {
await deploy(walletClient, formData, salt.value);
}
</script>

<template>
<div>
<p v-if="status === 'confirming'">Confirm in your wallet...</p>
<p v-else-if="status === 'success'">Deployed at: {{ tokenAddress }}</p>
<button @click="handleDeploy">Deploy Token</button>
</div>
</template>

Full demo: github.com/escapehub-ai/token-creator-vue

Svelte Integration

Tech Stack: SvelteKit 2, Svelte 5 (with runes), TypeScript, @wagmi/core v2, Reown AppKit, Tailwind CSS

Create a store for deployment:

// stores/deploy.ts
import { writable, derived } from 'svelte/store';
import { deployToken, createDefaultConfig, getChainConfig } from '@escapehub/token-creator';
import { BrowserProvider } from 'ethers';

function createDeployStore() {
const status = writable<'idle' | 'confirming' | 'deploying' | 'success' | 'error'>('idle');
const tokenAddress = writable<string | null>(null);
const error = writable<Error | null>(null);

async function deploy(walletClient: any, formData: TokenFormData, salt?: string) {
status.set('confirming');
try {
const provider = new BrowserProvider(walletClient, walletClient.chain.id);
const signer = await provider.getSigner();

const config = createDefaultConfig(
formData.name,
formData.symbol,
formData.supply,
formData.owner,
formData.options
);

const chainConfig = getChainConfig(walletClient.chain.id);
status.set('deploying');

const result = await deployToken(signer, config, chainConfig, salt);
tokenAddress.set(result.tokenAddress);
status.set('success');
return result;
} catch (e) {
error.set(e as Error);
status.set('error');
throw e;
}
}

return { deploy, status, tokenAddress, error };
}

export const deployStore = createDeployStore();

Usage in a component:

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

const { status, tokenAddress } = deployStore;

async function handleDeploy() {
await deployStore.deploy(walletClient, formData, $vanitySalt);
}
</script>

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

<button on:click={handleDeploy}>Deploy Token</button>

Full demo: github.com/escapehub-ai/token-creator-svelte

Project Structure

All three demos follow a similar architecture:

src/
├── components/
│ ├── steps/ # Multi-step wizard
│ │ ├── BasicsStep # Name, symbol, supply
│ │ ├── FeaturesStep # Burns, fees, etc.
│ │ ├── FeesStep # Buy/sell fee configuration
│ │ ├── LimitsStep # Max wallet, max tx
│ │ ├── SecurityStep # Anti-bot, blacklist
│ │ ├── AdvancedStep # Custom options
│ │ ├── VanityStep # Vanity address mining
│ │ └── ReviewStep # Final review & deploy
│ └── ui/ # Reusable components
├── [hooks|composables|stores]/
│ ├── useTokenDeploy # Deployment logic
│ └── useVanityMining # Vanity mining logic
├── config/
│ └── web3.ts # Wallet configuration
└── types.ts # TypeScript definitions

Token Features

The SDK supports extensive token customization:

Burn: Allow token holders to burn their tokens

Fees: Configure buy/sell fees (in basis points)

Limits: Max wallet balance, max transaction size

Security: Anti-bot protection, blacklist functionality

Ownership: Renounce or transfer ownership

Prerequisites

To run any of the demos:

1. Node.js 18+
2. Reown Project ID — Get one free at cloud.reown.com

# Clone any demo
git clone https://github.com/escapehub-ai/token-creator-react
cd token-creator-react

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Add your VITE_REOWN_PROJECT_ID to .env

# Start dev server
npm run dev

Resources

• NPM Package: npmjs.com/package/@escapehub/token-creator
• Documentation: app.escapehub.ai/docs
• React Demo: github.com/escapehub-ai/token-creator-react
• Vue Demo: github.com/escapehub-ai/token-creator-vue
• Svelte Demo: github.com/escapehub-ai/token-creator-svelte

Conclusion

The @escapehub/token-creator SDK abstracts away the complexity of ERC20 token deployment while giving you full control over token features. Whether you're building with React, Vue, or Svelte, the integration pattern is straightforward:

1. Install the SDK
2. Create a wrapper (hook/composable/store) for state management
3. Use createDefaultConfig() to build your token config
4. Call deployToken() with an ethers signer

The demos provide production-ready starting points with wallet connections, multi-step wizards, and vanity mining already implemented.

Happy building!

Tags: ethereum, erc20, token, web3, react, vue, svelte, blockchain, smart-contracts, typescript

Build Your Own Token Creator: Integrating @escapehub/token-creator SDK with React, Vue, and Svelte was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.