Show different color for BPT votes

yam-finance · Jul 23, 2020 · 06bd94f · 06bd94f
1 parent 0f4c0db
commit 06bd94f
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 105 deletions.
diff --git a/src/components/Block/Results.vue b/src/components/Block/Results.vue
@@ -0,0 +1,81 @@
+<template>
+  <Block :title="ts >= payload.end ? 'Results' : 'Current results'">
+    <div v-for="(choice, i) in payload.choices" :key="i">
+      <div class="text-white mb-1">
+        <span v-text="choice" class="mr-1" />
+        <span v-if="results.totalBalances[i]" class="mr-1">
+          {{ _numeral(results.totalBalances[i].toFixed(0)) }}
+          {{ namespace.symbol || _shorten(namespace.token) }}
+        </span>
+        <span
+          class="float-right"
+          v-text="
+            $n(
+              !results.totalVotesBalances
+                ? 0
+                : ((100 / results.totalVotesBalances) *
+                    results.totalBalances[i]) /
+                    1e2,
+              'percent'
+            )
+          "
+        />
+      </div>
+      <UiProgress
+        :value="[results.totalWalletBalances[i], results.totalBptBalances[i]]"
+        :max="results.totalVotesBalances"
+        class="mb-3"
+      />
+    </div>
+    <UiButton
+      @click="downloadReport"
+      v-if="ts >= payload.end"
+      class="width-full mt-2"
+    >
+      Download report
+    </UiButton>
+  </Block>
+</template>
+
+<script>
+import * as jsonexport from 'jsonexport/dist';
+import pkg from '@/../package.json';
+
+export default {
+  props: ['namespace', 'payload', 'results', 'votes'],
+  computed: {
+    ts() {
+      return (Date.now() / 1e3).toFixed();
+    }
+  },
+  methods: {
+    async downloadReport() {
+      const obj = Object.entries(this.votes)
+        .map(vote => {
+          return {
+            address: vote[0],
+            choice: vote[1].msg.payload.choice,
+            balance: vote[1].balance,
+            timestamp: vote[1].msg.timestamp,
+            dateUtc: new Date(
+              parseInt(vote[1].msg.timestamp) * 1e3
+            ).toUTCString(),
+            authorIpfsHash: vote[1].authorIpfsHash,
+            relayerIpfsHash: vote[1].relayerIpfsHash
+          };
+        })
+        .sort((a, b) => a.timestamp - b.timestamp, 0);
+      try {
+        const csv = await jsonexport(obj);
+        const link = document.createElement('a');
+        link.setAttribute('href', `data:text/csv;charset=utf-8,${csv}`);
+        link.setAttribute('download', `${pkg.name}-report-${this.id}.csv`);
+        document.body.appendChild(link);
+        link.click();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/Block/Votes.vue b/src/components/Block/Votes.vue
@@ -11,15 +11,16 @@
       :style="i === 0 && 'border: 0 !important;'"
       class="px-4 py-3 border-top d-flex"
     >
-      <User :address="address" :verified="token.verified" class="column" />
+      <User :address="address" :verified="namespace.verified" class="column" />
       <div
         v-text="proposal.msg.payload.choices[vote.msg.payload.choice - 1]"
         class="flex-auto text-center text-white"
       />
       <div class="column text-right">
         <span
           v-text="
-            `${_numeral(vote.balance)} ${token.symbol || _shorten(token.token)}`
+            `${_numeral(vote.balance)} ${namespace.symbol ||
+              _shorten(namespace.token)}`
           "
           class="text-white"
         />
@@ -51,7 +52,7 @@
 
 <script>
 export default {
-  props: ['token', 'proposal', 'votes'],
+  props: ['namespace', 'proposal', 'votes'],
   data() {
     return {
       showAllVotes: false,

diff --git a/src/components/Ui/Progress.vue b/src/components/Ui/Progress.vue
@@ -1,17 +1,24 @@
 <template>
-  <span class="Progress Progress--small overflow-hidden">
+  <span class="Progress Progress--small overflow-hidden anim-scale-in">
     <span
-      class="bg-blue anim-scale-in"
-      :style="`width: ${parseInt((100 / max) * value)}%;`"
+      v-for="(bar, i) in bars"
+      :key="i"
+      :style="`width: ${parseInt((100 / max) * bar)}%;`"
+      class="bg-blue"
     />
   </span>
 </template>
 
 <script>
 export default {
-  props: {
-    value: Number,
-    max: Number
+  props: ['value', 'max'],
+  computed: {
+    bars() {
+      return Array.isArray(this.value) ? this.value : [this.value];
+    },
+    total() {
+      return this.bars.reduce((a, b) => a + b, 0);
+    }
   }
 };
 </script>
@@ -24,8 +31,10 @@ export default {
   height: 8px;
   border-radius: 4px;
 
-  span {
-    border-radius: 4px;
+  span:last-child {
+    background-color: transparentize($blue, 0.4) !important;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
   }
 }
 </style>
diff --git a/src/namespaces.json b/src/namespaces.json
@@ -18,6 +18,6 @@
     "verified": [
       "0xeF8305E140ac520225DAf050e2f71d5fBcC543e7"
     ],
-    "visible": false
+    "visible": true
   }
 }
diff --git a/src/store/modules/gov.ts b/src/store/modules/gov.ts
@@ -139,6 +139,17 @@ const actions = {
             .filter((vote: any) => vote.msg.payload.choice === i + 1)
             .reduce((a, b: any) => a + b.balance, 0)
         ),
+        totalBptBalances: result.proposal.msg.payload.choices.map((choice, i) =>
+          Object.values(result.votes)
+            .filter((vote: any) => vote.msg.payload.choice === i + 1)
+            .reduce((a, b: any) => a + b.bptBalance, 0)
+        ),
+        totalWalletBalances: result.proposal.msg.payload.choices.map(
+          (choice, i) =>
+            Object.values(result.votes)
+              .filter((vote: any) => vote.msg.payload.choice === i + 1)
+              .reduce((a, b: any) => a + b.walletBalance, 0)
+        ),
         totalVotesBalances: Object.values(result.votes).reduce(
           (a, b: any) => a + b.balance,
           0

diff --git a/src/views/Create.vue b/src/views/Create.vue
@@ -3,7 +3,7 @@
     <div class="px-4 px-md-0 mb-3">
       <router-link :to="{ name: 'home' }" class="text-gray">
         <Icon name="back" size="22" class="v-align-middle" />
-        {{ token.name || _shorten(token.token) }}
+        {{ namespace.name || _shorten(namespace.token) }}
       </router-link>
     </div>
     <div>
@@ -97,7 +97,7 @@
 
 <script>
 import { mapActions } from 'vuex';
-import tokens from '@/namespaces.json';
+import namespaces from '@/namespaces.json';
 
 export default {
   data() {
@@ -117,9 +117,9 @@ export default {
     };
   },
   computed: {
-    token() {
-      return tokens[this.key]
-        ? tokens[this.key]
+    namespace() {
+      return namespaces[this.key]
+        ? namespaces[this.key]
         : { token: this.key, verified: [] };
     },
     isValid() {
@@ -156,7 +156,7 @@ export default {
       this.loading = true;
       try {
         const { ipfsHash } = await this.send({
-          token: this.token.token,
+          token: this.namespace.token,
           type: 'proposal',
           payload: this.form
         });

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -5,25 +5,25 @@
     </Container>
     <Container :slim="true">
       <router-link
-        v-for="token in tokens"
-        :key="token.token"
-        :to="{ name: 'proposals', params: { key: token.key } }"
+        v-for="namespace in namespaces"
+        :key="namespace.token"
+        :to="{ name: 'proposals', params: { key: namespace.key } }"
       >
         <Block class="text-center">
-          <Token :address="token.token" size="128" class="mb-4" />
+          <Token :address="namespace.token" size="128" class="mb-4" />
           <div>
-            <h2>{{ token.name }} {{ token.symbol }}</h2>
-            <div v-if="token.verified.length > 0">
+            <h2>{{ namespace.name }} {{ namespace.symbol }}</h2>
+            <div v-if="namespace.verified.length > 0">
               <Avatar
-                v-for="verified in token.verified.slice(0, 5)"
+                v-for="verified in namespace.verified.slice(0, 5)"
                 :key="verified"
                 :address="verified"
                 :title="verified"
                 size="16"
                 class="ml-2"
               />
               <Icon name="check" size="22" class="v-align-middle ml-2 mr-1" />
-              {{ $n(token.verified.length) }}
+              {{ $n(namespace.verified.length) }}
             </div>
           </div>
         </Block>
@@ -33,13 +33,13 @@
 </template>
 
 <script>
-import tokens from '@/namespaces.json';
+import namespaces from '@/namespaces.json';
 
 export default {
   data() {
     return {
-      tokens: Object.fromEntries(
-        Object.entries(tokens).filter(token => token[1].visible)
+      namespaces: Object.fromEntries(
+        Object.entries(namespaces).filter(namespace => namespace[1].visible)
       )
     };
   }

diff --git a/src/views/Proposal.vue b/src/views/Proposal.vue
@@ -41,7 +41,11 @@
               Vote
             </UiButton>
           </Block>
-          <BlockVotes :token="namespace" :proposal="proposal" :votes="votes" />
+          <BlockVotes
+            :namespace="namespace"
+            :proposal="proposal"
+            :votes="votes"
+          />
         </div>
         <div class="col-12 col-lg-4 float-left">
           <Block title="Informations">
@@ -99,49 +103,19 @@
               </div>
             </div>
           </Block>
-          <Block :title="ts >= payload.end ? 'Results' : 'Current results'">
-            <div v-for="(choice, i) in payload.choices" :key="i">
-              <div class="text-white mb-1">
-                <span v-text="choice" class="mr-1" />
-                <span v-if="results.totalBalances[i]" class="mr-1">
-                  {{ _numeral(results.totalBalances[i].toFixed(0)) }}
-                  {{ namespace.symbol || _shorten(namespace.token) }}
-                </span>
-                <span
-                  class="float-right"
-                  v-text="
-                    $n(
-                      !results.totalVotesBalances
-                        ? 0
-                        : ((100 / results.totalVotesBalances) *
-                            results.totalBalances[i]) /
-                            1e2,
-                      'percent'
-                    )
-                  "
-                />
-              </div>
-              <UiProgress
-                :value="results.totalBalances[i]"
-                :max="results.totalVotesBalances"
-                class="mb-3"
-              />
-            </div>
-            <UiButton
-              @click="downloadReport"
-              v-if="ts >= payload.end"
-              class="width-full mt-2"
-            >
-              Download report
-            </UiButton>
-          </Block>
+          <BlockResults
+            :namespace="namespace"
+            :payload="payload"
+            :results="results"
+            :votes="votes"
+          />
         </div>
       </div>
       <ModalConfirm
         :open="modalOpen"
         @close="modalOpen = false"
         @reload="loadProposal"
-        :token="namespace"
+        :namespace="namespace"
         :proposal="proposal"
         :id="id"
         :selectedChoice="selectedChoice"
@@ -157,9 +131,7 @@
 
 <script>
 import { mapActions } from 'vuex';
-import * as jsonexport from 'jsonexport/dist';
 import namespaces from '@/namespaces.json';
-import pkg from '@/../package.json';
 
 export default {
   data() {
@@ -211,33 +183,6 @@ export default {
         token: this.namespace.token,
         snapshot
       });
-    },
-    async downloadReport() {
-      const obj = Object.entries(this.votes)
-        .map(vote => {
-          return {
-            address: vote[0],
-            choice: vote[1].msg.payload.choice,
-            balance: vote[1].balance,
-            timestamp: vote[1].msg.timestamp,
-            dateUtc: new Date(
-              parseInt(vote[1].msg.timestamp) * 1e3
-            ).toUTCString(),
-            authorIpfsHash: vote[1].authorIpfsHash,
-            relayerIpfsHash: vote[1].relayerIpfsHash
-          };
-        })
-        .sort((a, b) => a.timestamp - b.timestamp, 0);
-      try {
-        const csv = await jsonexport(obj);
-        const link = document.createElement('a');
-        link.setAttribute('href', `data:text/csv;charset=utf-8,${csv}`);
-        link.setAttribute('download', `${pkg.name}-report-${this.id}.csv`);
-        document.body.appendChild(link);
-        link.click();
-      } catch (e) {
-        console.error(e);
-      }
     }
   },
   async created() {