Use case: tips

See how you can easilly integrate TON into your website to accept tips.

Connect a wallet

<template>
  <TonConnectButton />
</template>

<script setup lang="ts">
import {TonConnectButton} from '@d0rich/vueton'
</script>

Send a transaction

<template>
  <button :disabled="!tonWallet || isFetching" @click="sendMessage">
    Give 0.5 TON
  </button>
  <div v-if="success">
    Thanks for your support!
  </div>
</template>

<script setup lang="ts">
import {useTonConnect, useSendMessage} from '@d0rich/vueton'
import {Address, toNano, comment} from '@ton/core'

const {tonWallet, sendTransaction} = useTonConnect()
const {sendMessage, isFetching, success} = useSendMessage({
  sendMessageFn: async ({ userAddress }) => {
    await sendTransaction({
      to: Address.parse('my TON wallet address'),
      value: toNano('0.5'),
      body: comment('Tip from reader')
    })
  }
})
</script>