What is WalletConnect?

#node #blockchain #javascript

Introduction

The emergence of a decentralized application ecosystem has prompted considerable concern. In recent years, there has been a surge in popular interest in technology. The software industry has increasingly shifted toward decentralized programs (Dapps) to eliminate a single point of failure, and as a result, blockchain has swiftly become a popular issue. However, there are many various sorts of decentralized applications, and with so many different types of blockchain, understanding how all of these apps function, who they are aimed at, and how to reach them all may be tough.

Many conventional banks and fintech firms are transitioning from one-way interactions to two-way, decentralized client service. New ways to connect to and utilize these decentralized systems entail linking your wallet to these Dapps in order to access their services. In this article, we'll go through what WalletConnect is, its features, integration, and how to interact with the community.

What is WalletConnect?

WalletConnect is an open protocol that allows Dapps and wallets to communicate securely with one another. Clients can exist on one or two distinct devices and exchange messages using the protocol's JSON-RPC capabilities.

WalletConnect requests are routed through the Waku gossip network, which transmits all communications exchanged by the ecosystem's clients. To offer end-to-end encryption, clients first exchange keys via the Diffie-Hellman protocol. Later, symmetrically encrypted messages with matching HMAC codes are delivered to ensure message authenticity and data integrity.

WalletConnect is built for developers, the WalletConnect SDK is available on Android, iOS, and web.

WalletConnect Features

WallectConnect is really concerned about providing users nothing but the best experience. The WalletConnect v2.0 features are second to none as it is top-notch technology for the next generation of blockchain applications.

These features include:

Chain agnostic: Interact with any blockchain. Out-of-the-box support for new blockchains and rollups.
Multi-chain: Connect to a wallet with one or more chains at the same time and transmit transactions to various chains. This new feature will pave the way for programs to interact with wallets on several chains without requiring any synchronization to switch contexts, either automatically or manually by the wallet or the user. There'll be no more chain swapping.
Multi-session: Manage as many sessions as you require. To create the required UX, a flexible API is offered.
Decentralized messaging: Message relaying now takes advantage of the Waku network to gossip messages around all nodes. There will be no longer reliance on centralized servers.
One-time pairing: Multiple sessions can be established from a single pairing. For an unlimited number of sessions, just one connection is required.
Reduced bandwidth: Websocket management re-uses resources efficiently in order to multiplex all communications across a single socket without interruption.

WalletConnect Integration

With only a few lines of code, you can integrate WalletConnect. SDKs for Javascript, iOS/Swift, and Android/Kotlin are available currently.

WalletConnect is built to work with different chains e.g: Ethereum, Cosmos, Celo, Near, Solana, and Polkadot. There are hundreds of Dapp using WalletConnect to connect with wallets, e.g: Etherscan, Uniswap, Opensea, Zapper, Aave, Unstoppable domains, etc. A few of the integrated wallets by WalletConnect include Trust Wallet, Metamask, Rainbow, Argent, Crypto.com Defi wallet, MathWallet, etc.

Quick Dapps Integration (Node.js Client)

This quick Dapps integration is Node.js client-specific, make sure you use the Test Wallet for integration at test.walletconnect.org and do not send funds to this wallet as it is not secure. Another thing to note is that the code in Javascript ES6 syntax is displayed below, which requires bundling and transpiling to execute in web browsers. We will discuss installation, initiation, sending transactions, and signing transactions.

Installation.

yarn add @walletconnect/node @walletconnect/qrcode-modal

npm install --save @walletconnect/node @walletconnect/qrcode-modal

Initiate the connection.

import NodeWalletConnect from "@walletconnect/node";
import WalletConnectQRCodeModal from "@walletconnect/qrcode-modal";

// Create connector
const walletConnector = new NodeWalletConnect(
  {
    bridge: "https://bridge.walletconnect.org", // Required
  },
  {
    clientMeta: {
      description: "WalletConnect NodeJS Client",
      url: "https://nodejs.org/en/",
      icons: ["https://nodejs.org/static/images/logo.svg"],
      name: "WalletConnect",
    },
  }
);

// Check if connection is already established
if (!walletConnector.connected) {
  // create new session
  walletConnector.createSession().then(() => {
    // get uri for QR Code modal
    const uri = walletConnector.uri;
    // display QR Code modal
    WalletConnectQRCodeModal.open(
      uri,
      () => {
        console.log("QR Code Modal closed");
      },
      true // isNode = true
    );
  });
}

// Subscribe to connection events
walletConnector.on("connect", (error, payload) => {
  if (error) {
    throw error;
  }

  // Close QR Code Modal
  WalletConnectQRCodeModal.close(
    true // isNode = true
  );

// Get provided accounts and chainId
  const { accounts, chainId } = payload.params[0];
});

walletConnector.on("session_update", (error, payload) => {
  if (error) {
    throw error;
  }

  // Get updated accounts and chainId
  const { accounts, chainId } = payload.params[0];
});

walletConnector.on("disconnect", (error, payload) => {
  if (error) {
    throw error;
  }

  // Delete walletConnector
});

Send Transaction

// Draft transaction
const tx = {
  from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
  to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
  data: "0x", // Required
  gasPrice: "0x02540be400", // Optional
  gas: "0x9c40", // Optional
  value: "0x00", // Optional
  nonce: "0x0114", // Optional
};

// Send transaction
walletConnector
  .sendTransaction(tx)
  .then((result) => {
    // Returns transaction id (hash)
    console.log(result);
  })
  .catch((error) => {
    // Error returned when rejected
    console.error(error);
  });

Sign transaction

// Draft transaction
const tx = {
  from: "0xbc28Ea04101F03aA7a94C1379bc3AB32E65e62d3", // Required
  to: "0x89D24A7b4cCB1b6fAA2625Fe562bDd9A23260359", // Required (for non contract deployments)
  data: "0x", // Required
  gasPrice: "0x02540be400", // Optional
  gas: "0x9c40", // Optional
  value: "0x00", // Optional
  nonce: "0x0114", // Optional
};

// Sign transaction
walletConnector
  .signTransaction(tx)
  .then((result) => {
    // Returns signed transaction
    console.log(result);
  })
  .catch((error) => {
    // Error returned when rejected
    console.error(error);
  });

Conclusion

So far, we've been able to provide an in-depth description of what WalletConnect is, its functionality, and its integration. We wrote some code to integrate a Dapp using the Node.js Client, installing, initiating the connection, sending transactions, and signing transactions. These are the fundamental integrations required to begin integrating WalletConnect into your Dapp. With solid documentation and a highly active community, Walletconnect is so much more and can do so much more than you would think.

Join the WalletConnect community

Website: https://walletconnect.com

Twitter: https://twitter.com/walletconnect

Discord: https://discord.walletconnect.org

GitHub: https://github.com/walletconnect

Documentation: https://docs.walletconnect.com