Build a dApp with Ethers and SvelteJS

Prerequisites

To follow this article, you need the following:

• An understanding of SvelteJS and Solidity
• NPM and NodeJS installed in your system

You don’t need to understand Ethers and Truffle, but understanding them helps.

What is a dApp?

A dApp (decentralised application) is an app that runs on a peer-to-peer network like the blockchain. DApps can often be confused with regular apps because they use a similar interface. The only things that separates a dApp from an app is the lack of a central server, and the use of a blockchain network. A popular example of a dApp is OpenSea. It interacts with several blockchain networks, and it isn’t hosted by a central server.

Most dApps rely on smart contracts to process data on a blockchain. Smart contracts are very important and are a very secure method for dapp to store and process data collectively. Development of smart contracts varies on all blockchain. Ethereum provides a programming language called Solidity, for creating them.

Initialising The Project

Before building the application, let’s start by setting up our. Make sure you have truffle and ganache installed in your system. If they are not installed, run this command to install them:

$ npm install -g truffle ganache

Truffle is a framework for building, compiling and deploying smart contracts. And Ganache allows you to create a local development blockchain in your computer system.

You can confirm that the packages were installed with these commands:

$ truffle version
$ ganache version

Now, start up the local development blockchain with ganache:

$ ganache

The environment allows you to deploy and experiment with smart contracts on a simulated local blockchain.

Now, you can initialize the project with this command:

$ truffle init svelte-dapp

This will create a svelte-dapp directory with the following tree structure:

svelte-dapp
├── contracts/
│   └── Migrations.sol
├── migrations/
│   └── 1_initial_migration.js
│   └── src/
│       ├── App.svelte
│       └── main.js
├── test/
└── truffle-config.js

Open the svelte-dapp folder in your terminal and create the svelte frontend project with this command:

$ npx degit sveltejs/template dapp-frontend

In your terminal, enter into dapp-frontend and run the command below to install the dependencies:

$ npm install

Finally, install ethers because it allows the dApp to interact with the Ethereum blockchain:

$ npm install ethers

The Solidity Contract

Now that you have your project setup, you can build the smart contract. To build a smart contract, create a new file inside the contracts folder. For this project, create a StoreMessage.sol file with the below in it:

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

contract StoreMessage {
  string public message;
  
  constructor () {
    message = "Hello, There";
  }

  function setMessage (string memory _message) public {
    message = _message;
  }

}

The smart contract is a simple solidity script that:

1. Tells the compiler which version of Solidity to use

pragma solidity ^0.8;

2. declares a public variable called message:

string public message;

3. Initializes the message variable with “Hello, There!” when the contract is deployed:

constructor () {
  message = "Hello, There";
}

4. Creates a setMessage method that allows you to change the message variable:

function setMessage (string memory _message) public {
    message = _message;
  }

This smart contract has two interfaces when you deploy it:

• message, allows anyone to get the message string
• setMessage, allows anyone to change the message string

Compile the smart contract

Before compiling the contract, make sure that the version of your compiler is the same as the smart contract ( 0.8 ) in the truffle-config.js file:

To compile this contract, run the command below:

$ truffle compile

Note: you need an active internet connection. Truffle has to download the solidity compiler before compiling.

Deploy the smart contract

After compiling, the next thing to do is to deploy the contract. To deploy the contract, create a migration script. The migration script allows you to execute operations before and after deploying the contract. To create the migration, open the migrations folder and create a new 2_deploy_message_contract.js file with the following in it:

const StoreMessage = artifacts.require("StoreMessage");

module.exports = function (deployer) {
  deployer.deploy(StoreMessage);
};

Here's a breakdown of the script:

1. Import the StoreMessage contract to the script:

const StoreMessage = artifacts.require("StoreMessage");

2. Create an anonymous function and assign to module.export:

