Integration
Integrating ton-connect enhances user interactions with the TON blockchain in your DApp. Below are the steps for integrating ton-connect using React, Vue, and HTML/JavaScript (Vanilla).
Frontend Integration with ton-connect
1. React Integration
Installation
To integrate TON Connect into your React application, install the @tonconnect/ui-react package:
npm install @tonconnect/ui-react
TON Connect Initiation
Wrap your application with TonConnectUIProvider
, passing the manifest URL:
import { TonConnectUIProvider } from '@tonconnect/ui-react';
export function App() {
return (
<TonConnectUIProvider manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json">
{ /* Your app */ }
</TonConnectUIProvider>
);
}
Connect to the Wallet
Add the TonConnectButton
to allow users to connect their wallets:
import { TonConnectButton } from '@tonconnect/ui-react';
export const Header = () => {
return (
<header>
<span>My App with React UI</span>
<TonConnectButton />
</header>
);
};
2. Vue Integration
Installation
To start integrating TON Connect into your Vue application, install the @townsquarelabs/ui-vue package:
npm install @townsquarelabs/ui-vue
TON Connect Initiation
Wrap your application with TonConnectUIProvider
, specifying the manifest URL in the options:
<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
Use the TonConnectButton
to enable wallet connections:
<template>
<header>
<span>My App with Vue UI</span>
<TonConnectButton />
</header>
</template>
<script>
import { TonConnectButton } from '@townsquarelabs/ui-vue';
export default {
components: { TonConnectButton }
}
</script>
3. HTML/JavaScript (Vanilla) Integration
Installation
To integrate TON Connect into your HTML/JavaScript application, add the script in the <head>
of your HTML:
<script src="<https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js>"></script>
TON Connect Initiation
Add a button in your HTML to connect to the wallet:
<div id="ton-connect"></div>
<script>
const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
buttonRootId: 'ton-connect'
});
</script>
Connect to the Wallet
The "Connect" button will automatically handle clicks. You can also open the connect modal programmatically:
<script>
async function connectToWallet() {
const connectedWallet = await tonConnectUI.connectWallet();
console.log(connectedWallet); // Handle the connected wallet as needed
}
// Call the function to connect
connectToWallet().catch(error => {
console.error("Error connecting to wallet:", error);
});
</script>
Last updated
Was this helpful?