XDC-Connect: A Simplified Process of Connecting to XDC Supported Wallets

eXchange inFinite (XinFin) is a delegated proof of stake consensus protocol blockchain network. Proof of stake consensus protocol has an adverse effect on the rate of transactions in Bitcoin and Ethereum blockchains. The idea for XinFin was born with the necessity of making a financial asset that can support the complex architecture of modern financial systems like high-frequency trading. Problems that plague traditional blockchain networks like scalability, exorbitant fees for basic transactions, and the long time it has taken to complete basic transactions are due to the ever-increasing block sizes. Creating a Hybrid chain is the answer to that and XinFin positions itself as the product that bridges the gap.

XinFin Digital Contract (XDC) is the utility token that drives the eXchange inFinite hybrid blockchain. It is used to settle transactions on dApps created on the XinFin blockchain. Since the launch of its mainnet, XDC has been in high demand and people have been actively trying to buy it. It is very early in the process, so buying XDC is still a rigorous endeavor. The developers have come out with a JavaScrpt library called xdc-connect to integrate your existing hardware or software wallet with an XDC wallet provider.

What is XDC Connect

XDC Connect is a JavaScript library part of React. React.js libraries are used for building efficient User Interfaces as it updates and renders as and when the data input changes. Developers can use XDC Connect for connecting to various XDC supported wallets like Guarda, DCent, BitFi in their decentralized applications.

This is an open-source project hosted on https://github.com/XinFinOrg/xdc-connect. Developers are welcome to add and contribute to this project by including new wallet providers, reporting and fixing bugs, and trying out the multiple preset styles and themes.

Developers can install the XDC Connect library using the node package manager(npm) with this command

npm i xdc-connect

Using the Xdc-Connect library

The xdc-connect library can be used with its default settings or it can be customized according to the developer’s choice. They can import XdcConnect from the xdc-connect library and render it with various settings accordingly. All of these various settings and customizations can be learned from the official documentation at https://xinfinorg.github.io/xdc-connect/?path=/docs/xdcconnect-styling--default

To import the library and render it in its default form apply the following piece of code.

// App.js
import React from "react";
import { XdcConnect } from "xdc-connect";
import "./App.css";


function App() {
 return (
   <div className="App">
     <XdcConnect />
   </div>
 );
}

export default App;

On the other hand, if the developer wants to customize the library to add their own text, styles, and customizable buttons, they should apply the following lines of code

// App.js
import React from "react";
import { XdcConnect } from "xdc-connect";
import "./App.css";
function App() {
 return (
   <div className="App">
     <XdcConnect
       btnClass="btn btn-rounded btn-success"
       btnName="Custom Text"
     />
   </div>
 );
}
export default App;

Another customization that can be made in the library is adding event listeners. When xdc-connect’s state changes, customizations can be made to reflect the state change in the dApp. These event listeners are passed an updated instance of the user’s wallet. as parameters.

onConnect - this event listener is fired when the user will successfully connect their wallet to the dApp. It passes an updated instance of the user's wallet.

onDisconnect - this event listener is fired when the user successfully logs out their wallet from the dApp.

onAddressChange - this event listener fires when the user changes the default wallet address from providers like XinPay to any other hardware or software wallet compatible with XDC.

import React from "react";
import { XdcConnect } from "xdc-connect";
import "./App.css";
function App() {
 return (
   <div className="App">
     <XdcConnect
       btnClass="btn btn-rounded btn-success"
       btnName="Custom Text"
       onConnect={(wallet) => {
         console.log("user connected wallet", wallet);
       }}
     />
   </div>
 );
}
export default App

Modifying APIs through the Xdc-connect library.

The xdc-connect library also has commands for your decentralized application to communicate through APIs to the wallet providers. These commands are the following

GetWallet - this command will return some data which will resolve into a wallet object

GetNativeBalance - this command will return some data which will resolve into xdc balance

SendTransaction - this command will return some data which will resolve into xdc receipt for the transaction

CallTransaction - this command will return some data which will resolve into the response for a transaction

Disconnect - this command will disconnect the dApp from the wallet provider.

import React, { useState } from "react";
import { XdcConnect, Disconnect } from "xdc-connect";
import "./App.css";
function App() {
 const [wallet, setwallet] = useState({});
console.log("wallet", wallet);
return (
   <div className="App">
     <XdcConnect
       btnClass={
         wallet.connected
           ? "btn btn-rounded btn-success"
           : "btn btn-rounded btn-warning"
       }
       btnName={wallet.connected ? "CONNECTED" : "CONNECT"}
       onConnect={(wallet) => {
         console.log("user connected wallet", wallet);
         setwallet(wallet);
       }}
       onDisconnect={(wallet) => {
         console.log("user connected disconnect", wallet);
         setwallet(wallet);
       }}
     />
     {wallet.connected ? <button onClick={Disconnect}>Logout</button> : ""}
   </div>
 );
}
export default App;

Conclusion

XinFin has been a keenly sought-after blockchain in most crypto industry circles. It currently has a market cap of $ 970,804,840 as of 5th, July 2021, 11:30 UTC.

Early in 2020, the world was hit with one of the most destructive natural disasters, the Covid- 19 pandemic. Traditional industries, trade negotiations, travel and hospitality, and many more sectors have been hit hard, many on the brink of bankruptcy.

The only silver lining has been perhaps the radical adoption of various alternate crypto technologies. Crypto finance industries have become mainstream among investors, and radical adoption of many DeFi applications is underway in niche population islands. Despite these facts reaching the critical mass is not possible with the present level of innovation.

XinFin is a hybrid chain created as a hard fork of the Ethereum chain and the Quorum, XinFin promises to be the best of both worlds. Overcoming the interoperability and scalability issues plaguing blockchains like Ethereum and Bitcoin, XDC is poised to rise in value exponentially once the end-stage critical mass adoption happens.

The Xdc-connect library is a very important tool in this journey. Creating user-friendly APIs connecting various XDC supported wallets with the various DeFi applications will become easier for developers.