Introducing Arc.React

Arc.react

Hey everyone, we have another product update.

Arc.react is a react componentization of DAOstack’s Arc.js library.
This enables easy react application deployment and integration, and significantly simplifies building of custom DAO UIs, interfaces, pages, and website native UI.

The goal of this guide is to introduce the Arc.react library and go over a few examples made by @cbrzn and @dOrgJelli

Prerequisites

  • Nvm
  • Docker
  • Docker-compose

Running Playground

  • nvm install
  • nvm use
  • yarn
  • yarn start

Testing

  • yarn start:subgraph
  • yarn test

Starting

1. npm i --save @daostack/arc.react`

2. <Arc config={new ArcConfig("rinkeby")}>

3. <DAO address="0xMY_DAO"></DAO>

Examples:

A basic example of the data structure:

Member Data would look like this

<Members>
  <Member.Data>
    {(data: MemberData) => (
    <div>{data.address}</div>
    )}
  </Member.Data>
</Members>

Other Examples

Example 1: Simple Example

App.tsx

const configuration = new ArcConfig("private");

<Arc config={configuration}>
  <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>    

Example 2: Component Context Inference

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

VS

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

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

Example 3: Component Lists

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

Example 4: Context Forwarding

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

Example 5: All Together

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>

For more information check out the Github Repo https://github.com/daostack/arc.react

Big thanks to @cbrzn and @dOrgJelli for all of this.

3 Likes