April 12, 2022

Integrate Your Svelte App with a Smart Contract

Overview

Today we will be building a sample app in Svelte, and connecting it to a smart contract that we deploy on the Ropsten Network.

Our frontend will be able to do the following:

  • Allow the user to send a greeting message along with a wave to the contract owner (demo)
  • Display all the greeting messages on the front-end along with the sender's address
  • A contract for storing a user's greeting message and their wave

NOTE:
* Have a look at the demo video to get the better understanding of what we'll be building.
* Refer to the code located here to follow along.

Our tech stack looks like the following:


Prerequisites

  1. Node.js environment on your local machine
  2. IDE or Code Editor
  3. Familiarity with the the CLI
  4. MetaMask extension in your browser

You do not need real Ether as we will be using a test network for this tutorial.

Getting Started

Clone this svelte starter template which contains all the required components and CSS properties by running the following command.

git clone https://github.com/quiknode-labs/wave-portal-svelte/tree/main/code/wave-portal-starter-boilerplate

Following that, navigate into the project directory and install node_modules by running the below command.

cd wave-portal-svelte/code/wave-portal-starter-boilerplate/
yarn

Inside the wave-portal-starter-boilerplate directory, install ethers and hardhat by running the following command.

yarn add ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

Initializing and Configuring Ethereum development environment

To compile and deploy our smart contract, let us initialize a new Ethereum development environment with Hardhat by running the command below. Before running the script, make sure we are in the wave-portal-starter-boilerplate folder.

npx hardhat

Select the following settings when prompted

  • What do you want to do? Select Create a basic sample project
  • Hardhat Project Root  Press Enter to set current directory as root
  • Do you want to add a .gitignore? (Y/n) n


Following that, run the command:

yarn add --dev "[email protected]^2.6.6" "@nomiclabs/[email protected]^2.0.0" "[email protected]^3.0.0" "[email protected]^4.2.0" "@nomiclabs/[email protected]^2.0.0" "[email protected]^5.0.0"

Now you should see a hardhat.config.js file. You should also have the contracts and scripts folders in your code/wave-portal-starter-boilerplate/ directory.

Due to a MetaMask configuration issue, we need to update the chain Id of our Hardhat Configuration to 1337. Also, we need to update the location for the artifacts to be in the code/wave-portal-starter-boilerplate/src directory of our app.

Navigate to code/wave-portal-starter-boilerplate/hardhat.config.js file. This file consists of all the configurations regarding the hardhat ethereum environment. Make sure your hardhat.config.js looks like this.

module.exports = {
  solidity: "0.8.4",
  paths: {
    artifacts: "./src/artifacts",
  },
  networks: {
    hardhat: {
      chainId: 1337,
    },
  },
};

We have our Ethereum Environment ready, so let us get our smart contract.

Delete Greeter.sol under the code/wave-portal-starter-boilerplate/contracts folder in the root directory and create a new file named WavePortal.sol. WavePortal.sol is our smart contract for this project. In this new file, paste the smart contract from below. This contract will allow us to store the wave, reaction type, greeting message and grants prizes to a random user.

Your WavePortal.sol file should look like this.

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.0;

contract WavePortal {
	enum Reaction {
		Wave,
		Cake,
		Hype
	}

	struct Wave {
		Reaction reaction;
		string message;
		address waver;
		uint256 timestamp;
	}

	uint256 totalWaves;
	Wave[] public waveList;

	event NewWave(
		Reaction reaction,
		string message,
		address indexed from,
		uint256 timestamp
	);

	constructor() {}

	function wave(Reaction _reaction, string memory _message) public {
		totalWaves += 1;
		waveList.push(Wave(_reaction, _message, msg.sender, block.timestamp));
		emit NewWave(_reaction, _message, msg.sender, block.timestamp);
	}

	function getAllWaves() public view returns (Wave[] memory) {
		return waveList;
	}

	function getTotalWaves() public view returns (uint256) {
		return waveList.length;
	}
}

Explanation of the code above:


Line 1: Specifying SPDX license type, which is an addition after Solidity ^0.6.8. Whenever the source code of a smart contract is made available to the public, these licenses can help resolve/avoid copyright issues. If you do not wish to specify any license type, you can use a special value UNLICENSED or simply skip the whole comment (it won't result in an error, just a warning).

Line 2: Declaring the solidity version.

Line 4: Starting our Contract named WavePortal.

Line 5: Declaring Reaction as enum with Wave, Cake and Hype as predefined values.

Line 11: Declaring Wave as struct containing variables reaction of type Reaction, message of type string, waver of type address and timestamp of type uint.

Line 18: Declaring variable totalWaves of type uint to store the total number of waves.

Line 19: Declaring an array wavelist of type of Wave to store all the waves.

Line 21: Declaring an event NewWave, containing information about the reaction, message, sender address and timestamp of the wave. This event gets emitted once our wave gets stored in the contract successfully.

Line 28: Initializing the constructor, but do not need to set anything, so we leave it empty.

Line 30: Declaring function wave with two arguments, _reaction of type Reaction which will store our reaction information and _message of type string which will store the message of the user. Declaring _message as memory means, it will get destroyed from the memory once the function gets executed.

Line 36: Declaring function getAllWaves, that returns all the an array containing all the waves.

Line 40: Declaring function getTotalWaves, that returns the number of waves.

Interacting with the Ethereum Blockchain

We can interact with our smart contract from our Svelte app using the combination of our contract's ABI, the Ethers.js library, and our contract address.

ABI stands for Application Binary Interface. We can think of ABI as an interface that provides our frontend with all the available callable functions and variables from our smart contract.

We can get ABIs by compiling our smart contract using a development framework like Hardhat. You can often find the ABI for a smart contract on Etherscan.

So, let us compile our smart contract by running the command below.

npx hardhat compile

On successful compiling, you should see a new folder named artifacts under the code/wave-portal-starter-boilerplate/src folder. You can see the ABI of our contract under artifacts/contracts/WavePortal.json folder. We can use this ABI by simply importing this .json file.

Deploying to localhost

For easy and fast interaction, we will be deploying our contract to a local test node. For that, we need to start a local chain by running the following command

npx hardhat node

Running this command will list all the accounts and their private keys in your terminal.


These are the 20 test accounts created for us by Hardhat that we can use to deploy and test our smart contract locally. Each account has a sufficient amount of test Ether.

Let us deploy our smart contract to localhost using one of these accounts. But before that, navigate to the code/wave-portal-starter-boilerplate/scripts folder and rename scripts/sample-script.js to scripts/deploy.js. This file will get executed when we'll try to deploy our contract. Inside this deploy.js file, update your main() function such that your deploy.js file looks like below.

// deploy.js

async function main() {
  const WavePortal = await hre.ethers.getContractFactory("WavePortal");
  const wavePortal = await WavePortal.deploy();
  await wavePortal.deployed();
  console.log("WavePortal deployed to:", wavePortal.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Explanation of the code above:


Line 1: Declaring an asynchronous function main, that executes when we will deploy our smart contract.

Line 2: Calling hre.ethers.getContactFactory that returns an instance of the contract.

Line 3: Calling .deploy(), that deploys an instance of the contract

Line 4: Calling .deployed(), that awaits for the contract to get deployed.

Line 5: Logging the address of the deployed contract in the console.

Line 7: Calling the main() function and add error handling.

Now, let us run the deploy script and provide the flag --network localhost to the CLI which indicates that we want to deploy to our local network.

npx hardhat run scripts/deploy.js --network localhost

This script will deploy our smart contract to our local network and now we should be able to interact with it.

On successful deployment, you should see the following output in your terminal


NOTE: This contract is deployed on the local node, using the first account that was created when we started the local network.

Store this address for your reference, as we will need it while interacting with our smart contract from our Svelte Client.

Now, to send a transaction to our smart contract deployed on the test node, we need to configure MetaMask wallet to use one of the accounts created by hardhat while running the command npx hardhat node

Let us import one of these accounts into our MetaMask wallet and use its test ethers. To do so, open MetaMask and update the network to be Localhost 8545


On Localhost 8545, click on Import Account from the accounts menu on the top-right.


Copy and paste any one of the private keys from the CLI and click on Import. Once the account is imported, you should see the MetaMask interface like this.



As we have our contract deployed and our MetaMask wallet configured, let us start interacting from our Svelte frontend.

Connecting to Ethereum with Svelte

For this tutorial, we are not going to focus on developing the UI, instead, we will be focussing entirely on the core functionality and integration. In the frontend, we will mainly focus on 2 things

  1. Fetch all the greeting messages from our smart contract and display them in the frontend.
  2. Create functions to send messages along with the greeting.

Let us start integration with our front end. To test our frontend, start the server using the following command.

Before starting the server, make sure that the current directory is code/wave-portal-starter-boilerplate/

yarn dev

Now you should see our front end as below on the localhost:5000. If localhost:5000 doesn't work then try http://127.0.0.1:5000/.


You will notice that, by clicking on any of the greetings, nothing is happening. Also, we are not able to see any previous greetings. So, let us add logic to send greetings to our smart contract and fetch all the previous greetings.

Navigate to the App.svelte file under the code/wave-portal-starter-boilerplate/src folder. App.svelte gets rendered on the home page upon server start and thus contains all the functionality to fetch the waves.

Update your contract address on line 10, which logged into the CLI while deploying it.

const CONTRACT_ADDRESS = 'YOUR_CONTACT_ADDRESS';

Now, paste the below code in the getAllWaves() function on line 12 in App.svelte. This function fetches all the greetings from the blockchain network to our Client.

async function getAllWaves() {
    if (!window.ethereum) {
      return;
    }
    
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const wavePortalContract = new ethers.Contract(
      CONTRACT_ADDRESS,
      WavePortal.abi,
      provider
    );
    const recievedWaves = await wavePortalContract.getAllWaves();
    
    if (!recievedWaves) {
      waveList = [];
      return;
    }
    
    const normalizeWave = (wave) => ({
      reaction: wave.reaction,
      message: wave.message,
      waver: wave.waver,
      timestamp: new Date(wave.timestamp * 1000),
    });
    
    waveList = recievedWaves
      .map(normalizeWave)
      .sort((a, b) => b.timestamp - a.timestamp);
    console.log('waveList: ', waveList);
    return;
  }

Explanation of the code above:


Line 1: Declaring an asynchronous function getAllWaves() that will fetch all the waves from our smart contract.

Line 2: Checking if we are getting an ethereum object in our window, if not we will return null.

Line 6: Getting the provider to access the blockchain data.

Line 7: Creating a local instance of our contract by passing Contract address, Contract abi and provider as an argument.

Line 12: Fetching all the waves from our smart contract by calling getAllWaves() method.

Line 13: If we do not get any waves, then we will return an empty array.

Line 18: Declaring function normalizeWave(), that will destruct the wave.

Line 25: Destructing the recievedWaves(), sorting on the basis of timestamp and assigning these sorted waves to the waveList variable.

We have to import the ABI of our WavePortal contract which enables us to interact with our smart contract. Thus add the following import statements on line 3 in App.svelte.

import { ethers } from 'ethers';
import WavePortal from './artifacts/contracts/WavePortal.sol/WavePortal.json'

Now, start the development server of svelte. You should see an error as shown below.


This is because we are trying to import a json file in our App.svelte and to import a json we need to add an extra plugin rollup-plugin by running the following command.

yarn add @rollup/plugin-json

Navigate to the rollup.config.js file in code/wave-portal-starter-boilerplate/ directory. This file contains all your configurations for the rollup. Now, in your rollup.config.js file navigate to the plugins array as show below and add json(), on line 60.

plugins: [
     commonjs(),
     json(),
     ...
]

In rollup.config.js file, in code/wave-portal-starter-boilerplate/ directory in order to use json(), we also need to import json() from our newly added plugin, thus add the following import statement in line 7 of rollup.config.js file.

import json from "@rollup/plugin-json";

Now, restart the development server, you should see the frontend server started successfully. Currently, you won't see any greetings on our front end because we don't have one. So, let's add a function to send the greeting.

For that, navigate to code/wave-portal-starter-boilerplate/src/components/SendWave.svelte file. This file will contain logic for sending the wave. Complete the sendWaveReaction() function in line 7 by pasting the code from below. This function will send wave reaction.

async function sendWaveReaction(reaction, message) {
    loading = true;
    try {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const wavePortalContract = new ethers.Contract(
        CONTRACT_ADDRESS,
        WavePortal.abi,
        signer
      );
      const transaction = await wavePortalContract.wave(reaction, message, {
        gasLimit: 400000,
      });
      await transaction.wait();
      message = '';
      fetchWaves();
      loading = false;
    } catch (error) {
      alert('Error while sending wave', error);
      loading = false;
    }
  }

Explanation of the code above:


Line 1: Declaring an asynchronous function sendWaveReaction(), that will send our reaction to our smart contract on the blockchain network.

Line 2: Setting loading variable to true.

Line 4: Declaring a provider variable that contains the read-only abstraction to access the blockchain data.

Line 5: Storing the signer object from our provider in singer variable, that will allow us to sign the transaction.

Line 6: Creating the local instance of our smart contract.

Line 11: Calling the wave() function from our smart contract, with reaction and message as an arguments.

Line 14: Waiting for the transaction to get completed.

Line 15: Resetting the value of message variable after sending the wave.

Line 16: Fetching all the waves again.

Line 17: Setting the loading indicator to false.

Line 19: Showing an alert if something goes wrong.

We also need to add the following import statements in SendWave.svelte file in line 2.

javascript  
import { ethers } from 'ethers';
import WavePortal from '../artifacts/contracts/WavePortal.sol/WavePortal.json';

To interact with our smart contract from our front end, we need to connect our MetaMask wallet to our website. For that, in code/wave-portal-starter-boilerplate/src/components/Wallet.svelte file, complete the connectWallet() function in line 6 by pasting the below code. Wallet.svelte will contain all the logic required for connecting MetaMask wallet to our frontend.

async function connectWallet() {
    walletConnected = false;
    const { ethereum } = window;
    await ethereum
      .request({ method: 'eth_requestAccounts' })
      .then((accountList) => {
        const [firstAccount] = accountList;
        account = firstAccount;
        walletConnected = true;
      })
      .catch((error) => {
        walletConnected = false;
        connectWalletError = error;
        console.log('error connecting wallet');
      });
  }

Explanation of the above code:


Line 1: Declaring an asynchronous function connectWallet().

Line 2: Setting walletConnected variable to false.

Line 3: Getthing an ethereum object from our window.

Line 4: Calling ethereum.request({ method: 'eth_requestAccounts' }) that will give us the accounts of the connected wallet.

Line 7: Getting first account from an array of all the accounts

Line 8: Assining account variable the value of first account.

Line 9: Setting walletConnected variable to true.

Line 12: Setting walletConnected variable to false, if encountered an error while connecting wallet.

Now, restart the server if needed and you should see a MetaMask popup on clicking the Connect MetaMask button. After connecting we'll be able to successfully send greetings, waves as well as fetch all the greetings.

Now, we have our smart contract running successfully on a local node, so let's deploy it on live TestNet.

Deploying to Ropsten TestNet

We'll be deploying to the Ropsten test network in this tutorial. For that, update your MetaMask wallet to connect to the Ropsten network and send yourself some test ethers from this test faucet.

We can get access to Ropsten by signing up with QuickNode.

We’ll sign up for a free trial QuickNode and copy the HTTP PROVIDER URL that we’ll need later to connect to the blockchain.

Screenshot of Quicknode Ropsten Endpoint

Once you've created the node, you'll get a URL that looks like this

To deploy to the test network we need to update our hardhat config with a piece of additional network information. One thing is to set the private key of the wallet we'll be deploying from. You can export your private key from MetaMask by clicking menu > Account details > Export private key.


Now add networks property in hardhat.config.js in line 24 under code/wave-portal-starter-boilerplate/ directory as shown below.

module.exports = {
  defaultNetwork: "hardhat",
  paths: {
    artifacts: './src/artifacts',
  },
  networks: {
    hardhat: {},
    ropsten: {
      url: "<YOUR_QUICKNODE_URL_HERE>"
      accounts: [`0x${your-private-key}`]
    }
  },
  solidity: "0.8.4",
};

To deploy our smart contract to the Ropsten network, run the following command in code/wave-portal-starter-boilerplate/ directory.

npx hardhat run scripts/deploy.js --network ropsten

On successful deployment, you should see the following output in your terminal.

WavePortal deployed to: 0x4f5F98f3696e1dDc107fd786d252D6Ff8D351B6b

Once your contract is deployed you should be able to start interacting with it. Now you should be able to view your live Contract on Etherscan TestNet Explorer.

Conclusion

A lot of things can still be improved in this project.

Try:
  • showing the loading indicator while the transaction is in progress
  • detect the current network of the MetaMask
  • if the user is on a network other than Ropsten, then prompt the user to change the network.

Congratulations! You have integrated your first dApp using Svelte. Try the challenges mentioned above and feel free to connect with me (@Nazeeh21 on Twitter) if you encounter any errors.

Subscribe to our newsletter for more articles and guides on Web3. If you have any feedback, feel free to reach out to us via Twitter. You can always chat with us on our Discord community server, featuring some of the coolest developers you’ll ever meet :)
Ready to try QuickNode? Start your 7-day free trial

Related articles 48

Apr 13, 2022 How to Send a Transaction On Solana Using JavaScript

Hello reader! Today is an exhilarating day because we are going on an expedition to the Solana Blockchain. Solana is an up-and-coming blockchain seeking to improve upon the current ecosystem's solutions to the complex problem of providing a secure, scalable, decentralized...

Continue reading
Dec 29, 2021 How to generate a new Ethereum address in PHP

PHP is very popular in developing the backend of websites or web applications. PHP has a huge crowd of developers trusting it as their go-to language. In this guide, we will see how we can generate a new Ethereum address in...

Continue reading
Apr 12, 2022 How to do a non-custodial transaction with QuickNode

Private keys are one of the most sensitive pieces of data when it comes to cryptography and the blockchain. However, there has always been debate/confusion about choosing between custodial wallets (where the wallet provider has custody of the user’s private key) and...

Continue reading
Apr 12, 2022 How to Setup Local Development Environment for Solidity

The success story of blockchain started with Bitcoin and was given wings by Ethereum. Ethereum was the first blockchain to introduce programmable software to the immutable ledger; these programs that live on the blockchain are called smart contracts. Solidity is the...

Continue reading
Apr 12, 2022 How to connect to Ethereum using .NET (Nethereum)

Dotnet or .NET is very popular for the development of desktop applications, most Windows desktop applications are built using .NET, and it also contributes largely to web application’s tech stack. In this guide, let’s see how we can connect to Ethereum using .NET and

Continue reading
Dec 29, 2021 How to generate a new Ethereum address in Ruby

With high usage in web applications and straightforward syntax, Ruby is used by a vast number of people. This guide will cover creating an Ethereum address in Ruby using ruby-eth...

Continue reading
Jan 27, 2022 How to Set Up a Near Project from Scratch

In this tutorial we will look at how we can setup a basic NEAR project from scratch, installing and configuring dependencies and customizing the project to work well with AssemblyScript.We will first start by initializing our project with a package.json file using...

Continue reading
Apr 12, 2022 Estimating gas price using pending transactions in Python

To send a transaction on the Ethereum network, you need to pay fees for including the transaction in a block as well as the computation necessary in the transaction; this fee is called gas. The transactions are accepted into the block based on the amount of gas they are...

Continue reading
Dec 29, 2021 Como crear y lanzar un ERC-721 (NFT)

Coleccionables digitales que son compatibles con ERC-721 se han vuelto muy populares desde el lanzamiento de Cryptokitties y han ganado adopción masiva en los últimos meses. Esta guía cubrirá la parte de creación y lanzamiento...

Continue reading
Dec 29, 2021 How to Build Your DApp Using The Modern Ethereum Tech Stack: Hardhat and EthersJs

When building a smart contract on the Ethereum blockchain, new developers tend to reach out to tools like truffle and web3.js in building their smart contracts. This tutorial will look at how to use Hardhat and Ether.js, which are now becoming the standard in building...

Continue reading
Apr 12, 2022 How to connect to Ethereum network using Java / Web3j

We can say that Java is one of the most versatile languages out there, and it continues to be relevant in today's time. Java is so popular because of its massive user base and use cases. In this guide/tutorial, we'll learn how to connect to the Ethereum Blockchain network...

Continue reading
Apr 12, 2022 How to integrate IPFS with Ethereum

It can be costly to store massive files on a blockchain mainnet, and this is where decentralized file storing systems like IPFS can come in handy. Sometimes, NFTs use IPFS as well. In this guide, we’ll cover how we can integrate IPFS with...

Continue reading
Apr 12, 2022 How to connect to the Ethereum network using Ruby

Ruby has a huge fanbase. Ruby was developed by its creator with an intention to create a language people can have fun using. Ruby has been largely accepted by the developers all around the world since it’s launch, in fact, the biggest tech communities in many cities are...

Continue reading
Apr 12, 2022 How to Mint an NFT with Ethers.js

This guide demonstrates how to mint an NFT on the Polygon blockchain using the Ethers.js library and our Factory ERC-1155 contract we built in an earlier

Continue reading
Apr 12, 2022 How to connect to Ethereum network with ethers.js

When someone thinks of developing a dApp the first tool that comes to their mind is web3.js which is pretty common because of its popularity in the community and wide use cases, dApp development has been consistently growing and there are a lot of developers who want to...

Continue reading
Apr 12, 2022 How to Mint an NFT on Solana

Updated at: April 10, 2022Welcome to another QuickNode guide on Solana - the up-and-coming blockchain that seeks to solve the scalability issues of Ethereum. We will be walking through step-by-step how to create an NFT on Solana. NFT, short for Non Fungible Token,...

Continue reading
Apr 12, 2022 The Web3 Developer Stack

A developer stack is a bag of technologies a developer possesses. For example, MEAN (MongoDB, Express.js, AngularJS/Angular, and Node.js) and MERN (MongoDB, Express.js, React, and Node.js) are common web developer stacks. Similarly, today we will learn more about the web3...

Continue reading
Apr 12, 2022 How to deploy a smart contract with Brownie

Python is one of the most versatile programming languages; from researchers running their test models to developers using it in heavy production environments, it has use cases in every possible technical field. In today's guide, we will learn about Brownie, a Python-based...

Continue reading
Dec 29, 2021 Introduction to Scaffold-ETH 🏗

Developing applications involves juggling several moving pieces like front-ends, back-ends, and databases. But developing a decentralized application on a blockchain adds a few more elements like smart contracts and nodes that allow you to connect to the...

Continue reading
Dec 29, 2021 How to generate a new Bitcoin address in JavaScript

To do any type of transaction on the Bitcoin blockchain, you’ll need a public key or a Bitcoin address. In this guide, we’ll cover how to generate a new Bitcoin address in JavaScript using CyrptoCoinJS.

Continue reading
Dec 29, 2021 Como crear un NFT en SOLANA

¡Hola querido lector! Bienvenidos a una nueva guía de Solana.Solana es una blockchain que promete mucho a la hora de intentar resolver los problemas de escalabilidad que podemos apreciar en otras blockchains, como Ethereum por...

Continue reading
Apr 12, 2022 How to create a token on Terra using Terra Station

Terra is the stablecoins framework with a pool of tokens to work with. Today in this guide, we will learn how to create our own token on the Terra blockchain network.PrerequisitesA Terra Bombay testnet...

Continue reading
Apr 12, 2022 How to Deploy an NFT on Solana Using Candy Machine V2

Hello readers, in this guide we are going to go into how to set up an NFT mint on Solana using Candy Machine v2. Previously we had a guide up on the V1, but it is now deprecated and is no longer in use for new mints.Candy Machine v2 has some...

Continue reading
Apr 12, 2022 How to get the balance of an ERC-20 token

When a new token is made on the Ethereum network, it usually follows a specification. The most popular of which is the ERC20 specification. To meet this ERC20 standard, one's token must have a multitude of...

Continue reading
Apr 12, 2022 How to Send an EIP-1559 Transaction

While Ethereum has been trying to scale, it has encountered some gas price issues. Many layer 2 solutions and sidechains sprang into existence to solve this problem, but Ethereum is the main chain, and at some point, it has to be improved. EIP-1559 was introduced to...

Continue reading
Apr 12, 2022 How to Create an Address in Solana using JavaScript

Hello reader! Welcome to QuickNode's first Solana guide. Solana is an up-and-coming blockchain that seeks to solve the scalability issues that Ethereum has been handling. You will walk through step-by-step how to create a Solana address using the @solana/web3.js...

Continue reading
Apr 12, 2022 How to create your own DAO with Aragon

Blockchain provides us with the power of decentralization. Decentralization means the transfer of power to users/members rather than having a single centralized authority governing everything; it enables various use cases in finance, governance, voting, fundraising, etc....

Continue reading
Apr 12, 2022 How to create and deploy a smart contract with Hardhat

Ethereum development environments like Truffle and Hardhat make it easier to work with smart contracts and Ethereum nodes. They provide a set of tools to seamlessly write, test, and deploy...

Continue reading
Apr 12, 2022 How to Connect to Terra with JavaScript using Terra.js

Stablecoins have been bridging the gap between traditional currencies and blockchains. Stablecoins offer stable price tokens pegged by a reserve asset which is often a fiat current like USD, EUR, GBP. The Terra protocol provides a framework to work with stablecoins. This...

Continue reading
Apr 12, 2022 How to connect to Ethereum network using Go

Go helps you make faster scalable backends and this guide will show you how to connect your backend to Ethereum (and make it even faster, more reliable, and globally accessible, all thanks to QuickNode’s global infrastructure). What is...

Continue reading
Apr 29, 2022 How to re-send a transaction with higher gas price using ethers.js

Sometimes, you submit a transaction on Ethereum without enough gas due to network congestion or too many pending transactions offering a higher gas price than you have offered on your transaction. If you have a high priority transaction but low gas, you could end up...

Continue reading
Apr 12, 2022 How To Fork Ethereum Mainnet with Hardhat

Forking the chain at an older block of the blockchain is helpful if you want to simulate the blockchain’s state at that block; Hardhat has this functionality built in. In this guide, let’s go through the process of forking the Ethereum Mainnet at an older...

Continue reading
Apr 12, 2022 How to connect to Ethereum using PHP

PHP is a very popular choice among developers and has a vast community due to its long presence in web development. In this guide, we’ll cover how to connect to Ethereum with PHP using the web3.php...

Continue reading
Apr 12, 2022 How to connect to the Ethereum network using Python using Web3.py

You can build Ethereum applications in different programming languages. In this article, we will connect to the Ethereum network using Python.PrerequisiteEthereum Node (We will use QuickNode’s free...

Continue reading
Apr 12, 2022 How to use Subspace with QuickNode

In this guide, we'll understand a bit about reactive development and how to use Subspace with QuickNode.JavaScript is the programming language behind most of the internet apps and websites. JavaScript today has become one of the most used programming languages,...

Continue reading
Apr 12, 2022 How to fetch Ethereum event logs in Ruby

Ethereum log records are very useful to understand and keep track of smart contract events. In this guide, we are going to learn how to fetch ethereum event logs in Ruby using ethereum.rb ruby...

Continue reading
Apr 12, 2022 How to Fork Ethereum Blockchain with Ganache.

Forking and running a local simulated Ethereum environment is essential if you want to work with DeFi or do Ethereum development in general. In this guide, we’ll cover how to fork Ethereum Blockchain with

Continue reading
Apr 12, 2022 How to connect to Ethereum network with Web3.js

Libraries and frameworks make the development process a lot easier and faster. When it comes to Ethereum development, Web3.js is the go to library. That's because Web3.js is the official library, from the

Continue reading
Dec 27, 2021 How to Build a Wallet Generator for Solana in React

In this practical guide you will build a basic Wallet application with React and Web3 that will interact with Solana Network.This application will do the following operations:Connect to the...

Continue reading
Dec 29, 2021 How to Connect Your Dapp With MetaMask Using Ethers.js

In our dApp, we will have a simple react user interface that has a material button asking the user to connect to MetaMask. And if they do not have an account, they can create one or log in to their account. They will then view their wallet balance and address displayed on...

Continue reading
Dec 29, 2021 How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".If you have been around the Web3 community you may have come across a more recent player in the game: "Login with MetaMask". For instance, this is...

Continue reading
Dec 29, 2021 How to generate a new Ethereum address in Go

Golang is very popular among backend developers for building infrastructures and microservices. Go is a procedural programming language. Developed in 2007 by Robert Griesemer, Rob Pike, and Ken Thompson at Google, then launched in 2009 as...

Continue reading
Dec 29, 2021 How to generate a new Ethereum address in Python

Python is one of the most versatile programming languages out there with an abundance of use cases; We can build many applications with Python from client-side to back end. In this guide, we will cover creating an Ethereum address in Python using the

Continue reading
Dec 29, 2021 How to generate a new Ethereum address in JavaScript

When it comes to programming, there’s hardly anyone who has not used or heard about JavaScript. JavaScript was initially created for client-side scripting but has become a full-featured Object-Oriented...

Continue reading
Dec 29, 2021 Como crear un NFT en Solana usando Candy Machine

¡Hola querido lector! Hemos recibido un montón de pedidos por otra guía de NFT en Solana. En la guia anterior no llegamos hasta la parte mas jugosa, que es la parte donde enlazamos una...

Continue reading
Jan 17, 2022 How to Mint an NFT on Solana Using Candy Machine

NOTE: This guide is based off of the V1 of Candy Machine. V1 has been deprecated. You can catch an up-to-date guide on V2 here

Continue reading
Apr 12, 2022 How to send a transaction on Terra using JavaScript and Terra.js

Terra has emerged as the choice of blockchain for developing a stablecoin based dApp. Terra provides a cutting-edge stablecoin framework for modern dApp development. In this guide, we will learn how to send a transaction on Terra using their javascript library...

Continue reading
Apr 12, 2022 How to Lazy Mint an NFT on Rarible with Rarepress

NFTs are great for creators to monetize their artwork and for people to get ownership of an item. But since gas prices are usually high given the highly in-demand space on Ethereum, minting an NFT or an NFT collection can become costly for a creator. Lazy minting solves...

Continue reading