Merge pull request #354 from ourzora/proposal-number-nav

Update proposal page to work with proposal numbers

Author: neokry

apps/web/src/data/subgraph/queries/proposalOGMetadata.graphql

@@ -1,6 +1,9 @@
-query proposalOGMetadata($proposalId: ID!) {
-  proposal(id: $proposalId) {
+query proposalOGMetadata($where: Proposal_filter!, $first: Int!) {
+  proposals(where: $where, first: $first) {
     ...Proposal
+    votes {
+      ...ProposalVote
+    }
     dao {
       name
       contractImage

apps/web/src/data/subgraph/requests/proposalQuery.ts

@@ -7,8 +7,6 @@ import {
 import { SDK } from 'src/data/subgraph/client'
 import {
   ProposalFragment,
-  ProposalOgMetadataQuery,
-  ProposalQuery,
   ProposalVoteFragment as ProposalVote,
 } from 'src/data/subgraph/sdk.generated'
 import { CHAIN_ID } from 'src/typings'
@@ -22,14 +20,8 @@ export interface Proposal
   votes?: ProposalVote[]
 }
 
-export type ProposalQueryLike = ProposalQuery | ProposalOgMetadataQuery
-
-export const formatAndFetchState = async (chainId: CHAIN_ID, data: ProposalQueryLike) => {
-  if (!data?.proposal) {
-    return undefined
-  }
-
-  const { executableFrom, expiresAt, calldatas, ...proposal } = data?.proposal
+export const formatAndFetchState = async (chainId: CHAIN_ID, data: ProposalFragment) => {
+  const { executableFrom, expiresAt, calldatas, ...proposal } = data
 
   const baseProposal = {
     ...proposal,
@@ -61,7 +53,7 @@ export const getProposal = async (
       proposalId,
     })
 
-    return await formatAndFetchState(chainId, data)
+    return await formatAndFetchState(chainId, data.proposal!)
   } catch (e) {
     console.log('err', e)
     Sentry.captureException(e)

apps/web/src/data/subgraph/sdk.generated.ts

@@ -2118,12 +2118,13 @@ export type ProposalQuery = {
 }
 
 export type ProposalOgMetadataQueryVariables = Exact<{
-  proposalId: Scalars['ID']
+  where: Proposal_Filter
+  first: Scalars['Int']
 }>
 
 export type ProposalOgMetadataQuery = {
   __typename?: 'Query'
-  proposal?: {
+  proposals: Array<{
     __typename?: 'Proposal'
     abstainVotes: number
     againstVotes: number
@@ -2146,6 +2147,13 @@ export type ProposalOgMetadataQuery = {
     voteStart: any
     snapshotBlockNumber: any
     transactionHash: any
+    votes: Array<{
+      __typename?: 'ProposalVote'
+      voter: any
+      support: ProposalVoteSupport
+      weight: number
+      reason?: string | null
+    }>
     dao: {
       __typename?: 'DAO'
       name: string
@@ -2156,7 +2164,7 @@ export type ProposalOgMetadataQuery = {
       treasuryAddress: any
       governorAddress: any
     }
-  } | null
+  }>
 }
 
 export type ProposalsQueryVariables = Exact<{
@@ -2514,9 +2522,12 @@ export const ProposalDocument = gql`
   ${ProposalVoteFragmentDoc}
 `
 export const ProposalOgMetadataDocument = gql`
-  query proposalOGMetadata($proposalId: ID!) {
-    proposal(id: $proposalId) {
+  query proposalOGMetadata($where: Proposal_filter!, $first: Int!) {
+    proposals(where: $where, first: $first) {
       ...Proposal
+      votes {
+        ...ProposalVote
+      }
       dao {
         name
         contractImage
@@ -2529,6 +2540,7 @@ export const ProposalOgMetadataDocument = gql`
     }
   }
   ${ProposalFragmentDoc}
+  ${ProposalVoteFragmentDoc}
 `
 export const ProposalsDocument = gql`
   query proposals($where: Proposal_filter, $first: Int!, $skip: Int) {

apps/web/src/modules/auction/components/AuctionPaused.tsx

@@ -70,7 +70,7 @@ export const AuctionPaused = () => {
         shallow={!pausedProposal?.proposalId}
         href={
           pausedProposal?.proposalId
-            ? `/dao/${query.network}/${query.token}/vote/${pausedProposal?.proposalId}`
+            ? `/dao/${query.network}/${query.token}/vote/${pausedProposal?.proposalNumber}`
             : `/dao/${query.network}/${query.token}?tab=activity`
         }
       >

apps/web/src/modules/proposal/components/ProposalCard.tsx

@@ -41,7 +41,9 @@ export const ProposalCard: React.FC<ProposalCardProps> = ({
   return (
     <Link
       href={
-        collection ? `/dao/${router?.query.network}/${collection}/vote/${proposalId}` : ''
+        collection
+          ? `/dao/${router?.query.network}/${collection}/vote/${proposalNumber}`
+          : ''
       }
       passHref
     >

apps/web/src/pages/dao/[network]/[token]/vote/[id].tsx

@@ -15,6 +15,7 @@ import {
   formatAndFetchState,
   getProposal,
 } from 'src/data/subgraph/requests/proposalQuery'
+import { Proposal_Filter } from 'src/data/subgraph/sdk.generated'
 import { getDaoLayout } from 'src/layouts/DaoLayout'
 import { DaoContractAddresses, SectionHandler } from 'src/modules/dao'
 import {
@@ -107,7 +108,7 @@ export default VotePage
 
 export const getServerSideProps: GetServerSideProps = async ({ params, req, res }) => {
   const collection = params?.token as AddressType
-  const proposalId = params?.id as `0x${string}`
+  const proposalIdOrNumber = params?.id as `0x${string}`
   const network = params?.network as string
 
   const chain = PUBLIC_DEFAULT_CHAINS.find((x) => x.slug === network)
@@ -121,11 +122,22 @@ export const getServerSideProps: GetServerSideProps = async ({ params, req, res
   const env = process.env.VERCEL_ENV || 'development'
   const protocol = env === 'development' ? 'http' : 'https'
 
-  const data = await SDK.connect(chain.id).proposalOGMetadata({
-    proposalId,
-  })
+  let where: Proposal_Filter
 
-  if (!data.proposal) {
+  where = proposalIdOrNumber.startsWith('0x')
+    ? {
+        proposalId: proposalIdOrNumber,
+      }
+    : { proposalNumber: parseInt(proposalIdOrNumber), dao: collection.toLowerCase() }
+
+  const data = await SDK.connect(chain.id)
+    .proposalOGMetadata({
+      where,
+      first: 1,
+    })
+    .then((x) => (x.proposals.length > 0 ? x.proposals[0] : undefined))
+
+  if (!data) {
     return {
       notFound: true,
     }
@@ -156,7 +168,7 @@ export const getServerSideProps: GetServerSideProps = async ({ params, req, res
     governorAddress,
     treasuryAddress,
     auctionAddress,
-  } = data.proposal.dao
+  } = data.dao
 
   const ogMetadata: ProposalOgMetadata = {
     proposal: {
@@ -200,7 +212,7 @@ export const getServerSideProps: GetServerSideProps = async ({ params, req, res
       },
       daoName: name,
       ogImageURL,
-      proposalId,
+      proposalId: proposal.proposalId,
       addresses,
     },
   }