Componentizing DAOstack's client library, enabling easier React application integration. The hope is to be able to turn any app into a DAO enabled dApp by adding ~2 components.

1. node (version in the .nvmrc)
2. docker & docker-compose

yarn
yarn start

App.tsx

<Arc config="{ProdArcConfig}">
  <DAO address="0x...">
    <ExampleDAOView />
  </DAO>
</Arc>

Now that the DAO component has been added to the root of our application, any component rendered within its tree will have access to this DAO's contexts.
ExampleDAOView.tsx

ExampleDAOView() => (
  <DAO.Data>
  {(data: DAOData) => (
    <>
    <div>{"DAO: " + data.name}</div>
    <div>{"Token: " + data.tokenName}</div>
    </>
  )}
  </DAO.Data>
)

You can also interact with the entity context, which enables write operations to the protocol:

<DAO.Entity>
  {(entity: DAOEntity) => ( <button onClick={async (e) => { await
  entity.createProposal(...) }} /> )}
</DAO.Entity>

<DAO address="0xMy_DAO">
  ...
  <Member address="0xMy_Address">
    ...
  </Member>
  ...
</DAO>

VS

<Member address="0xMy_Address" daoAddress="0xMy_DAO"> </Member>

NOTE: Both of these examples work, but one is easier to maintain and reuse throughout your app.

<DAOs>
  <DAO.Data>
  {(dao: DAOData) => (
    <>
    <div>{"Name: " + dao.name}</div>
    <div>{"Token: " + dao.tokenName}</div>
    </>
  )}
  </DAO.Data>
</DAOs>

<DAO.Data>
<Member.Data>
{(dao: DAOData, member: MemberData) => (
  <>
  <div>{dao.address}</div>
  <div>{member.address}</div>
  </>
)}
</Memeber.Data>
</DAO.Data>

The below example will:

• Render a list of all DAOs. For each DAO...
  • Print the DAO's name.
  • Render a list of all Members. For each member...
    • Print the Member's information.
    • Provide a button that allows you to propose a reward for that member.

<DAOs>
  <DAO.Data>
  {(dao: DAOData) => (
    <div>{dao.name}</div>
  )}
  </DAO.Data>
  <Members>
    <DAO.Entity>
    <Member.Data>
    {(dao: DAOEntity, memberData: MemberData) => (
      <>
      <div>{memberData.name}<div>
      <div>{memberData.reputation}</div>
      <button onClick={async (e) => {
        await dao.createProposal(..., memberData.address, ...)
      }}>
      Propose Reward
      </button>
      </>
    )}
    </Member.Data>
    </DAO.Entity>
  </Members>
</DAOs>

TODO: examples of the different supported child types (fn & components)

DAOstack's client library defines an object model where each class instance represents a semantic object within the protocol (ex: DAO, Proposal, Member). These class instances have access to the various contracts they interact with, and the semantic data model stored in a GraphQL server. Going forward, we will call these class instances "Entities".

Each DAOcomponent creates an entity internally, and then exposes it to other components through React Contexts.

For Example: The component <DAO address="0x..."> contains an instance of class DAO.

Note: ComponentLists break this rule, but will be covered further down.

Each component has two core contexts:

• Data - GraphQL Schema
• Entity - TypeScript Class W/ Write Methods

In addition to these core contexts, you can also access:

• Logs - The logs associated with this component.

Each part of the component is exposed through a React Contexts. This allows you to use different parts of the component throughout your application, while only defining it once farther up the DOM. See "Example 1" in this document.

For each component type, you can add an s after its name and it'll become a list of that entity type. For example: DAOs, Proposals, Members. See "Example 3" in this document.

This library aims to:

• Improve Usability
• Reduce Boilerplate
• Reduce Rerendering
• Be Unobtrusively Designed
• Simple By Default, Complex If Desired
• Minimize & Encapsulate Dependencies
• Improve Logging / Tracability