Files
web/apps/base-docs/docs/tools/web3.md
taycaldwell 47ca5b7b77 Docs Site Revamp: Tutorials (#370)
* Add discord, twitter, and github icons.

* Update docusaurus.

* Move security page to sidebar.

* Remove copyright from site footers.

* Add caret icons for dropdown css override.

* Build and style custom docs navbar.

* Resolve Icon merge conflict.

* Change Developers dropdown to Builders.

* lint: Remove unused variable

* Add tutorials; initial commit

* Add and display new frontmatter

* Convert tutorials to single page pt. 1

* Update tutorial data; fix paths

* Ecopage - rubyscore + lore logos (#373)

* Update ecosystem.json (#374)

* Fix incorrectly rendering open graph metadata (#369)

* feat(web): Serve dynamic og:metadata server-side

* feat(docs): Serve dynamic og:metadata server-side

* fix(web): Resolve linting errors

* fix(web): Linting

* fix(web): Additional linting corrections

* fix(web): Resolve Typescript-related syntax error

* refactor(web): Add ogData to data structure

* fix(ecosystem): Typo in partner image name (#375)

* feat(bridge): Add planned paused note to top of page (#376)

* Update hyperframes to use state (#377)

* Update hyperframes to use state

* Respond to feedback

* fix(bridge): Add default open graph metadata (#378)

* Added Moralis to data indexers (#371)

* Added Moralis to data indexers

* typos

* Update copy

* Remove superlatives

---------

Co-authored-by: taycaldwell <taylor.lee.caldwell@gmail.com>

* docs(bridge): Update bridge pause to new date (#381)

* mention setting `OP_NODE_L1_BEACON` (#380)

* feat(docs): Add Uniswap V3 Base Sepolia contracts (#382)

* Improve loading experience on jobs page (#389)

* Docs Site Revamp: Navbar, Sidebar, and Doc Page (#379)

* Add discord, twitter, and github icons.

* Update docusaurus.

* Move security page to sidebar.

* Remove copyright from site footers.

* Add caret icons for dropdown css override.

* Build and style custom docs navbar.

* Resolve Icon merge conflict.

* Change Developers dropdown to Builders.

* lint: Remove unused variable

* Re-add node polyfills required for cookie manager to work.

* Disable DocFeedback component.

* Disable paginator and table of contents.

* Add collapse icons for css override.

* Fix Modal overlay styles.

* Adjust DocChat floating button position.

* Reorganize and restyle sidebar for new design.

* Update gray0 and modal overlay styles.

* Add stylesheet for new doc page styles.

* Remove TODO. Add sidebar link hover styles.

* Move responsive styles to bottom.

* Disable breadcrumb component. Update layout spacing.

---------

Co-authored-by: taycaldwell <taylor.lee.caldwell@gmail.com>

* refactor(bridge): Drop bridge maintenance notice (#390)

* Add tutorials; initial commit

* Add and display new frontmatter

* Update tutorial data

* Fix frontmatter

* Update TOC

* Update tutorials page

* Update toc margin

* fix nested categories in sidebar

* Add all tutorials back link

---------

Co-authored-by: Jacob Moore <jacob.moore@coinbase.com>
Co-authored-by: Kathryn <kathryn.snow@coinbase.com>
Co-authored-by: wbnns <hello@wbnns.com>
Co-authored-by: Brian Doyle <brian.doyle@coinbase.com>
Co-authored-by: Filip Martinsson <martinsson.filip@gmail.com>
Co-authored-by: abhi <abhijeet.bhagat@gmx.com>
Co-authored-by: Matthew Bunday <matthew.bunday@coinbase.com>
2024-03-28 11:33:18 -07:00

3.0 KiB

title, slug, description, keywords, hide_table_of_contents
title slug description keywords hide_table_of_contents
web3.js /tools/web3 Documentation for using web3.js, a JavaScript library for interacting with EVM-compatible blockchains. This page covers installation, setup, connecting to the Base network and interacting with smart contracts.
web3.js
Base
Base mainnet
Base testnet
Base network
JavaScript
EVM
client library
blockchain
smart contracts
Ethereum
RPC URL
true

web3.js

web3.js is a JavaScript library that allows developers to interact with EVM-compatible blockchain networks.

You can use web3.js to interact with smart contracts deployed on the Base network.


Install

To install web3.js run the following command:

npm install web3

Setup

Before you can start using web3.js, you need to import it into your project.

Add the following line of code to the top of your file to import web3.js:

//web3.js v1
const Web3 = require('web3');

//web3.js v4
const { Web3 } = require('web3');

Connecting to Base

You can connect to Base by instantiating a new web3.js Web3 object with a RPC URL of the Base network:

const { Web3 } = require('web3');

const web3 = new Web3('https://mainnet.base.org');

:::info

To alternatively connect to Base Sepolia (testnet), change the above URL from https://mainnet.base.org to https://sepolia.base.org.

:::

Accessing data

Once you have created a provider, you can use it to read data from the Base network.

For example, you can use the getBlockNumber method to get the latest block:

async function getLatestBlock(address) {
  const latestBlock = await web3.eth.getBlockNumber();
  console.log(latestBlock.toString());
}

Deploying contracts

Before you can deploy a contract to the Base network using web3.js, you must first create an account.

You can create an account by using web3.eth.accounts:

const privateKey = PRIVATE_KEY;
const account = web3.eth.accounts.privateKeyToAccount(privateKey);

:::info

PRIVATE_KEY is the private key of the wallet to use when creating the account.

:::

Interacting with smart contracts

You can use web3.js to interact with a smart contract on Base by instantiating a Contract object using the ABI and address of a deployed contract:

const abi = [
 // ABI of deployed contract
];

const contractAddress = "CONTRACT_ADDRESS"

const contract = new web3.eth.Contract(abi, contractAddress);

Once you have created a Contract object, you can use it to call desired methods on the smart contract:

async function setValue(value) {
  // write query
  const tx = await contract.methods.set(value).send();
  console.log(tx.transactionHash);
}

async function getValue() {
  // read query
  const value = await contract.methods.get().call();
  console.log(value.toString());
}

:::info

For more information on deploying contracts on Base, see Deploying a Smart Contract.

:::