correct way to use matic.js in browser client?

[dellwatson]

hello, since the examples only provide for node.js, I'm wondering how do I use it on client browser(like react)? since it will need metamask/other wallet interaction, and cannot use HDWallet

so I initialize first Posclient first

import {
  POSClient,
  setProofApi,
  use,
  // MaticPOSClient,
} from "@maticnetwork/maticjs"
import { Web3ClientPlugin } from "@maticnetwork/maticjs-web3";
import { useWeb3React } from "@web3-react/core";
  use(Web3ClientPlugin)
...


  const mainWeb3 = new Web3("https://goerli.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161")
  const maticWeb3 = new Web3("https://rpc-mumbai.maticvigil.com")
  const { account, provider, chainId } = useWeb3React();

  const posClient = async () => {
    const posClientx = new POSClient()

    return posClientx.init({
      network: "testnet",
      version: "mumbai"

      log: true,
      child: {
        provider: maticWeb3,
        defaultConfig: {
          from: account,
        },
      },
      parent: {
        provider: mainWeb3,
        defaultConfig: {
          from: account,
        },
      },
    })
  }

then I use normally on my button function

const exitERC721 = async () => {
  try {

    const client = await posClient()
  
    // const erc721Token = client.erc721(pos.child.erc721) // mumbai_address for current withdrawBatch
    const erc721Token = client.erc721( "0x69db62d4af0039f7643380549430e90f295235c0" )

    try {
      const result = await erc721Token.withdrawStartMany(["1"],)

      const txHash = await result.getTransactionHash()
      console.log("txHash", txHash)
      const receipt = await result.getReceipt()
      console.log("receipt", receipt)
    } catch (error) {
      console.log(error, "errorss")
    }
    ```
    
but it's not working since i'm not sure  how to sign the transaction properly

[ujjwalgupta94]

@dellwatson at the place of provider, you need to provide the wallet provider e.g - metamask or walletconnect.

So at a time you need to pass two provider, one child and one parent.

But in case of wallet, you have access to one chain at a time means one provider at a time, so you can initialize one child or parent with the current chain provider.

Generally we initialize the provider with wallet provider in case user need to execute some transaction, that is write transaction.

e.g - Let's user is using metamask wallet and he is on polygon mainnet, then in this case you can initialize the child provider with the metamask provider and parent provider with rpc.

const posClient = async () => {
    const posClientx = new POSClient()

    return posClientx.init({
      network: "testnet",
      version: "mumbai"

      log: true,
      child: {
        provider: window.ethereum,
        defaultConfig: {
          from: account,
        },
      },
      parent: {
        provider: mainWeb3,
        defaultConfig: {
          from: account,
        },
      },
    })
  }