Adjust voting dapp to work with new voting smart contract interface (#485)

* Fix voting dapp

* Changelog

* Bump version

Author: Victor Nordam Suadicani

examples/voting/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.1.4
+
+-   Adjusted according to the simplified voting smart contract example, see https://github.com/Concordium/concordium-rust-smart-contracts/pull/441.
+
 ## 1.1.3
 
 -   Fixed problems on the result page due to breaking changes in the web SDK.

examples/voting/package.json

@@ -1,7 +1,7 @@
 {
     "name": "voting",
     "license": "Apache-2.0",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "packageManager": "[email protected]",
     "dependencies": {
         "@concordium/browser-wallet-api-helpers": "^3.0.0",

examples/voting/src/Results.jsx

@@ -79,7 +79,7 @@ function Results() {
     // Attempt to get the voting results.
     useMemo(() => {
         if (viewResult && client && electionId) {
-            getVotes(client, electionId, viewResult?.numOptions).then(setVotes).catch(console.error);
+            getVotes(client, electionId, viewResult?.opts).then(setVotes).catch(console.error);
         }
     }, [viewResult, client, electionId]);
 
@@ -90,11 +90,11 @@ function Results() {
         }
     }, [votes]);
 
-    const endsInMillis = viewResult?.endTime.diff(now);
+    const endsInMillis = viewResult?.deadline.diff(now);
 
     // Refresh tally periodically until deadline.
     useEffect(() => {
-        if (client && viewResult?.endTime.isAfter()) {
+        if (client && viewResult?.deadline.isAfter()) {
             const interval = setInterval(() => {
                 console.log('refreshing');
                 setView(undefined);

examples/voting/src/VotePage.jsx

@@ -76,9 +76,7 @@ function VotePage() {
                         </div>
                         <Button
                             className="w-100"
-                            onClick={() =>
-                                castVote(client, electionId, viewResult?.opts.indexOf(selectedOption), connectedAccount)
-                            }
+                            onClick={() => castVote(client, electionId, selectedOption, connectedAccount)}
                         >
                             <strong>Cast Vote!</strong>
                         </Button>

examples/voting/src/Wallet.jsx

@@ -80,7 +80,7 @@ export async function createElection(
         const parameter = {
             description,
             options,
-            end_time: deadlineTimestamp,
+            deadline: deadlineTimestamp,
         };
 
         const txHash = await client.sendTransaction(
@@ -107,17 +107,15 @@ export async function getView(client, contractIndex) {
     });
 }
 
-export async function getVotes(client, contractIndex, numOptions) {
+export async function getVotes(client, contractIndex, options) {
     const promises = [];
 
     const grpcClient = new ConcordiumGRPCClient(client.grpcTransport);
-    for (let i = 0; i < numOptions; i++) {
+    for (const option of options) {
         const param = serializeUpdateContractParameters(
             ContractName.fromString('voting'),
             EntrypointName.fromString('getNumberOfVotes'),
-            {
-                vote_index: i,
-            },
+            option,
             toBuffer(RAW_SCHEMA_BASE64, 'base64')
         );
 
@@ -134,28 +132,30 @@ export async function getVotes(client, contractIndex, numOptions) {
 }
 
 export async function castVote(client, contractIndex, vote, senderAddress) {
-    if (vote === -1) {
+    if (!vote) {
         window.alert('Select one option.');
         return;
     }
 
     const connectedToTestnet = await checkConnectedToTestnet(client);
-    if (connectedToTestnet) {
-        const txHash = await client.sendTransaction(
-            senderAddress,
-            AccountTransactionType.Update,
-            {
-                amount: CcdAmount.fromMicroCcd(BigInt(0)),
-                address: { index: BigInt(contractIndex), subindex: BigInt(0) },
-                receiveName: 'voting.vote',
-                maxContractExecutionEnergy: BigInt(30000),
-            },
-            { vote_index: vote },
-            RAW_SCHEMA_BASE64
-        );
-        console.log({ txHash });
-        return txHash;
+    if (!connectedToTestnet) {
+        return;
     }
+
+    const txHash = await client.sendTransaction(
+        senderAddress,
+        AccountTransactionType.Update,
+        {
+            amount: CcdAmount.fromMicroCcd(BigInt(0)),
+            address: { index: BigInt(contractIndex), subindex: BigInt(0) },
+            receiveName: 'voting.vote',
+            maxContractExecutionEnergy: BigInt(30000),
+        },
+        vote,
+        RAW_SCHEMA_BASE64
+    );
+    console.log({ txHash });
+    return txHash;
 }
 
 export default function Wallet(props) {

examples/voting/src/buffer.js

@@ -26,15 +26,13 @@ export function decodeView(result) {
     const offset0 = 0;
     const buffer = toBuffer(result, 'hex');
     const [descriptionText, offset1] = decodeString(buffer, offset0);
-    const endTimestamp = buffer.readBigUInt64LE(offset1);
-    const endTime = moment.unix(Number(endTimestamp / BigInt(1000)));
-    const [opts, offset2] = decodeStrings(buffer, offset1 + 8);
-    const numOptions = buffer.readUInt32LE(offset2);
+    const [opts, offset2] = decodeStrings(buffer, offset1);
+    const deadlineTimestamp = buffer.readBigUInt64LE(offset2);
+    const deadline = moment.unix(Number(deadlineTimestamp / BigInt(1000)));
     return {
         descriptionText,
-        endTime,
         opts,
-        numOptions,
+        deadline,
     };
 }
 

examples/voting/src/config.js

@@ -1,9 +1,9 @@
 import moment from 'moment';
 
-export const MODULE_REF = '16c0b28417d287114d2fd59537f678cae5e1416a34e3680326359b6bbfe57e72';
+export const MODULE_REF = '9ee6fcfbb1c210a1c920f692a7db0cfd0cfe3c78df45873ab339234be7d5279b';
 export const CONTRACT_NAME = 'voting';
 export const RAW_SCHEMA_BASE64 =
-    '//8CAQAAAAYAAAB2b3RpbmcBABQAAwAAAAsAAABkZXNjcmlwdGlvbhYCBwAAAG9wdGlvbnMQAhYCCAAAAGVuZF90aW1lDQMAAAAQAAAAZ2V0TnVtYmVyT2ZWb3RlcwIUAAEAAAAKAAAAdm90ZV9pbmRleAQEBAAAAHZpZXcBFAAEAAAACwAAAGRlc2NyaXB0aW9uFgIIAAAAZW5kX3RpbWUNBwAAAG9wdGlvbnMQAhYCCwAAAG51bV9vcHRpb25zBAQAAAB2b3RlBBQAAQAAAAoAAAB2b3RlX2luZGV4BBUGAAAADQAAAFBhcnNpbmdGYWlsZWQCBwAAAExvZ0Z1bGwCDAAAAExvZ01hbGZvcm1lZAIOAAAAVm90aW5nRmluaXNoZWQCEAAAAEludmFsaWRWb3RlSW5kZXgCDQAAAENvbnRyYWN0Vm90ZXIC';
+    '//8DAQAAAAYAAAB2b3RpbmcBABQAAwAAAAsAAABkZXNjcmlwdGlvbhYCBwAAAG9wdGlvbnMQAhYCCAAAAGRlYWRsaW5lDQMAAAAQAAAAZ2V0TnVtYmVyT2ZWb3RlcwIWAgQEAAAAdmlldwEUAAMAAAALAAAAZGVzY3JpcHRpb24WAgcAAABvcHRpb25zEAIWAggAAABkZWFkbGluZQ0EAAAAdm90ZQQWAhUGAAAADQAAAFBhcnNpbmdGYWlsZWQCBwAAAExvZ0Z1bGwCDAAAAExvZ01hbGZvcm1lZAIOAAAAVm90aW5nRmluaXNoZWQCCwAAAEludmFsaWRWb3RlAg0AAABDb250cmFjdFZvdGVyAgEUAAIAAAAFAAAAdm90ZXILBgAAAG9wdGlvbhYC';
 export const BASE_URL = 'http://localhost:3000/';
 export const REFRESH_INTERVAL = moment.duration(10, 'seconds');
 // The TESTNET_GENESIS_BLOCK_HASH is used to check that the user has its browser wallet connected to testnet and not to mainnet.