# @daohaus/moloch-v3-macro-ui

> A set of fully functional DAO user interface React components that allow you to rapidly develop complex DAO apps.

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

## Install

```sh
npm install @daohaus/moloch-v3-macro-ui
pnpm add @daohaus/moloch-v3-macro-ui
yarn add @daohaus/moloch-v3-macro-ui
bun add @daohaus/moloch-v3-macro-ui
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2025-03-03 |
| First published | 2023-02-15 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 17 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Maintainers | daohaus-protocol |

## Links

- npm: https://www.npmjs.com/package/@daohaus/moloch-v3-macro-ui
- 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/moloch-v3-macro-ui

## Dependencies (17)

- [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
- [react-table](https://npm.io/package/react-table.md) 7.8.0
- [@daohaus/abis](https://npm.io/package/@daohaus/abis.md) 0.5.5
- [@daohaus/utils](https://npm.io/package/@daohaus/utils.md) 0.5.5
- [react-markdown](https://npm.io/package/react-markdown.md) 9.0.0
- [@daohaus/connect](https://npm.io/package/@daohaus/connect.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/tx-builder](https://npm.io/package/@daohaus/tx-builder.md) 0.5.5
- [@daohaus/form-builder](https://npm.io/package/@daohaus/form-builder.md) 0.5.5
- [@daohaus/keychain-utils](https://npm.io/package/@daohaus/keychain-utils.md) 0.5.5
- [@daohaus/moloch-v3-data](https://npm.io/package/@daohaus/moloch-v3-data.md) 0.5.5
- [@daohaus/moloch-v3-hooks](https://npm.io/package/@daohaus/moloch-v3-hooks.md) 0.5.5
- [@daohaus/moloch-v3-legos](https://npm.io/package/@daohaus/moloch-v3-legos.md) 0.5.5
- [@daohaus/moloch-v3-fields](https://npm.io/package/@daohaus/moloch-v3-fields.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
- … 26 more at https://npm.io/package/@daohaus/moloch-v3-macro-ui/versions

## README

# @daohaus/moloch-v3-macro-ui

A set of fully functional DAO user interface React components that allow you to rapidly develop complex DAO apps.

- DAO Overview ans settings
- Proposal cards, lists, details and votes
- Member cards, lists and profiles
- Safe/vault cards and lists

### [View on NPM](https://www.npmjs.com/package/@daohaus/moloch-v3-macro-ui)

## Usage

### Installation

```bash
yarn add @daohaus/moloch-v3-macro-ui
```

### Requirements

If your are targeting a DAO on the Etheruem Mainnet or Gnosis Chain (and more to come) you will need to provide an API key from TheGraph. Learn to get those [here](https://thegraph.com/docs/en/querying/managing-api-keys/) and [here](https://thegraph.com/studio/apikeys/).

You will need to wrap the tree of your app with macro components in the <HausThemeProvider /> from @daohaus/ui and the <TXBuilder /> from @daohaus/tx-builder and the CurrentDaoProvider from @daohaus/moloch-v3-hooks

```jsx
// main.tsx
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
      <QueryClientProvider client={queryClient}>
        <DHConnectProvider daoChainId={"0x1"}>
          <HausThemeProvider>
            <Routes />
          </HausThemeProvider>
        </DHConnectProvider>
      </QueryClientProvider>
    </HashRouter>
  </React.StrictMode>
);

//somePage.tsx
import { useDHConnect } from "@daohaus/connect";
import { TXBuilder } from "@daohaus/tx-builder";
import { CurrentDaoProvider } from "@daohaus/moloch-v3-hooks";

export const LayoutContainer = () => {
  const { publicClient, address } = useDHConnect();

  return (
    <TXBuilder
      publicClient={publicClient}
      chainId={"0x1"}
      daoId={"0x0daoaddress"}
      safeId={'0x0safeaddress'}
    >
      <CurrentDaoProvider
        targetDao={{
          daoChain: "0x1",
          daoId: "0x0daoaddress",
        }}
      >
        <SomeComponentWithMacroUI />
      </CurrentDaoProvider>
    </TXBuilder>
  );
};
```

### Examples

**There are examples of all macro components in our [dao-app-starter repo](https://github.com/HausDAO/dao-app-starter-vite/tree/main)**

**How to display a DAO overview**

```jsx
import { DaoOverview } from '@daohaus/moloch-v3-macro-ui';

export const Dao = () => {
  return <DaoOverview daoChain={'0x0'} daoId={'0x0daoaddress'} />;
};
```

**How to display a proposal list**

```jsx
import { ProposalList } from '@daohaus/moloch-v3-macro-ui';
import { SingleColumnLayout } from '@daohaus/ui';

export const Proposals = () => {
  return (
    <SingleColumnLayout>
      <ProposalList header="Proposals" allowLinks={true} />
    </SingleColumnLayout>
  );
};
```

How to display a members list

```jsx
import { MemberList } from '@daohaus/moloch-v3-macro-ui';
import { SingleColumnLayout } from '@daohaus/ui';

export const Members = () => {
  return (
    <SingleColumnLayout title="Members">
      <MemberList daoChain={'0x1'} daoId={'0x0daoaddress'} />
    </SingleColumnLayout>
  );
};
```

## Building

Run `nx run moloch-v3-macro-ui:build` to build the library.

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