feat: historical proposals

.env.local.example

@@ -1,3 +1,4 @@
 VITE_LOCAL_HOSTNAME=http://127.0.0.1
 VITE_PROXY_URL_REGEN_MAINNET=http://api.registry.regen.network
 VITE_PROXY_URL_REGEN_TESTNET=http://api-staging.registry.regen.network
+VITE_INDEXER_GRAPHQL_API=http://localhost:5000/indexer/graphql

.eslintignore

@@ -3,4 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
-node_modules/*
+node_modules/*
+src/gql/*

.prettierignore

@@ -3,4 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
-node_modules/*
+node_modules/*
+src/gql/

indexer-codegen.ts

@@ -0,0 +1,15 @@
+import { CodegenConfig } from '@graphql-codegen/cli'
+
+const config: CodegenConfig = {
+  overwrite: true,
+  schema: 'http://localhost:5000/indexer/graphql',
+  documents: ['src/graphql/indexer/**/*.graphql'],
+  generates: {
+    './src/gql/': {
+      preset: 'client',
+      presetConfig: { fragmentMasking: { unmaskFunctionName: 'getFragmentData' } },
+    },
+  },
+}
+
+export default config

netlify.toml

@@ -1,3 +1,9 @@
+[context.production.environment]
+  VITE_INDEXER_GRAPHQL_API="https://api.registry.regen.network/indexer/graphql"
+
+[context.deploy-preview.environment]
+  VITE_INDEXER_GRAPHQL_API="https://api-staging.registry.regen.network/indexer/graphql"
+
 [[redirects]]
   from = "/*"
   to = "/index.html"

package.json

@@ -6,7 +6,7 @@
     "build": "tsc && vite build",
     "serve": "vite preview",
     "gen:theme-typings": "chakra-cli tokens ./src/theme",
-    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --fix --ignore-path ./.gitignore",
+    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --fix --ignore-path ./.gitignore --ignore-path ./.eslintignore",
     "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
     "lint": "yarn lint:format && yarn lint:fix ",
     "test": "yarn vitest",
@@ -38,6 +38,8 @@
     "chart.js": "^4.3.0",
     "dayjs": "^1.11.8",
     "framer-motion": "^10.12.8",
+    "graphql": "^16.7.1",
+    "graphql-request": "^5.0.0",
     "ipfs-http-client": "^60.0.0",
     "jotai": "^2.1.1",
     "react": "^18.2.0",
@@ -55,6 +57,8 @@
     "@babel/core": "^7.21.8",
     "@chakra-ui/cli": "^2.4.1",
     "@chakra-ui/storybook-addon": "^4.0.17",
+    "@graphql-codegen/cli": "^4.0.1",
+    "@graphql-codegen/client-preset": "^4.0.1",
     "@keplr-wallet/types": "^0.11.59",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-essentials": "^7.0.18",
@@ -87,8 +91,9 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "storybook": "^7.0.18",
     "storybook-addon-react-router-v6": "^1.0.2",
+    "ts-node": "^10.9.1",
     "ts-proto": "^1.148.2",
-    "typescript": "^5.1.3",
+    "typescript": "^5.1.6",
     "vite": "4.2.3",
     "vite-plugin-checker": "^0.6.0",
     "vite-plugin-fonts": "^0.7.0",

src/components/organisms/group-proposals-table.tsx

