DEV Community: Fabricio Viskor

Building Collapsible Components with Melt UI in Svelte

Fabricio Viskor — Tue, 06 Jan 2026 08:50:00 +0000

Melt UI provides headless, accessible component builders for Svelte that follow WAI-ARIA guidelines. The Collapsible builder allows you to create expandable/collapsible content sections with full keyboard navigation and screen reader support out of the box.

This guide walks through a practical, production-ready implementation of collapsible components using Melt UI's createCollapsible builder. The focus is on real usage patterns, not abstractions.

Why Use @melt-ui/svelte (Melt UI) with Svelte

Svelte applications often need expandable content sections for FAQs, accordions, navigation menus, and detail views. Melt UI's Collapsible builder fits naturally into this ecosystem because it provides:

Full WAI-ARIA compliance for accessibility
Headless design (you control all styling)
TypeScript support with excellent type safety
Simple, declarative API
Built-in keyboard navigation
No external dependencies beyond Svelte

The builder pattern allows you to attach collapsible behavior to any elements you want, giving you complete control over the markup and styles.

Requirements

Before starting, make sure you have:

A Svelte project (SvelteKit or standalone Svelte)
Node.js 16+ and npm/pnpm/yarn
Basic familiarity with Svelte components and stores

Installation

Install Melt UI using your preferred package manager:

npm install @melt-ui/svelte
# or
pnpm add @melt-ui/svelte
# or
yarn add @melt-ui/svelte

The package includes all builders and their TypeScript definitions.

Configuration

No additional configuration is required. Melt UI works out of the box with Svelte. If you're using TypeScript, ensure your tsconfig.json includes proper module resolution:

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "target": "ES2020"
  }
}

Basic Usage

The simplest way to create a collapsible section is using the createCollapsible builder:

<script>
  import { createCollapsible, melt } from '@melt-ui/svelte'

  const {
    elements: { root, content, trigger },
    states: { open }
  } = createCollapsible()
</script>

<div use:melt={$root}>
  <button use:melt={$trigger}>
    {$open ? 'Close' : 'Open'}
  </button>
  <div use:melt={$content}>
    <p>This content can be expanded and collapsed.</p>
  </div>
</div>

The createCollapsible() function returns:

elements: Svelte stores for root, content, and trigger elements
states: Reactive stores like open that track the collapsible state

Use the melt action to attach the builder's behavior to your elements. The open store is reactive and updates automatically when the collapsible state changes.

Advanced Features

Styling with Tailwind CSS

Since Melt UI is headless, you have complete control over styling:

<script>
  import { createCollapsible, melt } from '@melt-ui/svelte'

  const {
    elements: { root, content, trigger },
    states: { open }
  } = createCollapsible()
</script>

<div 
  use:melt={$root}
  class="border rounded-lg overflow-hidden"
>
  <button 
    use:melt={$trigger}
    class="w-full px-4 py-3 text-left font-medium bg-gray-100 hover:bg-gray-200 flex items-center justify-between transition-colors"
  >
    <span>Toggle Content</span>
    <span class="transform transition-transform {$open ? 'rotate-180' : ''}">
      ▼
    </span>
  </button>
  <div 
    use:melt={$content}
    class="px-4 py-3 bg-white"
  >
    <p>This is the collapsible content area.</p>
  </div>
</div>

Controlled State

To control the collapsible state externally, pass a writable store:

<script>
  import { createCollapsible, melt } from '@melt-ui/svelte'
  import { writable } from 'svelte/store'

  const isOpen = writable(false)

  const {
    elements: { root, content, trigger },
    states: { open }
  } = createCollapsible({
    open: isOpen
  })

  function toggle() {
    isOpen.update(n => !n)
  }
</script>

<div use:melt={$root}>
  <button use:melt={$trigger} on:click={toggle}>
    {$open ? 'Close' : 'Open'}
  </button>
  <div use:melt={$content}>
    Controlled content
  </div>
</div>

Creating an Accordion

Build an accordion by managing multiple collapsible states:

