metapro
Ask or search…
K

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;

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