Wen? Now! A library to simplify your Web3 data fetching.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { WenProvider } from "wen-connect";

ReactDOM.render(
  <React.StrictMode>
    <WenProvider>
      <App />
    </WenProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

import { useWen } from "wen-connect";

const MyComponent = () => {
  const { connect, disconnect, wallet } = useWen();

  const handleConnect = () => {
    // Optional argument to specify which chain to get the user connected on.
    connect({ chainId: "0xa86a" });
  };

  const handleDisconnect = () => {
    disconnect();
  };

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

import { WenProvider } from "wen-connect";

function MyApp({ Component, pageProps }) {
  const config = { ssr: true };
  return (
    <WenProvider config={config}>
      <Component {...pageProps} />
    </WenProvider>
  );
}

export { WenConnect as default } from "wen-connect";

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

function Index(props) {
  // Passing the session will avoid empty initial renders, saving your users loading time.
  const { wallet } = useWen(props.session);

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

export default Index;

export const getServerSideProps = async (context) => {
  return {
    props: {
      // session.wallet is the same info as const { wallet } = useWen(props session);
      session: getSession(context),
    },
  };
};