BirthdayResearch · kyleleow · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023 · Jan 27, 2023
diff --git a/src/pages/governance/[proposalId]/index.page.tsx b/src/pages/governance/[proposalId]/index.page.tsx
@@ -72,6 +72,8 @@ export default function ProposalDetailPage({
     }
   }, [isChangeVoteClicked]);
 
+  console.log(proposal);
+
   return (
     <>
       <Head title="Proposal Details" />
@@ -320,7 +322,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       id: proposalId,
       masternode: MasternodeType.ALL,
       cycle: proposal.currentCycle,
-      size: 10,
+      size: 1,
       next: next,
     });
     const pages = CursorPagination.getPages(

diff --git a/src/pages/governance/_components/ProposalTable.tsx b/src/pages/governance/_components/ProposalTable.tsx
@@ -15,6 +15,9 @@ import {
   isValidOCGGithubUrl,
   isValidOCGRedditUrl,
 } from "utils/commons/LinkValidator";
+import { PlaygroundRpcClient } from "@defichain/playground-api-client";
+import { newPlaygroundClient } from "@contexts/WhaleContext";
+import { isPlayground } from "@waveshq/walletkit-core";
 import { ProposalDisplayName } from "./ProposalCard";
 import { VoteModal } from "./VoteModal";
 import { useCycleEndDate } from "../shared/useCycleEndTime";
@@ -27,14 +30,36 @@ export function ProposalTable({
   currentBlockHeight,
   currentBlockMedianTime,
   userQueryProposalStatus,
+  masternodeId,
 }: {
   proposals: GovernanceProposal[];
   currentBlockHeight: number;
   currentBlockMedianTime: number;
   userQueryProposalStatus: ListProposalsStatus;
+  masternodeId: string;
 }) {
   const [displayVoteModal, setDisplayVoteModal] = useState(false);
 
+  // TODO: remove testing code
+  const connection = useNetwork().connection;
+  async function voteDummyProposals(
+    proposalId: string,
+    masternodeId: string,
+    vote: string
+  ): Promise<void> {
+    const playgroundRPC = new PlaygroundRpcClient(
+      newPlaygroundClient(connection)
+    );
+    console.log(
+      `Voted proposal: ${proposalId} with ${vote}, tx hash:`,
+      await playgroundRPC.call(
+        "votegov",
+        [proposalId, masternodeId, vote],
+        "number"
+      )
+    );
+  }
+
   return (
     <div>
       <OverflowTable
@@ -67,6 +92,9 @@ export function ProposalTable({
                 currentBlockHeight={currentBlockHeight}
                 currentBlockMedianTime={currentBlockMedianTime}
                 userQueryProposalStatus={userQueryProposalStatus}
+                onDummyVote={(vote: string) =>
+                  voteDummyProposals(proposal.proposalId, masternodeId, vote)
+                }
               />
               {displayVoteModal && (
                 <VoteModal
@@ -89,11 +117,13 @@ function ProposalRow({
   currentBlockHeight,
   currentBlockMedianTime,
   userQueryProposalStatus,
+  onDummyVote,
 }: {
   proposal: GovernanceProposal;
   currentBlockHeight: number;
   currentBlockMedianTime: number;
   userQueryProposalStatus: ListProposalsStatus;
+  onDummyVote: (vote: string) => void;
 }) {
   const router = useRouter();
   const { connection } = useNetwork();
@@ -212,7 +242,6 @@ function ProposalRow({
           </div>
         </a>
       </OverflowTable.Cell>
-
       {(userQueryProposalStatus === ListProposalsStatus.COMPLETED ||
         userQueryProposalStatus === ListProposalsStatus.REJECTED) && (
         <OverflowTable.Cell className="align-middle">
@@ -230,6 +259,43 @@ function ProposalRow({
           </div>
         </OverflowTable.Cell>
       )}
+      {isPlayground(connection) && (
+        <OverflowTable.Cell className="align-middle dark:text-gray-100">
+          <button
+            type="button"
+            onClick={(e) => {
+              onDummyVote("yes");
+              e.stopPropagation();
+            }}
+          >
+            <div className="text-gray-900 dark:text-gray-100 font-medium flex flex-row items-center gap-x-1 px-1 pr-2 py-[2px] border hover:border-primary-200 focus:border-primary-400 rounded-[30px] w-fit">
+              Yes
+            </div>
+          </button>
+          <button
+            type="button"
+            onClick={(e) => {
+              onDummyVote("no");
+              e.stopPropagation();
+            }}
+          >
+            <div className="text-gray-900 dark:text-gray-100 font-medium flex flex-row items-center gap-x-1 px-1 pr-2 py-[2px] border hover:border-primary-200 focus:border-primary-400 rounded-[30px] w-fit">
+              No
+            </div>
+          </button>
+          <button
+            type="button"
+            onClick={(e) => {
+              onDummyVote("neutral");
+              e.stopPropagation();
+            }}
+          >
+            <div className="text-gray-900 dark:text-gray-100 font-medium flex flex-row items-center gap-x-1 px-1 pr-2 py-[2px] border hover:border-primary-200 focus:border-primary-400 rounded-[30px] w-fit">
+              Neutral
+            </div>
+          </button>
+        </OverflowTable.Cell>
+      )}
     </OverflowTable.Row>
   );
 }
diff --git a/src/pages/governance/index.page.tsx b/src/pages/governance/index.page.tsx
@@ -1,11 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
+import { isPlayground } from "@waveshq/walletkit-core";
 import { Container } from "@components/commons/Container";
 import { ApiPagedResponse } from "@defichain/whale-api-client";
 import {
   CursorPage,
   CursorPagination,
 } from "@components/commons/CursorPagination";
-import { getWhaleApiClient, getWhaleRpcClient } from "@contexts/WhaleContext";
+import {
+  getWhaleApiClient,
+  getWhaleRpcClient,
+  newPlaygroundClient,
+} from "@contexts/WhaleContext";
 import { GetServerSidePropsContext } from "next";
 import {
   ListProposalsType,
@@ -15,11 +20,18 @@ import {
   GovernanceProposal,
   GovernanceProposalStatus,
 } from "@defichain/whale-api-client/dist/api/governance";
+import { useNetwork } from "@contexts/NetworkContext";
+import { PlaygroundRpcClient } from "@defichain/playground-api-client";
 import classNames from "classnames";
 import { Link } from "@components/commons/link/Link";
 import { EmptySection } from "@components/commons/sections/EmptySection";
 import { ProposalCards } from "./_components/ProposalCard";
 import { ProposalTable } from "./_components/ProposalTable";
+import { Button } from "./_components/Button";
+import {
+  getLocalStorageItem,
+  setLocalStorage,
+} from "./shared/localStorageHelper";
 import { OnChainGovernanceTitles } from "./enum/onChainGovernanceTitles";
 
 interface OCGProps {
@@ -43,11 +55,48 @@ export default function OnChainGovernancePage({
   allProposalsDetails,
   proposals,
 }: OCGProps) {
+  const connection = useNetwork().connection;
   const userQueryProposalStatus = allProposalsDetails.userQueryProposalStatus;
   const userQueryProposalType = allProposalsDetails.userQueryProposalType;
+  const [masternodeId, setMasterNodeID] = useState(
+    getLocalStorageItem("dummyMasternodeID") ?? ""
+  );
 
   // const { currentYear, currentMonth } = getCurrentYearMonth();
 
+  // TODO remove this before release to prod
+  async function createDummyProposals(): Promise<void> {
+    const playgroundRPC = new PlaygroundRpcClient(
+      newPlaygroundClient(connection)
+    );
+    for (let i = 0; i < 5; i += 1) {
+      const governanceType = ["creategovvoc", "creategovcfp"];
+      const proposalType =
+        governanceType[Math.floor(Math.random() * governanceType.length)]; // get random governance type
+      const cfpData = {
+        title: `Title testing proposal ${new Date().getTime()}`,
+        amount: "100000000",
+        context: "https://github.com/DeFiCh/dfips/issues/238",
+        payoutAddress: "mswsMVsyGMj1FzDMbbxw2QW3KvQAv2FKiy",
+        cycles: i + 1,
+      };
+      const vocData = {
+        title: `Title testing proposal ${new Date().getTime()}`,
+        context:
+          "https://www.reddit.com/r/defiblockchain/comments/10l6451/cfp_defichainwiki_9000_dfi/",
+      };
+      const proposal = await playgroundRPC.call(
+        proposalType,
+        [proposalType === "creategovvoc" ? vocData : cfpData, []],
+        "number"
+      );
+      console.log(
+        `proposal created with id:${proposal} is created with ${proposalType}`
+      );
+    }
+  }
+  console.log(proposals);
+
   return (
     <div>
       {/* TODO: uncomment to use announcement banner */
@@ -65,6 +114,33 @@ export default function OnChainGovernancePage({
           </span>
         </Container>
       </div> */}
+
+      {isPlayground(connection) && (
+        <div className="text-center">
+          <Button
+            testId="dummy-proposal"
+            label="Create dummy proposal"
+            onClick={createDummyProposals}
+            customStyle="bg-primary-50 hover:bg-primary-100 rounded m-4"
+          />
+          <input
+            className="border"
+            placeholder="set masternode here"
+            value={masternodeId}
+            onChange={(v) => {
+              setMasterNodeID(v.target.value);
+            }}
+          />
+          <Button
+            label="set masternode"
+            testId="dummy-submit"
+            customStyle="bg-primary-50 hover:bg-primary-100 rounded m-4"
+            onClick={() => {
+              setLocalStorage("dummyMasternodeID", masternodeId);
+            }}
+          />
+        </div>
+      )}
       <Container className="md:pt-11 pt-10 pb-20">
         <div className="flex md:flex-row flex-col">
           <div className="flex flex-col grow md:justify-center">
@@ -168,6 +244,7 @@ export default function OnChainGovernancePage({
                   allProposalsDetails.currentBlockMedianTime
                 }
                 userQueryProposalStatus={userQueryProposalStatus}
+                masternodeId={masternodeId}
               />
             </div>
             <div className="md:hidden block mt-4">
@@ -373,7 +450,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     .listGovProposals({
       type: userQueryProposalType,
       status: userQueryProposalStatus,
-      size: 10,
+      size: 2,
       next: next,
     })
     .catch(() => {