Skip to content

Instantly share code, notes, and snippets.

@anonymoussprocket
Last active June 17, 2021 14:37
Show Gist options
  • Save anonymoussprocket/bff45e30a24d956c033629f0c8f553f5 to your computer and use it in GitHub Desktop.
Save anonymoussprocket/bff45e30a24d956c033629f0c8f553f5 to your computer and use it in GitHub Desktop.
Basic smart contract interaction UI example in HTML with ConseilJS

Purpose

This is the full code for an simplistic dApp on Tezos. It is presented as part of the Cryptonomic dApp development curriculum with ConseilJS & SmartPy. The relevant discussion of this code is in Part 6.

Environment

To get access to Tezos & Conseil infrastructure signup for an account at Nautilus Cloud. The missing parameters in the code below will come from there.

Confirmed Environment Configurations

  • Safari 13.0.2, ConseilJS 0.3.2-beta
  • Chrome 78
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/cryptonomic/conseiljs/dist-web/conseiljs.min.js"></script>
<script>
const tezosNode = '<tezos-node-url>';
const conseilServer = {
url: '<conseil-indexer-url>',
apiKey: '<API key from nautilus.cloud>',
network: '<...>'
}
const networkBlockTime = 30 + 1;
let keyStore = {};
const alphanetFaucetAccount = {
"mnemonic": [ "promote", "grape", "sea", "glide", "still", "suggest", "vehicle", "front", "bulb", "wolf", "cart", "cart", "surround", "creek", "cycle" ],
"secret": "b43d272885698df92e01a9adac18e697e9db42d0",
"amount": "24283188994",
"pkh": "tz1RArF4HTSMHpKywvvU1qtHRg89eWQN1CLL",
"password": "LieZc5k2PT",
"email": "jwydlazq.dhugusjq@tezos.example.org"
};
const secretKey = 'edskS1hYczoFBSmyXZrLJEViq5ksFs1N2L7QKdTF1q3ZJiXvBwmsVtfeBdCXytM1Tzo645JKYjt6iyhqDwUyFMzZTwsq8Y9NHq';
function clearRPCOperationGroupHash(hash) {
return hash.replace(/\"/g, '').replace(/\n/, '');
}
async function initAccount() {
//keyStore = await conseiljs.TezosWalletUtil.unlockFundraiserIdentity(alphanetFaucetAccount.mnemonic.join(' '), alphanetFaucetAccount.email, alphanetFaucetAccount.password, alphanetFaucetAccount.pkh);
keyStore = await conseiljs.TezosWalletUtil.restoreIdentityWithSecretKey(secretKey);
}
async function invokeContract() {
const augend = document.getElementById('augend').value;
const addend = document.getElementById('addend').value;
const contractAddress = 'KT1C8eB3d2VQnuj6ARRT8V4jRUhUuYeNcQK1';
const params = `{"prim": "Pair", "args": [{"int": "${augend}"}, {"int": "${addend}"}]}`;
const paramFormat = conseiljs.TezosParameterFormat.Micheline;
let nodeResult = await conseiljs.TezosNodeWriter.sendContractInvocationOperation(tezosNode, keyStore, contractAddress, 0, 50000, '', 1000, 20000, undefined, params, paramFormat);
const groupid = clearRPCOperationGroupHash(nodeResult.operationGroupID);
console.log(`Injected activation operation with ${groupid}`);
let conseilResult = await conseiljs.TezosConseilClient.awaitOperationConfirmation(conseilServer, conseilServer.network, groupid, 10, networkBlockTime);
if (conseilResult.length == 1 && conseilResult[0]['status'] === 'applied') {
console.log(conseilResult[0]);
conseilResult = await conseiljs.TezosConseilClient.getAccount(conseilServer, conseilServer.network, contractAddress);
console.log(conseilResult[0]);
document.getElementById('result').innerText = `= ${conseilResult[0]['storage']}`;
} else if (conseilResult.length == 1 && conseilResult[0]['status'] !== 'applied') {
console.log(`operation ${groupid} failed`);
document.getElementById('result').innerText = '= error';
console.log(conseilResult[0]);
nodeResult = await conseiljs.TezosNodeReader.getBlock(tezosNode, conseilResult[0]['block_hash']);
console.log(nodeResult);
} else {
console.log(`operation ${groupid} appears to have been rejected`);
}
}
async function run() {
await initAccount();
await invokeContract();
}
</script>
</head>
<body>
<form>
<input type="number" id="augend" value="1" /> + <input type="number" id="addend" value="1" /> <span id="result"></span>
<button onclick="run(); return false;">Run</button>
</form>
</body>
</html>
@anonymoussprocket
Copy link
Author

Hello Admin,

Can you help me move on for this? Thanks a lot.

Best regards,

Michshell

In later versions of ConseilJS, getAccount returns only one element instead of an array. Try this instead:

${conseilResult['storage']}

@Michshelle
Copy link

Hello Admin,
Can you help me move on for this? Thanks a lot.
Best regards,
Michshell

In later versions of ConseilJS, getAccount returns only one element instead of an array. Try this instead:

${conseilResult['storage']}

Work like a charm! Thank you so much.

@vivekascoder
Copy link

Hello, I am new learning tezos and smartpy can you suggest some resources. plz

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment