Skip to main content

Installation

How to Install this libraries that helps you in Integration of your UI to Smart Contract.

We would be Installing the and applying the following libraries and SDKs.

  • Ether Js
  • Viem
  • Wagmi
  • Thirdweb

Ether Js​

Create a folder and run this on the terminal :

Ether Js
npm install ethers

After it's done installing you can now Import it in your project.

Importing ethers in Node.js
// Import everything
import { ethers } from "ethers";

// Import just a few select items
import { BrowserProvider, parseUnits } from "ethers";

// Import from a specific export
import { HDNodeWallet } from "ethers/wallet";
importing ESM in a browser
<script type="module">
  import { ethers } from "https://cdnjs.cloudflare.com/ajax/libs/ethers/6.7.0/ethers.min.js";
  // Your code here...
</script>

Learn More Ether Js.

Viem​

Create a folder and run this on the terminal :

Viem
npm i viem

After it's done installing you can now Import it in your project.

Importing veim in Node.js
// Import everything
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

Learn More Viem.

Wagmi​

Create a folder and run this on the terminal :

Wagmi
npm init wagmi

After it's done installing you can now Import it in your project.

Importing Wagmi in Node.js
import { configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)

Learn More Wagmi.

Thirdweb​

Create a folder and run this on the terminal :

Wagmi
npm i @thirdweb-dev/react @thirdweb-dev/sdk ethers@^5

After it's done installing you can now Import it in your project.

Importing Thirdweb in Node.js
import { useContractRead, useContract } from "@thirdweb-dev/react";

function App() {
  const { data: contract } = useContract("{{contract_address}}");
  const { data, isLoading, error } = useContractRead(contract, "functionName");
}

Learn More Thirdweb.