# Building Delightful Front-End Applications for Tezos with Taquito and Beacon Wallet 🚀

Mastering wallet connectivity and interactions is at the ❤️ of creating vibrant front-end applications on the Tezos blockchain. However, the available documentation often leaves developers in the lurch due to a lack of practical examples or real-world use cases. Don't sweat, we're here to change that! 🛠

In this exciting post, we'll take a deep dive into the seamless process of managing Beacon wallet connectivity using the Taquito library for Tezos. The Taquito library is a developer's best friend when it comes to interacting with the Tezos blockchain, making it super easy to send transactions or read contract data. 📚

A Brief on Beacon Wallet and Taquito 🎯

Before we put on our coding hats, let's brush up on Beacon Wallet and Taquito.

Beacon Wallet is a dapper browser extension that unlocks the potential for dApp users to interact with the Tezos blockchain. It helps users keep a tab on their XTZ (Tezos' native currency) and other Tezos-based tokens, send transactions, and engage with smart contracts in an effortless way.

On the other side of the spectrum, we have Taquito. Taquito is an elegant TypeScript library suite that adds oodles of ease to DApp development on the Tezos blockchain. It works as an efficient interaction layer between your application and a Tezos node.

The Blueprint of Our Project 🏗

Our sample application will be a combo of a simple navigation bar and a main component. We'll use a utility file named wallet.js stored inside a "utils" folder to manage wallet handling information.

This wallet.js file will be the core of our utility functions and house the preferred network and RPC URL for the Beacon Wallet instance.

Navigating Wallet Connectivity 🧭

The wallet.js utility file will be the backbone for several functions, including:

• Connect Wallet: This method rolls out the red carpet and sets the active account if it doesn't exist. If the user refreshes the page, the status will still hold strong. This magic is performed using the requestPermissions method provided by the BeaconWallet instance and getActiveAccount to check for an active account.

• Disconnect Wallet: We provide an easy exit strategy with a method to disconnect the wallet using the disconnect method provided by the BeaconWallet instance.

• Check If Wallet Connected: This method keeps an eye out for an active wallet connection and returns the status and error information accordingly.
  

// wallet.js
import { TezosToolkit } from "@taquito/taquito";
import { BeaconWallet } from "@taquito/beacon-wallet";
import config from "../config";

const preferredNetwork = "hangzhounet";
const options = {
  name: "NFT",
  iconUrl: "https://tezostaquito.io/img/favicon.png",
  preferredNetwork: preferredNetwork,
};
const rpcURL = "https://hangzhounet.smartpy.io";
const wallet = new BeaconWallet(options);

const getActiveAccount = async () => {
  return await wallet.client.getActiveAccount();
};

const connectWallet = async () => {
  let account = await wallet.client.getActiveAccount();

  if (!account) {
    await wallet.requestPermissions({
      network: { type: preferredNetwork },
    });
    account = await wallet.client.getActiveAccount();
  }
  return { success: true, wallet: account.address };
};

const disconnectWallet = async () => {
  await wallet.disconnect();
  return { success: true, wallet: null };
};

const checkIfWalletConnected = async (wallet) => {
  try {
    const activeAccount = await wallet.client.getActiveAccount();
    if (!activeAccount) {
      await wallet.client.requestPermissions({
        type: { network: preferredNetwork },
      });
    }
    return {
      success: true,
    };
  } catch (error) {
    return {
      success: false,
      error,
    };
  }
};

export {
  connectWallet,
  disconnectWallet,
  getActiveAccount,
  checkIfWalletConnected,
};

The navbar is a component that displays connectivity to the wallet and allows users to connect or disconnect their wallet.

// Navbar.jsx
import "../index.css";
import {
  connectWallet,
  getActiveAccount,
  disconnectWallet,
} from "../utils/wallet";
import { useEffect, useState } from "react";

export default function Navbar() {
  const [wallet, setWallet] = useState(null);

  const handleConnectWallet = async () => {
    const { wallet } = await connectWallet();
    setWallet(wallet);
  };
  const handleDisconnectWallet = async () => {
    const { wallet } = await disconnectWallet();
    setWallet(wallet);
  };

  useEffect(() => {
    const func = async () => {
      const account = await getActiveAccount();
      if (account) {
        setWallet(account.address);
      }
    };
    func();
  }, []);

  return (
    <nav className="bg-gray-800 h-14 flex items-center px-10 justify-between">
      <div className="flex-1 space-x-4">
        <a href="#!" className="font-bold text-white pr-6">
          ICON HERE
        </a>
        <a
          href="#!"
          className="bg-black text-gray-200 px-4 py-2 text-sm font-semibold rounded-sm"
        >
          Home
        </a>
        // other navigation links...
      </div>
      <div>
        <button
          onClick={wallet ? handleDisconnectWallet : handleConnectWallet}
          className="bg-red-500 px-6 py-2 rounded-sm text-xs font-semibold text-white cursor-pointer"
        >
          💳{" "}
          {wallet
            ? wallet.slice(0, 4) +
              "..." +
              wallet.slice(wallet.length - 4, wallet.length)
            : "Connect"}
        </button>
      </div>
    </nav>
  );
}

Use Cases 💡

The amalgamation of Taquito and Beacon Wallet is perfect for a variety of Tezos dApp development scenarios. For example, if you're looking to create an NFT marketplace, these tools provide an incredibly efficient way to handle user wallet interactions, including minting, buying, and selling NFTs.

In DeFi projects, Taquito and Beacon Wallet can manage complex interactions involving staking, swapping tokens, providing liquidity, and more. They ensure these transactions are secure, reliable, and user-friendly.

Similarly, for a gaming dApp on Tezos, these tools can enable in-game purchases, reward distribution, and asset management with extreme ease and efficiency. The possibilities are truly endless! 🌈

Conclusion 🏁

To sum it up, the dynamic duo of Taquito and Beacon Wallet offers an incredibly intuitive way to handle wallet connectivity and interactions in Tezos dApps. By leveraging these libraries, you can not just build, but build better on the Tezos blockchain. 🎢

While this blog post has zoomed in on a specific use case, it is merely the tip of the iceberg. You can expand this foundation to meet more complex requirements in your Tezos dApp development journey. Buckle up, because it's time to turn those innovative ideas into reality on the Tezos blockchain! 🚀