Setup and signing web3 client-browser with matic.js

Polygon Testnets Mumbai Testnet
1

hello im trying to use matic.js for bridging, since the examples only provide for node.js, I’m struggling to use it on client browser(like react)? because it will need metamask/other wallet interaction, and cannot use HDWallet, and Im not sure how do I setup this matic.js on client-browser

so I initialize 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 this functionHandler for my button

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
1 Like