# @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 c

Latest version **0.5.5** (published 2025-03-03) · 0 weekly downloads

## Install

```sh
npm install @daohaus/connect
pnpm add @daohaus/connect
yarn add @daohaus/connect
bun add @daohaus/connect
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2025-03-03 |
| First published | 2022-11-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 228.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | daohaus-protocol |

## Links

- npm: https://www.npmjs.com/package/@daohaus/connect
- Repository: https://github.com/HausDAO/monorepo
- Homepage: https://github.com/HausDAO/monorepo#readme
- Issues: https://github.com/HausDAO/monorepo/issues
- npm.io page: https://npm.io/package/@daohaus/connect

## Dependencies (8)

- [react](https://npm.io/package/react.md) 18.2.0
- [@daohaus/ui](https://npm.io/package/@daohaus/ui.md) 0.5.5
- [react-icons](https://npm.io/package/react-icons.md) 4.10.1
- [@daohaus/utils](https://npm.io/package/@daohaus/utils.md) 0.5.5
- [@radix-ui/colors](https://npm.io/package/@radix-ui/colors.md) 0.1.9
- [styled-components](https://npm.io/package/styled-components.md) 6.0.7
- [@daohaus/keychain-utils](https://npm.io/package/@daohaus/keychain-utils.md) 0.5.5
- [@daohaus/connect-context](https://npm.io/package/@daohaus/connect-context.md) 0.5.5

## Recent versions

- 0.5.5 (latest) — 2025-03-03
- 0.2.0-alpha.6 (alpha) — 2023-08-18
- 0.5.4 — 2024-10-29
- 0.5.3 — 2024-09-06
- 0.5.2 — 2024-06-14
- 0.5.1 — 2024-05-09
- 0.5.0 — 2024-05-03
- 0.4.5 — 2024-05-02
- 0.4.4 — 2024-03-29
- 0.4.3 — 2024-03-21
- 0.4.2 — 2024-01-26
- 0.4.1 — 2024-01-18
- 0.4.0 — 2024-01-17
- 0.3.3 — 2023-12-19
- 0.3.2 — 2023-11-10
- … 47 more at https://npm.io/package/@daohaus/connect/versions

## README

# @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 NPM](https://www.npmjs.com/package/@daohaus/connect)

## Usage

### Installation

```bash
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**

```jsx
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**

```jsx
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**

```jsx
const { connectWallet } = useConnect();

<Button onClick={connectWallet} sm type="button">
  Connect
</Button>;
```

**How to get connected wallet data**

```jsx
const { isConnected, address } = useConnect();

...

if (!isConnected) {
    return <ConnectWalletButton isSm={isSm} />;
  }

  return <p>{address}</p>;
};
```

## Building

Run `nx run connect:build` to build the library.

---
_Source: https://npm.io/package/@daohaus/connect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._