Ask or search…

Next 13 integration

Implementation guide for create next-app@latest
You need to declare a MetaproProvider which controls access and persistence to a connector instance, create a simple Provider component
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

---> layout.tsx
import Provider from "@/components/Provider";
export default function RootLayout({
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">

Use metapro plugin

"use client";
import React from "react";
import {
} 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;

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