Vue + XChainJS 예제

Source: Dev.to

Overview

A minimal Vue starter using @xchainjs/xchain-util.

This example demonstrates how to use XChainJS utilities inside a Vue 3 + TypeScript application.

Goals

• Work with assets (BTC.BTC, ETH.ETH, THOR.RUNE)
• Safely handle amounts and decimals
• Structure a small Vue app around XChainJS utilities

👉 GitHub repository:

기능

• Vue 3 + TypeScript
• @xchainjs/xchain-util 통합
• 자산 파싱 및 검증
• 인간 ↔ 기본 금액 변환
• 간단한 서비스‑layer 추상화
• 지갑 / DeFi 앱으로 확장 준비 완료

설치

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

개발 서버를 실행합니다:

npm run dev

브라우저를 열고 .

Dependencies

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 사토시)

인간 친화 금액

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>

Project structure

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

• services/ – 모든 XChainJS 로직
• components/ – UI만

나중에 체인 클라이언트를 쉽게 확장할 수 있습니다.

이 예제 확장하기

• 체인 클라이언트 추가 (xchain-bitcoin, xchain-ethereum)
• 잔액 가져오기
• 포트폴리오 트래커 구축
• 스왑 흐름 구현
• 지갑 연결

요약

• @xchainjs/xchain-util를 실제 Vue 애플리케이션에서 사용하는 예시
• 깨끗한 자산 파싱
• 안전한 금액 처리
• 최소하지만 확장 가능한 구조

Vue와 XChainJS로 구축된 크로스‑체인 지갑 및 DeFi 프론트‑엔드의 시작점 역할을 합니다.

Repository

➡️ 예제 복제: /vue-xchainjs-example

별표, 이슈 및 풀 리퀘스트를 환영합니다.