OpenViSTAI · Agents · Blockchain · Crypto
Submit a project
Menu
Developer Tools

Eth Components

Eth Components is a TypeScript React library of reusable interface components and helpers for Ethereum applications, including address, balance, account, wallet and ETH/USD input displays.

Explore the practical guide ↓

Independent OpenViST project profile, based on linked sources.

Eth Components — OpenViST project profile in Developer Tools.
OpenViST project illustration. See the linked sources for product details.
Understand the project

Practical overview

When it fits

Use it when building a React Ethereum application that needs reusable account, address, balance, wallet or amount-entry interface components and can supply the providers and values those components require.

Who it is for

  • React developers building Ethereum dApp interfaces.
  • Scaffold-ETH-based application developers seeking reusable account and wallet UI.

Documented uses

  • Display an address, balance and wallet together as an account view.
  • Show an address with an optional ENS name, blockie image, copy option or block-explorer link.
  • Collect an address through an input with QR scanning and optional ENS resolution.
  • Display balances in ETH and, when a price is supplied, in dollars.
  • Provide ETH/USD amount inputs and a gas gauge using supplied values.
Before you choose

Requirements & limits

  • The README lists React, React DOM, Web3Modal, Ant Design, Ant Design icons and react-css-theme-switcher as dependencies.
  • Several components require application-supplied providers, such as local, user, mainnet or other network providers.
  • ENS display, dollar conversion and block-explorer links depend on values or providers supplied by the application.
  • The README provides a Yarn install command; it does not provide component configuration steps in the supplied material.
  • The public repository evidence does not identify a software license.

Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.

Source-based practical guide

Install Eth-Components in a React project

Add the Eth-Components package to a project using Yarn.

Before you start

  • A project that uses React.
  • Yarn.

Steps

  1. From the project directory, run yarn add eth-components.

  2. Use the installed library’s documented components and helpers in the React application.

Expected outcome

The Eth-Components package is added to the project for use as a React component library.

Guide limitations

  • The README does not provide a component import example or a complete application setup procedure.
  • The README lists React, React DOM, react-css-theme-switcher, Web3Modal, Ant Design, and Ant Design icons as dependencies; it does not specify version or compatibility requirements.
Documentation 1 ↗Documentation 2 ↗
Source-based practical guide

Configure the Account component with provider and wallet props

Display an address, balance, and wallet using the Account component’s documented properties.

Before you start

  • An application using Eth-Components.
  • An address and the provider or wallet-related values to pass as component properties.

Steps

  1. Provide address to display the corresponding account information.

  2. Pass localProvider to access a local-network balance, or mainnetProvider for ENS name replacement.

  3. Pass userProvider to display a wallet and price to convert the balance to dollars.

  4. To enable login and logout, provide web3Modal, loadWeb3Modal, and logoutOfWeb3Modal. Optionally provide blockExplorer to link the address to an explorer.

Expected outcome

The Account component can display an address, balance, and wallet, with optional ENS replacement, dollar conversion, login/logout, and explorer linking according to the supplied properties.

Guide limitations

  • The README describes component properties and behavior but does not show import syntax or a full React usage example.
  • Provider setup and the implementation of the login/logout callbacks are not described.
Documentation 1 ↗Documentation 2 ↗
Evidence and transparency

Sources & review

Official repository ↗Guide documentation ↗
Source record details
Source availability
Active
Sources checked
18 October 2026
Original website title
scaffold-eth/eth-components · Official homepage title · retained in its source language
How we review sourcesSuggest a correction