How to Interact With the Elrond Blockchain in a Simple Static Website

The Elrond blockchain is one of the layer one blockchain solutions, similar to Ethereum or Solana, and it seems to be getting more and more attention lately.

There is a lot of dev tooling in the ecosystem, but the tools primarily focus on bigger web applications and more advanced use cases around frontend frameworks like React/Next.

So what about all those small projects, websites, blogs, and similar projects? Could they also benefit from allowing the user base to connect and interact with the Elrond blockchain? Yup, there is a solution, and I would like to introduce it to you. But let's spend some words on why we need another solution and what is already available.

The Elrond blockchain is a fully featured operational network, and you can build on it utilizing the fast and cheap chain. The smart contracts are written in Rust, and there is also an official JavaScript/Typescript SDK solution for all the interactions with the protocol and smart contracts, called erdjs. Excellent tool. You can interact with the protocol and custom smart contracts in the Node and browser. Yes, in the browser too, but there is one catch. Because it is also built for Node backends, you will need to tweak it a little bit to be able to use it in the browser. You need a couple of Node modules polyfills. And the library itself is pretty big. Usually, not all parts are required in simpler use cases. The best example of such a frontend setup would be the Elrond Nextjs Dapp, where you can check the erdjs dependencies and what the Next configuration file looks like. You will find a couple of Webpack polyfills without which we won't be able to use the erdjs SDK in a browser.

Ok, so we have some React-based templates with build steps that will prepare the proper version of erdjs for browsers. But what if I have a simple WordPress blog or a static website and would like to allow my users to send some tokens or mint some NFT from my collection? Yes, there is a solution, and it is a custom Typescript tool that is a prebuilt and simplified wrapper over erdjs. What is so special about it if it still uses the erdjs under the hood, right? There are three main points here. Let's learn about them:

• It is much smaller because it exports only crucial tools from erdjs

• It doesn't require any build steps or framework. You can import it from CDN and use it on the static website.

• It has a simplified API for auth with providers like Maiar mobile app and Maiar browser extension (official Elrond wallets) (soon Ledger and Web wallet).

  
  

Ok, give me a link!

The tool is called elven.js (Elrond, Elves, you get it, right? ;)).

It is an open-source MIT licensed tool based on the official erdjs SDK. What it does is it exports the most necessary tooling from the set of erdjs libraries. The main ones and the ones responsible for authentication providers. All in one tool here. It gives a lot of simplification, and the file itself is small. It will probably be even smaller in the future.

Elven.js can do a couple of things:

• It allows the user to authenticate using their Elrond wallet address.
• It gives simplified methods for signing and sending transactions.
• It exports a couple of helpers from erdjs for building the transactions payloads and arguments.

It will generate the QR code for connecting the Maiar mobile app using WalletConnect. It will also integrate with the browser extension. In the future, there will also be an option to connect using Ledger hardware wallets and Elrond Web Wallet. These core functionalities will allow you to prepare authentication buttons, and then you will be able to make transactions.

How to use the elven.js

You will find a lot of information in its repository. You will also find the complete example that is hosted already. I will leave all the links here too.

To initialize it, you will need the script. You can get it from the CDN, or if you want to use it in, for example, Astro or Solid.js, you can import it from node_modules.

Initialization in a static website:

<html>
	<head></head>
	<body>
		<script type="module">
			import { ElvenJS } from 'https://unpkg.com/[email protected]/build/elven.js';
            await ElvenJS.init({
              apiUrl: 'https://devnet-api.elrond.com',
              chainType: 'devnet',
              apiTimeout: 10000,
              onLoggedIn: () => {},
              onLoginPending: () => {},
              onLogout: () => {},
            });
		</script>
	</body>
</html>

As you can see, we can use the devnet or mainnet API provider here. You can learn more about them in the official Elrond docs.

Then you can prepare, for example, the Maiar mobile authentication:

await ElvenJS.login('maiar-mobile', {
  qrCodeContainerId: 'qr-code-container',
});

There is a couple of different and working examples:

• Vanilla html demo (StackBlitz)

• Astro demo (StackBlitz)

• Solid.js demo (StackBlitz)

  
  

And there is also a source code in the 'example' directory in the repository and a live version hosted on Netlify:

• elven.js static website example
• elvenjs.netlify.app

Summary

A plug-n-play tool that is similar to ethers.js or web3.js. Of course, without a lot of functionality yet. I think such tools opened the door for many new developers who just wanted to jump in and test stuff. I know there will probably be many more similar tools, but I think something like that is highly needed in the ecosystem.

It is still in active development, but you can use it even now for many use cases. I will work more on it, and it will get more functionality and usage examples. It will also get more docs. For now, please refer to the README file in the GitHub repository and demo examples which are open source.

Reminder. Here are the links:

• elven.js GitHub

• elven.js NPM

  
  

Read about one of many use cases in this article: How to enable donations on any website using the Elrond blockchain and EGLD tokens.

Also, please follow me on Twitter and check my website at julian.io.