Wen Connect? Now!

Version Build Size Downloads

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