vuethers

Vuethers

A DApp frontend framework for Vue 3 built with Ethers.js

• 💡 Intuitive Design : Vuethers abstracts a lot of repetitive and heavy tasks but has been thought to always let developers feel what happens under the hood.

• 🦥 Ready-to-use : Vuethers comes with +20 EVM chains and +5 wallets pre-configured. Give it a chain's ID and a wallet name, and your DApp is ready to run !

• 🖖 Flexible styling : Vuethers comes with 3 levels of styling, from unstylized to opinionated, so you can choose your level of customization.

• 📦 Extremely minimal : Vuethers weight less than 15kB gzipped and relies on only 2 top-level dependencies : Vue3 and Ethers.js

Website   |   Documentation   |   API   |   Changelog

Alpha warning

This library is currently in development and not suitable yet for production environment, use at your own risks.

Please :star: this repository to show us your interest in a future stable release.

Beta and stable versions should be released by the end of 2022.

How does it tastes ? :yum:

Easy configurations

Firstly, you can configure your entire DApp frontend in a single file called vuethers.config.js.

export const vuethersConfig = {
  networks: [
    {
      id: 1,
      contracts: {
        "MyToken": import("./MyToken.json")
      }
    }
  ],
  wallets: [
    {id: "metamask"}
  ],
}

With this minimal configuration, your DApp frontend will :

• support the Ethereum Mainnet network (id: 1)
• will be able to interact with the MyToken contract
• and allows users to connect to it using the Metamask wallet (id: "metamask").

The dapp object

Most of the things you need to built are available through the dapp object, which can be simply imported from the vuethers package.

import { dapp } from "vuethers";

Auto-instanciations

When your DApp loads, Vuethers will read your vuethers.config.js file and populates, if possible, the dapp object with all the Ethers.js instances your DApp requires.

import { dapp } from "vuethers";

dapp.provider            // An Ethers.js Provider instance
dapp.signer              // An Ethers.js Signer instance
dapp.contracts.MyToken   // An Ethers.js Contract instance

// They can be used normally
const userAddress = "0xf39Fd6e5..."
const userBalance = dapp.contracts.MyToken.balanceOf(userAddress)

You don't have anymore to deal with multiple manual instanciations.

ARS (Automated Relations Safety)

While a DApp has a very unstable context (eg. a user can connect/deconnect a wallet, chain connection can be lost, etc.) it may be difficult to always write safe code.

Vuethers comes with ARS, an internal system that ensure that your DApp instances always remain safe to use.

For example, if the signer of your DApp has changed, all the contracts instances will be automatically updated with the new signer.

Safers

Also, in such an unstable context, writing safe code may became quickly complex.

To help developers always writing safe code, Vuethers provides many safers methods and components.

Making your code safe has never been so easy !

dapp.contracts.MyToken.onReadSafe(() => {
  // Code here will be executed when MyToken contract is safe to be read
  const userBalance = dapp.contracts.MyToken.balanceOf(userAddress)
})

dapp.provider.onSafe(() => {
  // Code here will be executed when the DApp provider is safe to use
  const block = dapp.provider.getBlock(123456)
})

<template>
  <dapp.signer.OnSafe>
    <p>A wallet is connected to this DApp !</p>
  </dapp.signer.OnSafe>
</template>

Chain watchers

When developing reactive web DApps frontends we need to regularly fetch on-chain datas to always display the most up-to-date ones to the users.

Vuethers provides chain watchers to efficiently watch for mutations of an on-chain data and to run a given callback each time it occurs.

Here is how we can track and display an always up-to-date ERC20 balance to the user :

<script setup>
import { dapp } from "vuethers";

const userAddress = "0xf39Fd6e5..."
let userBalance = $ref(null);

dapp.contracts.MyToken.watch("balanceOf", [userAddress], (newValue) => {
  // Will be executed each time 'balanceOf' of 'userAddress' changes
  userBalance = newValue;
})
</script>

<template>
  <p>Your balance is : {{ userBalance }} MTK</p>
</template>

Final words

Vuethers offers a lot more things to makes safe DApp frontend development a real piece of cake.

You can find them all by reading its documentations.

Contributions

See : CONTRIBUTING