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;
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;
Last modified 1mo ago