Developers Forum for XinFin XDC Network: jurjees ahamed

Dapp Boilerplate for XDC COE (Front End Integration)

jurjees ahamed — Thu, 21 Sep 2023 08:50:06 +0000

What is Frontend and why we need in DAPP ?

Frontend, often referred to as the "front end," is the part of a software application or website that users directly interact with. It's the user interface (UI) and user experience (UX) component of an application, and it encompasses all the elements that users can see, touch, click, and interact with on their screens.

Frontend in a decentralized application (DApp) refers to the user interface and user experience layer of the application that users directly interact with. It's essential in DApps to provide a user-friendly interface for users to access and interact with the blockchain-based smart contracts and decentralized features. The frontend ensures that users, even those without technical expertise, can easily engage with the DApp, view blockchain data, submit transactions, and manage their digital assets.

To Create the Front End for a DAPP what are the knowledge you need before staring frontend for an application.

HTML -> Design the layout
Tutorial Link :(https://www.w3schools.com/html/default.asp)
CSS -> To add style to your application
Tutorial Link :(https://www.w3schools.com/css/default.asp)
JS (Javascript) -> for the bussiness logic or maniplulation
Tutorial Link :(https://www.w3schools.com/js/default.asp)

4.Bootstrap - UI Framework easily to develop fast and responsive website.
Tutorial Link :(https://www.w3schools.com/bootstrap5/index.php)

Above are basic things to develop the web application,In the real time product companies are prefferd their app to develop by using the framework. Ex: React,Next JS,Laravel etc...

Our Boilerplate is developed using React JS framework. React is JS based UI library provides developer easily to create the frontend application with help of reuse the component and pre defined library predefined library from NPM (https://www.npmjs.com/)

React Js Tutorial Video : https://www.youtube.com/watch?v=SqcY0GlETPk

INSTALLATION REQUIRED
Before run the boilerplate DAPP you need to install below things your System
Node JS -> https://nodejs.org/en/download
GIT -> https://kinsta.com/knowledgebase/install-git/

How to install & use React boilerplate DAPP

  git clone https://github.com/GoPlugin/xdc-coe-boilerplate.git

  cd xdc-coe-boilerplate 

  npm install 

  npm start

NPM Package used in Boilerplate
https://www.npmjs.com/package/react-solidity-web3-v2

*Steps to integrate and intract with the blockchain smart contract *

After successfull deployment of the smart contract you have to get ABI and Contract address from remix will needed later steps.

Let's deep dive in to the code

Connect Your Wallet

const instance = await connectWallet(connectOptions);

2.Create Web3 Provider

const { provider, signer } = await createWeb3Provider(instance);

Provider - Act as the bridge between your application to blockchain network
Signer - Send signed transactions to the Ethereum Network to execute state changing operations. (For Write Operation)
3.Create Contract Instance

 const Contract  = await createContractInstance(<CONTRACT_ADDRESS>, <ABI>, signer);

4.Invoke Contract Function

For Write the Transaction :

    var delayTxn = await executeTransaction(Contract, provider, 'functionname', [inputa,inputb]);

For Get the Date from Smart contract :

    let balance = await queryData(contract, provider, 'balanceOf', [input]);

XDC Transaction Status Checker NPM Package

jurjees ahamed — Fri, 27 Jan 2023 19:57:28 +0000

Hello XDC community,today i am come up with the new npm package to check the status of the xdc transaction with the simple steps.

For Easy Integration checkout below npm package.

https://www.npmjs.com/package/xdc-txn-status-checker

Check out the list of steps to integrate status checker:

npm install xdc-txn-status-checker --save

Code Usage

//For React
import {statusChecker} from 'xdc-txn-status-checker';

//For Nodejs
const {statusChecker} = require('xdc-txn-status-checker');

statusChecker(["0x025f567bbfb962f960a72af418088021f7b8f55b12ba7c3b493188ad4430d267", "0xb511732d5000f5d227994ae69905bca5a833df4a20107b43a7e238dfc75d6f5b"], "apothem")
.then(result=>{
    console.log("output",result)
}).catch(err=>{
    console.log("err",err)
})

Options
Status Checker needs two parameter first one is transaction array and another one is network type both of them are mandatory

Network Type - mainnet,apothem.

Sample Result

[
{
    "txnHash": "0x025f567bbfb962f960a72af418088021f7b8f55b12ba7c3b493188ad4430d267",
    "Status": true
  },
  {
    "txnHash": "0xb511732d5000f5d227994ae69905bca5a833df4a20107b43a7e238dfc75d6f5b",
    "Status": true
  }
]

Accept XDC and XRC20 based tokens as payment methods in website or web application with Ease

jurjees ahamed — Tue, 08 Nov 2022 20:59:27 +0000

Hello XDC community,today i am come up with the solution to accept XDC and XRC20 based tokens as payment method any website like ecommerce,hotel booking,online payment,... etc with the simple steps.

Get your payment instantly in your wallet address.

This Pakage Support Web3modal Walletconnect

For Easy Integration checkout below npm package.
https://www.npmjs.com/package/pli-pay

Now the package currently supports XDC and PLI token only. In coming up days more tokens will be supported.

Check out the list of steps to integrate payment method:

Create sample react app by following command:

npx create-react-app sample-app

Install neccessary Dependencies

npm install pli-pay --save

Just install one package it takes care all the dependencies

import Paypli from 'pli-pay'
import 'pli-pay/dist/index.css'

function App() {
  return <Paypli
    chainId={50}
    paymethod={"XDC"}
    fiatcurrency={"usd"}
    style={`apple_pay_button apple_pay_button_black`}
    receiverAddress={"0x117c691d76c1d9c68e3709a87f7d496097f2b56f"}
    amount={"1"}
    onSuccess={(data) => console.log("onSuccess", data)}
    onFailure={(data) => console.log("onFailure", data)}
    onError={(data) => console.log("onError", data)}
  />
}

Use Paypli component wherever you want in your application.This package supports currency conversion to convert fiat currency to crypto currency.

No need to do calculate any conversion in your application.Just pass amount,paymethod and fiatcurrency.

Receiver address must be valid XDC Address but replace xdc to 0x in your application.

You can easily capture the return response for onSuccess, onFailure and onError functions.

You can use own custom style class for payment button

*Only coingecko support fiat currencies accepted for conversion.
*

Success Response Object :

{
    "hash": "0x6ff4af9d1ed0545f43de7827360385b03b1d8105fa061d96a37e0e361499728f",
    "success": true,
    "fiatcurrency": "usd",
    "amount": "1",
    "paymethod": "XDC",
    "receiverAddress": "0x117c691d76c1d9c68e3709a87f7d496097f2b56f"
}

Failure Response Object :

{
    "hash": "0x6ff4af9d1ed0545f43de7827360385b03b1d8105fa061d96a37e0e361499728f",
    "success": false,
}

You can store it in your application Database for future reference.

Happy Coding!!!

Wallet Connect RPC URL Issue

jurjees ahamed — Mon, 10 Oct 2022 07:17:59 +0000

Hi Team -
xdcpayrpc.blocksscan.io is resulting "CORS" issue, but when we add "request header" manually, then it is working fine.

Can you please check to get a permanent fix?

ERROR : Access to XMLHttpRequest at 'https://xdcpayrpc.blocksscan.io/' from origin 'https://172.16.116.158:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

How to connect XDC Pay wallet (chrome extension) with Web3Modal

jurjees ahamed — Tue, 27 Sep 2022 16:47:29 +0000

In our recent pliblockathon 2022 (hackathon) lot of people facing the issue to connect xdc pay with Web3modal.so i come up with the solution.

For Easy Integration checkout below npm package.

https://www.npmjs.com/package/xdcpay-web3modal

Check out the list of steps to manual integration XDC pay in web3modal:

Create sample react app by following command:

npx create-react-app xdcpay-web3modal

Install neccessary Dependencies

npm install web3modal @metamask/detect-provider @walletconnect/web3-provider ethers --save

Import following packages in App.js

import Web3Modal from 'web3modal';
import WalletConnect from "@walletconnect/web3-provider";
import detectEthereumProvider from '@metamask/detect-provider'
const { ethers } = require('ethers')

Declare Web3Modal and then add the provider

 const web3Modal = new Web3Modal({
                cacheProvider: true,
                disableInjectedProvider: false,
                providerOptions: {
                    walletconnect: {
                        package: WalletConnect, // required
                        options: {
                            infuraId: "", // Required
                            network: "mainnet",
                            qrcodeModalOptions: {
                                mobileLinks: ["rainbow", "metamask", "argent", "trust", "imtoken", "pillar"]
                            }
                        }
                    },
                },
//Add XDC Pay Custom provider here check in  next step.
            });

Add custom provider to connect XDC pay in provider Options.

             'custom-xdc': {
                        display: {
                            name: 'XDC Pay',
                            logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2634.png',
                            description: 'Connect with XDC Pay'
                        },
                        package: detectEthereumProvider,
                        connector: async (_detectEthereumProvider) => {
                            const provider = await _detectEthereumProvider();
                            console.log("provider", provider)
                            await provider.enable();
                            return provider;
                        }
                    },

Write one function to connect the wallet

      const onConnect = async () => {
        try {
            const instance = await web3Modal.connect();
            const providerConnect = new ethers.providers.Web3Provider(instance);
            setProvider(providerConnect)

        } catch (err) {
            console.log("err", err)
        }
    }

Add one more sample function to send XDC to test web3modal working fine

   const sendXdc = async () => {
        const signer = provider.getSigner();
        const address = await signer.getAddress();
        setAddress(address)
        console.log("Address", address)
        // 0xb22E6413893a796714132a309cD7D4eC2aC4587b
        const params = [{
            from: address,
            to: "0x117c691d76c1d9c68e3709a87f7d496097f2b56f",
            value: ethers.utils.parseUnits('1', 'ether').toHexString()
        }];

        const transactionHash = await provider.send('eth_sendTransaction', params)
        console.log('transactionHash is ' + transactionHash);
    }

Note : Disable metamask in chrome if enabled.

Complete App.js Code

import React, { useState } from 'react';
import Web3Modal from 'web3modal';
import WalletConnect from "@walletconnect/web3-provider";
import detectEthereumProvider from '@metamask/detect-provider'
import { ethers } from 'ethers';

const App = () => {

    const [provider, setProvider] = useState(null)
    const [address, setAddress] = useState(null)

    const web3Modal = new Web3Modal({
        cacheProvider: true,
        disableInjectedProvider: true,
        providerOptions: {
            walletconnect: {
                package: WalletConnect, // required
                options: {
                    infuraId: "", // Required
                    network: "mainnet",
                    qrcodeModalOptions: {
                        mobileLinks: ["rainbow", "metamask", "argent", "trust", "imtoken", "pillar"]
                    }
                }
            },
            'custom-xdc': {
                display: {
                    name: 'XDC Pay',
                    logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2634.png',
                    description: 'Connect with XDC Pay'
                },
                package: detectEthereumProvider,
                connector: async (_detectEthereumProvider) => {
                    const provider = await _detectEthereumProvider();
                    console.log("provider", provider)
                    await provider.enable();
                    return provider;
                }
            },
        },
    });

    const onConnect = async () => {
        try {
            const instance = await web3Modal.connect();
            const providerConnect = new ethers.providers.Web3Provider(instance);
            setProvider(providerConnect)

        } catch (err) {
            console.log("err", err)
        }
    }

    const sendXdc = async () => {
        const signer = provider.getSigner();
        const address = await signer.getAddress();
        setAddress(address)
        console.log("Address", address)
        // Acccounts now exposed
        const params = [{
            from: address,
            to: "0x117c691d76c1d9c68e3709a87f7d496097f2b56f",
            value: ethers.utils.parseUnits('1', 'ether').toHexString()
        }];

        const transactionHash = await provider.send('eth_sendTransaction', params)
        console.log('transactionHash is ' + transactionHash);
    }
    return (
        <div align="center">
            <h3>How to connect XDC Pay wallet (chrome extension) with  Web3Modal</h3>



            {!provider && <button type='button' onClick={onConnect}>Connect</button>}
            {provider && <button type='button' onClick={sendXdc}>Send XDC</button>}

        </div>
    );
}

export default App;

Here is the demo video link:

Happy Coding!!!