Wen Connect? Now!

Tiny library (5kb zipped) that let’s you focus on building Web3 features. Supports connecting to metamask and many other features soon.

usage

yarn add wen-connect
# or
npm install wen-connect --save

Wen works in all Javascript applications but offers different bindings for different frameworks.

React

Add WenProvider to your root component

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const supabase = createClient("supabase-url", "supabase-anon-key");

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

And start using the hook inside components!

connect/disconnect:

import { useConnect } from "wen-connect";

const { connect, disconnect } = useConnect();

current address

import { useWen } from "wen-connect";

// empty string if not connected
const { address } = useWen();

Next.js

Wen also works in SSR with Next.js to let you connect. Activate the ssr prop in the provider and add your provider to _app.tsx:

function MyApp({ Component, pageProps }) {
  return (
    <WenProvider ssr>
      <Component {...pageProps} />
    </WenProvider>
  );
}

Create a pages/api/wen.tsx for wen to use JWT sessions:

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

Now you should have access to the address in getServerSideprops.

import { useWen } from "wen-connect";

///...
import { getSession } from "wen-connect";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const serverAddress = await getSession(context);

  // fetch some data to display based on user address

return {
    props: {
        /// your data
    }
}

Roadmap:

• ethers.js bindings
• svelte and svelte kit bindings
• wallet connect
• coinbase wallet
• The graph integrations
• more examples

GitHub

View Github