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,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Use metapro plugin 

"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;

Click to get more information about useMetapro hook

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

PreviousBasic informationsNextReact integration

Last updated