TON Wallet Integration with ton-ui-vue for vue/nuxt

As blockchain technology continues to grow, integrating TON wallets into web applications is becoming increasingly important. For Vue.js and Nuxt.js developers, ton-ui-vue offers a powerful solution for seamlessly connecting TON wallets with your projects. This guide will walk you through the setup, usage, and advanced features of ton-ui-vue, ensuring you can leverage its full potential.

Why Use ton-ui-vue?

ton-ui-vue is designed to simplify the process of integrating TON wallets into your Vue.js applications. It provides a set of pre-built components, hooks, and customizable interfaces that make it easy to add wallet functionality without dealing with the complexities of blockchain technology. The package is also fully compatible with Nuxt.js, allowing you to maintain wallet connections in server-side rendered applications.

Getting Started with ton-ui-vue

Installation

To begin using ton-ui-vue, install it using npm or yarn:

npm install ton-ui-vue @tonconnect/ui
# or
yarn add ton-ui-vue @tonconnect/ui

Basic Setup

Once installed, create the TonConnectUIProvider in your main.ts file to provide the necessary contexts for your app:

import { createApp } from 'vue';
import App from './App.vue';
import {
    createTonConnectUIProvider,
    TonConnectUIContext,
    TonConnectUIOptionsContext
} from 'ton-ui-vue';

const { tonConnectUI, setOptions } = createTonConnectUIProvider({
    manifestUrl: 'https://your-manifest-url'
});

const app = createApp(App);

app.provide(TonConnectUIContext, tonConnectUI);
app.provide(TonConnectUIOptionsContext, setOptions);

app.mount('#app');

This setup enables your application to easily connect with TON wallets using the provided context.

Using the Connect Button

Adding a connect button to your application is straightforward with the TonConnectButton component:

<template>
  <div>
    <TonConnectButton />
  </div>
</template>

<script setup lang="ts">
import { TonConnectButton } from 'ton-ui-vue';
</script>

This button allows users to connect their TON wallets to your application with a simple click, providing a seamless experience.

Advanced Features with Hooks

ton-ui-vue provides several powerful hooks that offer more control over the TON wallet integration. These hooks enable you to manage wallet connections, handle transactions, and listen to specific wallet events, making your application more dynamic and interactive.

Key Hooks and Composables

• useTonAddress: Retrieves and manages the connected wallet address.
• useTonWallet: Provides access to detailed wallet information, including the address and balance.
• useTonConnectModal: Controls the TonConnect modal, allowing users to connect their wallets.
• useSendTransaction: Creates and sends transactions to both wallet and contract addresses, with support for multiple messages.

These hooks make it easy to build complex, feature-rich applications that fully integrate TON wallets.

Example: Using useSendTransaction

The useSendTransaction composable is a powerful tool for handling transactions in your application. Here’s how you can use it to send transactions:

<template>
  <div>
    <div v-if="address">Connected Address: {{ address }}</div>
    <TonConnectButton />

    <div v-if="!sending">
      <button @click="sendTransaction">Send Transaction</button>
    </div>
    <div v-if="error">{{ error.message }}</div>
  </div>
</template>

<script setup lang="ts">
import { useTonAddress, useSendTransaction } from 'ton-ui-vue';

const address = useTonAddress();
const { sendTransaction, addMessage, sending, error } = useSendTransaction();

// Add a message for a wallet address
addMessage(
  "0:b2a1ecf5545e076cd36ae516ea7ebdf32aea008caa2b84af9866becb208895ad",
  "100000000"
);
// Add another message for a contract address
addMessage(
  "0:a1b2c3d4e5f678901234567890abcdef1234567890abcdef1234567890abcdef",
  "500000000"
);
</script>

In this example, you can dynamically add messages and send them as transactions to either wallet or contract addresses, all while managing the transaction state and handling any errors that occur.

Conclusion

ton-ui-vue is an essential tool for Vue.js and Nuxt.js developers looking to integrate TON wallets into their applications. Its comprehensive set of components, hooks, and customizability make it easy to create secure, efficient, and user-friendly blockchain-based applications.

To explore all the available hooks and learn more about their usage, visit the official ton-ui-vue documentation. Start integrating TON wallets into your Vue.js projects today and take your application to the next level with blockchain technology!