Vue + XChainJS 示例

Source: Dev.to

概览

一个使用 @xchainjs/xchain-util 的最小 Vue 入门项目。

本示例演示如何在 Vue 3 + TypeScript 应用中使用 XChainJS 实用工具。

目标

• 处理资产 (BTC.BTC, ETH.ETH, THOR.RUNE)
• 安全处理金额和小数位
• 基于 XChainJS 实用工具构建小型 Vue 应用

👉 GitHub 仓库:

Features

• Vue 3 + TypeScript
• @xchainjs/xchain-util 集成
• 资产解析与验证
• 可读 ↔ 基础金额转换
• 简单的服务层抽象
• 可扩展为钱包 / DeFi 应用

安装

git clone https://github.com//vue-xchainjs-example.git
cd vue-xchainjs-example
npm install

运行开发服务器：

npm run dev

在浏览器中打开 .

依赖

npm install @xchainjs/xchain-util

示例故意保持最小，仅关注核心 XChainJS 实用工具。

使用

资产解析

XChainJS 中的资产遵循 . 格式（例如 BTC.BTC、ETH.ETH、THOR.RUNE）。

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

export function parseAsset(input: string) {
  const asset = assetFromString(input);
  if (!asset) {
    throw new Error(`Invalid asset string: ${input}`);
  }
  return assetToString(asset);
}

金额工具

加密应用必须区分：

• 可读的金额（例如 1.5 BTC）
• 基础金额（例如 150000000 satoshis）

可读金额

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

const amount = assetAmount(1.5);
console.log(amount.amount().toString()); // "1.5"

基础金额

import { baseAmount } from '@xchainjs/xchain-util';

const base = baseAmount(150000000);
console.log(base.amount().toString()); // "150000000"

示例服务（推荐模式）

所有 XChainJS 逻辑都封装在一个小型服务层中。

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

export const xchainService = {
  normalizeAsset(input: string) {
    const asset = assetFromString(input.trim().toUpperCase());
    if (!asset) throw new Error('Invalid asset');
    return assetToString(asset);
  },

  toBaseAmount(value: number, decimals: number) {
    const factor = 10 ** decimals;
    return baseAmount(Math.round(value * factor));
  },

  toAssetAmount(value: number, decimals: number) {
    const factor = 10 ** decimals;
    return assetAmount(value / factor);
  },
};

示例 Vue 组件用法

import { ref } from 'vue';
import { xchainService } from '@/services/xchain';

const assetInput = ref('BTC.BTC');
const normalized = ref('');

function handleParse() {
  normalized.value = xchainService.normalizeAsset(assetInput.value);
}

<!-- 模板片段 -->
<div>
  <input v-model="assetInput" placeholder="Enter asset (e.g., BTC.BTC)" />
  <button @click="handleParse">Parse asset</button>
  <p>Result: {{ normalized }}</p>
</div>

项目结构

src/
 ├─ components/
 ├─ services/
 │   └─ xchain.ts
 ├─ App.vue
 └─ main.ts

• services/ – 所有 XChainJS 逻辑
• components/ – 仅 UI

以后可以轻松扩展链客户端。

扩展此示例

• 添加链客户端（xchain-bitcoin、xchain-ethereum）
• 获取余额
• 构建投资组合跟踪器
• 实现兑换流程
• 连接钱包

摘要

本示例展示了如何在真实的 Vue 应用中使用 @xchainjs/xchain-util：

• 干净的资产解析
• 安全的金额处理
• 简约但可扩展的结构

它可作为使用 Vue 和 XChainJS 构建跨链钱包及 DeFi 前端的起点。

仓库

➡️ 克隆示例：/vue-xchainjs-example

欢迎星标、提交问题和拉取请求。