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>

PreviousSmart Contract Schema NextUnlocker

Last updated 8 months ago

Was this helpful?

import { TonConnectUIProvider } from '@tonconnect/ui-react'; export function App() { return ( <TonConnectUIProvider manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json"> { /* Your app */ } </TonConnectUIProvider> ); }

import { TonConnectButton } from '@tonconnect/ui-react'; export const Header = () => { return ( <header> <span>My App with React UI</span> <TonConnectButton /> </header> ); };

<template> <TonConnectUIProvider :options="options">  </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>

<template> <header> <span>My App with Vue UI</span> <TonConnectButton /> </header> </template> <script> import { TonConnectButton } from '@townsquarelabs/ui-vue'; export default { components: { TonConnectButton } } </script>

<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>

<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>