metamask-nextjs

metamask-nextjs

Simple setup to get currently connected wallet address in the server and client. ## How to use

Deploy on Vercel using this button. This will guide you and setup all in your own Vercel and Github account.

Starting

1. Install with yarn or npm install
2. Copy the .env.example file into .env and add a secret value. Use a strong secret.
3. run yarn dev or npm run dev

usage

Everything you need in 1 hook:

import { useWen, getSession } from "wen-connect";

const component = () => {
  const { connect, disconnect, wallet } = useWen(props.session);

  return <>{wallet.address}</>;
};

Get the session data on the server:

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {
      session: getSession(context),
    },
  };
};

Hydrate the client side hook with the server session to avoid rerenders:

export default function Demo(props: Props) {
  const { connect, disconnect, wallet } = useWen(props.session);

  return <>{wallet.address}</>;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: {
      session: getSession(context),
    },
  };
};