Merge pull request #1 from hicommonwealth/graham.aave-styling

AAVE proposal cards styling

client/scripts/controllers/chain/ethereum/aave/proposal.ts

@@ -173,7 +173,7 @@ export default class AaveProposal extends Proposal<
     const yesPower = sumVotes(votes.filter((v) => v.choice));
     const noPower = sumVotes(votes.filter((v) => !v.choice));
     if (yesPower.isZero() && noPower.isZero()) return 0;
-    const supportBn = yesPower.muln(1000).div(yesPower.add(noPower));
+    const supportBn = yesPower.muln(10000).div(yesPower.add(noPower));
     return +supportBn / 10000;
   }
 
@@ -186,12 +186,25 @@ export default class AaveProposal extends Proposal<
     return +turnoutBn / 10000;
   }
 
+  // (FOR VOTES - AGAINST VOTES) / voting supply
+  public get voteDifferential() {
+    if (!this._votingSupplyAtStart || this._votingSupplyAtStart.isZero()) {
+      return null;
+    }
+    const votes = this.getVotes();
+    const yesPower = sumVotes(votes.filter((v) => v.choice));
+    const noPower = sumVotes(votes.filter((v) => !v.choice));
+    const forProportion = yesPower.muln(10000).div(this._votingSupplyAtStart);
+    const againstProportion = noPower.muln(10000).div(this._votingSupplyAtStart);
+    return (+forProportion - +againstProportion) / 10000;
+  }
+
   public get minimumQuorum() {
-    return +this._Executor.minimumQuorum / 10000
+    return +this._Executor.minimumQuorum / 10000;
   }
 
