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

#xdc #web3modal #web3 #pli

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!!!

Discussion (6)

Lokesh • Sep 27 '22

Good one, can you try to abstract the logic and make it as sdk. So user need not worry about including these lines and rhey just need to call the package..

Just my few cents..