LogoLogo
  • Introduction
  • For Founders
    • TokenTable Airdrop Pro
    • TokenTable Airdrop Lite
      • Getting Started
      • Set Up the Project
      • Deposit Tokens
      • Publish the Project
    • TokenTable Unlocker
    • Custom Token Claiming Portal
  • For Token Recipients
    • Airdrop Token Claiming
    • Unlocker Token Claiming
  • For Developers
    • Airdrop
      • EVM
      • TON
        • Getting Started
        • Architecture
        • Usage
        • Smart Contract Schema
        • Integration
    • Unlocker
      • EVM
        • APIs
          • Core
            • Unlocker
              • Data Models
            • FutureToken
            • TrackerToken
          • Utilities
            • Deployer
            • External Hook
            • Fee Collector
            • Versionable
        • SDK
      • Starknet
  • SUPPORT
    • FAQ
    • Feedback and Troubleshooting
Powered by GitBook
On this page

Was this helpful?

  1. For Developers
  2. Airdrop
  3. TON

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 SchemaNextUnlocker

Last updated 7 months ago

Was this helpful?