@daohaus/connect

DAOhaus Connect provides a drop-in component for handling wallet connection. It includes additional functionality such as notifying users of unsupported networks, switching networks, and displaying ENS data. It also includes a top-of-page navigation component and layout component to enable rapid application development. It is opinionated and composed with the following libraries:

• Web3Modal and WalletConnect (opens in a new tab)
• React Router (opens in a new tab)

Github (opens in a new tab)

Connect Context (opens in a new tab)

Components

• Connect Button (opens in a new tab)
• Network Button (opens in a new tab)
• DAOHaus Layout (opens in a new tab)
• DAOHaus Nav (opens in a new tab)

Related Packages

• connect-context (opens in a new tab)

NPM (opens in a new tab)

Usage

Installation

yarn add @daohaus/connect

Note: This will also install @daohaus/connect-context

Requirements

You will need to provide a WalletConnect v2 API key as an env variable at NX_WALLET_CONNECT_ID. You can get the key from WalletConnect (opens in a new tab).

NX_WALLET_CONNECT_ID=<some WC API key>

Examples

How to add to your application

import { DHConnectProvider } from '@daohaus/connect';
 
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <DHConnectProvider
        daoId={"some dao id if scoping to a single dao"}
        daoChain={"some dao chain id if scoping to single chain"}>
        <App />
      </DHConnectProvider>
    </BrowserRouter>
  </StrictMode>,
document.getElementById('root')

How to add DAOHaus layout and nav

import { HausLayout } from '@daohaus/daohaus-connect-feature';
 
<HausLayout
  pathname={location.pathname}
  navLinks={[{ label: 'Home', href: '/' }]}
  footer={<Footer />}
>
  <YourApp /> // any other components that are needed
</HausLayout>;

How to make a connect button

const { connectWallet } = useConnect();
 
<Button onClick={connectWallet} sm type="button">
  Connect
</Button>;

How to get connected wallet data

const { isConnected, address } = useConnect();
 
...
 
if (!isConnected) {
    return <ConnectWalletButton isSm={isSm} />;
  }
 
  return <p>{address}</p>;
};

What else can you do with useConnect?

The useConnect hook includes the following variables and functions:

State Data

• networks: Object of network data
• daoChainId: Current DAO chain id if there is one
• daoId: Current DAO contract address if there is one
• address: Connected wallet address
• validNetwork: Indicated if connected network matched DAO or available network in network objects
• profile: Additional profile data for connected address
• publicClient: viem client

Lifecycle Data

• isConnected
• isConnecting
• isProfileLoading

Functions

• connectWallet: Function to initiate web3modal wallet connection
• disconnect: Function to disconnect
• switchNetwork: Function to switch to provided network