Hari's blogs

Adding a Tezos Wallet Connect Button to Your Website

Harikrishnan Kannoth's photo
Harikrishnan Kannoth
·

3 min read

Table of contents

Introduction:

Welcome to this step-by-step tutorial on adding a Tezos wallet connect button to your website using Beacon, Temple, or Taquito.js. This tutorial is designed for beginners and provides a clear and concise guide to integrating wallet functionality into your dApp. We will cover each step in detail, including example code and outputs. Let's begin!

Prerequisites:

Before starting this tutorial, ensure you have the following:

  • Basic knowledge of JavaScript, HTML, and web development concepts.

  • Node.js is installed on your machine.

Step 1: Set Up a New Tezos Project:

Let's begin by setting up a new Tezos project. Follow these steps:

  1. Create a new directory for your project.

  2. Open a command-line interface and navigate to your project directory.

  3. Initialize a new Node.js project by running the following command:

npm init -y

This command creates a new package.json file for your project.

Step 2: Create the Frontend HTML Page:

In this step, we'll create a simple HTML page that will serve as the frontend for our dApp.

  1. Create a new file called index.html in your project directory.

  2. Open index.html in a text editor and add the following HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Tezos dApp</title>
    <script src="https://unpkg.com/taquito"></script>
    <script src="https://unpkg.com/@airgap/beacon-sdk"></script>
</head>
<body>
    <h1>Tezos dApp</h1>
    <div>
        <h2>Contract Information</h2>
        <p>Contract Address: <span id="contractAddress"></span></p>
        <p>Contract State: <span id="contractState"></span></p>
        <button onclick="connectWallet()">Connect Wallet</button>
        <button onclick="getContractState()">Get Contract State</button>
    </div>
    <script src="main.js"></script>
</body>
</html>

Step 3: Implement Wallet Connection:

Next, we'll write the JavaScript code to handle wallet connections using Beacon, Temple, or Taquito.js.

  1. Create a new file called main.js in your project directory.

  2. Open main.js in a text editor and add the following JavaScript code:

const contractAddress = "CONTRACT_ADDRESS"; // Replace with your deployed contract address

async function connectWallet() {
    try {
        const permission = await BeaconWallet.requestPermissions();
        const wallet = new BeaconWallet({ name: "My Tezos Wallet", preferredNetwork: "mainnet" });
        await wallet.requestPermissions({ network: { type: "mainnet" } });
        const tezos = new TezosToolkit("https://mainnet.smartpy.io");
        tezos.setWalletProvider(wallet);

        // Update UI to reflect wallet connection

    } catch (error) {
        console.error("Failed to connect wallet:", error);
    }
}

async function getContractState() {
    try {
        const tezos = new TezosToolkit("https://mainnet.smartpy.io");
        const contract = await tezos.contract.at(contractAddress);
        const storage = await contract.storage();
        const contractState = storage.toString();

        document.getElementById("contractState").innerText = contractState;
    } catch (error) {
        console.error("Failed to get contract state:", error);
    }
}

Step 4: Install Dependencies:

Let's install the necessary dependencies for our project.

  1. In the command-line interface, navigate to your project directory.

  2. Run the following command to install the required dependencies:

npm install taquito @airgap/beacon-sdk

Step 5: Deploy the Website:

Now, we'll deploy the website and test the Tezos wallet connect button.

  1. In the command-line interface, navigate to your project directory.

  2. Run the following command to start a local development server:

npm start

  1. Open your web browser and visit http://localhost:3000 (or the URL provided by the development server).

  2. Click on the "Connect Wallet" button to initiate the wallet connection process.

  3. Follow the instructions provided by the wallet library (Beacon, Temple, or Taquito.js) to connect your Tezos wallet to the dApp.

  4. Once connected, you should see the contract address and other relevant information displayed on the webpage.

  5. Click the "Get Contract State" button to fetch and display the contract's current state.

Step 6: Test the Smart Contract:

Before deploying the smart contract to the blockchain, it's essential to test its functionality.

  1. Write unit tests for your smart contract using testing frameworks such as PyTest (for SmartPy) or Ligo's built-in testing capabilities.

  2. Run the tests to ensure the contract behaves as expected and handles different scenarios correctly.

Conclusion:

Congratulations! You've successfully added a Tezos wallet connect button to your website using Beacon, Temple, or Taquito.js. You've learned how to create a new Tezos project, write frontend HTML code, implement wallet connection functionality, interact with a deployed smart contract, and test the contract's functionality. Use this knowledge to build your own Tezos dApps with wallet connectivity. Happy coding!

TezoswalletTutorial