# @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 a layout component to enable rapid application development. It is opinionated and composed with the following libraries:

- [Web3 Modal and Wallet Connect](https://web3modal.com/)
- [React-Router](https://reactrouter.com/en/main)

### [View on Github](https://github.com/HausDAO/monorepo/tree/develop/libs/connect)

- [**Connect context**](https://github.com/HausDAO/monorepo/blob/develop/libs/connect/src/HausConnectContext.tsx)
- **Components**
- [**Connect Button**](https://github.com/HausDAO/monorepo/tree/develop/libs/connect/src/components)
- [**Network Button**](https://github.com/HausDAO/monorepo/tree/develop/libs/connect/src/components/NetworkButton)
- [**DAOHaus Layout**](https://github.com/HausDAO/monorepo/tree/develop/libs/connect/src/components/DHLayout)
- [**DAOHaus Nav**](https://github.com/HausDAO/monorepo/tree/develop/libs/connect/src/components/DaoHausNav)
- **Related lower-level components**
- [**@daohaus/connect-context**](https://github.com/HausDAO/monorepo/tree/develop/libs/connect-context)

### [View on NPM](https://www.npmjs.com/package/@daohaus/connect)

## Usage

### Installation

yarn add @daohaus/connect

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

### Requirements

You will need to provide a Wallet Connect V2 api key as an env variable at NX_WALLET_CONNECT_ID. You can get those from [Wallet Connect](https://docs.walletconnect.com/2.0/api/auth/overview#key-features)

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 the 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 varables 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 eallect address
- validNetwork: indicated if connected network matched dao or available network in network objects
- profile: additonal profile data for connect address
- publicClient: viem client

Lifecycle data:

- isConnected
- isConnecting
- isProfileLoading

Functions:

- connectWallet: function to initiate web3modal wallect connection
- disconnectL function to disconnect
- switchNetwork: function to switch to provided network