import { DedotClient, SmoldotProvider } from 'dedot';
import type { PolkadotApi } from '@dedot/chaintypes';
import { start } from 'dedot/smoldot';
// import `polkadot` chain spec to connect to Polkadot
import { polkadot } from '@dedot/chain-specs'
// Start smoldot instance & initialize a chain
const smoldot = start();
const chain = await smoldot.addChain({ chainSpec: polkadot });
// Initialize providers & clients
const provider = new SmoldotProvider(chain);
const client = await DedotClient.new<PolkadotApi>(provider);
// Call rpc `state_getMetadata` to fetch raw scale-encoded metadata and decode it.
const metadata = await client.rpc.state_getMetadata();
console.log('Metadata:', metadata);
// Query on-chain storage
const balance = await client.query.system.account(<address>);
console.log('Balance:', balance);
// Subscribe to on-chain storage changes
const unsub = await client.query.system.number((blockNumber) => {
console.log(`Current block number: ${blockNumber}`);
});
// Get pallet constants
const ss58Prefix = client.consts.system.ss58Prefix;
console.log('Polkadot ss58Prefix:', ss58Prefix);
// Call runtime api
const pendingRewards = await client.call.nominationPoolsApi.pendingRewards(<address>)
console.log('Pending rewards:', pendingRewards);
// await unsub();
// await client.disconnect();
import { DedotClient, WsProvider } from 'dedot';
import type { PolkadotApi } from '@dedot/chaintypes';
// Initialize providers & clients
const provider = new WsProvider('wss://rpc.polkadot.io');
const client = await DedotClient.new<PolkadotApi>({ provider, cacheMetadata: true });
Add a custom caching storage?
You can also add a custom cache storage for different environments: ```typescript import { DedotClient, WsProvider } from 'dedot'; import type { PolkadotApi } from '@dedot/chaintypes'; import type { IStorage } from '@dedot/storage'; // Implement CustomStorage class CustomStorage implements IStorage { // implementation details } // Initialize providers & clients const provider = new WsProvider('wss://rpc.polkadot.io'); const client = await DedotClient.new| Name | Description |
|---|---|
| @dedot/api | High-level abstraction apis (clients, API executors...) |
| @dedot/providers | Providers for connection to JSON-RPC servers (WsProvider, SmoldotProvider) |
| @dedot/types | Generic shared types across the packages |
| @dedot/runtime-specs | Explicit Runtime API definitions to use for chains only supports Metadata V14 |
| @dedot/shape | Basic codecs/shapes for scale-codec encode/decode |
| @dedot/contracts | APIs to interact with ink! smart contracts |
| @dedot/codecs | Known codecs for generic purposes ($Metadata, $AccountId32, $Extrinsic ...) |
| @dedot/utils | Useful utility functions |
| @dedot/storage | Storage API for different purposes (caching, ...) |
| @dedot/codegen | Types & APIs generation engine for chaintypes & ink! smart contracts |
| @dedot/cli | Dedot's CLI |
| @dedot/merkleized-metadata | RFC-0078 Implementation, with utilities to calculate metadata hash/digest & proof for extrinsic, extrinsic payload... |
| dedot | Umbrella package re-exporting primitives & APIs from other packages, including subpath packages |
| Name | Description |
|---|---|
dedot | Re-exports @dedot/api, @dedot/providers & @dedot/shape packages |
dedot/contracts | Re-exports @dedot/contracts package |
dedot/codecs | Re-exports @dedot/codecs package |
dedot/utils | Re-exports @dedot/utils package |
dedot/types | Re-exports @dedot/types package |
dedot/types/json-rpc | Re-exports @dedot/types/json-rpc package for Substrate JSON-RPC API types information (both new & legacy) |
dedot/runtime-specs | Re-exports @dedot/runtime-specs package |
dedot/shape | Re-exports @dedot/shape package |
dedot/merkleized-metadata | Re-exports @dedot/merkleized-metadata package |
| Status | Description |
|---|---|
connected | The client is connected to the network |
disconnected | The client is disconnected from the network |
reconnecting | The client is attempting to reconnect to the network |
import { DedotClient, WsProvider } from 'dedot';
import type { PolkadotAssetHubApi } from '@dedot/chaintypes';
// Initialize providers & clients
const provider = new WsProvider('wss://polkadot-asset-hub-rpc.polkadot.io');
const client = await DedotClient.new<PolkadotAssetHubApi>(provider);
// Subscribe to account balance changes
const unsub = await client.query.system.account(<address>, (balance) => {
console.log('New free balance', balance.data.free);
unsub(); // unsubsribe from the subscription
});
// Subscribe to events of current best block
const unsub = await client.query.system.events((records) => {
const transferEvent = client.events.balances.Transfer.find(records);
if (transferEvent) {
console.log('New transfer event: ', transferEvent);
unsub(); // unsubsribe from the subscription
}
});
import { cryptoWaitReady } from '@polkadot/util-crypto';
import { Keyring } from '@polkadot/keyring';
// ...
await cryptoWaitReady();
const keyring = new Keyring({ type: 'sr25519' });
const alice = keyring.addFromUri('//Alice');
const { status } = await client.tx.balances
.transferKeepAlive(<destAddress>, 2_000_000_000_000n)
.signAndSend(alice, ({ status }) => {
console.log('Transaction status', status.type);
})
.untilFinalized();
console.log(`Transaction finalized at block hash ${status.value.blockHash}`);
Example 3: Submit a batch transaction
import type { PolkadotRuntimeRuntimeCallLike } from '@dedot/chaintypes/polkadot';
// Omit the detail for simplicity
const account = ...;
const signer = ...;
const transferTx = client.tx.balances.transferKeepAlive(<destAddress>, 2_000_000_000_000n);
const remarkCall: PolkadotRuntimeRuntimeCallLike = {
pallet: 'System',
palletCall: {
name: 'RemarkWithEvent',
params: {
remark: 'Hello Dedot!',
},
},
};
const { status } = client.tx.utility.batch([transferTx.call, remarkCall])
.signAndSend(account.address, { signer }, ({ status }) => {
console.log('Transaction status', status.type);
})
.untilFinalized();
console.log(`Transaction finalized at block hash ${status.value.blockHash}`);
Example 4: Teleport WND from Westend Asset Hub to Westend via XCM
```typescript import { WestendAssetHubApi, XcmVersionedLocation, XcmVersionedAssets, XcmV3WeightLimit } from '@dedot/chaintypes/westendAssetHub'; import { AccountId32 } from 'dedot/codecs'; const TWO_TOKENS = 2_000_000_000_000n; const destAddress =
Interact with a PSP22 contracts using Dedot's type-safe APIs
[ink! v4 & v5] Retrieve contract address from deployment events
#### Extract from `Contract.Instantiated` event ```typescript const { events } = deploymentResult; const instantiatedEvent = client.events.contracts.Instantiated.find(events); const contractAddress = instantiatedEvent.palletEvent.data.contract.address(); console.log(contractAddress); ``` #### Listen for `Contract.Instantiated` event from system events ```typescript await client.query.system.events(async (records) => { const instantiatedEvent = client.events.contracts.Instantiated.filter(events) .find((e) => e.palletEvent.data.deployer.address() === CALLER); if (instantiatedEvent) { const contractAddress = instantiatedEvent.palletEvent.data.contract.address(); console.log(contractAddress); } }); ```[ink! v6 & solidity] Calculate contract address deterministically
#### Calculate contract address via deployment salt (`CREATE2`) If one deploy the contract using a deployment salt (32 bytes), one can deterministically calculate the contract address even before deploying it using the `CREATE2` method. ```typescript import { toEvmAddress, CREATE2 } from 'dedot/contracts'; import { generateRandomHex } from 'dedot/utils'; const client = ... // initialize DedotClient const CALLER = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'; // Alice const polkavmCode = '0x...' // polkavm contract code // Initialize ContractDeployer const deployer = new ContractDeployeru8, u16, u32,
i8, i16, i32
u64, u128, u256,
i64, i128, i256
{
isOk: true;
isErr?: false;
value: Ok
} | {
isOk?: false;
isErr: true;
err: Err
}
Struct:
struct {
field\_1: u8,
field\_2: str
}
{
field\_1: number,
field\_2: string
}
Enum:
enum {
Variant1(u8),
Variant2(bool),
Variant3
}
{
type: 'Variant1',
value: number
} | {
type: 'Variant2',
value: boolean
} | {
type: 'Variant3'
}
FlatEnum:
enum {
Variant1,
Variant2
}
| Start new project | How to start a new dapp project | start-a-new-dapp |
| Migration | Migrate existing dapp to use Typink | migrate-from-existing-dapp |
| Hooks & Providers | Hooks & Providers references | hooks-and-providers |
| Utilities | formatBalance, txToaster ... | utilities |
create-typink CLI | More details on the CLI | create-typink-cli |
| Tutorials | Building with Typink & Dedot | tutorials |
Loading...
;
return (
Current value: {value?.toString()}
Stored value: {value?.toString()}
;
}
```
**đź’ˇ The hooks are identical!** Only the contract type and method names change.
#### useContractTx - Send Transactions
Execute contract transactions with the same API:
**Ink! v6 Flipper Example:**
```tsx
import { useContract, useContractTx, txToaster } from 'typink';
function FlipperTx() {
const { contract } = useContractRecent Events:
{events.map((event, i) => ({event.name}
))}
Flipper Contract
{/* Display current value */}Current Value:
{isLoading ? ( Loading... ) : ( {value?.toString()} )}Recent Events:
{events.map((event, i) => ({event}
))}
{wallets.map((wallet) => (
))}
);
}
```
**Example: Account Selection & Disconnect**
```tsx
import { useTypink } from 'typink';
function AccountSelector() {
const {
accounts,
connectedAccount,
setConnectedAccount,
disconnect
} = useTypink();
if (!connectedAccount) {
return Connected: {connectedAccount.name}
Address: {connectedAccount.address}
{/* Switch between accounts */} {/* Disconnect */}| Contract Type | Technology | Networks |
|---|---|---|
| ink! v4/v5 | WASM (pallet-contracts) | alephZero, astar, shiden, popTestnet, alephZeroTestnet, shibuyaTestnet |
| ink! v6 / Solidity | PolkaVM (pallet-revive) | popTestnet, passetHub, westendAssetHub, kusamaAssetHub |
| Option | Alias | Type | Description |
|---|---|---|---|
--name <project-name> | -n | String | Specify the project name. Must be a valid npm package name. |
--template <template-name> | -t | String | Choose a template: inkv6-nextjs, inkv6-sol-nextjs, sol-nextjs, inkv5-nextjs. |
--networks <network-names> | -N | String[] | Select supported networks (multiple values allowed). Networks must match the template's pallet type. |
--skip-install | --skip | Boolean | Skip automatic package installation. |
--no-git | Boolean | Skip git initialization. | |
--help | -h | Boolean | Show help message. |
| Prop | Type | Description |
| deployments | ContractDeployment[] | An array of contract deployments (optional, defaults to empty array) |
| defaultCaller | string | The default Substrate address used as the default caller for making queries when no wallet is connected (optional, defaults to ALICE address: 5FTZ6n1wY3GBqEZ2DWEdspbTarvRnp8DM8x2YXbWubu7JN98) |
| supportedNetworks | NetworkInfo[] | An array of supported networks for your dApp |
| defaultNetworkIds | (NetworkId | NetworkConnection)[] | Default list of networks to use when no stored connections exist. First network is primary, rest are secondary. Supports custom providers per network. |
| defaultNetworkId | NetworkId | NetworkConnection | Fallback network if defaultNetworkIds is not provided. Converted to defaultNetworkIds=[defaultNetworkId] internally. |
| cacheMetadata | boolean | Toggle whether to cache network metadata (default: false) |
| appName | string | The name of your dApp, used to identify your dApp when connecting to wallets |
| wallets | Wallet[] | Array of supported wallets. Defaults to [subwallet, talisman, polkadotjs]. Only used with built-in Typink Wallet Connector. |
| signer | Signer | The signer for handling transactions. If using an external wallet connector (e.g., SubConnect, Talisman Connect), pass your signer here to override Typink's internal signer management. |
| connectedAccount | TypinkAccount | The currently connected account. If using an external wallet connector, pass the active account here to inform Typink which account to use for interactions. |
| Name | Type | Description |
|---|---|---|
ready | boolean | Indicates whether all network clients are connected and ready for blockchain interactions. |
client | CompatibleSubstrateApi<ChainApi>? | The primary Dedot client instance for the main network. |
network | NetworkInfo | Primary network information (ID, name, RPC providers, token symbol, decimals). |
networkConnection | NetworkConnection | Primary network connection details (network ID and provider type). |
networks | NetworkInfo[] | All network info objects (primary first, then secondary networks). |
networkConnections | NetworkConnection[] | All network connections (primary first, then secondary). |
clients | Map<NetworkId, CompatibleSubstrateApi<ChainApi>> | Map of Dedot client instances indexed by network ID for multi-network access. |
connectionStatus | Map<NetworkId, ClientConnectionStatus> | Connection status for each network (NotConnected, Connecting, or Connected). |
setNetwork | (connection: NetworkId | NetworkConnection) => void | Switch to a different primary network. |
setNetworks | (networks: (NetworkId | NetworkConnection)[]) => void | Configure multiple network connections at once (first element becomes primary). |
| Name | Type | Description |
|---|---|---|
appName | string | Your dApp name as configured in TypinkProvider. |
wallets | Wallet[] | All available/configured wallet extensions with their installation and ready status. |
connectedWalletIds | string[] | IDs of currently connected wallets. |
connectedWallets | Wallet[] | Wallet objects for all currently connected wallets. |
accounts | TypinkAccount[] | All accounts from all connected wallets. |
connectedAccount | TypinkAccount? | Currently active account used for signing transactions and contract queries. |
signer | InjectedSigner? | Signer object for transaction signing (automatically managed by Typink). |
connectWallet | (id: string) => Promise<void> | Connect to a wallet by its ID (e.g., 'subwallet-js', 'talisman'). |
disconnect | (walletId?: string) => void | Disconnect from a specific wallet or all wallets if no ID provided. |
setConnectedAccount | (account: TypinkAccount) => void | Switch the currently active account. |
| Name | Type | Description |
|---|---|---|
deployments | ContractDeployment[] | All registered contract deployments with their addresses, metadata, and network info. |
defaultCaller | SubstrateAddress | Default address for read-only queries when no wallet is connected. |
// ...
import { useContract, useContractQuery } from 'typink';
import { ContractId } from 'contracts/deployments';
import { GreeterContractApi } from 'contracts/types/greeter';
const { contract } = useContract<GreeterContractApi>(ContractId.GREETER);
const {
data: greet,
isLoading,
refresh,
} = useContractQuery({
contract,
fn: 'greet',
});
// ...
Checking mapping status...
;
if (isMapped === false) {
return (
Account not mapped. Please map your account first.
Account mapped to: {evmAddress}
;
}
```
**Check specific address:**
```tsx
const { isMapped, evmAddress } = useCheckMappedAccount(
'5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
{ networkId: 'popTestnet' }
);
```
# useLazyStorage
**⚠️ ink! v5 and v6 only (requires ink! ABI)**
Fetches specific lazy storage values from ink! smart contracts with type-safe access to individual fields, mappings, vectors, and objects. Supports automatic refresh on new blocks.
#### Props
| Name | Type | Description |
|---|---|---|
contract | Contract<T> | undefined | The contract instance to fetch lazy storage from. |
fn | (lazy: LazyStorage) => any | Function that navigates the lazy storage structure and returns the value to fetch. |
watch | boolean? | Whether to watch for block changes and automatically refresh the data. Default: false. |
| Name | Type | Description |
|---|---|---|
data | T | undefined | The fetched data, fully typed based on the accessor function result. |
isLoading | boolean | Whether the initial data fetch is in progress. |
isRefreshing | boolean | Whether a manual refresh is in progress. |
error | Error | undefined | Any error that occurred during data fetching. |
refresh | () => Promise<void> | Function to manually refresh the data. |
Loading balance...
;
return Balance: {balance?.toString()}
;
}
```
**Fetch with manual refresh:**
```tsx
const { data: balance, refresh, error } = useLazyStorage({
contract,
fn: (lazy) => lazy.data.balances.get(targetAddress),
watch: false,
});
// Manually refresh after a transaction
await mintTx.signAndSend({ args: [amount] });
await refresh();
```
# useRootStorage
**⚠️ ink! v5 and v6 only (requires ink! ABI)**
Fetches and manages the entire root storage structure of an ink! smart contract with type-safe access to all storage fields. Supports automatic refresh on new blocks.
#### Props
| Name | Type | Description |
|---|---|---|
contract | Contract<T> | undefined | The contract instance to fetch root storage from. |
watch | boolean? | Whether to watch for block changes and automatically refresh the storage. Default: false. |
| Name | Type | Description |
|---|---|---|
storage | RootStorage | undefined | The root storage data, fully typed based on the contract's storage structure. |
isLoading | boolean | Whether the initial storage fetch is in progress. |
isRefreshing | boolean | Whether a manual refresh is in progress. |
error | Error | undefined | Any error that occurred during storage fetching. |
refresh | () => Promise<void> | Function to manually refresh the storage data. |
Loading token info...
;
return (
Name: {storage?.name}
Symbol: {storage?.symbol}
Decimals: {storage?.decimals}
Total Supply: {storage?.data?.totalSupply?.toString()}
| Name | Type | Description |
|---|---|---|
networkId | NetworkId? | The network ID to get the client for. If not provided, returns the primary client. |
| Name | Type | Description |
|---|---|---|
client | CompatibleSubstrateApi<ChainApi> | undefined | The Dedot client instance for the specified network. |
status | ClientConnectionStatus | Connection status: NotConnected, Connecting, or Connected. |
network | NetworkInfo | Network information (ID, name, RPC providers, token symbol, decimals). |
Connecting...
;
if (status === 'NotConnected') return Not connected
;
return (
Network: {network.name}
Symbol: {network.symbol}
Connected: {status === 'Connected' ? 'Yes' : 'No'}
| Name | Type | Description |
|---|---|---|
options | NetworkOptions? | Optional network selection options (e.g., { networkId: 'polkadot' }). |
| Name | Type | Description |
|---|---|---|
best | BlockInfo | undefined | Latest best block information ({ number: number, hash: string }). |
finalized | BlockInfo | undefined | Latest finalized block information ({ number: number, hash: string }). |
Best Block: #{best?.number}
Finalized Block: #{finalized?.number}
Best Hash: {best?.hash}
Polkadot
Best: #{polkadotBlocks.best?.number}
Finalized: #{polkadotBlocks.finalized?.number}
Kusama
Best: #{kusamaBlocks.best?.number}
Finalized: #{kusamaBlocks.finalized?.number}
| Name | Type | Description |
|---|---|---|
txBuilder | (tx) => TxFunction | Callback function that receives the tx object and returns a transaction method (e.g., (tx) => tx.system.remark). |
options | NetworkOptions? | Optional network selection options (e.g., { networkId: 'polkadot' }). |
| Name | Type | Description |
|---|---|---|
signAndSend | (params?) => Promise<void> | Function to sign and send the transaction. Accepts { args?, txOptions?, callback? }. |
getEstimatedFee | (params?) => Promise<bigint> | Function to estimate the transaction fee. Accepts { args?, txOptions? }. |
inProgress | boolean | Whether a transaction is currently in progress (from signing to finalization). |
inBestBlockProgress | boolean | Whether the transaction has been included in the best block. |
| Name | Type | Description |
|---|---|---|
tx | UseTxReturnType | Transaction instance from useTx hook. |
args | any[] | Arguments for the transaction. Required if transaction has parameters. |
txOptions | Partial<PayloadOptions>? | Transaction options to include in fee estimation (e.g., tip, nonce). |
enabled | boolean? | Whether to automatically fetch the fee estimate. Default: true. |
networkId | NetworkId? | Optional network ID to specify which client to use. |
| Name | Type | Description |
|---|---|---|
fee | bigint | null | The estimated fee in the smallest unit (e.g., Planck for Polkadot). null if not available. |
isLoading | boolean | Whether fee estimation is in progress. |
error | string | null | Error message if estimation failed, null otherwise. |
refresh | () => Promise<void> | Function to manually trigger fee estimation. |
setMessage(e.target.value)}
placeholder="Enter message"
/>
{isLoading &&
);
}
```
**Conditional fee estimation:**
```tsx
function TransferWithFee() {
const [recipient, setRecipient] = useState('');
const [amount, setAmount] = useState('');
const transferTx = useTx((tx) => tx.balances.transferKeepAlive);
const isValidRecipient = recipient.length === 48;
const parsedAmount = amount ? BigInt(amount) : 0n;
const { fee, isLoading, error } = useTxFee({
tx: transferTx,
args: [recipient, parsedAmount],
enabled: isValidRecipient && parsedAmount > 0n,
});
return (
Calculating fee...
} {error &&Error: {error}
} {fee &&Estimated Fee: {formatBalance(fee)}
}
setRecipient(e.target.value)}
placeholder="Recipient address"
/>
setAmount(e.target.value)}
placeholder="Amount"
type="number"
/>
{fee && (
)}
);
}
```
# Utilities
# formatBalance
Format a balance value to a human-readable string
```tsx
import { formatBalance, popTestnet } from 'typink';
formatBalance(1e12, popTestnet); // 100 PAS
const options = { decimals: 12, symbol: 'UNIT' };
formatBalance('12023172837123', options) // 12.0231 UNIT;
formatBalance(12_023_172_837_123n, options) // 12.0231 UNIT;
formatBalance(BigInt(12_023_172_837_123), options // 12.0231 UNIT;
```
# txToaster
Showing transaction notifications with real-time progress updates
The `txToaster` utility provides a generic, adapter-based system for displaying transaction notifications with real-time progress updates. It supports any toast notification library through adapters, keeping users informed about transaction status, block inclusion, and errors.
### Quick look
Estimated Fee: {formatBalance(fee)}
Total: {formatBalance(fee + parsedAmount)}
setMessage(e.target.value)}
placeholder="Enter message"
/>
);
}
```
#### General Substrate Transaction
```tsx
import { useTx, txToaster } from 'typink';
function TransferComponent() {
const [recipient, setRecipient] = useState('');
const [amount, setAmount] = useState('');
const transferTx = useTx((tx) => tx.balances.transferKeepAlive);
const handleTransfer = async () => {
const toaster = txToaster('Transferring tokens...');
try {
await transferTx.signAndSend({
args: [recipient, BigInt(amount)],
callback: (result) => {
toaster.onTxProgress(result);
const { status, dispatchError } = result;
if (status.type === 'BestChainBlockIncluded') {
if (!dispatchError) {
console.log('Transfer included in block!');
} else {
console.error('Transfer failed in block:', dispatchError);
}
}
if (status.type === 'Finalized') {
if (!dispatchError) {
setRecipient('');
setAmount('');
}
}
},
});
} catch (error) {
toaster.onTxError(error);
}
};
return (
setRecipient(e.target.value)}
placeholder="Recipient address"
/>
setAmount(e.target.value)}
placeholder="Amount"
/>
);
}
```
#### With Custom Messages
```tsx
const handleMint = async () => {
const toaster = txToaster({
initialMessage: 'Preparing to mint tokens...',
messages: {
inProgress: '⏳ Minting tokens...',
successful: 'âś… Tokens minted successfully!',
failed: '❌ Minting failed',
},
autoCloseDelay: 10000,
});
try {
await mintTx.signAndSend({
args: [amount],
callback: (progress) => {
toaster.onTxProgress(progress);
// Custom logic based on status
if (progress.status.type === 'BestChainBlockIncluded') {
console.log('Tokens minted in block:', progress.status.value.blockNumber);
}
},
});
} catch (error) {
toaster.onTxError(error);
}
};
```
# Tutorials
# Build an ERC20 dapp with Typink and ink! v6
In this tutorial, we'll guide you through building a complete ERC20 token dapp using Typink with ink! v6 on PolkaVM (pallet-revive). You'll learn how to create, deploy, and interact with an ERC20 token contract, including transfers and real-time event notifications.
**What We'll Build:**
* ERC20 token contract using ink! v6
* Token transfer interface with real-time balance updates
* Transaction notifications with txToaster
* Live Transfer event monitoring with toast notifications
**Technologies:**
* Typink - React hooks for contract interactions
* ink! v6 - Latest ink! on PolkaVM (pallet-revive)
* POP CLI - Contract development tool
* Next.js 15 - Frontend framework
### Prerequisites
* Node.js v20 or higher
* pnpm (or npm/yarn/bun)
* Rust and cargo-contract (for contract compilation)
### Step 1: Create New Typink Project
Let's start by creating a new project using the Typink CLI:
```bash
pnpm create typink@latest
```
Follow the interactive prompts:
1. **Project name:** `erc20-dapp`
2. **Contract type:** Select `Ink! v6 (PolkaVM, pallet-revive)`
3. **Networks:** Select `Passet Hub`
The CLI will:
* Create the project structure
* Install dependencies
* Setup TypinkProvider with Passet Hub
* Initialize git repository
Navigate to your project:
```bash
cd erc20-dapp
```
### Step 2: Create ERC20 Contract with POP CLI
We'll use POP CLI to create our ERC20 contract. First, install POP CLI if you haven't:
```bash
cargo install --git https://github.com/r0gue-io/pop-cli
```
Create a new contract using POP CLI:
```bash
pop new contract
```
When prompted:
* **Template type:** `ERC`
* **Select contract:** `erc20`
* **Project name:** `erc20`
This creates an `erc20` folder with the ERC20 contract template.
### Step 3: Compile the Contract
Navigate to the contract directory and build it:
```bash
cd erc20
pop build
# or
cargo contract build --release
```
After successful compilation, you'll find the artifacts in `target/ink/`:
* `erc20.contract` - Bundle file (metadata + wasm)
* `erc20.json` - Contract metadata
* `erc20.wasm` - Contract bytecode
Copy these files to your project's contracts folder:
```bash
mkdir -p ../src/contracts/artifacts/erc20
cp target/ink/erc20.* ../src/contracts/artifacts/erc20/
cd ..
```
### Step 4: Get Testnet Tokens
Before deploying, you'll need PAS testnet tokens on Passet Hub:
1. **Get PAS on Passet Hub:**
* Visit [Paseo Faucet for Passet Hub](https://faucet.polkadot.io/?parachain=1111)
* Request PAS tokens for your Passet Hub wallet address
### Step 5: Deploy Contract via ui.use.ink
Now let's deploy the ERC20 contract:
1. **Visit** [**ui.use.ink**](https://ui.use.ink/)
2. **Connect Your Wallet:**
* Click "Connect Wallet"
* Select SubWallet, Talisman, or PolkadotJS
3. **Select Network:**
* Choose "Paseo Asset Hub" from the network dropdown
4. **Upload Contract:**
* Click "Add New Contract"
* Select "Upload New Contract Code"
* Upload `erc20.contract` file
5. **Deploy Contract:**
* Constructor: `new`
* `total_supply`: Enter `1000000000000000000000000` (1M tokens with 18 decimals)
* Click "Deploy"
* Sign the transaction
6. **Save Contract Address:**
* After successful deployment, copy the contract address
* Example: `0x1234...5678`
### Step 6: Register Contract Deployment
Update `src/contracts/deployments.ts` to register your ERC20 contract:
```tsx
import { ContractDeployment, passetHub } from 'typink';
import erc20Metadata from './artifacts/erc20/erc20.json';
export enum ContractId {
ERC20 = 'erc20',
}
export const deployments: ContractDeployment[] = [
{
id: ContractId.ERC20,
metadata: erc20Metadata,
network: passetHub.id,
address: '0x1234...5678', // Replace with your contract address
},
];
```
### Step 7: Generate TypeScript Bindings
The project includes a pre-configured typegen script. Run it to generate type-safe bindings:
```bash
pnpm typegen
```
This generates TypeScript types in `src/contracts/types/erc20/` including the `Erc20ContractApi` interface.
### Step 8: Display Token Information
Create a new component `src/components/erc20-board.tsx`:
```tsx
'use client';
import { useState } from 'react';
import { formatBalance, useContract, useContractQuery, useTypink } from 'typink';
import { toEvmAddress } from 'dedot/contracts';
import { Erc20ContractApi } from '@/contracts/types/erc20';
import { ContractId } from '@/contracts/deployments';
export function ERC20Board() {
const { connectedAccount } = useTypink();
const { contract } = useContractERC20 Token
Total Supply:
{connectedAccount && (
{loadingSupply ? 'Loading...' : formatBalance(totalSupply, { decimals: 18, symbol: 'UNIT' })}
Your Balance:
)}
{loadingBalance ? 'Loading...' : formatBalance(balance, { decimals: 18, symbol: 'UNIT' })}
Connect your wallet to view balance and transfer tokens.
)}
{/* ... (previous token info display) */}
{/* Transfer Form */}
{connectedAccount && (
)}
);
}
```
The form will look like below:
Transfer Tokens
{/* ... (all previous JSX) */}
{/* Recent Events */}
);
}
```
The notification appears when the contract emits a Transfer event.
đź’ˇ Transfer events are monitored in real-time
You'll see notifications when tokens are transferred to/from your account
