useAragon 🦅

React Hooks for Aragon OSx

Standing on the shoulders of these chads (aka, dependencies):

Jump straight to the Hooks Reference

Motivation

useAragon is a library of React hooks that make it easy to integrate your Aragon OSx DAO directly into your dApps UI. Using the useAragon library, developers can easily create highly performant and responsive web applications that interact with Aragon DAOs, without having to worry about the intricacies of interacting with the contracts.

The Aragon SDK abstract away much of the complexity of interacting with the Aragon protocol, useAragon further simplifies the process by providing a set of hooks that encapsulate common interactions, managing state, caching, deduping, lazy loading, dev tools, and a bunch more optimizations. All with typescript niceness sprinkled in

Example

const { daos, isLoading, isError } = useFetchDaos();

const { dao } = useFetchDao('aragon.dao.eth');

const { members } = useFetchMembers(votingAddress);

const { votes } = useFetchVotes(votingAddress, {
  onSuccess: data => console.log(data),
  onError: error => console.log(error),
});

Installation

# pnpm
pnpm add use-aragon

Usage

Basic

Your app must first be wrapped in a Wagmi context and a Aragon context

function App() {
  return (
    <WagmiConfig client={client}>
      <AragonProvider>
        <DApp />
      </AragonProvider>
    </WagmiConfig>
  );
}

You can then use the hooks in any components inside of your DApp component:

import { useFetchDao } from 'useAragon';

// ...

const { data: dao } = useFetchDao('aragon.dao.eth');

Development

The recommended workflow is to run TSDX in one terminal:

pnpm start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
pnpm i
pnpm start

The example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use pnpm run build or yarn build.

To run tests, use pnpm test or yarn test.

Bundle analysis

Calculate the real cost with pnpm run size and visulize it with pnpm run analyze.

Made with 🔥 by AbuUsama

pythonpete32/use-aragon