@torvainchain/vue

Vue 3 composables and reactive telemetry states for TorvainChain. Build fast Vue applications, connect player wallets, track balances in real-time, and manage decentralized game assets.

Installation

npm install @torvainchain/vue

Quick Start

1. Connecting Wallets in Vue 3 Composition API

<script setup lang="ts">
import { useTorvainConnect } from '@torvainchain/vue';

const { connect, disconnect, connected, address, activeWallet } = useTorvainConnect();
</script>

<template>
  <div class="wallet-widget">
    <div v-if="connected">
      <p>Wallet: {{ activeWallet }} ({{ address }})</p>
      <button @click="disconnect">Disconnect</button>
    </div>
    <div v-else>
      <button @click="connect('keplr')">Connect Torvain Hub (Keplr)</button>
      <button @click="connect('torvainkeeper')">Connect TorvainKeeper (Sandbox)</button>
    </div>
  </div>
</template>

2. Live Balance Telemetry Composable

<script setup lang="ts">
import { useBalance } from '@torvainchain/vue';

const props = defineProps<{ address: string }>();
const { balance, loading, error } = useBalance(() => props.address, 'utvn');
</script>

<template>
  <div class="balance-card">
    <span v-if="loading">Loading balance…</span>
    <span v-else-if="error">Error loading balance</span>
    <span v-else>TVN Tokens: {{ Number(balance?.amount || 0) / 1e6 }} TVN</span>
  </div>
</template>

License

Licensed under the Apache License, Version 2.0.