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 1 year ago

Was this helpful?

hashtagFrontend Integration with ton-connect

hashtag1. React Integration

hashtagInstallation

hashtagTON Connect Initiation

hashtagConnect to the Wallet

hashtag2. Vue Integration

hashtagInstallation

hashtagTON Connect Initiation

hashtagConnect to the Wallet

hashtag3. HTML/JavaScript (Vanilla) Integration

hashtagInstallation

hashtagTON Connect Initiation

hashtagConnect to the Wallet

Frontend Integration with ton-connect

1. React Integration

Installation

TON Connect Initiation

Connect to the Wallet

2. Vue Integration

Installation

TON Connect Initiation

Connect to the Wallet

3. HTML/JavaScript (Vanilla) Integration

Installation

TON Connect Initiation

Connect to the Wallet