TON Connect for Vue
Recommended SDK for Vue Apps is a UI Vue SDK. It is a Vue component that provides a high-level way to interact with TON Connect.
Implementation
Installation
To start integrating TON Connect into your DApp, you need to install the @townsquarelabs/ui-vue
package. You can use npm or yarn for this purpose:
- npm
- Yarn
- pnpm
npm i @townsquarelabs/ui-vue
yarn add @townsquarelabs/ui-vue
pnpm add @townsquarelabs/ui-vue
TON Connect Initiation
Add TonConnectUIProvider to the root of the app. You can specify UI options using props.
All TonConnect UI hooks calls and <TonConnectButton />
component must be placed inside <TonConnectUIProvider>
.
<template>
<TonConnectUIProvider :options="options">
<!-- Your app -->
</TonConnectUIProvider>
</template>
<script>
import { TonConnectUIProvider } from '@townsquarelabs/ui-vue';
export default {
components: {
TonConnectUIProvider
},
setup(){
const options = {
manifestUrl:"https://<YOUR_APP_URL>/tonconnect-manifest.json",
};
return {
options
}
}
}
</script>
Connect to the Wallet
TonConnect Button is universal UI component for initializing connection. After wallet is connected it transforms to a wallet menu. It is recommended to place it in the top right corner of your app.
<template>
<header>
<span>My App with Vue UI</span>
<TonConnectButton/>
</header>
</template>
<script>
import { TonConnectButton } from '@townsquarelabs/ui-vue';
export default {
components: {
TonConnectButton
}
}
</script>
You can add class
and :style
props to the button as well. Note that you cannot pass child to the TonConnectButton.
<TonConnectButton class="my-button-class" :style="{ float: 'right' }"/>
Redirects
If you want to redirect the user to a specific page after wallet connection, you can use useTonConnectUI
hook and customize your return strategy.
Telegram Mini Apps
If you want to redirect the user to a Telegram Mini App after wallet connection, you can customize the TonConnectUIProvider
element:
<template>
<TonConnectUIProvider :options="options">
<!-- Your app -->
</TonConnectUIProvider>
</template>
<script>
import { TonConnectUIProvider } from '@townsquarelabs/ui-vue';
export default {
components: {
TonConnectUIProvider,
},
setup() {
const options = {
actionsConfiguration: { twaReturnUrl: 'https://t.me/<YOUR_APP_NAME>' },
};
return {
options,
};
},
};
</script>
Read more in SDK documentation
UI customization
To customize UI of the modal you can use useTonConnectUI
hook and setOptions
function. See more about useTonConnectUI hook in Hooks section.
Hooks
useTonAddress
Use it to get user's current ton wallet address. Pass boolean parameter isUserFriendly to choose format of the address. If wallet is not connected hook will return empty string.
<template>
<div v-if="address">
<span>User-friendly address: {{ userFriendlyAddress }}</span>
<span>Raw address: {{ rawAddress }}</span>
</div>
</template>
<script>
import { useTonAddress } from '@townsquarelabs/ui-vue';
export default {
setup() {
const userFriendlyAddress = useTonAddress();
const rawAddress = useTonAddress(false);
return {
userFriendlyAddress,
rawAddress
}
}
}
</script>
useTonWallet
Use it to get user's current ton wallet. If wallet is not connected hook will return null.
See all wallet's properties // todo
<template>
<div v-if="wallet">
<span>Connected wallet: {{ wallet.name }}</span>
<span>Device: {{ wallet.device.appName }}</span>
</div>
</template>
<script>
import { useTonWallet } from '@townsquarelabs/ui-vue';
export default {
setup() {
const wallet = useTonWallet();
return {
wallet
}
}
}
</script>
useTonConnectModal
Use this hook to access the functions for opening and closing the modal window. The hook returns an object with the current modal state and methods to open and close the modal.
<template>
<div>
<div>Modal state: {{ state?.status }}</div>
<button @click="open">Open modal</button>
<button @click="close">Close modal</button>
</div>
</template>
<script>
import { useTonConnectModal } from '@townsquarelabs/ui-vue';
export default {
setup() {
const { state, open, close } = useTonConnectModal();
return { state, open, close };
}
};
</script>
useTonConnectUI
Use it to get access to the TonConnectUI
instance and UI options updating function.
See more about TonConnectUI instance methods
See more about setOptions function
<template>
<div>
<button @click="sendTransaction">Send transaction</button>
<div>
<label>language</label>
<select @change="onLanguageChange($event.target.value)">
<option value="en">en</option>
<option value="ru">ru</option>
<option value="zh">zh</option>
</select>
</div>
</div>
</template>
<script>
import { Locales, useTonConnectUI } from '@townsquarelabs/ui-vue';
export default {
name: 'Settings',
setup() {
const [tonConnectUI, setOptions] = useTonConnectUI();
const onLanguageChange = (lang) => {
setOptions({ language: lang as Locales });
};
const myTransaction = {
validUntil: Math.floor(Date.now() / 1000) + 60, // 60 sec
messages: [
{
address: "EQBBJBB3HagsujBqVfqeDUPJ0kXjgTPLWPFFffuNXNiJL0aA",
amount: "20000000",
// stateInit: "base64bocblahblahblah==" // just for instance. Replace with your transaction initState or remove
},
{
address: "EQDmnxDMhId6v1Ofg_h5KR5coWlFG6e86Ro3pc7Tq4CA0-Jn",
amount: "60000000",
// payload: "base64bocblahblahblah==" // just for instance. Replace with your transaction payload or remove
}
]
}
const sendTransaction = () => {
tonConnectUI.sendTransaction(myTransaction);
};
return { onLanguageChange, sendTransaction };
}
};
</script>
useIsConnectionRestored
Indicates current status of the connection restoring process. You can use it to detect when connection restoring process if finished.
<template>
<div>
<div v-if="!connectionRestored">Please wait...</div>
<MainPage v-else />
</div>
</template>
<script>
import { useIsConnectionRestored } from '@townsquarelabs/ui-vue';
export default {
name: 'EntrypointPage',
setup() {
const connectionRestored = useIsConnectionRestored();
return { connectionRestored };
}
};
</script>
Usage
Let's take a look at how to use the Vue UI SDK on practice.