feat: Wiring chain data to proposal page

src/components/ui/SimpleBadge.vue

@@ -12,7 +12,7 @@ const colorClasses = computed(() => {
     case ContextTypes.SUCCESS:
       return "";
     case ContextTypes.FAIL:
-      return "";
+      return "bg-badge-fail text-neg-200";
     case ContextTypes.PLAIN:
     default:
       return "bg-badge-plain text-light";

src/composables/queries.ts

@@ -2,6 +2,9 @@ import {
   BalanceDocument,
   BalanceQuery,
   BalanceQueryVariables,
+  ParamsDocument,
+  ParamsQuery,
+  ParamsQueryVariables,
   ProposalDocument,
   ProposalQuery,
   ProposalQueryVariables,
@@ -11,6 +14,9 @@ import {
   ProposalsDocument,
   ProposalsQuery,
   ProposalsQueryVariables,
+  StakingDocument,
+  StakingQuery,
+  StakingQueryVariables,
   VoteHistoryDocument,
   VoteHistoryQuery,
   VoteHistoryQueryVariables,
@@ -36,6 +42,14 @@ export const useProposalsQuery = (options?: UseQueryOptions<ProposalsQuery, Prop
   return useQuery<ProposalsQuery, ProposalsQueryVariables>(ProposalsDocument, {}, options ?? {});
 };
 
+export const useParamsQuery = (options?: UseQueryOptions<ParamsQuery, ParamsQueryVariables>) => {
+  return useQuery<ParamsQuery, ParamsQueryVariables>(ParamsDocument, {}, options ?? {});
+};
+
+export const useStakingQuery = (options?: UseQueryOptions<StakingQuery, StakingQueryVariables>) => {
+  return useQuery<StakingQuery, StakingQueryVariables>(StakingDocument, {}, options ?? {});
+};
+
 export const useVoteHistoryQuery = (
   variables: VoteHistoryQueryVariables,
   options?: UseQueryOptions<VoteHistoryQuery, VoteHistoryQueryVariables>,

src/composables/useChainData.ts

@@ -1,8 +1,10 @@
 import {
   useBalanceQuery,
+  useParamsQuery,
   useProposalQuery,
   useProposalTalliesQuery,
   useProposalsQuery,
+  useStakingQuery,
   useVoteHistoryQuery,
 } from "./queries";
 
@@ -19,6 +21,14 @@ export const useChainData = () => {
     const { result } = useProposalQuery({ id: proposal_id }, { pollInterval: 5000 });
     return result;
   };
+  const getParams = () => {
+    const { result } = useParamsQuery();
+    return result;
+  };
+  const getStakingStatus = () => {
+    const { result } = useStakingQuery();
+    return result;
+  };
   const getVoteHistory = (address: string) => {
     const { result } = useVoteHistoryQuery({ address });
     return result;
@@ -27,5 +37,5 @@ export const useChainData = () => {
     const { result } = useProposalTalliesQuery({ id: proposal_id }, { pollInterval: 5000 });
     return result;
   };
-  return { getBalance, getProposals, getProposal, getVoteHistory, getProposalTallies };
+  return { getBalance, getProposals, getProposal, getParams, getVoteHistory, getProposalTallies, getStakingStatus };
 };

src/gql/gql.ts

@@ -14,9 +14,11 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 const documents = {
     "query Balance($address: String!) {\n  action_account_balance(address: $address) {\n    coins\n  }\n}": types.BalanceDocument,
+    "query Params {\n  gov_params {\n    tally_params\n    deposit_params\n    voting_params\n  }\n}": types.ParamsDocument,
     "query Proposal($id: Int!) {\n  proposal(where: {id: {_eq: $id}}) {\n    content\n    deposit_end_time\n    description\n    proposal_route\n    proposal_type\n    proposal_votes {\n      voter_address\n      option\n    }\n    id\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n    proposal_tally_results {\n      yes\n      no_with_veto\n      no\n      abstain\n    }\n  }\n}": types.ProposalDocument,
     "query ProposalTallies($id: Int!) {\n  proposal_tally_result(where: {proposal_id: {_eq: $id}}) {\n    height\n    no\n    no_with_veto\n    abstain\n    yes\n    proposal_id\n  }\n}": types.ProposalTalliesDocument,
     "query Proposals {\n  deposit_proposals: proposal(\n    where: {status: {_eq: \"PROPOSAL_STATUS_DEPOSIT_PERIOD\"}, proposal_deposits: {}}\n  ) {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n  voting_proposals: proposal(\n    where: {status: {_eq: \"PROPOSAL_STATUS_VOTING_PERIOD\"}}\n  ) {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n  all_proposals: proposal {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n}": types.ProposalsDocument,
+    "query Staking {\n  staking_pool {\n    bonded_tokens\n    height\n    not_bonded_tokens\n    staked_not_bonded_tokens\n    unbonding_tokens\n  }\n}": types.StakingDocument,
     "query VoteHistory($address: String!) {\n  proposal_vote(where: {voter_address: {_eq: $address}}) {\n    option\n    voter_address\n    proposal_id\n  }\n}": types.VoteHistoryDocument,
 };
 
@@ -38,6 +40,10 @@ export function graphql(source: string): unknown;
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "query Balance($address: String!) {\n  action_account_balance(address: $address) {\n    coins\n  }\n}"): (typeof documents)["query Balance($address: String!) {\n  action_account_balance(address: $address) {\n    coins\n  }\n}"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "query Params {\n  gov_params {\n    tally_params\n    deposit_params\n    voting_params\n  }\n}"): (typeof documents)["query Params {\n  gov_params {\n    tally_params\n    deposit_params\n    voting_params\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -50,6 +56,10 @@ export function graphql(source: "query ProposalTallies($id: Int!) {\n  proposal_
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "query Proposals {\n  deposit_proposals: proposal(\n    where: {status: {_eq: \"PROPOSAL_STATUS_DEPOSIT_PERIOD\"}, proposal_deposits: {}}\n  ) {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n  voting_proposals: proposal(\n    where: {status: {_eq: \"PROPOSAL_STATUS_VOTING_PERIOD\"}}\n  ) {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n  all_proposals: proposal {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n}"): (typeof documents)["query Proposals {\n  deposit_proposals: proposal(\n    where: {status: {_eq: \"PROPOSAL_STATUS_DEPOSIT_PERIOD\"}, proposal_deposits: {}}\n  ) {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n  voting_proposals: proposal(\n    where: {status: {_eq: \"PROPOSAL_STATUS_VOTING_PERIOD\"}}\n  ) {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n  all_proposals: proposal {\n    content\n    deposit_end_time\n    description\n    id\n    proposal_type\n    proposal_deposits {\n      amount\n      depositor_address\n    }\n    proposal_votes_aggregate(distinct_on: voter_address) {\n      aggregate {\n        count\n      }\n    }\n    proposer_address\n    status\n    submit_time\n    title\n    voting_end_time\n    voting_start_time\n  }\n}"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "query Staking {\n  staking_pool {\n    bonded_tokens\n    height\n    not_bonded_tokens\n    staked_not_bonded_tokens\n    unbonding_tokens\n  }\n}"): (typeof documents)["query Staking {\n  staking_pool {\n    bonded_tokens\n    height\n    not_bonded_tokens\n    staked_not_bonded_tokens\n    unbonding_tokens\n  }\n}"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */