feat: add voting receipt download with commitment validation details (#234)

Author: starboytiimz

dapp/src/components/page/proposal/VotingModal.tsx

@@ -34,6 +34,7 @@ const VotingModal: React.FC<VotersModalProps> = ({
   const [selectedWeight, setSelectedWeight] = useState<number>(0);
   const [isTokenVoting, setIsTokenVoting] = useState(false);
   const [tokenBalance, setTokenBalance] = useState<number>(0);
+  const [voteReceipt, setVoteReceipt] = useState<import("types/proposal").VoteReceipt | null>(null);
   const isInsufficientVotingPower = maxWeight <= 0;
 
   const insufficientPowerMessage = isTokenVoting
@@ -122,18 +123,20 @@ const VotingModal: React.FC<VotersModalProps> = ({
     const { voteToProposal } = await import("@service/ContractService");
 
     try {
-      await voteToProposal(
+      const receipt = await voteToProposal(
         projectName,
         proposalId!,
         selectedOption as VoteType,
         selectedWeight,
       );
+      
+      setVoteReceipt(receipt);
       onVoteSuccess?.();
       toast.success(
         "Congratulations!",
         "Your vote was submitted successfully.",
       );
-      onClose();
+      // We do not close the modal here, we show the receipt instead
     } catch (error: any) {
       let errorMessage = "Failed to cast vote";
 
@@ -154,6 +157,93 @@ const VotingModal: React.FC<VotersModalProps> = ({
     }
   };
 
+  if (voteReceipt) {
+    return (
+      <Modal onClose={onClose}>
+        <style>{`
+          @media print {
+            body * { visibility: hidden; }
+            #printable-receipt, #printable-receipt * { visibility: visible; }
+            #printable-receipt { position: absolute; left: 0; top: 0; width: 100%; padding: 20px; }
+            .no-print { display: none !important; }
+          }
+        `}</style>
+        <div id="printable-receipt" className="flex flex-col gap-6 w-full max-w-2xl mx-auto">
+          <div className="flex flex-col gap-2 border-b pb-4">
+            <h2 className="text-2xl font-bold text-primary">Vote Receipt</h2>
+            <p className="text-sm text-secondary">
+              {voteReceipt.isPublicVoting 
+                ? "Your vote was public. You can check the transaction hash on a Stellar explorer to verify it is on-chain."
+                : "Your vote was anonymous. Keep this receipt safe. You can verify your commitment on-chain using the transaction hash. At the end of the vote, the tally can be checked by verifying all commitments against the encrypted votes."}
+            </p>
+          </div>
+          
+          <div className="flex flex-col gap-4 bg-gray-50 p-4 rounded-lg overflow-x-auto text-sm">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div><span className="font-semibold">Project:</span> {voteReceipt.projectName}</div>
+              <div><span className="font-semibold">Proposal ID:</span> {voteReceipt.proposalId}</div>
+              <div><span className="font-semibold">Vote Type:</span> <span className="capitalize">{voteReceipt.voteType}</span></div>
+              <div><span className="font-semibold">Weight:</span> {voteReceipt.weight.toLocaleString()}</div>
+              <div><span className="font-semibold">Voting Type:</span> {voteReceipt.isPublicVoting ? "Public" : "Anonymous"}</div>
+            </div>
+            
+            {voteReceipt.transactionHash && (
+              <div className="mt-2">
+                <span className="font-semibold block mb-1">Transaction Hash:</span>
+                <code className="bg-white px-2 py-1 rounded border break-all text-xs">{voteReceipt.transactionHash}</code>
+              </div>
+            )}
+            
+            {!voteReceipt.isPublicVoting && (
+              <>
+                <div className="mt-2">
+                  <span className="font-semibold block mb-1">Public Key:</span>
+                  <code className="bg-white px-2 py-1 rounded border break-all text-xs">{voteReceipt.publicKey}</code>
+                </div>
+                
+                <div className="mt-2">
+                  <span className="font-semibold block mb-1">Encrypted Votes (Approve, Reject, Abstain):</span>
+                  <div className="flex flex-col gap-1">
+                    {voteReceipt.votes?.map((v, i) => (
+                      <code key={i} className="bg-white px-2 py-1 rounded border break-all text-xs">{v}</code>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="mt-2">
+                  <span className="font-semibold block mb-1">Cryptographic Seeds:</span>
+                  <div className="flex flex-col gap-1">
+                    {voteReceipt.seeds?.map((s, i) => (
+                      <code key={i} className="bg-white px-2 py-1 rounded border break-all text-xs">{s}</code>
+                    ))}
+                  </div>
+                </div>
+                
+                <div className="mt-2">
+                  <span className="font-semibold block mb-1">Commitments:</span>
+                  <div className="flex flex-col gap-1">
+                    {voteReceipt.commitments?.map((c, i) => (
+                      <code key={i} className="bg-white px-2 py-1 rounded border break-all text-xs">{c}</code>
+                    ))}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          
+          <div className="flex justify-end gap-3 no-print mt-4">
+            <Button type="secondary" onClick={onClose}>
+              Close
+            </Button>
+            <Button onClick={() => window.print()}>
+              Print / Save PDF
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
   return (
     <Modal onClose={onClose}>
       <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 sm:gap-9">

dapp/src/service/ContractService.ts

@@ -260,7 +260,7 @@ export async function voteToProposal(
   proposal_id: number,
   vote: VoteType,
   customWeight?: number,
-): Promise<boolean> {
+): Promise<import("types/proposal").VoteReceipt> {
   const client = getClient();
   const maintainer = client.options.publicKey;
   if (!maintainer) throw new Error("Wallet not connected");
@@ -307,6 +307,12 @@ export async function voteToProposal(
   }
 
   let votePayload: Vote;
+  
+  // Variables for receipt
+  let seedsArr: number[] | undefined;
+  let votesArr: number[] | undefined;
+  let commitments: string[] | undefined;
+  let publicKeyStr: string | undefined;
 
   if (isPublicVoting) {
     votePayload = {
@@ -326,12 +332,12 @@ export async function voteToProposal(
     // Weight is applied on-chain when validating/aggregating, so the encoded
     // vote should be 1 for the chosen option and 0 for others to avoid u32
     // overflow in later tallies.
-    const votesArr: number[] = [0, 0, 0];
+    votesArr = [0, 0, 0];
     votesArr[voteIndex] = 1;
 
     // Generate cryptographically secure 32-bit seeds.
     const r = crypto.getRandomValues(new Uint32Array(3));
-    const seedsArr: number[] = [Number(r[0]), Number(r[1]), Number(r[2])];
+    seedsArr = [Number(r[0]), Number(r[1]), Number(r[2])];
 
     // Get anonymous voting config
     const configTx = await client.get_anonymous_voting_config({
@@ -340,7 +346,7 @@ export async function voteToProposal(
     // Ensure config actually exists (not an error bubbled in result)
     checkSimulationError(configTx);
 
-    const publicKeyStr = configTx.result?.public_key;
+    publicKeyStr = configTx.result?.public_key;
     if (!publicKeyStr)
       throw new Error("Anonymous voting config missing public key");
 
@@ -375,6 +381,7 @@ export async function voteToProposal(
       ]);
       // Ensure the helper call did not surface a simulation error payload
       checkSimulationError(commitmentsTx);
+      commitments = commitmentsTx.result?.map((c: any) => c.toString());
     } catch (e: any) {
       // Normalize Wasm VM/host errors to user-friendly text
       throw new Error(parseContractError(e), { cause: e });
@@ -404,9 +411,23 @@ export async function voteToProposal(
   // Check for simulation errors (contract errors) before submitting
   checkSimulationError(assembledTx);
 
-  await submitTransaction(assembledTx);
+  const result = await submitTransaction(assembledTx);
   invalidateProposalCache(project_name, proposal_id);
-  return true;
+  
+  return {
+    projectName: project_name,
+    proposalId: proposal_id,
+    voteType: vote,
+    weight,
+    isPublicVoting,
+    transactionHash: result?.hash, // if available
+    ...(isPublicVoting ? {} : {
+      seeds: seedsArr?.map(String),
+      votes: votesArr?.map(String),
+      commitments,
+      publicKey: publicKeyStr
+    })
+  };
 }
 
 /**

dapp/src/types/proposal.ts

@@ -88,3 +88,16 @@ export interface ProposalOutcome {
     contract?: OutcomeContract; // New contract-based outcome
   };
 }
+
+export interface VoteReceipt {
+  projectName: string;
+  proposalId: number;
+  voteType: string;
+  weight: number;
+  isPublicVoting: boolean;
+  transactionHash?: string;
+  seeds?: string[];
+  votes?: string[];
+  commitments?: string[];
+  publicKey?: string;
+}