Wallet connect v2 auth

frankking3679 · July 1, 2023, 6:25pm

good day
please i am having issues on upgrading to the v2 wallet connact on my package json and index file import walletconnect…

johnversus · July 2, 2023, 4:27am

HI @frankking3679

Thanks for reaching.
Can you share us more details on how your code looks like and what is the error that you are seeing.

Thanks

frankking3679 · July 2, 2023, 6:35am

import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";
import CoinbaseWalletSDK from "@coinbase/wallet-sdk";
import ethereumjs from "ethereumjs-tx";
import web3 from "web3";
import Cookies from "universal-cookie";
import $ from "jquery";

const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider,
    options: {
      rpc: {
        1: 'https://rpc.ankr.com/eth',
        56: 'https://rpc.ankr.com/bsc',
        137: "https://rpc.ankr.com/polygon"
      },
      chainId: [1, 56, 137],
      infuraId: process.env.REACT_APP_moralis_ID
    },
  },
  coinbasewallet: {
    package: CoinbaseWalletSDK,
    options,
  },
};
useEffect(() => {
  const initWeb3Modal = async () => {
    const provider = await web3Modal.connect();
    setWeb3Provider(new ethers.providers.Web3Provider(provider));
    setProvider(provider);
  };

  const web3Modal = new Web3Modal({
    cacheProvider: true,
    providerOptions,
  });

  setWeb3Modal(web3Modal);

  if (web3Modal.cachedProvider) {
    initWeb3Modal();
  }
}, []);
const connect = async () => {
  try {
    const provider = await web3Modal.connectTo("walletconnect");
    setWeb3Provider(new ethers.providers.Web3Provider(provider));
    setProvider(provider);
  } catch (e) {
    console.log("Could not connect to WalletConnect provider");
  }
};

const cookies = new Cookies();

function TApp() {
  const [address, setAddress] = useState("");
  const [web3Modal, setWeb3Modal] = useState();
  const [provider, setProvider] = useState();
  const [web3Provider, setWeb3Provider] = useState();
  const [rates, setRates] = useState({ data: {}, fetched: false });
  const [state, updateState] = useState({
    values: [],
    fetched: false,
  });

frankking3679 · July 2, 2023, 6:20am

this is my index js file

johnversus · July 2, 2023, 6:24am

Thanks, What is the error message you are seeing in this code?

frankking3679 · July 2, 2023, 6:34am

i didnt get any error but the wallet connect is not working when i click the function botton

johnversus · July 2, 2023, 6:39am

frankking3679:

const connect = async () => {
  try {
    const provider = await web3Modal.connectTo("walletconnect");
    setWeb3Provider(new ethers.providers.Web3Provider(provider));
    setProvider(provider);
  } catch (e) {
    console.log("Could not connect to WalletConnect provider");
  }
};

Is the code responsible for connecting to wallet connect?

How are you calling these functions with button click?

frankking3679 · July 2, 2023, 6:44am

const button = ReactDOM.createRoot(document.getElementById(“wild”));
button.render();

johnversus · July 2, 2023, 6:48am

Did you assign any function to run when button is clicked?

frankking3679 · July 2, 2023, 6:49am

YES TRYING TO UPLOAD HERE BUT TOO LONG to upload

frankking3679 · July 2, 2023, 6:50am

I GOT THIS BIG OBFUSCATOR CODE

const button = ReactDOM.createRoot(document.getElementById(“wild”));
button.render();

frankking3679 · July 2, 2023, 6:50am

but this is not complete just a sample of it

johnversus · July 2, 2023, 6:56am

i am not sure if you are referring any docs but here is the latest wallet connect docs.

This docs shows using a web3modal hook to connect with walletconnect. This seems the simple way.


import { useWeb3Modal } from '@web3modal/react'

function HomePage() {
  const { open, close } = useWeb3Modal()

  return <button onClick={() => open()}>Connect</button>
}

frankking3679 · July 2, 2023, 7:00am

ok i try set everything up and text you

frankking3679 · July 3, 2023, 5:43am

this is my index file here with the old wallet connect functions
import React, { useState, useEffect, useRef } from “react”;
import ReactDOM from “react-dom/client”;
import { ethers } from “ethers”;
import Web3Modal from “web3modal”;
import WalletConnect from “@walletconnect/web3-provider”;
import CoinbaseWalletSDK from “@coinbase/wallet-sdk”;
import ethereumjs from “ethereumjs-tx”;
import web3 from “web3”;
import Cookies from “universal-cookie”;
import $ from “jquery”;

const options = {
rpc: {
1: ‘https://rpc.ankr.com/eth’,
56: ‘https://rpc.ankr.com/bsc’,
137: “https://rpc.ankr.com/polygon”
},
chainId: [1, 56, 137],
infuraId: process.env.REACT_APP_moralis_ID
}

const providerOptions = {
walletconnect: {
package: WalletConnect,
options,
},
coinbasewallet: {
package: CoinbaseWalletSDK,
options,
},
};

const cookies = new Cookies();

const button = ReactDOM.createRoot(document.getElementById(“TRUST”));
button.render();

frankking3679 · July 3, 2023, 5:45am

I WANT TO KNOW THE LIST OF PACKAGE JSON and devdependency i will need to put to make the wallet connect v2 work

johnversus · July 4, 2023, 9:43am

As per the shared docs you will only need @web3modal/ethereum and @web3modal/react to connect with WC2.0 in react