feat: add network proposal votes

apps/ledger/app/[chainId]/proposals/[id]/page.tsx

@@ -1,6 +1,7 @@
 import { Metadata } from 'next'
 
 import Proposal from '@components/network/Proposal'
+import ProposalVotes from '@components/network/ProposalVotes'
 
 import styles from './page.module.css'
 
@@ -12,6 +13,8 @@ const ProposalPage = () => (
   <div className={styles.page}>
     <h1>{'network proposal'}</h1>
     <Proposal />
+    <h1>{'proposal votes'}</h1>
+    <ProposalVotes />
   </div>
 )
 

apps/ledger/components/network/ProposalVotes.module.css

@@ -0,0 +1,11 @@
+.box {
+  composes: box from 'chora/styles/box.css';
+}
+
+.boxItem {
+  composes: box-item from 'chora/styles/box.css';
+}
+
+.boxText {
+  composes: box-text from 'chora/styles/box.css';
+}

apps/ledger/components/network/ProposalVotes.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { Result } from 'chora/components'
+import { PaginationNav } from 'chora/components/tables'
+import { WalletContext } from 'chora/contexts'
+import { useParams } from 'next/navigation'
+import { useContext, useState } from 'react'
+
+import { useProposalVotes } from '@hooks/useProposalVotes'
+
+import styles from './ProposalVotes.module.css'
+
+const ProposalVotes = () => {
+  const { id } = useParams()
+
+  const { chainInfo } = useContext(WalletContext)
+
+  const limit = 5
+
+  const [offset, setOffset] = useState(0)
+
+  // fetch proposal votes from selected network
+  const [votes, votesError] = useProposalVotes(
+    chainInfo,
+    id.toString(),
+    limit,
+    offset,
+  )
+
+  return (
+    <div className={styles.box}>
+      {votes && votes.length > 0 && (
+        <>
+          {votes.map((vote: any, i: number) => (
+            <div key={i} className={styles.boxItem}>
+              <div className={styles.boxText}>
+                <h3>{'voter'}</h3>
+                <p>{vote.voter}</p>
+              </div>
+              <div className={styles.boxText}>
+                <h3>{'option'}</h3>
+                <p>{vote.options[0].option}</p>
+              </div>
+              <div className={styles.boxText}>
+                <h3>{'metadata'}</h3>
+                <p>{vote.metadata || 'NA'}</p>
+              </div>
+            </div>
+          ))}
+          {limit && (
+            <PaginationNav
+              length={votes ? votes.length : 0}
+              limit={limit}
+              offset={offset}
+              setOffset={setOffset}
+            />
+          )}
+        </>
+      )}
+      <Result error={votesError} />
+    </div>
+  )
+}
+
+export default ProposalVotes

apps/ledger/hooks/useProposalVotes.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+
+const queryProposals = 'cosmos/gov/v1/proposals'
+
+// fetch proposal votes by proposal id from selected network
+export const useProposalVotes = (
+  chainInfo: any,
+  proposalId: string,
+  limit: number,
+  offset: number,
+) => {
+  // fetch error and results
+  const [error, setError] = useState<string | null>(null)
+  const [votes, setVotes] = useState<any>(null)
+
+  // reset state on param change
+  useEffect(() => {
+    setError(null)
+    setVotes(null)
+  }, [chainInfo?.rest, proposalId, limit, offset])
+
+  // fetch on load and param change
+  useEffect(() => {
+    // fetch proposal votes from selected network
+    const fetchProposalVotes = async () => {
+      const queryParams = `?pagination.limit=${limit}&pagination.offset=${offset}`
+
+      // fetch proposal votes by proposal id from selected network
+      await fetch(
+        chainInfo.rest +
+          '/' +
+          queryProposals +
+          '/' +
+          proposalId +
+          '/votes' +
+          queryParams,
+      )
+        .then((res) => res.json())
+        .then((res) => {
+          if (res.code) {
+            setError(res.message)
+          } else {
+            setVotes(res.votes)
+          }
+        })
+    }
+
+    // only fetch if params available
+    if (chainInfo?.rest && proposalId) {
+      fetchProposalVotes().catch((err) => {
+        setError(err.message)
+      })
+    }
+  }, [chainInfo?.rest, proposalId, limit, offset])
+
+  return [votes, error]
+}