Add BP Votes Tab to Account Page

src/components/BpVotes.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, defineProps, onMounted } from 'vue';
+import { getHyperionAccountData } from 'src/api/hyperion';
+
+const  props = defineProps({
+    account: {
+        type: String,
+        required: true,
+    },
+});
+
+const bpVotes = ref([]);
+onMounted(async () => {
+    try {
+        const {
+            account: {
+                voter_info: { producers },
+            },
+        } = await getHyperionAccountData(props.account);
+        bpVotes.value = producers;
+    } catch(e) {
+        console.error(e);
+    }
+});
+</script>
+
+<template>
+<div
+    class="row col-12 q-my-xs justify-center text-left container-max-width"
+>
+    <div class="row col-11">
+        <div class="row col-12 q-mt-lg">
+            <div>
+                <p class="panel-title">Votes for Block Producers</p>
+            </div>
+            <q-space />
+        </div>
+        <q-separator class="row col-12 q-mt-md separator" />
+        <div class="info-wrap">
+            <div class="row voted-producers q-pa-md">
+                <p>Currently voting for the {{ bpVotes.length }} out of 30 possible block producers:</p>
+                <div v-if="bpVotes.length" class="producers-list">
+                    <span
+                        v-for="producer in bpVotes"
+                        v-bind:key="producer"
+                        class="producer-name"
+                    >
+                        <a :href="`/account/${producer}`">{{ producer }}</a>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<style lang="scss">
+.info-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    @media (min-width: $breakpoint-sm-min) {
+        flex-direction: row-reverse;
+        align-items: flex-start;
+    }
+
+    .vote-fraction-wrap {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .bp-vote-circle {
+            color: var(--q-primary);
+        }
+
+        @media (min-width: $breakpoint-sm-min) {
+            border-left: 1px solid var(--q-color-seperator-background);
+        }
+    }
+
+    .voted-producers {
+        display: block;
+        width: 100%;
+
+        p {
+            margin-bottom: 20px;
+            width: 100%;
+            display: none;
+
+            @media (min-width: $breakpoint-sm-min) {
+                display: block;
+            }
+        }
+
+        .producers-list {
+            width: 100%;
+            /* make grid with column width 100px and 20px margin */
+            display: inline-grid;
+            grid-template-columns: repeat(auto-fill, 100px);
+            grid-gap: 20px;
+
+            .producer-name {
+                width: 100px;
+                margin-right: 20px;
+
+                a {
+                    text-decoration: none;
+                    color: var(--q-primary);
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/Account.vue

@@ -6,6 +6,7 @@ import KeysPanel from 'components/KeysPanel.vue';
 import ChildrenPanel from 'components/ChildrenPanel.vue';
 import AccountCard from 'components/AccountCard.vue';
 import ContractTabs from 'components/contract/ContractTabs.vue';
+import BpVotes from 'components/BpVotes.vue';
 import { api } from 'src/api';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'src/store';
@@ -20,6 +21,7 @@ export default defineComponent({
         ChildrenPanel,
         AccountCard,
         ContractTabs,
+        BpVotes,
     },
     setup() {
         const store = useStore();
@@ -67,6 +69,7 @@ export default defineComponent({
             <q-tab v-if="!accountPageSettings.hideContractsTab && abi" name="contract" label="Contract"/>
             <q-tab v-if="!accountPageSettings.hideTokensTab" name="tokens" label="Tokens"/>
             <q-tab v-if="!accountPageSettings.hideKeysTab" name="keys" label="Keys"/>
+            <q-tab name="votes" label="Votes"/>
             <q-tab v-if="!accountPageSettings.hideChildrenTab" name="children" label="Children"/>
         </q-tabs>
     </div>
@@ -83,6 +86,9 @@ export default defineComponent({
         <q-tab-panel v-if="!accountPageSettings.hideKeysTab" name="keys">
             <KeysPanel :account="account"/>
         </q-tab-panel>
+        <q-tab-panel name="votes">
+            <BpVotes :account="account"/>
+        </q-tab-panel>
         <q-tab-panel v-if="!accountPageSettings.hideChildrenTab" name="children">
             <ChildrenPanel :account="account"/>
         </q-tab-panel>