React integration

Implementation guide for create-react-app 18.2.0 or above.

At the root of your application, you need to declare a MetaproProvider which controls access and persistence to a connector instance:

import { MetaproProvider } from "@metapro/connector";

const App = () => {
  return (
    <MetaproProvider>
{/* App code goes here. */}
    </MetaproProvider>
  );
};

export default App;

Basic implementation of our plugin

import React from "react";
import {
  MetaproConnector,
  MetaproConnectorChain,
  useMetapro,
} from "@metapro/connector";



/* Creating a new MetaproConnector object. */
const metaConfig = new MetaproConnector({
  chainId: MetaproConnectorChain.TESTNET,
});
/* you can choose which chainId metapro should connect to*/

const Page: React.FC = () => {
  const { login, logout} = useMetapro(metaConfig);
  const account = metaproHooks.useAccount();
  
  return (
    <>
      <button onClick={()=> login()}>Login</button>
      <button onClick={() => logout()}>logout</button>
    </>
  );
};

export default Page;

Click to get more information about useMetapro hook

After implementation you can follow this steps to login with metapro wallet