@@ -114,6 +114,9 @@ export const GroupProposalsTable = ({
     const baseProps = { key, proposal }
     switch (proposal.status) {
       case ProposalStatus.PROPOSAL_STATUS_ACCEPTED:
+        if (proposal.historical) {
+          return <Row {...baseProps} />
+        }
         return <ExecuteRow {...baseProps} onExecute={onExecute} />
       default:
         return <Row {...baseProps} />

src/components/organisms/proposal-final-tally-table.tsx

@@ -0,0 +1,34 @@
+import { TallyResult } from '@regen-network/api/types/codegen/cosmos/group/v1/types'
+
+import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@/atoms'
+import { TableTitlebar } from '@/molecules/table-titlebar'
+
+export const ProposalFinalTallyTable = ({
+  finalTallyResult,
+}: {
+  finalTallyResult: TallyResult
+}) => {
+  return (
+    <TableContainer>
+      <TableTitlebar title="Final Tally Results" />
+      <Table variant="striped" size="lg">
+        <Thead>
+          <Tr>
+            <Th>Yes</Th>
+            <Th>No</Th>
+            <Th>Abstain</Th>
+            <Th>No with veto</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>{finalTallyResult.yesCount}</Td>
+            <Td>{finalTallyResult.noCount}</Td>
+            <Td>{finalTallyResult.abstainCount}</Td>
+            <Td>{finalTallyResult.noWithVetoCount}</Td>
+          </Tr>
+        </Tbody>
+      </Table>
+    </TableContainer>
+  )
+}

src/components/organisms/proposal-summary.tsx

@@ -38,7 +38,7 @@ export const ProposalSummary = ({
   votes,
 }: {
   group: UIGroup
-  onVote: (option: VoteOptionType) => void
+  onVote?: (option: VoteOptionType) => void
   proposal: UIProposal
   userVote?: Vote
   votes?: Vote[]
@@ -114,6 +114,7 @@ function renderMessage(msg: any, groupPolicyAddress: string) {
     case '/cosmos.bank.v1beta1.MsgSend':
       return (
         <SendReview
+          key={groupPolicyAddress}
           groupPolicyAddress={groupPolicyAddress}
           values={
             {
@@ -129,6 +130,7 @@ function renderMessage(msg: any, groupPolicyAddress: string) {
     case '/cosmos.staking.v1beta1.MsgDelegate':
       return (
         <StakeReview
+          key={groupPolicyAddress}
           groupPolicyAddress={groupPolicyAddress}
           values={
             {
@@ -143,6 +145,7 @@ function renderMessage(msg: any, groupPolicyAddress: string) {
     case '/cosmos.staking.v1beta1.MsgBeginRedelegate':
       return (
         <StakeReview
+          key={groupPolicyAddress}
           groupPolicyAddress={groupPolicyAddress}
           values={
             {
@@ -157,6 +160,7 @@ function renderMessage(msg: any, groupPolicyAddress: string) {
     case '/cosmos.staking.v1beta1.MsgUndelegate':
       return (
         <StakeReview
+          key={groupPolicyAddress}
           groupPolicyAddress={groupPolicyAddress}
           values={
             {
@@ -171,6 +175,7 @@ function renderMessage(msg: any, groupPolicyAddress: string) {
     case '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward':
       return (
         <StakeReview
+          key={groupPolicyAddress}
           groupPolicyAddress={groupPolicyAddress}
           values={
             {
@@ -182,6 +187,6 @@ function renderMessage(msg: any, groupPolicyAddress: string) {
         />
       )
     default:
-      return <JSONDisplay data={msg} />
+      return <JSONDisplay key={groupPolicyAddress} data={msg} />
   }
 }

src/gql/fragment-masking.ts

@@ -0,0 +1,66 @@
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function getFragmentData<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function getFragmentData<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function getFragmentData<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function getFragmentData<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function getFragmentData<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}

src/gql/gql.ts

@@ -0,0 +1,52 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "fragment ProposalItem on Proposal {\n  type\n  blockHeight\n  txIdx\n  msgIdx\n  chainNum\n  timestamp\n  txHash\n  id: proposalId\n  status\n  groupPolicyAddress\n  groupPolicyVersion\n  metadata\n  proposers\n  submitTime\n  groupVersion\n  groupPolicyAddress\n  finalTallyResult\n  votingPeriodEnd\n  executorResult\n  messages\n}": types.ProposalItemFragmentDoc,
+    "query ProposalsByGroupPolicyAddress($groupPolicyAddress: String!) {\n  allProposals(condition: {groupPolicyAddress: $groupPolicyAddress}) {\n    nodes {\n      ...ProposalItem\n    }\n  }\n}": types.ProposalsByGroupPolicyAddressDocument,
+    "query ProposalsByProposalId($proposalId: BigInt!) {\n  allProposals(condition: {proposalId: $proposalId}) {\n    nodes {\n      ...ProposalItem\n    }\n  }\n}": types.ProposalsByProposalIdDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+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: "fragment ProposalItem on Proposal {\n  type\n  blockHeight\n  txIdx\n  msgIdx\n  chainNum\n  timestamp\n  txHash\n  id: proposalId\n  status\n  groupPolicyAddress\n  groupPolicyVersion\n  metadata\n  proposers\n  submitTime\n  groupVersion\n  groupPolicyAddress\n  finalTallyResult\n  votingPeriodEnd\n  executorResult\n  messages\n}"): (typeof documents)["fragment ProposalItem on Proposal {\n  type\n  blockHeight\n  txIdx\n  msgIdx\n  chainNum\n  timestamp\n  txHash\n  id: proposalId\n  status\n  groupPolicyAddress\n  groupPolicyVersion\n  metadata\n  proposers\n  submitTime\n  groupVersion\n  groupPolicyAddress\n  finalTallyResult\n  votingPeriodEnd\n  executorResult\n  messages\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 ProposalsByGroupPolicyAddress($groupPolicyAddress: String!) {\n  allProposals(condition: {groupPolicyAddress: $groupPolicyAddress}) {\n    nodes {\n      ...ProposalItem\n    }\n  }\n}"): (typeof documents)["query ProposalsByGroupPolicyAddress($groupPolicyAddress: String!) {\n  allProposals(condition: {groupPolicyAddress: $groupPolicyAddress}) {\n    nodes {\n      ...ProposalItem\n    }\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 ProposalsByProposalId($proposalId: BigInt!) {\n  allProposals(condition: {proposalId: $proposalId}) {\n    nodes {\n      ...ProposalItem\n    }\n  }\n}"): (typeof documents)["query ProposalsByProposalId($proposalId: BigInt!) {\n  allProposals(condition: {proposalId: $proposalId}) {\n    nodes {\n      ...ProposalItem\n    }\n  }\n}"];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;