Last active
December 22, 2021 15:55
-
-
Save javaguirre/d2de13cda54a07ee3408338635ae24e3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| App = { | |
| web3Provider: null, | |
| contracts: {}, | |
| init: async function() { | |
| return await App.initWeb3(); | |
| }, | |
| initWeb3: async function() { | |
| if (window.ethereum) { | |
| App.web3Provider = window.ethereum; | |
| try { | |
| await window.ethereum.request({ method: "eth_requestAccounts"}); | |
| } catch (error) { | |
| App.showNotification('User denied connection', 'error'); | |
| } | |
| } | |
| return App.initContract(); | |
| }, | |
| initContract: function() { | |
| $.getJSON('CardFactory.json', function(data) { | |
| var CardFactoryArtifact = data; | |
| App.contracts.CardFactory = TruffleContract(CardFactoryArtifact); | |
| App.contracts.CardFactory.setProvider(App.web3Provider); | |
| App.subscribeToEvents('NewCardPayment', 'La carta ha sido comprada'); | |
| App.subscribeToEvents('NewCard', 'La carta ha sido creada'); | |
| return App.updateCardList(); | |
| }); | |
| return App.bindEvents(); | |
| }, | |
| bindEvents: function() { | |
| $('#create-card-button').click(function(event) { | |
| const name = $('input[name="name"]').val(); | |
| const price = $('input[name="price"]').val(); | |
| if (!App.validateCardData(name, price)) { | |
| App.showNotification('Error en los datos', 'error'); | |
| return; | |
| } | |
| App.createCard(name, price); | |
| }); | |
| $(document).on('click', '.btn-buy', function() { | |
| const cardId = $(this).data('id'); | |
| const cardPrice = parseInt($(this).data('price')); | |
| App.buyCard(cardId, cardPrice); | |
| }); | |
| }, | |
| validateCardData: function(name, price) { | |
| // TODO | |
| return true; | |
| }, | |
| updateCardList: function() { | |
| App.contracts.CardFactory.deployed().then(instance => { | |
| return instance.getCardCounter.call(); | |
| }).then(counter => { | |
| $('#cardsRow').empty(); | |
| for(let index = 0; index < counter; index++) { | |
| App.contracts.CardFactory.deployed().then(instance => { | |
| return instance.cards.call(index); | |
| }).then(card => { | |
| App.showCard(card); | |
| }); | |
| } | |
| }); | |
| }, | |
| showCard: function(card) { | |
| const cardsRow = $('#cardsRow'); | |
| const cardTemplate = $('#cardTemplate'); | |
| cardTemplate.find('.card-title').text(`${card[1]}`); | |
| cardTemplate.find('.card-id').text(card[0]); | |
| cardTemplate.find('.card-price').text(card[3]); | |
| cardTemplate.find('img').attr('src', `https://avatars.dicebear.com/api/gridy/${card[2]}.svg`); | |
| cardTemplate.find( | |
| '.btn-buy' | |
| ).attr( | |
| 'data-id', card[0] | |
| ).attr('data-price', card[3]); | |
| cardTemplate.find('.btn-buy').attr("disabled", false).text('Buy'); | |
| if (parseInt(card[5]) !== 0) { | |
| cardTemplate.find('.btn-buy').attr("disabled", true).text('Bought'); | |
| } | |
| cardsRow.append(cardTemplate.html()); | |
| }, | |
| createCard: function(name, price) { | |
| web3.eth.getAccounts(function(error, accounts) { | |
| if (error) { | |
| console.log(error); | |
| } | |
| const account = accounts[0]; | |
| App.contracts.CardFactory.deployed().then(function(instance) { | |
| return instance.createCard(name, price, {from: account}); | |
| }).then(function(result) { | |
| // App.showNotification(`Carta ${name} creada correctamente`, 'success'); | |
| return App.updateCardList(); | |
| }).catch(function(err) { | |
| console.log(err.message); | |
| }); | |
| }); | |
| }, | |
| buyCard: function(cardId, price) { | |
| const fee = 0.2; | |
| web3.eth.getAccounts(function(error, accounts) { | |
| if (error) { | |
| console.log(error); | |
| } | |
| const account = accounts[0]; | |
| App.contracts.CardFactory.deployed().then(function(instance) { | |
| return instance.buyCard( | |
| cardId, | |
| {from: account, value: web3.toWei(price + fee)}); | |
| }).then(function(result) { | |
| // App.showNotification(`Carta ${cardId} comprada correctamente`, 'success'); | |
| return App.updateCardList(); | |
| }).catch(function(err) { | |
| console.log(err.message); | |
| }); | |
| }); | |
| }, | |
| showNotification: function(text, status) { | |
| const statusClass = { | |
| error: 'alert-danger', | |
| success: 'alert-success', | |
| warning: 'alert-warning' | |
| } | |
| $('#notification-text').text(text); | |
| $('#notifications').addClass( | |
| statusClass[status] | |
| ).show(); | |
| }, | |
| subscribeToEvents: function(eventName, notificationText) { | |
| App.contracts.CardFactory.deployed().then(instance => { | |
| const event = instance[eventName](null, {fromBlock: 'latest'}, (err, res) => { | |
| if (err) { | |
| console.log(err); | |
| return; | |
| } | |
| }); | |
| event.watch((error, response) => { | |
| if (error) { | |
| console.log(error); | |
| return; | |
| } | |
| App.showNotification( | |
| notificationText, | |
| 'success'); | |
| }); | |
| }); | |
| } | |
| }; | |
| $(function() { | |
| $(window).on("load", function() { | |
| App.init(); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment