feat(final-ui-tests): UI tests

Aman-zishan · Dec 13, 2023 · 9e41db6 · 9e41db6
1 parent fbfed39
commit 9e41db6
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 15 deletions.
diff --git a/src/pages/newGrantProposal.tsx b/src/pages/newGrantProposal.tsx
@@ -21,8 +21,8 @@ const initialContractBoilerplate = `;; This is a boilerplate contract for a gran
 
 (define-public (execute (sender principal))
 	(begin
-		(try! (contract-call? .milestone-extension set-milestone (as-contract tx-sender) {id: u1, start-height: block-height, end-height: (+ block-height u1440), amount: u100000000} ))
-        (try! (contract-call? .milestone-extension set-milestone (as-contract tx-sender) {id: u2, start-height: (+ block-height u2880), end-height: u4320, amount: u100000000} ))
+		(try! (contract-call? .milestone-extension set-milestone (as-contract tx-sender) {id: u1, start-height: block-height, end-height: (+ block-height u2), amount: u100000000} ))
+        (try! (contract-call? .milestone-extension set-milestone (as-contract tx-sender) {id: u2, start-height: (+ block-height u2), end-height: (+ block-height u4), amount: u100000000} ))
         (ok true)
 	)
 )

diff --git a/src/pages/proposal.tsx b/src/pages/proposal.tsx
@@ -1,12 +1,16 @@
 import React, { useEffect } from 'react';
 import LeftMenu from '../components/leftMenu';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
 import {
   contractPrincipalCV,
   callReadOnlyFunction,
-  cvToValue
+  cvToValue,
+  FungibleConditionCode,
+  boolCV,
+  makeContractSTXPostCondition,
+  uintCV
 } from '@stacks/transactions';
-import { useAccount, useAuth } from '@micro-stacks/react';
+import { useAccount, useAuth, useOpenContractCall } from '@micro-stacks/react';
 import { truncateAddress } from '../lib/utils';
 
 type individualValue = {
@@ -25,12 +29,76 @@ type ProposalType = {
   'votes-for': individualValue;
 };
 const ProposalPage = () => {
-  const { slug } = useParams();
+  const { search } = useLocation();
+  const query = new URLSearchParams(search);
+  const paramAddress = query.get('address');
+  const paramContractName = query.get('contractName');
   const [vote, setVote] = React.useState('');
+  const [voteFor, setVoteFor] = React.useState('FOR');
   const { isSignedIn } = useAuth();
   const { stxAddress } = useAccount();
   const [proposalInfo, setProposalInfo] = React.useState<ProposalType>();
 
+  const { openContractCall } = useOpenContractCall();
+
+  const voteForProposal = async () => {
+    const voteStatus = voteFor === 'FOR' ? true : false;
+    const functionArgs = [
+      uintCV(vote),
+      boolCV(voteStatus),
+      contractPrincipalCV(paramAddress!, paramContractName!)
+    ];
+    await openContractCall({
+      contractAddress: 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM',
+      contractName: 'proposal-voting',
+      functionName: 'vote',
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      functionArgs,
+
+      onFinish: async (data: any) => {
+        console.log('finished contract call!', data);
+      },
+      onCancel: () => {
+        console.log('popup closed!');
+      }
+    });
+  };
+
+  const concludeProposal = async () => {
+    const postConditions = [
+      makeContractSTXPostCondition(
+        'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM',
+        'milestone-exntension',
+        FungibleConditionCode.LessEqual,
+        1000000000000n
+      )
+    ];
+    const functionArgs = [
+      contractPrincipalCV(paramAddress!, paramContractName!)
+    ];
+    await openContractCall({
+      contractAddress: 'ST1PQHQKV0RJXZFY1DGX8MNSNYVE3VGZJSRTPGZGM',
+      contractName: 'proposal-voting',
+      functionName: 'conclude',
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      functionArgs,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      postConditions,
+
+      onFinish: async (data: any) => {
+        console.log('finished contract call!', data);
+      },
+      onCancel: () => {
+        console.log('popup closed!');
+      }
+    });
+  };
+
   const fetchProposalInfo = async (address: string, contractName: string) => {
     if (isSignedIn) {
       try {
@@ -56,6 +124,7 @@ const ProposalPage = () => {
     address: string,
     contractName: string
   ) => {
+    console.log('fetching milestones', address, contractName);
     if (isSignedIn) {
       try {
         const functionArgs = [contractPrincipalCV(address, contractName)];
@@ -68,16 +137,16 @@ const ProposalPage = () => {
           senderAddress: stxAddress!
         });
 
-        console.log(cvToValue(result).value);
+        console.log(cvToValue(result));
       } catch (error) {
         console.error('Failed to fetch balance:', error);
       }
     }
   };
 
   useEffect(() => {
-    fetchProposalInfo(stxAddress!, slug!);
-    fetchProposalMilestoneInfo(stxAddress!, slug!);
+    fetchProposalInfo(paramAddress!, paramContractName!);
+    fetchProposalMilestoneInfo(paramAddress!, paramContractName!);
   }, []);
 
   return (
@@ -88,7 +157,7 @@ const ProposalPage = () => {
         <div className="px-6 py-8">
           <div className="max-w-4xl mx-auto">
             <div className="bg-white rounded-3xl p-8 mb-5">
-              <h1 className="text-3xl font-bold mb-10">{`Proposal ${slug}`}</h1>
+              <h1 className="text-3xl font-bold mb-10">{`Proposal ${paramContractName}`}</h1>
 
               <hr className="my-10" />
               <div className="flex items-center justify-between">
@@ -104,13 +173,29 @@ const ProposalPage = () => {
                     placeholder="vote number"
                     className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                   />
+                  <select
+                    required
+                    onChange={(e) => setVoteFor(e.target.value)}
+                    id="default-input"
+                    placeholder="vote number"
+                    className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  >
+                    <option value="FOR">FOR</option>
+                    <option value="AGAINST">AGAINST</option>
+                  </select>
                   <button
                     type="button"
+                    onClick={async () => {
+                      voteForProposal();
+                    }}
                     className="inline-flex items-center justify-center h-9 px-5 rounded-xl bg-gray-900 text-gray-300 hover:text-white text-sm font-semibold transition"
                   >
                     Vote
                   </button>
                   <button
+                    onClick={async () => {
+                      concludeProposal();
+                    }}
                     type="button"
                     className="inline-flex items-center justify-center h-9 px-5 rounded-xl bg-gray-900 text-gray-300 hover:text-white text-sm font-semibold transition"
                   >

diff --git a/src/pages/proposalCard.tsx b/src/pages/proposalCard.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 
 interface ProposalCardProps {
+  address: string;
   contractName: string;
   title: string;
   concluded: string;
   passed: string;
   description: string;
 }
 const ProposalCard = ({
+  address,
   contractName,
   title,
   concluded,
@@ -17,13 +19,25 @@ const ProposalCard = ({
   return (
     <div className="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-slate-900 dark:border-gray-700 dark:shadow-slate-700/[.7]">
       <h3 className="text-lg font-bold text-gray-800 dark:text-white">
-        {title}
+        {title}{' '}
+        <span className="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">
+          {concluded ? 'Concluded' : 'Active'}
+        </span>
+        <span
+          className={`${
+            passed
+              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300'
+              : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300'
+          }  text-xs font-medium me-2 px-2.5 py-0.5 rounded-full `}
+        >
+          {passed ? 'Passed' : 'not passed'}
+        </span>
       </h3>
 
       <p className="mt-2 text-gray-500 dark:text-gray-400">{description}</p>
       <a
         className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
-        href={`/proposals/${contractName}`}
+        href={`/proposals/view?address=${address}&contractName=${contractName}`}
       >
         See more
         <svg

diff --git a/src/pages/proposals.tsx b/src/pages/proposals.tsx
@@ -88,7 +88,7 @@ const Proposals = () => {
             proposal.proposal_name
           );
           return {
-            address: proposal.address,
+            address: proposalData.proposer.value,
             proposal_name: proposal.proposal_name,
             concluded: proposalData.concluded.value,
             passed: proposalData.passed.value,
@@ -130,14 +130,14 @@ const Proposals = () => {
                     activeTab={activeTab}
                     setActiveTab={setActiveTab}
                   >
-                    Your Proposals
+                    Your Proposals ({proposals.length})
                   </Tab>
                   <Tab
                     id="allProposals"
                     activeTab={activeTab}
                     setActiveTab={setActiveTab}
                   >
-                    All Proposals
+                    All Proposals ({allProposals.length})
                   </Tab>
                 </ul>
                 <div className="p-4 pt-10">
@@ -147,6 +147,7 @@ const Proposals = () => {
                         {proposals.map((proposal) => {
                           return (
                             <ProposalCard
+                              address={proposal.address}
                               contractName={proposal.proposal_name}
                               title={proposal.title}
                               passed={proposal.passed}
@@ -164,6 +165,7 @@ const Proposals = () => {
                         {allProposals.map((proposal) => {
                           return (
                             <ProposalCard
+                              address={proposal.address}
                               contractName={proposal.proposal_name}
                               title={proposal.title}
                               passed={proposal.passed}