# @daohaus/moloch-v3-hooks

The moloch-v3-hooks pakage is a collection of react hooks you can use fetch and store data and the use it in components anywhere in your application, like:
- Current dao data (including proposals, members, vaults and dao records)
- Current connected address membership data
- ERC20 data

### [View on Github](https://github.com/HausDAO/monorepo/tree/develop/libs/moloch-v3-hooks)

- [**Current DAO context**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/contexts/CurrentDaoContext.tsx)
- **DAO Data**
- [**DAO overview**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useDaoData.tsx)
- [**Proposal**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useDaoProposal.tsx) and [**Proposal Lists**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useDaoProposals.tsx)
- [**Member**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useDaoMember.tsx) and [**Member Lists**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useDaoMembers.tsx)
- [**DAO Records**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useConnectedMember.tsx)
- [**ERC20**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useConnectedMember.tsx)
- **Connected Address Data**
- [**Single DAO membership**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useConnectedMember.tsx)
- [**All DAO memberships**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useDaosByUser.tsx)
- [**Profile Data**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-hooks/src/hooks/useProfile.tsx)

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

## 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 to get those [here](https://thegraph.com/docs/en/querying/managing-api-keys/) and [here](https://thegraph.com/studio/apikeys/).

These hooks use [React-Query](https://tanstack.com/query/v3/) so you will need to wrap your app in a QueryClientProvider as seen [here](https://tanstack.com/query/v3/docs/react/examples/react/basic)

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 tto 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 yo 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'});