In this particular example in Next13, implement "use client" on top of the component.
1. Create a Provider component
"use client";
import React from "react";
import { MetaproProvider } from "@metapro/connector";
interface IProviderProps {
children: React.ReactNode;
}
const Provider: React.FC<IProviderProps> = ({ children }) => {
return <MetaproProvider>{children}</MetaproProvider>;
};
export default Provider;
2. Insert provider in /app directory
import Provider from "@/components/Provider";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Provider>{children}</Provider>
</body>
</html>
);
}
"use client";
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 LoginPanel: React.FC = () => {
const { login, logout} = useMetapro(metaConfig);
const account = metaproHooks.useAccount();
return (
<>
<button onClick={()=> login()}>Login</button>
<button onClick={() => logout()}>logout</button>
</>
);
};
export default LoginPanel;
