@daohaus/moloch-v3-hooks

Moloch v3 Hooks is a collection of React hooks you can use to fetch and store data to use in components anywhere in your application, like:

Current DAO data (including proposals, members, safes, and DAO records)
Current connected address membership data
ERC-20 data

Github (opens in a new tab)

Current DAO Context (opens in a new tab)

DAO Data

ERC-20 (opens in a new tab)

Connected Address Data

Usage

Installation

yarn add @daohaus/moloch-v3-hooks

Requirements

If you are trying to query for data on Etheruem Mainnet or Gnosis Chain (and more to come) you will need to provide an API key from The Graph. Learn how to get those keys here (opens in a new tab) and here (opens in a new tab).

These hooks use React Query (opens in a new tab) so you will need to wrap your app in a QueryClientProvider as seen here (opens in a new tab).

const queryClient = new QueryClient();
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
      <QueryClientProvider client={queryClient}>
        <HausThemeProvider>
          <Routes />
        </HausThemeProvider>
      </QueryClientProvider>
    </HashRouter>
  </React.StrictMode>
);

Examples

How to get DAO data

import { useDaoData, useDaoMember, useDaoProposals } from '@daohaus/moloch-v3-hooks';
 
const { dao } = useDaoData({
  daoChain: '0x1',
  daoId '0x0someAddress'
});
 
const { member } = useDaoMember({
  daoChain: '0x1',
  daoId '0x0someAddress',
  memberAddress: '0x0memberAddress',
});
 
const { proposals } = useDaoProposals({
  daoChain: '0x1',
  daoId '0x0someAddress',
});

How to refetch data

import { useDaoData } from '@daohaus/moloch-v3-hooks';
 
const { dao, refetch } = useDaoData({
  daoChain: '0x1',
  daoId: '0x0someAddress',
});
 
const someAction = () => {
  refetch();
};

How to filter, sort, and paginate a list of proposals or members

import { useDaoProposals } from '@daohaus/moloch-v3-hooks';
 
const {
  proposals,
  filterProposals,
  filter,
  ordering,
  orderProposals,
  hasNextPage,
  fetchNextPage,
} = useDaoProposals({
  daoChain: '0x1',
  daoId: '0x0someAddress',
});
 
// Filtering
console.log('current filter', filter);
// {}
 
const updateFilter = { cancelled: true };
filterProposals(updateFilter);
// proposals variable in the hook will be refetched updated
 
// Sorting
console.log('current ordering', ordering);
// {orderBy: 'createdAt', orderDirection: 'desc'}
 
const updatedOrdering = {
  orderBy: 'votingStarts',
  orderDiection: 'asc',
};
 
orderProposals(updatedOrdering);
// proposals variable in the hook will be refetched updated
 
//Getting the next page of data
console.log('does it have another page?', hasNextPage);
// true
 
fetchNextPage();
// proposal variable will have the next page of proposals added to it

How to store the current DAO data

If you store your target DAO address and chain id in the CurrentDaoContext all of these hooks will not need you to pass the daoId and chainId to them.

import { CurrentDaoProvider } from '@daohaus/moloch-v3-hooks';
 
<CurrentDaoProvider
  targetDao={{
    daoChain,
    daoId,
  }}
>
  {children}
</CurrentDaoProvider>;

Then in a component you can use this hook:

import { UseCurrentDao, useDaoData } from '@daohaus/moloch-v3-hooks';
 
 
const { daoChain, daoId } = useCurrentDao();
const { useDaoData } = useDaoData();
 
// instead of
 
const { useDaoData } = useDaoData({daoId: 'someid' daoChain: 'somechainid'});

connect moloch-v3-macro-ui