Hello, in this tutorial we will implement a very basic react application that can connect to the Concordium blockchain. It will not have any smart contract development and/or interaction. (Even without running a node!) Concordium provides a very special transaction type to store data on-chain without even coding a smart contract. The simplest use case could be, for example, if you would like to make sure that a dataâs integrity is not tampered with, what can you do you can store that dataâs hash on-chain and verify it later!
React Project
First, set up a working directory for our dApp and then create an empty react project from the template inside it. I assume you already have yarn installed in your system and have a text editor. I have been using vscode for many years now. To create a react project run the command below.
It will take some time to fetch & install all packages and dependencies, and when itâs all done you will have something like the below.
And when you run it you will see the template application interface.
We will start from scratch with an empty React application that is bootstrapped from React template and will be using material-ui. We will add the dependencies for some react components from material-ui and necessary libraries from concordium-web-sdk and concordium-web-wallet-helper. To do that run the command below and yarn will install all specified packages.
Now create another file called Register.tsx, in this component, we will take input from the user with a text box, calculate its SHA-256 and store it onchain with a very simple and special type of transaction called registerData.
Specifically, letâs zoom in, on a part of the code below there are 2 important parts you need to be careful about, first the connection with the wallet and second the transaction parameters. To make sure these are provided, add a control that checks if the wallet is already connected successfully. Then, you need to give the data as a parameter to the AccountTransactionType.RegisterData transaction. (convert it to sha256) Keep the returning transaction hash (txnHash) to verify our transactionâs state and what it entails.
If everything is correct, you should see something like the one below.
Connect it and you will have;
Letâs fill it with the string âconcordiumâ and click the âREGISTER DATAâ button.
The application will print the TxnHash value for us to track on the block explorer, click that to verify.
It will redirect you to the dashboard, to that block in particular.
Letâs compare the data we stored in the Concordium SHA-256 version, right? You can use this online tool to calculate any textâs SHA-256.
As expected, those two values are matched! Letâs step back for one second and think about what we implemented with this dApp. What we have done is basically, store proof of data on-chain, and allow everybody who wants to check that our dataâs integrity is preserved or not can go and verify it by looking at this brilliant decentralized network. It is stored on-chain now and no one, even I can not change it. How cool is that? :) Full code can be found here.