From Zero to Web3 Hero: Building a Multichain Dapp from Scratch

Blockchain technology has revolutionized our approach to transactions and data management. However, the complexity of blockchain development has made it difficult for non-blockchain developers to create decentralized applications (dApps). As a result, there is a growing need for tools that simplify the development process and make it more accessible for those unfamiliar with blockchain.

That's why today we’re excited to introduce a prominent solution for this problem — TransactionKit.

What is it?

TransactionKit is the world’s first React library for fast and straightforward Web3 development created by Etherspot. It is designed to help developers not familiar with blockchain technology and services to quickly and easily integrate blockchain functionality into their web applications.

It is a one-stop-shop solution for multichain self-custody smart contract wallets.

Who can use it?

Any dApp devs or front-end developers without deep blockchain knowledge.

It abstracts complex blockchain operations and instructions by hiding them behind the React components, whilst leveraging the use of counter-factual smart contract wallets and a multichain relayer infrastructure provided by Etherspot.

With TransactionKit, developers can:

• simply create and execute transactions;
• interact with smart contracts;
• transfer tokens;
• approval token transfers;
• deliver a seamless Web3 UX;
• manage digital assets without an in-depth understanding of the underlying blockchain technology;
• design freedom - TransactionKit doesn’t impose a UI on the developer;
• create dApps that are multichain by design (14+ blockchains are supported).

Further, we will discuss how TransactionKit works, its benefits, and how it can be used to simplify Web3 development.

Whether you are a seasoned crypto coder or a rookie blockchain developer attempting to include blockchain technology into your application, Etherpsot’s library has something to offer. So let's dive in and explore the world of multichain dApp development with TransactionKit.

Why Etherspot's TransactionKit?

Web3 development is a complex and challenging area requiring developers to understand blockchain technology, cryptography, and decentralized systems. The high barrier to entry and complexity associated with Web3 development have made it difficult for developers to create applications that can attract a more extensive user base.

Consequently, such a level of complexity does not help with mass adoption, which is necessary for the growth and development of the industry.

TransactionKit’s aim is to help developers onboard the next billion users.

Benefits you get

TransactionKit is the best way out of this problem. It provides a low barrier to entry, enabling developers to start building Web3 applications quickly. The library is easy to understand with universally understandable naming, simplifying the development process and making it easy to use. TransactionKit also doesn’t require you to sign up for various Web3 services, just plug (in a wallet) and play.

One of TransactionKit’s design philosophies is to embrace the Web2 world, enabling developers who are used to working with traditional front-end libraries to transition to Web3 development easily.

The library is extremely easy to install and get going - npm i @etherspot/transaction-kit. It is well-structured and documented with various CodeSandbox’s ready to go. Even the library's error messages are helpful and will attempt to point you in the right direction. Developers do not have to worry about the intricacies of the technology but can instead focus on building powerful applications.

Features of dApps made with TransactionKit

TransactionKit offers a range of features that make it a powerful tool for simplifying multichain dApp development. Some of its key features include the following:

Injecting the full power of Etherspot into any React app

Any React developer can incorporate Etherspot’s TransactionKit components into their code to gain access to a number of ready-made features.

Some of these components include:

<EtherspotUI />

This component enables seamless integration of the complete functionality of Etherspot into any React application. It takes a Web3 provider (i.e. your wallet), a chain ID (we support 14+ blockchains), and any child Ul components.

Essentially, thanks to this component you can incorporate Etherspot's functionality, meaning you get access to a wide range of blockchain-related features.

<EtherspotBatches />

The TransactionKit allows developers to batch multiple transactions into a single one. This reduces the number of activities required to perform a set of operations. Consequently, you provide faster and more efficient execution of transactions.

All this can be achieved with the <EtherspotBatches /> component. It can be skipped or given an ID, depending on your requirements. This component also returns transaction estimation data for all batches within it.

Using the <EtherspotBatches /> component is a useful way to save on gas fees when sending multiple transactions. By grouping transactions into batches, you can optimize your gas usage and reduce costs.

<EtherspotTransaction />

<EtherspotTransaction /> is an essential component of the Etherspot library that enables the specification of Ethereum transactions. This tag requires the specification of a destination blockchain address and a value to be sent. Additionally, it can accept a data value for smart contract interaction and allows for the inclusion of any necessary UI components for customization.

