Forem: Ali Khalouf

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

Ali Khalouf — Sun, 11 Aug 2024 12:18:24 +0000

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!

Simplify Your Package Management with OneLinePackages

Ali Khalouf — Sat, 25 Mar 2023 10:57:04 +0000

OneLinePackages is a convenient and user-friendly website that offers a simple solution to retrieve all of your installed packages from the NPM registry API. With just one line of code, users can quickly and easily access a list of all their installed packages, making it easy to manage and keep track of dependencies. The website is designed to streamline the process of retrieving package information, providing developers with a hassle-free experience. Whether you are a seasoned developer or just starting out, OneLinePackages is a valuable tool for simplifying the management of your packages.

https://www.onelinepackages.xyz/

Why You Should Consider Using PNPM for Your Next JavaScript Project ?

Ali Khalouf — Mon, 13 Mar 2023 11:18:12 +0000

As a JavaScript developer, you're probably familiar with package managers like npm and Yarn. However, there's a new kid on the block that's been gaining popularity recently - pnpm. In this article, we'll discuss why you should consider using pnpm for your next JavaScript project.

What is pnpm?

pnpm is a fast, disk space efficient package manager for Node.js. It was created to address some of the problems that npm and Yarn have, particularly around disk space usage and package duplication. With pnpm, packages are shared between projects, which means that you don't need to download and install the same package multiple times. This not only saves disk space but also speeds up installation times.

Why use pnpm?

Faster installation times

One of the biggest advantages of pnpm over npm and Yarn is its installation speed. Because packages are shared between projects, pnpm only needs to install each package once, which means that subsequent installations are much faster. This can be particularly useful if you're working on a large project with lots of dependencies.

Reduced disk space usage

As mentioned earlier, pnpm only downloads each package once and then shares it between projects. This means that you can save a significant amount of disk space, especially if you're working on multiple projects that use the same packages.

Multiple versions of the same package

Another useful feature of pnpm is its ability to support multiple versions of the same package. This can be particularly useful if you're working on a project that requires specific versions of packages or if you need to test different versions of a package.

Easy migration from npm or Yarn

If you're already using npm or Yarn, migrating to pnpm is relatively easy. pnpm uses the same package.json file as npm and Yarn, so you don't need to make any significant changes to your project. You can simply install pnpm globally and then use it in place of npm or Yarn.

Community support

While pnpm is a relatively new package manager, it has a growing community of users and contributors. There are a number of plugins and integrations available for pnpm, including support for popular build tools like webpack and rollup.

While npm and Yarn are both popular and well-established package managers, pnpm offers some significant advantages, particularly around installation speed and disk space usage. If you're working on a JavaScript project and want to optimize your workflow, it's worth considering pnpm as a viable alternative. With its growing community and support for popular build tools, pnpm is a promising option for JavaScript developers looking to streamline their development process.

5 Reasons Why Vue 3 is the Best Framework for Modern Web Applications in 2023

Ali Khalouf — Wed, 01 Mar 2023 09:56:09 +0000

Vue.js is a popular JavaScript framework for building user interfaces, and the latest version, Vue 3, has made significant improvements over its predecessor.
In 2023, Vue 3 is the best framework for building modern web applications. In this article, I will explore the reasons why Vue 3 is the best framework in 2023.

Improved Performance
Vue 3 has improved performance compared to Vue 2. One of the biggest changes is the new reactive system that uses proxies instead of getters and setters. This change reduces the amount of code required to update a component, resulting in faster rendering times. Vue 3 also includes a new compiler that generates more efficient code, which further improves performance.
Composition API
The Composition API is a new feature in Vue 3 that makes it easier to organize and reuse code. It allows developers to define component logic as reusable functions that can be easily imported and composed. This approach is more flexible than the Options API in Vue 2, which can become difficult to manage as components grow in complexity.
TypeScript Support
Vue 3 has better TypeScript support than Vue 2, making it easier to write type-safe code. TypeScript is a superset of JavaScript that adds static typing, which can help catch errors at compile-time instead of runtime. With Vue 3, developers can write components with TypeScript and take advantage of features like type inference and auto-completion.
Better Error Handling
Vue 3 has improved error handling compared to Vue 2. When an error occurs in a component, Vue 3 provides more detailed error messages that make it easier to diagnose and fix the issue. Additionally, Vue 3 has a new error boundary component that can catch errors and prevent them from crashing the entire application.
Scalability
Vue 3 is designed to be more scalable than Vue 2. The reactive system has been redesigned to handle large-scale applications with hundreds or even thousands of components. Additionally, the Composition API makes it easier to organize and reuse code, which can help keep applications maintainable as they grow.

In conclusion, Vue 3 is the best framework in 2023 for building modern web applications. It offers improved performance, a flexible Composition API, better TypeScript support, improved error handling, and better scalability. If you are considering using a JavaScript framework for your next project, Vue 3 is definitely worth considering.