Enable governance section for Astar (#1418)

* docs: update zh translation from #1385 (#1413) * docs: update zh translation * fix format issue * remove useless import --------- Co-authored-by: coin98team002 <[email protected]> * Enable governance section on Astar --------- Co-authored-by: Taegeon Alan Go <[email protected]> Co-authored-by: coin98team002 <[email protected]>
AstarNetwork · Dec 2, 2024 · d46dbce · d46dbce
1 parent bbbde12
commit d46dbce
Show file tree

Hide file tree

Showing 5 changed files with 1,079 additions and 32 deletions.
diff --git a/src/components/governance/GovernanceLink.vue b/src/components/governance/GovernanceLink.vue
@@ -10,10 +10,6 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   props: {
-    index: {
-      type: Number,
-      required: true,
-    },
     title: {
       type: String,
       required: true,

diff --git a/src/components/governance/GovernanceLinks.vue b/src/components/governance/GovernanceLinks.vue
@@ -3,18 +3,20 @@
     <div class="header"><astar-icon-governance />{{ $t('governance.newProposals') }}</div>
     <hr class="separator" />
     <div class="governance-container">
-      <div v-for="proposal in proposals" :key="proposal.index">
+      <div v-if="!hasProposals">
+        <governance-link
+          :title="$t('governance.noProposals')"
+          :url="`${governanceUrl}/democracy/proposals`"
+        />
+      </div>
+      <div v-for="proposal in proposals" v-else :key="proposal.index">
         <governance-link :index="proposal.index" :title="proposal.title" :url="proposal.url" />
       </div>
     </div>
     <div v-if="ongoingReferenda" class="governance-container">
       <div class="header"><astar-icon-governance />{{ $t('governance.ongoingReferenda') }}</div>
       <hr class="separator" />
-      <governance-link
-        :index="ongoingReferenda.index"
-        :title="ongoingReferenda.title"
-        :url="ongoingReferenda.url"
-      />
+      <governance-link :title="ongoingReferenda.title" :url="ongoingReferenda.url" />
     </div>
   </div>
 </template>
@@ -27,9 +29,10 @@ import GovernanceLink from './GovernanceLink.vue';
 export default defineComponent({
   components: { GovernanceLink },
   setup() {
-    const { isGovernanceEnabled, proposals, ongoingReferenda } = useGovernance();
+    const { isGovernanceEnabled, proposals, ongoingReferenda, hasProposals, governanceUrl } =
+      useGovernance();
 
-    return { isGovernanceEnabled, proposals, ongoingReferenda };
+    return { isGovernanceEnabled, proposals, ongoingReferenda, hasProposals, governanceUrl };
   },
 });
 </script>

diff --git a/src/hooks/useGovernance.ts b/src/hooks/useGovernance.ts
@@ -1,6 +1,7 @@
 import { computed, ref, onMounted } from 'vue';
 import { useNetworkInfo } from './useNetworkInfo';
 import axios from 'axios';
+import { endpointKey } from 'src/config/chainEndpoints';
 
 export type GovernanceData = {
   title: string;
@@ -11,6 +12,7 @@ export type GovernanceData = {
 
 const proposals = ref<GovernanceData[]>([]);
 const ongoingReferenda = ref<GovernanceData>();
+const hasProposals = computed<boolean>(() => proposals.value.length > 0);
 
 const fetchProposals = async (network: string): Promise<GovernanceData[]> => {
   try {
@@ -51,7 +53,7 @@ const fetchOngoingReferenda = async (network: string): Promise<GovernanceData |
           return <GovernanceData>{
             title: referenda.title,
             index: referenda.referendumIndex,
-            state: referenda.referendumState.state,
+            state: referenda.referendumState?.state ?? 'Unknown',
             url: `https://${network}.subsquare.io/democracy/referenda/${referenda.referendumIndex}`,
           };
         }
@@ -67,14 +69,17 @@ const fetchOngoingReferenda = async (network: string): Promise<GovernanceData |
 };
 
 export function useGovernance() {
-  const { networkNameSubstrate } = useNetworkInfo();
+  const { currentNetworkIdx, networkNameSubstrate } = useNetworkInfo();
 
   const networkLowercase = computed<string>(() => {
     return networkNameSubstrate.value.toLowerCase();
   });
 
   const isGovernanceEnabled = computed<boolean>(() => {
-    return networkLowercase.value === 'shibuya';
+    return (
+      currentNetworkIdx.value === endpointKey.ASTAR ||
+      currentNetworkIdx.value === endpointKey.SHIBUYA
+    );
   });
 
   const governanceUrl = computed<string>(() => {
@@ -98,5 +103,6 @@ export function useGovernance() {
     proposals,
     ongoingReferenda,
     governanceUrl,
+    hasProposals,
   };
 }
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -1138,5 +1138,6 @@ export default {
   governance: {
     newProposals: 'New proposals',
     ongoingReferenda: 'Ongoing referenda',
+    noProposals: 'No proposals at this time. Visit Subsquare to create a new one.',
   },
 };