module.exports = function (deployer) {...

3. Use deployer argument to deploy the StoreMessage contract:

  deployer.deploy(StoreMessage);

After creating the migration, open the truffle-config.js file and uncomment the development object:

Truffle uses the development entry to connect to the local development node at “http://127.0.0.1:8545”. To deploy the smart contract, run this command:

$ truffle deploy --network development

When you run the deploy command, truffle executes the migration files in the order of their name.

Interact with the contract

To interact with the smart contract from truffle, run this command:

$ truffle console

The truffle console command spins up a console that allows you to interact with smart contracts. To create the instance of the deployed StoreMessage contract, run:

truffle(development)> contract = await StoreMessage.deployed()

You can get the contract’s address with:

truffle(development)> contract.address

You can also call the contract methods:

• message, to get the string value of message:

truffle(development)> contract.message()

• setMessage, to change the value of the message:

truffle(development)> contract.setMessage("Hi, There!")

With the contract ready, you can start building the front-end for the dApp. Do not close the ganache terminal. This terminal will act as a blockchain network for the frontend.

The frontend application

A dApp’s front-end provides the ability to interact with a blockchain to non-technical users. The front-end is an intuitive interface that doesn’t require any specialized knowledge before use.

Paste the code below into the svelte’s project src/App.svelte file:

<script>
 
  import { ethers } from 'ethers';
  import { abi, address } from './contractData.js';
 
  let connectedAccount = "";
  let contractMessage = "";
  const provider = new ethers.providers.Web3Provider(window.ethereum);

  async function connectWallet() {
    if (window.ethereum) {
      await window.ethereum.request({ method: 'eth_requestAccounts' })
      const signer = provider.getSigner();
      connectedAccount = await signer.getAddress();
    } else {
      alert('You need to install metamask');
    }
  }

  async function callContract() {
    const contract = new ethers.Contract(address, abi, provider);
    contractMessage = await contract.message();
  }
</script>
 
<main>
  <div>Connected Account: {connectedAccount}</div>
  <div>Contract Message: { contractMessage }</div>
 
  <button on:click={connectWallet}>Connect wallet</button>
  <button on:click={callContract}>Call Contract</button>
</main>

You also need to create a contractData.js file inside the src folder, and paste the following into it:

export const abi = [
  {
    inputs: [],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  {
    inputs: [],
    name: "message",
    outputs: [
      {
        internalType: "string",
        name: "",
        type: "string",
      },
    ],
    stateMutability: "view",
    type: "function",
    constant: true,
  },
  {
    inputs: [
      {
        internalType: "string",
        name: "_message",
        type: "string",
      },
    ],
    name: "setMessage",
    outputs: [],
    stateMutability: "nonpayable",
    type: "function",
  },
];
export const address = "contract address";

Note: Replace the value of address (“contract address”) with the address of your deployed contract. You can find the contract’s address in the output of truffle deploy.

The App.svelte component provides a basic interface that looks like the below:

Connecting the wallet

To interact with the blockchain network, this dApp needs the users to connect their Ethrereum wallet. The wallet pays the fees required to interact with certain functionalities like calling some types of smart contract functions and making other types of transactions.

async function connectWallet() {
  if (window.ethereum) {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
    const signer = provider.getSigner();
    connectedAccount = await signer.getAddress();
  } else {
    alert('You need to install metamask');
  }
}

When the user clicks the “Connect Wallet” button, the browser calls the connectWallet function. And the following happens:

1. Checks that the window.ethereum object is present

if (window.ethereum) {

2. Triggers metamask’s wallet-connect to connect the users wallet:

await window.ethereum.request({ method: 'eth_requestAccounts' });

3. Accesses the user’s connected account (signer)

const signer = provider.getSigner();

4. Stores the account’s address in connectAddress:

connectedAccount = await signer.getAddress();

If Metamask is installed on the user’s browser, there will be a window.ethereum object. You can use this fact to check that Metamask is installed.

Interacting with the smart contract

One of the operations that happen in a dApp is interacting with smart contracts. The dApp uses a contract instance to interact with a contract. You create this instance by passing its address on the network and its ABI (Application Binary Interface). The ABI is an encoded description of a smart contract’s interface.

async function callContract() {
  const contract = new ethers.Contract(address, abi, provider);
  contractMessage = await contract.message();
}

When the user clicks the “Call Contract” button, the browser calls the callContract function. And the following happens:

1. Creates an instance of the smart contract with its ABI, address, and provider

const contract = new ethers.Contract(address, abi, provider);

2. Stores the result of calling the contract’s message:

contractMessage = await contract.message();

Running the dApp

After building your dApp, you need to see how well it runs. To run the dApp, you need a browser with the Metamask extension installed, and a metamask wallet account.

Open http://localhost:8080 in the browser to view the dApp. Then connect Metamask to the development node by opening the extension at the top-right, then Selecting “Localhost 8545” in the network drop-down:

Now you can click on connect wallet, you should see a metamask pop-up requesting to connect your wallet. And after connecting the wallet, click on call contract, to get the contract message.

Note: Make sure that the contract address in contractData.json is equal to the deployed contract address.

Conclusion

In this tutorial, you learned how to build a dApp using Svelte and Ethers JS. There’s more that you can learn about building dApps, and you don’t have to stop here:

You can visit the Truffle docs to learn more about ganache, and truffle. You can also learn how to deploy a smart contract to a public testnet or mainnet. You can learn more about Metamask in its documentation. You can get the final project in this GitHub repo.

Thanks for reading and happy coding!