-  public get voteDifferential() {
-    return +this._Executor.voteDifferential / 1000;
+  public get minimumVoteDifferential() {
+    return +this._Executor.voteDifferential / 10000;
   }
 
   private _votingSupplyAtStart: BN;
@@ -238,18 +251,15 @@ export default class AaveProposal extends Proposal<
     if (this.state === AaveTypes.ProposalState.EXPIRED) {
       this.complete(this._Gov.store);
     }
-    if (this.completed) {
-      return;
-    }
 
     try {
       const totalVotingSupplyAtStart = await this._Gov.api.Strategy.getVotingSupplyAt(this.data.startBlock);
       this._votingSupplyAtStart = new BN(totalVotingSupplyAtStart.toString());
-    } catch (e) {
-      console.error(`Failed to fetch total voting supply: ${e.message}`);
-      // this._votingSupplyAtStart = Web3.utils.toWei(new BN(1_000_000_000), 'ether')
-      this._initialized = true;
-      return;
+    } catch (e2) {
+      console.error(
+        'Failed to fetch total voting supply at proposal start block, using hardcoded dydx value.'
+      );
+      this._votingSupplyAtStart = Web3.utils.toWei(new BN(1_000_000_000), 'ether');
     }
 
     this._minVotingPowerNeeded = this._votingSupplyAtStart

client/scripts/views/components/proposal_card.ts

@@ -144,63 +144,63 @@ const ProposalCard: m.Component<{ proposal: AnyProposal, injectedContent? }> = {
           m.route.set(proposalLink); // avoid resetting scroll point
         },
       }, [
-        // tag
-        m(Tag, {
-          label: [
-            chainEntityTypeToProposalShortName(proposalSlugToChainEntityType(proposal.slug)),
-            ' ',
-            proposal.shortIdentifier,
-          ],
-          intent: 'primary',
-          rounded: true,
-          size: 'xs',
-        }),
-        (proposal instanceof SubstrateDemocracyProposal || proposal instanceof SubstrateCollectiveProposal)
-          && proposal.getReferendum()
-          && m(Tag, {
-            label: `REF #${proposal.getReferendum().identifier}`,
+        m('.proposal-card-metadata', [
+          m(Tag, {
+            label: [
+              chainEntityTypeToProposalShortName(proposalSlugToChainEntityType(proposal.slug)),
+              ' ',
+              proposal.shortIdentifier,
+            ],
             intent: 'primary',
             rounded: true,
             size: 'xs',
-            class: 'proposal-became-tag',
           }),
-        proposal instanceof SubstrateDemocracyReferendum
-          && (() => {
-            const originatingProposalOrMotion = proposal.getProposalOrMotion(proposal.preimage);
-            return m(Tag, {
-              label: (originatingProposalOrMotion instanceof SubstrateDemocracyProposal)
-                ? `PROP #${originatingProposalOrMotion.identifier}`
-                : (originatingProposalOrMotion instanceof SubstrateCollectiveProposal)
-                  ? `MOT #${originatingProposalOrMotion.identifier}` : 'MISSING PROP',
+          (proposal instanceof SubstrateDemocracyProposal || proposal instanceof SubstrateCollectiveProposal)
+            && proposal.getReferendum()
+            && m(Tag, {
+              label: `REF #${proposal.getReferendum().identifier}`,
               intent: 'primary',
               rounded: true,
               size: 'xs',
               class: 'proposal-became-tag',
-            });
-          })(),
-        proposal instanceof SubstrateTreasuryProposal && !proposal.data.index && m(Tag, {
-          label: 'MISSING DATA',
-          intent: 'primary',
-          rounded: true,
-          size: 'xs',
-          class: 'proposal-became-tag',
-        }),
-        // title
-        m('.proposal-title', proposal.title),
-        // metadata
-        proposal instanceof SubstrateTreasuryProposal && m('.proposal-amount', proposal.value?.format(true)),
-        proposal instanceof SubstrateDemocracyReferendum && m('.proposal-amount', proposal.threshold),
-        // // linked treasury proposals
-        // proposal instanceof SubstrateDemocracyReferendum && proposal.preimage?.section === 'treasury'
-        //   && proposal.preimage?.method === 'approveProposal'
-        //   && m('.proposal-action', [ 'Approves TRES-', proposal.preimage?.args[0] ]),
-        // proposal instanceof SubstrateDemocracyProposal && proposal.preimage?.section === 'treasury'
-        //   && proposal.preimage?.method === 'approveProposal'
-        //   && m('.proposal-action', [ 'Approves TRES-', proposal.preimage?.args[0] ]),
-        // proposal instanceof SubstrateCollectiveProposal && proposal.call?.section === 'treasury'
-        //   && proposal.call?.method === 'approveProposal'
-        //   && m('.proposal-action', [ 'Approves TRES-', proposal.call?.args[0] ]),
-        // linked referenda
+            }),
+          proposal instanceof SubstrateDemocracyReferendum
+            && (() => {
+              const originatingProposalOrMotion = proposal.getProposalOrMotion(proposal.preimage);
+              return m(Tag, {
+                label: (originatingProposalOrMotion instanceof SubstrateDemocracyProposal)
+                  ? `PROP #${originatingProposalOrMotion.identifier}`
+                  : (originatingProposalOrMotion instanceof SubstrateCollectiveProposal)
+                    ? `MOT #${originatingProposalOrMotion.identifier}` : 'MISSING PROP',
+                intent: 'primary',
+                rounded: true,
+                size: 'xs',
+                class: 'proposal-became-tag',
+              });
+            })(),
+          proposal instanceof SubstrateTreasuryProposal && !proposal.data.index && m(Tag, {
+            label: 'MISSING DATA',
+            intent: 'primary',
+            rounded: true,
+            size: 'xs',
+            class: 'proposal-became-tag',
+          }),
+          m('.proposal-title', proposal.title),
+          proposal instanceof SubstrateTreasuryProposal && m('.proposal-amount', proposal.value?.format(true)),
+          proposal instanceof SubstrateDemocracyReferendum && m('.proposal-amount', proposal.threshold),
+          proposal instanceof AaveProposal && m('p.card-subheader.proposal-description', proposal.ipfsData?.shortDescription || 'Proposal'),
+          // // linked treasury proposals
+          // proposal instanceof SubstrateDemocracyReferendum && proposal.preimage?.section === 'treasury'
+          //   && proposal.preimage?.method === 'approveProposal'
+          //   && m('.proposal-action', [ 'Approves TRES-', proposal.preimage?.args[0] ]),
+          // proposal instanceof SubstrateDemocracyProposal && proposal.preimage?.section === 'treasury'
+          //   && proposal.preimage?.method === 'approveProposal'
+          //   && m('.proposal-action', [ 'Approves TRES-', proposal.preimage?.args[0] ]),
+          // proposal instanceof SubstrateCollectiveProposal && proposal.call?.section === 'treasury'
+          //   && proposal.call?.method === 'approveProposal'
+          //   && m('.proposal-action', [ 'Approves TRES-', proposal.call?.args[0] ]),
+          // linked referenda
+        ]),
         injectedContent
           ? m('.proposal-injected', [
             m(injectedContent, {

client/scripts/views/components/proposals/aave_detail.ts

@@ -2,7 +2,11 @@ import 'components/proposals/aave_detail.scss';
 
 import AaveProposal from 'client/scripts/controllers/chain/ethereum/aave/proposal';
 import m from 'mithril';
-import moment from 'moment';
+import User from '../widgets/user';
+
+const roundVote = (percentage) => {
+  return percentage.toFixed(2).split('.0')[0].slice(0, 4);
+};
 
 const AaveDetail = {
   view: (vnode: m.Vnode<{ proposal: AaveProposal, statusClass: string, statusText: any }>) => {
@@ -16,39 +20,63 @@ const AaveDetail = {
         e.stopPropagation();
       }
     }, [
-      m('.proposal-injected-status', { class: statusClass }, statusText),
-      m('p', [
-        m('b', [
-          proposal.ipfsData?.shortDescription || '',
+      m('.aave-metadata', [
+        m('.aave-author', [
+          m('.card-subheader', 'Author'),
+          proposal.ipfsData?.author
+            ? proposal.ipfsData.author.split(' (').map((ele, idx) => {
+              return idx === 0
+                ? m('p.collapsed-line-height', ele)
+                : m('p.card-subheader', ele.slice(0, ele.length - 1));
+            })
+            : m(User, { user: proposal.author, popover: true }),
         ]),
-      ]),
-      m('p', [
-        m('b', [
-          'Author: ',
-          // TODO: format as User
-          proposal.ipfsData?.author || proposal.data.proposer,
+        m('.aave-status', [
+          m('.card-subheader', 'Status'),
+          m('.proposal-injected-status', { class: statusClass }, statusText),
         ]),
       ]),
-      m('p', [
-        'Support: ',
-        proposal.support,
-        '%',
-      ]),
-      m('p', [
-        'Turnout: ',
-        proposal.turnout,
-        '%',
-      ]),
-      m('p', [
-        'Required Quorum: ',
-        proposal.minimumQuorum * 100,
-        '% (of total supply)',
-      ]),
-      m('p', [
-        'Required Vote differential: ',
-        proposal.voteDifferential * 100,
-        '%',
+      m('.aave-voting', [
+        m('.card-subheader', 'Voting'),
+        m('.aave-turnout', [
+          m('p.detail-highlight.emphasize', [
+            roundVote(proposal.turnout * 100),
+            '%',
+          ]),
+          m('p', ' of token holders'),
+        ]),
+        m('.aave-support', [
+          m('p.detail-highlight.emphasize', [
+            roundVote(proposal.support * 100),
+            '%',
+          ]),
+          m('p', ' in favor'),
+        ]),
+        m('.aave-differential', [
+          m('p.detail-highlight.emphasize', [
+            roundVote(proposal.voteDifferential * 100),
+            '%',
+          ]),
+          m('p', ' differential'),
+        ]),
       ]),
+      m('.aave-requirements', [
+        m('.card-subheader', 'Required to pass'),
+        m('.aave-turnout-requirement', [
+          m('p.detail-highlight.emphasize', [
+            (proposal.minimumQuorum * 100),
+            '%',
+          ]),
+          m('p', ' of token holders'),
+        ]),
+        m('.aave-differential-requirement', [
+          m('p.detail-highlight.emphasize', [
+            (proposal.minimumVoteDifferential * 100),
+            '%',
+          ]),
+          m('p', ' differential')
+        ])
+      ])
     ]);
   }
 };

client/scripts/views/pages/proposals.ts

@@ -201,15 +201,16 @@ const ProposalsPage: m.Component<{}> = {
       && !activeMarlinProposals?.length
       && !activeAaveProposals?.length
       ? [ m('.no-proposals', 'No active proposals') ]
-      : (activeDemocracyProposals || []).map((proposal) => m(ProposalCard, { proposal }))
+      : [ m('.active-proposals', [(activeDemocracyProposals || []).map((proposal) => m(ProposalCard, { proposal }))
         .concat((activeCouncilProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((activeCosmosProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((activeMolochProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((activeMarlinProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((activeAaveProposals || []).map((proposal) => m(ProposalCard, {
           proposal,
           injectedContent: AaveDetail,
-        })));
+        })))]
+      )];
 
     // inactive proposals
     const inactiveDemocracyProposals = onSubstrate
@@ -236,15 +237,16 @@ const ProposalsPage: m.Component<{}> = {
       && !inactiveMarlinProposals?.length
       && !inactiveAaveProposals?.length
       ? [ m('.no-proposals', 'No past proposals') ]
-      : (inactiveDemocracyProposals || []).map((proposal) => m(ProposalCard, { proposal }))
+      : [ m('.inactive-proposals', [(inactiveDemocracyProposals || []).map((proposal) => m(ProposalCard, { proposal }))
         .concat((inactiveCouncilProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((inactiveCosmosProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((inactiveMolochProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((inactiveMarlinProposals || []).map((proposal) => m(ProposalCard, { proposal })))
         .concat((inactiveAaveProposals || []).map((proposal) => m(ProposalCard, {
           proposal,
           injectedContent: AaveDetail,
-        })));
+        }))) ]
+      )];
 
     // XXX: display these
     const visibleTechnicalCommitteeProposals = app.chain
@@ -264,12 +266,12 @@ const ProposalsPage: m.Component<{}> = {
       m('.clear'),
       m(Listing, {
         content: activeProposalContent,
-        columnHeader: 'Active Proposals',
+        columnHeader: 'Active',
       }),
       m('.clear'),
       m(Listing, {
         content: inactiveProposalContent,
-        columnHeader: 'Inactive Proposals',
+        columnHeader: 'Inactive',
       }),
       m('.clear'),
     ]);

client/styles/components/listing.scss

@@ -2,7 +2,8 @@
 
 .Listing {
     .ListingHeader {
-        font-weight: 600;
+        font-size: 32px;
+        font-weight: 500;
         margin-top: 30px;
         margin-bottom: 15px;
     }