<script>
  import { createCollapsible, melt } from '@melt-ui/svelte'
  import { writable } from 'svelte/store'

  const openIndex = writable<number | null>(null)

  const items = [
    { id: 1, title: 'Item 1', content: 'Content for item 1' },
    { id: 2, title: 'Item 2', content: 'Content for item 2' },
    { id: 3, title: 'Item 3', content: 'Content for item 3' }
  ]

  function createItemCollapsible(index: number) {
    const isOpen = writable(openIndex.get() === index)

    const unsubscribe = openIndex.subscribe(value => {
      isOpen.set(value === index)
    })

    return {
      collapsible: createCollapsible({ open: isOpen }),
      unsubscribe
    }
  }
</script>

<div class="space-y-2">
  {#each items as item, index}
    {@const { collapsible, unsubscribe } = createItemCollapsible(index)}
    {@const { elements: { root, content, trigger }, states: { open } } = collapsible}

    <div use:melt={$root} class="border rounded">
      <button 
        use:melt={$trigger}
        on:click={() => openIndex.set($open ? null : index)}
        class="w-full px-4 py-2 text-left"
      >
        {item.title}
      </button>
      <div use:melt={$content}>
        <div class="px-4 py-2">{item.content}</div>
      </div>
    </div>
  {/each}
</div>

Custom Animations

Add animations using Svelte's transition directives:

<script>
  import { createCollapsible, melt } from '@melt-ui/svelte'
  import { slide } from 'svelte/transition'

  const {
    elements: { root, content, trigger },
    states: { open }
  } = createCollapsible()
</script>

<div use:melt={$root}>
  <button use:melt={$trigger}>Toggle</button>
  {#if $open}
    <div use:melt={$content} transition:slide>
      <p>This content slides in and out.</p>
    </div>
  {/if}
</div>

Common Problems / Troubleshooting

Collapsible doesn't toggle

Ensure melt action is applied to all three elements (root, trigger, content)
Check that stores are accessed with $ prefix: $root, $trigger, $content
Verify the builder is called in component initialization, not conditionally

Accessibility attributes missing

Make sure melt action is applied to elements, not removed by conditional rendering
Don't manually add ARIA attributes - the builder handles them automatically

TypeScript errors

Import types from @melt-ui/svelte if needed
Ensure Svelte version is 4+ for best TypeScript support

Content not animating

When using conditional rendering with {#if}, ensure the melt action is still applied
Use Svelte transitions on the content element, not the root

Production Best Practices

Always use the melt action on all builder elements to ensure accessibility
Test with keyboard navigation (Tab, Enter, Space, Escape)
Use screen readers to verify ARIA attributes work correctly
Keep styling separate from logic - Melt UI handles behavior, you handle appearance
Consider using CSS transitions instead of JavaScript animations for better performance
If building an accordion, ensure only one item is open at a time for better UX
Clean up subscriptions when components are destroyed to prevent memory leaks

Final Notes

Melt UI's Collapsible builder provides a solid foundation for expandable content with minimal setup. The headless approach gives you complete control over styling while ensuring accessibility compliance.

Once you have collapsibles working, common next steps include:

Building accordion components with shared state
Adding custom animations and transitions
Integrating with routing for expandable navigation menus
Creating detail views with collapsible sections

NitroGen — Vision-to-Action Game AI

Fabricio Viskor — Sun, 21 Dec 2025 16:22:57 +0000

NitroGen is an open research project from the MineDojo ecosystem exploring a simple but powerful idea:

An AI can learn to play games by looking at the screen and imitating human actions — without access to the game engine, APIs, or internal state.

This repository provides a reference implementation of a vision-to-action game-playing agent trained via imitation learning.

Key Idea

Instead of reinforcement learning and reward engineering, NitroGen uses behavior cloning from real human gameplay videos.

The model learns a direct mapping:

screen pixels → neural network → controller actions

This allows the same agent architecture to work across many different games.

What Problems Does NitroGen Solve?

Traditional game AI often requires:

game engine access
internal state or memory reading
custom APIs or SDKs
handcrafted reward functions

NitroGen avoids all of the above.

Advantages

Engine-agnostic
Game-agnostic
No reward functions
Faster experimentation than RL
Human-like behavior

How NitroGen Works (High Level)

Collect gameplay videos from real human players
Extract player actions from controller overlays
Train a vision-based neural network via imitation learning
Predict the next action given the current frame

The result is a general game-playing agent that operates purely from visual input.

Use Cases

Legitimate use cases include:

Game AI research
Imitation learning experiments
Multi-game agents
Automated game testing (QA)
Accessibility tools
Embodied AI research
Education and ML courses

⚠️ This project is not intended for cheating, farming, or online exploitation.

Repository Structure

nitrogen/
├── models/        # Vision-to-action models
├── datasets/      # Gameplay datasets
├── envs/          # Game wrappers / environments
├── scripts/       # Training and evaluation scripts
├── configs/       # Experiment configurations
└── checkpoints/   # Pretrained weights (if available)

Installation

Requirements

Python 3.9+
Linux or macOS recommended
GPU strongly recommended

Setup

Clone the repository: https://github.com/MineDojo/NitroGen

git clone https://github.com/minedojo/nitrogen.git
cd nitrogen

Create a virtual environment:

python -m venv venv
source venv/bin/activate

Install dependencies:

pip install -r requirements.txt

Running a Pretrained Model

If pretrained checkpoints are available:

python scripts/run_agent.py \
  --config configs/eval.yaml \
  --checkpoint checkpoints/nitrogen.pt

The agent will:

receive game frames
predict controller actions
interact with the environment in real time

Training

Minimal training example:

python scripts/train.py \
  --config configs/train.yaml

Key parameters to tune:

frame resolution
action space
sequence length
dataset quality

Training is significantly more stable than reinforcement learning approaches.

Limitations

Performance depends heavily on data quality
No long-term planning by default
Limited temporal reasoning
Not optimized for competitive or online play

NitroGen is a foundation, not a finished product.

Why This Project Matters

NitroGen provides:

A clean reference implementation of vision-to-action agents
A scalable alternative to reinforcement learning
A practical starting point for general game AI research

If you want to experiment with game AI without touching the game engine, this project is a strong base.

Get Involved

If this project is useful to you:

⭐ Star the repository
🧪 Run experiments
🐛 Open issues
🔧 Build on top of it

# `@xchainjs/xchain-ethereum`

Fabricio Viskor — Fri, 19 Dec 2025 16:42:23 +0000

@xchainjs/xchain-ethereum is the official Ethereum client for the XChainJS ecosystem — a modular, TypeScript-first SDK for building cross-chain wallets, crypto applications, and DeFi tooling using a unified API.

This package provides:

an Ethereum (EVM) client implementation
address generation and validation
balance and transaction history lookup
transaction creation, signing, and broadcasting
gas and fee estimation helpers

Source package: https://github.com/xchainjs/xchainjs-lib/tree/master/packages/xchain-ethereum

Official docs: https://docs.xchainjs.org/xchain-client/xchain-ethereum/

Features

✅ TypeScript-first Ethereum SDK
✅ EVM-compatible chain support
✅ Address derivation from mnemonic
✅ Address validation
✅ Balance and transaction history
✅ ETH and ERC-20 transfers
✅ Gas price and fee estimation
✅ Unified API aligned with other XChainJS clients

How It Works

Built on top of ethers.js for Ethereum RPC interaction
Uses shared XChainJS abstractions and types
Designed to behave consistently with other chain clients (BTC, LTC, THORChain, etc.)

Core dependencies:

ethers
@xchainjs/xchain-client
@xchainjs/xchain-util

Docs:

How it works: https://docs.xchainjs.org/xchain-client/xchain-ethereum/how-it-works.html
How to use: https://docs.xchainjs.org/xchain-client/xchain-ethereum/how-to-use.html

Installation

Install the package

npm install @xchainjs/xchain-ethereum

Peer dependencies

npm install @xchainjs/xchain-client @xchainjs/xchain-util ethers

Basic Usage Examples

Create an Ethereum Client

import { Client } from '@xchainjs/xchain-ethereum'
import { Network } from '@xchainjs/xchain-client'

const phrase = 'your mnemonic phrase here'

const ethClient = new Client({
  phrase,
  network: Network.Mainnet,
})

Get Address and Validate It

const address = ethClient.getAddress()
console.log('Address:', address)

const isValid = ethClient.validateAddress(address)
console.log('Valid:', isValid)

Get Balance

const balances = await ethClient.getBalance(address)
console.log(balances)

Balances are returned in base units and can be converted using utilities from
@xchainjs/xchain-util.

Transfer ETH

import { assetAmount, assetToBase } from '@xchainjs/xchain-util'

const recipient = '0xRecipientAddressHere'
const amount = assetToBase(assetAmount(0.01))

const txHash = await ethClient.transfer({
  recipient,
  amount,
  memo: 'ETH transfer',
})

console.log('TX hash:', txHash)
console.log('Explorer:', ethClient.getExplorerTxUrl(txHash))

Transfer ERC-20 Tokens

const tokenAddress = '0xTokenContractAddress'
const txHash = await ethClient.transfer({
  recipient,
  amount,
  asset: {
    chain: 'ETH',
    symbol: `USDT-${tokenAddress}`,
    ticker: 'USDT',
  },
})

Get Transaction Data

const txHash = '0xTransactionHash'
const txData = await ethClient.getTransactionData(txHash)
console.log(txData)

When to Use This Package

Use @xchainjs/xchain-ethereum if you are:

building a crypto wallet
interacting with Ethereum or EVM chains
handling ETH and ERC-20 transfers
building DeFi frontends or backends
using XChainJS for multi-chain applications

Useful Links

GitHub source:

https://github.com/xchainjs/xchainjs-lib/tree/master/packages/xchain-ethereum
Documentation:

https://docs.xchainjs.org/xchain-client/xchain-ethereum/
XChainJS main repository:

https://github.com/xchainjs/xchainjs-lib

Summary

@xchainjs/xchain-ethereum provides a clean, consistent, and production-ready
Ethereum client for the XChainJS ecosystem.

It allows developers to interact with Ethereum using the same abstractions as
other blockchains, making it easier to build cross-chain applications.

# `@xchainjs/xchain-litecoin`

Fabricio Viskor — Fri, 19 Dec 2025 16:39:21 +0000

Custom Litecoin (LTC) client and utilities for XChainJS — a lightweight TypeScript SDK for building cross-chain wallets, crypto payment flows, and DeFi tooling with a common interface.

This package provides:

a Litecoin Client implementation (UTXO-style chain)
address generation & validation
balance, transaction history, and transaction data lookup
fee estimation helpers (fee rates, fees with memo, etc.)

Source package: https://github.com/xchainjs/xchainjs-lib/tree/master/packages/xchain-litecoin

XChainJS docs: https://docs.xchainjs.org/xchain-client/xchain-litecoin/

Features

✅ TypeScript-first Litecoin SDK
✅ BIP44/84 address derivation support (mainnet & testnet paths)
✅ Create addresses from a phrase (mnemonic)
✅ Validate addresses
✅ Get balances, tx history, and tx data by hash
✅ Transfer LTC
✅ Fee estimation helpers (getFeeRates, getFeesWithMemo, etc.)

How it works (under the hood)

Uses bitcoinjs-lib for UTXO transaction building and signing.
Uses SoChain API v2 as the default public data provider endpoint.
Explorer URLs reference Blockstream.
Depends on shared XChainJS packages: @xchainjs/xchain-client, @xchainjs/xchain-crypto, @xchainjs/xchain-util.

References:

Docs “How it works”: https://docs.xchainjs.org/xchain-client/xchain-litecoin/how-it-works.html
Docs “How to use”: https://docs.xchainjs.org/xchain-client/xchain-litecoin/how-to-use.html

Installation

Install the package

yarn add @xchainjs/xchain-litecoin

Peer dependencies

According to the official docs, install these as well:

yarn add @xchainjs/xchain-client @xchainjs/xchain-crypto @xchainjs/xchain-util axios bitcoinjs-lib coininfo wif

Basic usage examples

Connect wallet to a new Litecoin Client

Create a client instance, derive an address, validate it, and fetch its balance.

import { Client } from '@xchainjs/xchain-litecoin'
import { Network } from '@xchainjs/xchain-client'
import { baseToAsset } from '@xchainjs/xchain-util'

const connectWallet = async () => {
  const phrase = 'your mnemonic phrase here'
  const ltcClient = new Client({ network: Network.Mainnet, phrase })

  const address = ltcClient.getAddress()
  console.log('Address:', address)

  const isValid = ltcClient.validateAddress(address)
  if (!isValid) throw new Error('Invalid address')

  const balances = await ltcClient.getBalance(address)
  const readable = baseToAsset(balances[0].amount).amount()
  console.log('Balance:', readable.toString())
}

connectWallet().catch(console.error)

Transfer Litecoin (LTC)

Build and broadcast a transaction using the client.

import { Client, LTC_DECIMAL } from '@xchainjs/xchain-litecoin'
import { assetToBase, assetAmount } from '@xchainjs/xchain-util'

const transferLitecoin = async () => {
  const phrase = 'your mnemonic phrase here'
  const recipient = 'ltc recipient address here'

  const ltcClient = new Client({ phrase })

  const amount = assetToBase(assetAmount(0.01, LTC_DECIMAL))

  const txid = await ltcClient.transfer({
    amount,
    recipient,
    memo: 'memo',
  })

  console.log('TX sent:', txid)
  console.log('Explorer:', ltcClient.getExplorerTxUrl(txid))
}

transferLitecoin().catch(console.error)

Get transfer fees and fee rate estimations

import { Client } from '@xchainjs/xchain-litecoin'
import { baseToAsset } from '@xchainjs/xchain-util'

const returnFees = async () => {
  const phrase = 'your mnemonic phrase here'
  const ltcClient = new Client({ phrase })

  const { fast, fastest, average } = await ltcClient.getFees()
  console.log('Fast:', baseToAsset(fast).amount().toString())
  console.log('Fastest:', baseToAsset(fastest).amount().toString())
  console.log('Average:', baseToAsset(average).amount().toString())

  const feeRates = await ltcClient.getFeeRates()
  console.log('FeeRates:', feeRates)
}

returnFees().catch(console.error)

You can pass feeRate into transfer parameters:

// feeRates.fastest is a number
await ltcClient.transfer({
  amount,
  recipient,
  memo: 'memo test',
  feeRate: feeRates.fastest,
})

Get transaction data & transaction history

import { Client } from '@xchainjs/xchain-litecoin'

const transactionData = async () => {
  const phrase = 'your mnemonic phrase here'
  const ltcClient = new Client({ phrase })

  const hash = 'your tx hash'
  const txData = await ltcClient.getTransactionData(hash)
  console.log('TxData:', txData)
}

transactionData().catch(console.error)

Useful links

Package source (GitHub):

https://github.com/xchainjs/xchainjs-lib/tree/master/packages/xchain-litecoin
Docs (overview):

https://docs.xchainjs.org/xchain-client/xchain-litecoin/
Docs (how it works):

https://docs.xchainjs.org/xchain-client/xchain-litecoin/how-it-works.html
Docs (how to use):

https://docs.xchainjs.org/xchain-client/xchain-litecoin/how-to-use.html

# XChainJS Check Transaction Example

Fabricio Viskor — Fri, 19 Dec 2025 16:36:28 +0000

This example demonstrates how to check and track a blockchain transaction using XChainJS.

It shows how to:

query transaction data by hash
check transaction status and confirmations
work with chain clients in a unified way
build transaction monitoring logic for wallets and backends

The example is fully runnable and available on GitHub and CodeSandbox.

🔗 Live Demo & Source Code

▶ Live demo (CodeSandbox):

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/check-tx
📦 Source code (GitHub):

https://github.com/xchainjs/xchainjs-lib/tree/master/examples/check-tx

📌 What This Example Does

This project demonstrates how to check the status of a transaction using XChainJS.

It covers:

fetching transaction information by hash
checking confirmations and finality
handling pending vs confirmed transactions
using a chain-agnostic API for transaction lookup

This example is useful for developers building:

crypto wallets
transaction history pages
blockchain explorers
monitoring and alerting services
cross-chain backends

🧰 Tech Stack

TypeScript
Node.js
XChainJS
@xchainjs/xchain-util
Chain clients from XChainJS ecosystem

📂 Project Location

Inside the XChainJS monorepo:

examples/
 └─ check-tx/

The example focuses on transaction status logic, without UI code.

🔄 How Transaction Checking Works

Transaction Hash
      ↓
XChainJS Chain Client
      ↓
Fetch Transaction Data
      ↓
Check Confirmations & Status
      ↓
Return Result

🧩 Core Concepts

Transaction Hash

A transaction hash uniquely identifies an on-chain transaction.
This example shows how to use a transaction hash to query the blockchain
and retrieve transaction details.

Transaction Status

Depending on the chain, a transaction can be:

pending
confirmed
failed

XChainJS abstracts these differences and provides a consistent interface
for checking transaction status across chains.

⚙️ Installation

Clone the repository

git clone https://github.com/xchainjs/xchainjs-lib.git
cd xchainjs-lib/examples/check-tx

Install dependencies

npm install

Run the example

npm start

🚀 Running in the Browser

You can also run this example instantly using CodeSandbox:

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/check-tx

🧪 Code Example (Simplified)

import { getClient } from '@xchainjs/xchain-thorchain'

const txHash = 'YOUR_TRANSACTION_HASH'

async function checkTx() {
  const client = getClient()
  const tx = await client.getTransactionData(txHash)

  if (!tx) {
    throw new Error('Transaction not found')
  }

  console.log(tx)
}

checkTx()

This pattern can be reused for different chains by switching clients.

✅ Why Use XChainJS for Transaction Monitoring

Unified API for multiple blockchains
TypeScript-first for safer code
Reusable client abstractions
Suitable for wallets and production backends

🧠 When This Example Is Useful

Use this example if you are:

learning how transaction tracking works
building a wallet transaction history
implementing confirmations logic
monitoring cross-chain transactions
working with XChainJS clients

🔗 Related Resources

XChainJS GitHub

https://github.com/xchainjs/xchainjs-lib
XChainJS utilities

https://www.npmjs.com/package/@xchainjs/xchain-util
Live check transaction example

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/check-tx

📝 Summary

This example provides a simple, runnable reference for checking
blockchain transactions using XChainJS.

It is a solid foundation for building transaction-aware applications
such as wallets, explorers, and monitoring services.

# XChainJS Liquidity Example (THORChain)

Fabricio Viskor — Fri, 19 Dec 2025 16:33:59 +0000

This example demonstrates how to interact with THORChain liquidity pools using XChainJS.

It shows how to:

check pool information
calculate liquidity positions
add and remove liquidity
work with assets and amounts in a safe, chain-agnostic way

The example is fully runnable and available both on GitHub and CodeSandbox.

🔗 Live Demo & Source Code

▶ Live demo (CodeSandbox):

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/liquidity
📦 Source code (GitHub):

https://github.com/xchainjs/xchainjs-lib/tree/master/examples/liquidity

📌 What This Example Does

This project demonstrates liquidity management on THORChain using XChainJS.

It covers:

querying liquidity pool data
calculating pool shares
adding liquidity to a pool
removing liquidity from a pool
handling assets and amounts consistently

This example is useful for developers building:

DeFi dashboards
liquidity provider (LP) tools
wallets with LP features
THORChain analytics tools
backend services for DeFi protocols

🧰 Tech Stack

TypeScript
Node.js
XChainJS
THORChain
@xchainjs/xchain-util
@xchainjs/xchain-thorchain

📂 Project Location

Inside the XChainJS monorepo:

examples/
 └─ liquidity/

The example focuses on liquidity logic, not UI.

🔄 How the Liquidity Flow Works

Add liquidity flow:

User Assets
   ↓
XChainJS Asset & Amount Utilities
   ↓
THORChain Client
   ↓
Pool Share Calculation
   ↓
Add Liquidity Transaction

Remove liquidity flow:

LP Position
   ↓
THORChain Client
   ↓
Withdraw Calculation
   ↓
Remove Liquidity Transaction

🧩 Core Concepts

Liquidity Pools

THORChain liquidity pools consist of:

one external asset (e.g. BTC, ETH)
RUNE

Liquidity providers deposit both sides to earn fees.

This example shows how to interact with these pools programmatically.

Asset Representation

Assets are represented using a standardized format:

<CHAIN>.<SYMBOL>

Examples:

BTC.BTC
ETH.ETH
THOR.RUNE

Asset parsing and validation is handled via

@xchainjs/xchain-util.

Amount & Decimal Handling

Liquidity calculations require precise handling of:

pool units
asset amounts
base units vs human-readable values

This example relies on XChainJS utilities to avoid rounding and precision errors.

⚙️ Installation

Clone the repository

git clone https://github.com/xchainjs/xchainjs-lib.git
cd xchainjs-lib/examples/liquidity

Install dependencies

npm install

Run the example

npm start

🚀 Running in the Browser

You can also run this example instantly using CodeSandbox:

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/liquidity

🧪 Code Example (Simplified)

import { assetFromString, assetAmount } from '@xchainjs/xchain-util'

const poolAsset = assetFromString('BTC.BTC')
const runeAmount = assetAmount(100)
const assetAmountToAdd = assetAmount(0.01)

if (!poolAsset) {
  throw new Error('Invalid pool asset')
}

This abstraction ensures consistency across all supported chains.

✅ Why Use XChainJS for Liquidity Management

Unified API for THORChain pools
TypeScript-first for safer DeFi logic
Reusable utilities for assets and amounts
Suitable for production-grade DeFi tooling

🧠 When This Example Is Useful

Use this example if you are:

learning how THORChain liquidity works
building LP dashboards or analytics
adding liquidity features to a wallet
experimenting with DeFi backends
working with XChainJS utilities

🔗 Related Resources

XChainJS GitHub

https://github.com/xchainjs/xchainjs-lib
XChainJS utilities

https://www.npmjs.com/package/@xchainjs/xchain-util
THORChain documentation

https://docs.thorchain.org
Live liquidity example

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/liquidity

📝 Summary

This example provides a clear, runnable reference for working with
THORChain liquidity pools using XChainJS.

It is a solid foundation for building real-world DeFi applications
in JavaScript and TypeScript.

# XChainJS Cross-Chain Swap Example (THORChain)

Fabricio Viskor — Fri, 19 Dec 2025 16:29:45 +0000

This example demonstrates how to perform a cross-chain crypto swap using XChainJS and THORChain.

It shows how to:

work with standardized asset representations
handle crypto amounts safely
request and execute a swap using a unified TypeScript API

The example is fully runnable and available both on GitHub and CodeSandbox.

🔗 Live Demo & Source Code

▶ Live demo (CodeSandbox):

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/do-swap
📦 Source code (GitHub):

https://github.com/xchainjs/xchainjs-lib/tree/master/examples/do-swap

📌 What This Example Does

This project performs a cross-chain swap using THORChain liquidity pools.

It demonstrates:

how to define input and output assets
how to create and validate swap amounts
how to interact with THORChain via XChainJS
how to keep the code chain-agnostic

This example is useful for developers building:

crypto wallets
DeFi frontends
swap aggregators
backend swap services
cross-chain dashboards

🧰 Tech Stack

TypeScript
Node.js
XChainJS
THORChain
@xchainjs/xchain-util
@xchainjs/xchain-thorchain

📂 Project Location

Inside the XChainJS monorepo:

examples/
└─ do-swap/

🔄 How the Swap Flow Works

Input Asset

→ XChainJS Asset Utilities

→ THORChain Client

→ Swap Quote

→ Transaction Execution

→ Cross-Chain Swap

🧩 Core Concepts

Asset Representation

Assets are represented using a standardized format:

Examples:

BTC.BTC
ETH.ETH
THOR.RUNE

This format is parsed and validated using utilities from

@xchainjs/xchain-util.

Amount Handling

Crypto applications must correctly separate:

human-readable amounts
base-unit amounts

This example uses XChainJS utilities to avoid rounding and decimal errors,
which are common in DeFi applications.

⚙️ Installation

Clone the repository

git clone https://github.com/xchainjs/xchainjs-lib.git cd xchainjs-lib/examples/do-swap

Install dependencies

npm install

Run the example

npm start

🚀 Running in the Browser

You can also run this example instantly using CodeSandbox:

https://codesandbox.io/p/devbox/github/xchainjs/xchainjs-lib/tree/master/examples/do-swap

🧪 Code Example (Simplified)

import { assetFromString, assetAmount } from '@xchainjs/xchain-util'

const fromAsset = assetFromString('BTC.BTC')
const toAsset = assetFromString('ETH.ETH')

const amount = assetAmount(0.01)

if (!fromAsset || !toAsset) {
  throw new Error('Invalid asset')
}

✅ Why Use XChainJS for Cross-Chain Swaps

Chain-agnostic API
TypeScript-first
Battle-tested in production
Modular design

🔗 Related Resources

XChainJS GitHub

https://github.com/xchainjs/xchainjs-lib
XChainJS utilities

https://www.npmjs.com/package/@xchainjs/xchain-util
THORChain official site

https://thorchain.org

📝 Summary

This example provides a practical, runnable reference for performing
cross-chain swaps using XChainJS and THORChain.