feat: share allocation charts in project cards

ignite-hq · Jun 8, 2022 · 10f2a05 · 10f2a05
1 parent fc87e45
commit 10f2a05
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 48 deletions.
diff --git a/src/components/project/ProjectList/ProjectCard/index.vue b/src/components/project/ProjectList/ProjectCard/index.vue
@@ -9,7 +9,7 @@ import { CampaignCampaignSummary } from 'tendermint-spn-ts-client/tendermint.spn
 import { computed, PropType } from 'vue'
 
 import useGitHubRepository from '~/composables/github/useGitHubRepository'
-import { hasAtLeastOneIncentive, hasAtLeastOneVoucher } from '~/utils/reward'
+import { hasAtLeastOneIncentive } from '~/utils/reward'
 
 import ProjectIncentives from '../../ProjectIncentives.vue'
 import ProjectShareAllocation from '../../ProjectShareAllocation.vue'
@@ -37,19 +37,6 @@ const isLoading = computed(function () {
   return props.loading || isGitHubRepositoryLoading.value
 })
 
-const showAllocation = computed(function () {
-  const campaignSummary = props.campaignSummary
-
-  return (
-    !isLoading.value &&
-    props.campaignSummary?.incentivized &&
-    hasAtLeastOneVoucher(
-      campaignSummary.campaign?.campaignID ?? '',
-      campaignSummary.rewards
-    )
-  )
-})
-
 const showIncentives = computed(function () {
   const campaignSummary = props.campaignSummary
 
@@ -82,7 +69,7 @@ const showIncentives = computed(function () {
           class="project-card__row"
         />
         <ProjectShareAllocation
-          v-if="showAllocation"
+          v-if="campaignSummary?.campaign?.allocatedShares?.length > 0"
           class="project-card__row"
           :campaign-summary="campaignSummary"
         />

diff --git a/src/components/project/ProjectShareAllocation.vue b/src/components/project/ProjectShareAllocation.vue
@@ -1,18 +1,20 @@
 <script lang="ts">
 export default {
-  name: 'ProjectCardShareAllocation'
+  name: 'ProjectShareAllocation'
 }
 </script>
 
 <script setup lang="ts">
-import { CampaignCampaignSummary } from 'tendermint-spn-ts-client/tendermint.spn.campaign/rest'
+import {
+  CampaignCampaignSummary,
+  V1Beta1Coin
+} from 'tendermint-spn-ts-client/tendermint.spn.campaign/rest'
 import { computed } from 'vue'
 
 import IgniteLegend from '~/components/common/IgniteLegend.vue'
 import IgniteProgressBar from '~/components/common/IgniteProgressBar.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
 import { roundToTwoDecimals } from '~/utils/number'
-import { getVouchersFromRewards } from '~/utils/reward'
 import { LegendItem, ProgressBarItem } from '~/utils/types'
 
 interface Props {
@@ -42,35 +44,21 @@ const legend: LegendItem[] = [
 
 // computed
 const totalSupply = computed(() => {
-  const campaignId = props?.campaignSummary?.campaign?.campaignID
-  const vouchers = getVouchersFromRewards(
-    campaignId ?? '',
-    props.campaignSummary.rewards
-  )
+  const shares: V1Beta1Coin[] =
+    props?.campaignSummary?.campaign?.allocatedShares ?? []
 
-  return vouchers.map((coin) => {
-    const denom = coin.denom?.split('/')[2] ?? ''
+  const TOTAL_SUPPLY = 100_000
 
-    const TOTAL_SUPPLY = 100_000
+  return shares.map((share) => {
+    const denom = share.denom?.split('/')[1] ?? ''
 
-    const pastCoin = props.campaignSummary.campaign?.allocatedShares?.find(
-      (coin) => coin.denom === `s/${denom}`
-    )
-    const pastCoinPercentage = (Number(pastCoin?.amount) / TOTAL_SUPPLY) * 100
-
-    const currentValue = (Number(coin.amount) / TOTAL_SUPPLY) * 100
-    const pastValue = Math.abs(currentValue - pastCoinPercentage)
-    const futureValue = Math.abs(currentValue + pastValue - 100)
+    const currentValue = (Number(share.amount) / TOTAL_SUPPLY) * 100
+    const futureValue = Math.abs(currentValue - 100)
 
     return {
-      ...coin,
+      ...share,
       denom,
       items: [
-        {
-          value: roundToTwoDecimals(pastValue).toString(),
-          bgColor: 'bg-secondary',
-          split: true
-        },
         {
           value: roundToTwoDecimals(currentValue).toString(),
           bgColor: 'bg-primary'

diff --git a/src/components/project/project-tabs/ProjectOverviewTab/index.vue b/src/components/project/project-tabs/ProjectOverviewTab/index.vue
@@ -22,6 +22,8 @@ import ProjectRoadmap from './ProjectRoadmap.vue'
 import ProjectTeam from './ProjectTeam/index.vue'
 import ProjectTokenomics from './ProjectTokenomics.vue'
 import ProjectWhitepaper from './ProjectWhitepaper.vue'
+import ProjectShareAllocation from '../../ProjectShareAllocation.vue'
+
 import {
   ProjectMember,
   ProjectMilestone,
@@ -190,6 +192,11 @@ const showLinks = computed(() => {
 <template>
   <div class="space-y-8 pt-8 pb-10 md:space-y-11 md:pt-10.5">
     <ProjectCards />
+    <ProjectShareAllocation
+      v-if="campaignSummary?.campaign?.allocatedShares?.length > 0"
+      class="project-card__row"
+      :campaign-summary="campaignSummary"
+    />
     <ProjectDescription
       v-if="showProjectDescription"
       :raw-markdown="readme"

diff --git a/src/components/project/project-tabs/ProjectValidatorsTab/index.vue b/src/components/project/project-tabs/ProjectValidatorsTab/index.vue
@@ -15,7 +15,7 @@ import IgniteHeading from '~/components/ui/IgniteHeading.vue'
 import IgniteLoader from '~/components/ui/IgniteLoader.vue'
 import IgniteText from '~/components/ui/IgniteText.vue'
 import useCampaignSummary from '~/composables/campaign/useCampaignSummary'
-import { hasAtLeastOneIncentive, hasAtLeastOneVoucher } from '~/utils/reward'
+import { hasAtLeastOneIncentive } from '~/utils/reward'
 
 import ProjectShareAllocation from '../../ProjectShareAllocation.vue'
 import ValidatorList from './ValidatorList.vue'
@@ -27,13 +27,7 @@ const projectId = route.params.projectId.toString() || '0'
 const { campaignSummary, isLoading } = useCampaignSummary(projectId)
 
 const showAllocation = computed(function () {
-  return (
-    campaignSummary?.value?.incentivized &&
-    hasAtLeastOneVoucher(
-      campaignSummary.value?.campaign?.campaignID ?? '',
-      campaignSummary.value?.rewards
-    )
-  )
+  return campaignSummary?.value?.campaign?.allocatedShares?.length > 0
 })
 
 const showIncentives = computed(function () {