I am running Ubuntu 16 on virtual box, using: Node v16.14.2, npm v8.5.0, Truffle v5.3.7 (core: 5.3.7) Solidity v0.5.16 (solc-js) Node v16.14.2 Web3.js v1.3.6 The project I am working on is a slightly modified version of the Decentralizied App found on this github page :https://github.com/ArchLinuxStudio/blockchain-election-sample/blob/master/src/js/app.js
I've added my own smart contract and successfully compiled and migrated it and connected it to ganache and integrated with metamask. The app was working fine but now all of a sudden whenever I try to run the DApp using the "npm run dev" command on the terminal, it opens up Firefox and shows "Your Tab just crashed". I've tried cleaning the cache, using sudo apt-get update, and upgrade. I have also tried updating pipelining package. Yet this problem persists. The terminal also shows no error.
My index.html has the following code :
<html lang="en">
<head>
<link rel="shortcut icon" href="#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Legitify</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="width: 650px;">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center"> Legitify</h1>
<hr/>
<br/>
<div id="loader">
<p class="text-center">Loading...</p>
</div>
<div id="content" style="display: none;">
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">UpVote</th>
<th scope="col">DownVote</th>
</tr>
</thead>
<tbody id="newsResults">
</tbody>
</table>
<hr/>
<form onSubmit="App.upVote(); return false;">
<div class="form-group">
<label for="newsSelect">Select News</label>
<select class="form-control" id="newsSelect">
</select>
</div>
<button type="button" class="btn btn-primary">UpVote</button>
<hr />
</form>
<form OnSubmit ="App.addNews();">
<div class="form-group">
<label for="news_item">Add news</label>
<input class="form-control" id="news_item">
</input>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<hr />
</form>
<p id="accountAddress" class="text-center"></p>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
</body>
</html>
And the App.js has the following :
App = {
web3Provider: null,
contracts: {},
account: '0x0',
hasVoted: false,
init: function() { //initialize app using web3
console.log("init");
return App.initWeb3();
},
// connect web-app to local blockchain using web3
initWeb3: function() {
console.log("WEB3");
if (typeof web3 !== 'undefined') {
// If a web3 instance is already provided by Meta Mask.
//metamask turns browser into blockchain provider
App.web3Provider = web3.currentProvider;
web3 = new Web3(web3.currentProvider);
} else {
// Specify default instance if no web3 instance provided
App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
web3 = new Web3(App.web3Provider);
}
return App.initContract();
},
initContract: function() { //connect smart contract
console.log("contract");
$.getJSON("Auditor.json", function(auditor) {
// Instantiate a new truffle contract from the artifact
App.contracts.Auditor = TruffleContract(auditor); //we interact with this contract
// Connect provider to interact with contract
App.contracts.Auditor.setProvider(App.web3Provider);
//use the bs-congfig.js run connect to smart contracts, bs stands for browser sync package
App.listenForEvents();
return App.render();
});
},
//listen for events
// Listen for events emitted from the contract
listenForEvents: function() {
App.contracts.Auditor.deployed().then(function(instance) {
// Restart Chrome if you are unable to receive this event
// This is a known issue with Metamask
// https://github.com/MetaMask/metamask-extension/issues/2393
instance.votedEvent({}, {
fromBlock: 0,
toBlock: 'latest'
}).watch(function(error, event) {
console.log("event triggered", event)
// Reload when a new vote is recorded
App.render();
});
});
},
render: async () => {
console.log("rendering");
var newsInstance;
var loader = $("#loader");
var content = $("#content");
loader.show();
content.hide();
// Load account data
try {
const accounts= await window.ethereum.request(_
method: 'eth_requestAccounts',
});
App.account = accounts[0];
$("#accountAddress").html("Your Account: " + account);
} catch (error) {
if (error.code === 4001) {
//
}
console.log(error);
}
//web3.eth.getCoinbase(function(err, account) {
// if (err === null) {
// App.account = account;
//$("#accountAddress").html("Your Account: " + account);
//}
//});
// Load contract data
App.contracts.Auditor.deployed().then(function(instance) {
newsInstance = instance;
return newsInstance.newsCount();
}).then(async (newsCount) => {
const promise = [];
for (var i=1; i<=newsCount(); i++) {
promise.push(newsInstance.news(i));
}
const news = await Promise.all(promise);
var newsResults = $('#newsResults');
newsResults.empty();
var newsSelect = $('#newsSelect');
for (var i = 0; i < newsCount; i++) {
var id = news[i][0];
//var name = news[i][1];
var upvote = news[i][2];
var downvote = news[i][3];
}
var candidateTemplate = "<tr><th>" + id + "</th><td>" + upvote + "</td><td>" + downvote + "</td></tr>"
voteResults.append(candidateTemplate);
// Render candidate ballot option
var candidateOption = "<option value='" + id + "' >" + "</ option>"
newsResults.append(candidateOption);
});
}
return newsInstance.crowdauditors(App.account);
}).then(function(hasVoted) {
// Do not allow a user to vote
if(hasVoted) {
}
loader.hide();
content.show();
}).catch(function(error) {
console.warn(error);
});
},
upVote: function() {
var candidateId = $('#newsSelect').val();
App.contracts.Auditor.deployed().then(function(instance) {
return instance.vote(candidateId, 1, { from: App.account });
}).then(function(result) {
// Wait for votes to update
$("#content").hide();
$("#loader").show();
}).catch(function(err) {
console.error(err);
});
},
addNews: function() {
var news_item = $('#news_item').val();
var len = news_item.length;
var arr1 = [];
for (var n = 0, l = len; n < l; n ++)
{
var hex = Number(news_item.charCodeAt(n)).toString(16);
arr1.push(hex);
}
num=arr1.join('')
size=num.length;
if(size<32){
for(let i = 0; i<(32-size); i++)
{ num+="0";
}
}
var hex = '0x'+num;
//App.contracts.Auditor.methods.addNews(hex).call();
App.contracts.Auditor.deployed().then(function(instance) {
return instance.addNews(hex, { from: App.account });
}).then(function(result) {
console.log("in function");
// Wait for votes to update
$("#content").hide();
$("#loader").show();
}).catch(function(err) {
console.error(err);
});
App.render();
}
};
$(function() {
$(window).load(function() {
App.init();
});
});