@daohaus/moloch-v3-macro-ui

Moloch v3 Macro UI is a set of fully-functional DAO user interface React components that allow you to rapidly develop complex DAO apps. Worry more about where this information is relevant rather than how to display it. Use the and customize the following:

DAO overview and settings
Proposal cards, lists, details, and votes
Member cards, lists, and profiles
Safe cards and lists

Github (opens in a new tab)

All Available Components (opens in a new tab)

NPM (opens in a new tab)

Usage

Installation

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 The Graph. Learn to get those keys here (opens in a new tab) and here (opens in a new tab).

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 CurrentDaoProvider from @daohaus/moloch-v3-hooks.

// 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-vite (opens in a new tab) repo.

How to display a DAO overview

import { DaoOverview } from '@daohaus/moloch-v3-macro-ui';
 
export const Dao = () => {
  return <DaoOverview daoChain={'0x0'} daoId={'0x0daoaddress'} />;
};

dao-overview

dao-tokens

How to display a proposal list

import { ProposalList } from '@daohaus/moloch-v3-macro-ui';
import { SingleColumnLayout } from '@daohaus/ui';
 
export const Proposals = () => {
  return (
    <SingleColumnLayout>
      <ProposalList header="Proposals" allowLinks={true} />
    </SingleColumnLayout>
  );
};

proposal-list

How to display a members list

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>
  );
};

member-list

moloch-v3-hooks form-builder