Merge pull request #76 from dOrgTech/documentation_improvements

Adding some recipes + adding hooks to api reference

Author: dOrgJelli

README.md

@@ -66,6 +66,8 @@ proposals...
 - [architecture](./documentation/architecture.md)
 - [api](./documentation/api.md)
 
+Check the [demo app!](https://github.com/dOrgTech/arc.react-demo)
+
 # Build & Contribute
 
 ## Prerequisites

documentation/api.md

@@ -43,6 +43,7 @@ const arcConfig = new ArcConfig({
   ...config,
   web3Provider: metamask,
 });
+arcConfig.initialize();
 ```
 
 You can also pass in your own configuration values like so:
@@ -58,6 +59,7 @@ const settings: ArcSettings = {
 };
 
 const arcConfig = new ArcConfig(settings);
+arcConfig.initialize();
 ```
 
 ---
@@ -500,3 +502,35 @@ from?: "DAO" | "Member as proposer"
   <Proposals />
 </Member>
 ```
+
+---
+
+## useComponent
+
+As you previously saw, to get the information (`Data` and `Entity`) from every component we need to do, for example with Member:
+
+```html
+<Member address="0x" dao="0x">
+  <Member.Data>
+    {(member: MemberData) =>
+    <div>{"Member id: " + member.id}</div>
+    }
+  </Member.Data>
+</Member>
+```
+
+But the library also allows you to do, (this is available for every component of the library):
+
+```jsx
+const MyMemberComponent = () => {
+  const [memberData, memberEntity] = useMember();
+  return <div>Member id: {memberData?.id}</div>;
+};
+<Member address="0x" dao="0x">
+  <MyMemberComponent />
+</Member>;
+```
+
+Note that you MUST implement the component that has the `useXXX` INSIDE of the component you want to get the data and/or from. Also, you must use the `?` when interacting with the hook because it can be undefined.
+
+[Click here](https://github.com/dOrgTech/arc.react-demo/blob/dev/src/components/Proposals/Create.tsx#L20) to check an example

documentation/recipes.md

@@ -0,0 +1,78 @@
+# Recipes
+
+Here are some tricks that you can do when using the library. All these have been implemented in the demo app previously mentioned in the README.
+
+## Showing members with their reputation percentage
+
+```html
+<DAO address="0x">
+  <Members from="DAO">
+    <DAO.Data>
+      <Member.Data>
+        {(daoData: DAOData, memberData: MemberData) => { const memberPercentage
+        = (Number(memberData.reputation) * 100) /
+        Number(daoData.reputationTotalSupply) return (
+        <div>
+          <p>{memberData.address}</p>
+          <p>{memberPercentage.toFixed(2)}</p>
+        </div>
+        ); }}
+      </Member.Data>
+    </DAO.Data>
+  </Members>
+</DAO>
+```
+
+## Filtering proposals
+
+In this example we are going to show the latest **active** proposals from the DAO, and make a button to vote for them. NOTE: The user must be logged in otherwise the vote will fail
+
+```tsx
+const activeProposals = {
+  where: { stage_in: [2, 3, 4, 5] },
+  orderBy: "closingAt",
+  orderDirection: "desc",
+};
+<Proposals filter={activeProposals} from="DAO">
+  <Proposal.Data>
+    <Proposal.Entity>
+      {(proposalData: ProposalData, proposalEntity: ProposalEntity) => (
+        <div>
+          <p> {proposalData.title} </p>
+          <button
+            onClick={async (e) => {
+              await proposalEntity.vote(1).send();
+            }}
+          >
+            Vote for
+          </button>
+        </div>
+      )}
+    </Proposal.Entity>
+  </Proposal.Data>
+</Proposals>;
+```
+
+## Showing the percentage of votes against a proposal
+
+```tsx
+const showPercentage = (votes: BN, totalRep: BN) => {
+  return votes
+    .muln(100)
+    .div(totalRep)
+    .toNumber();
+};
+<DAO address="0xDAO_Address">
+  <Proposal id="0xProposal_ID">
+    <DAO.Data>
+      <Proposal.Data>
+        ({daoData; DAOData, proposalData: ProposalData) => (
+          <div>
+           Votes for: {showPercentage(proposalData.votesFor, DAOData.reputationTotalSupply)} - Votes against: {showPercentage(proposalData.votesAgainst, DAOData.reputationTotalSupply)}
+          </div>
+        )})
+      </Proposal.Data>
+    </DAO.Data>
+  </Proposal>
+</DAO>
+```