High-level utils

Here is 2 really useful high-level utilities that you can use in your projects.

useItemsPaginated()

A high-level composable to paginate collections of TON contracts.

Parameters

• params: The parameters of pagination.
  • pageLength: Maximum number of items per iteration. (default: 3)
  • getTotalItems: A function that returns the total number of items as bigint.
  • getItemContract: A function that returns a contract by its sequence number.
  • beforeNextPage: A function that will be called before fetching the next page.

Returns

Synchronous pagination state and methods.

• isLastPage: Whether the current page is the last one.
• isFetching: Whether the next page is loading.
• items: All items fetched so far.
• nextPage: Fetches the next page.
• reset: Resets the pagination state.

Example

import { ref } from 'vue'
import { useItemsPaginated } from '@d0rich/vueton'
import { CollectionContract, ItemContract } from 'path/to/contracts'

const { isLastPage, isFetching, items, nextPage, reset } = useItemsPaginated({
  pageLength: 5,
  getTotalItems: async () => {
    return await collectionContract.getNextItemIndex()
  },
  getItemContract: async (seqNum) => {
    return ItemContract.fromAddress(await collectionContract.getItemByIndex(seqNum))
  },
  beforeNextPage: async () => {
    console.log('Fetching next page...')
  }
})

// Fetch the first page
nextPage()

useSendMessage()

A high-level composable to send messages in TON Blockchain.

Parameters

• props: Parameters of the message sending.
  • sendMessageFn: A function to send a message.
  • preSendValidation: A function to validate if the message can be sent before actually doing it.
  • hooks: Hooks to be run on different stages of the message sending.
    • onStart: A hook to be run before the message is sent.
    • onSuccess: A hook to be run after the message is successfully sent. This hook will not be called if the message sending fails.
    • onFail: A hook to be run after the message sending fails.

Returns

Synchronous result of the message sending.

• sendMessage: Sends a message.
• status: The current status of the message sending.
• success: Whether the message was successfully sent.
• fail: Whether the message sending failed.
• isFetching: Whether the message sending is in progress.
• reset: Resets the message sending state.

Example

import { useSendMessage } from '@d0rich/vueton'

const { sendMessage, status, success, fail, isFetching, reset } = useSendMessage({
  sendMessageFn: async ({ userAddress }) => {
    sendTransaction({
      // Your transaction parameters
    })
  },
  hooks: {
    onStart: () => {
      console.log('Message sending started')
    },
    onSuccess: () => {
      console.log('Message sent successfully')
    },
    onFail: () => {
      console.log('Message sending failed')
    }
  }
})

// Send a message
sendMessage()