Using the <EtherspotTransaction /> component is a seamless way to initiate transactions on the Ethereum blockchain. Moreover, it enhances flexibility in customization by allowing the use of any UI components, making it more user-friendly.

<EtherspotTokenTransferTransaction />

The <EtherspotTokenTransferTransaction /> component helps you facilitate the transfer of an asset (such as PLR. USDC or SHIB) to another account. You just need to specify the token address, the destination address, and the number of tokens you want to transfer to the destination address, and then we'll do the rest.

<EtherspotApprovalTransaction />

The <EtherspotApprovalTransaction /> component authorizes the spending of an asset you own by another Smart Contract. This Smart Contract can serve any purpose but is usually associated with decentralized financial applications (also known as DeFi) such as Uniswap or Gamma.

In other words, it's like giving your friend permission to spend some of your money within a certain limit. In this scenario, the friend is the Smart Contract mentioned above.

Compatibility with various chains

TransactionKit is compatible with a range of chains, including Ethereum, Polygon, Gnosis Chain, Binance Smart Chain, Fantom, Aurora, Avalanche, Optimism, Arbitrum, Moonbeam, Celo, Fuse, Arbitrum Nova. Base and Polygon zkEVM are coming soon.

This ensures that developers have the flexibility to build decentralized applications on the blockchain of their choice.

Ability to pay transaction fees with stablecoins

In order to carry out a transaction on a blockchain, it is necessary to pay fees using the network's native token. However, this can pose a challenge for individuals who are unfamiliar with blockchain technology, as they must first acquire these tokens.

That’s where Etherspot’s solution comes in handy. Users now can pay transaction fees with stablecoins, not just the native token of the blockchain they are using (ETH, BNB, etc.). This also allows them to avoid the high transaction fees associated with some blockchains (e.g., Ethereum) and can result in significant cost savings.

Check out TransactionKit CodeSandbox here.

Five Pillars of Web3 for TransactionKit

The development of decentralized applications (dApps) on blockchain networks can be complex and time-consuming, with developers needing to manage accounts, transactions, and security measures.

Etherspot aims to simplify the process with its TransactionKit library. TransactionKit is powered by Etherspot’s SDK. Built around five core product pillars, Etherspot’s SDK offers a range of features to suit the needs of different projects.

Further, we will explore these points in detail and how they contribute to making Etherspot's tools valuable products for Web3 developers.

Simplicity

Etherspot’s SDK provides developers with TransactionKit - a clean and concise library for working with accounts and transactions, allowing them to focus on their application's logic rather than the Ethereum network's intricacies. At the same time, Etherspot’s team created a BUIDLer React component for plug & play integration.

Flexibility

Etherspot’s SDK provides developers with a range of tools and features for working with Ethereum accounts, including support for any Web3 provider and the ability to manage multiple accounts from a single interface.

This flexibility makes it easy for developers to tailor their applications to their specific needs, whether they are building a simple decentralized application (dApp) or a complex smart contract.

Security

The SDK implements industry-standard security measures, including encryption to ensure that developers and their users are protected from potential threats.

Scalability

Etherspot SDK is designed to work seamlessly with different blockchains and Ethereum's layer 2 solutions, such as Optimism and Arbitrum (currently supports 14+ chains), allowing developers to build applications that can handle high volumes of transactions with minimal gas costs.

This feature is essential for building dApps that can serve large user bases without sacrificing performance or security.

Interoperability

The SDK is designed to work with programming languages such as JavaScript and TypeScript, making it easy for developers to integrate Etherspot’s functionality into their existing codebases.

In addition, the SDK supports popular Ethereum tools such as MetaMask and Infura, making it easy for Web3 coders to work with familiar tools and workflows.

Give it a try

Building a multichain dApp without blockchain experience may seem daunting, but now it is not impossible. With the right tools and knowledge, anyone can build a dApp that is secure, transparent, and decentralized. Following the steps outlined in this documentation, you can develop your own multichain dApp and join the growing community of decentralized applications.

With its powerful features and easy-to-use structure, TransactionKit is the perfect tool for anyone looking to get started in the exciting world of blockchain development.