Scaffold-ETH组件库：eth-components复用与自定义组件开发

Scaffold-ETH组件库：eth-components复用与自定义组件开发

【免费下载链接】scaffold-eth 🏗 forkable Ethereum dev stack focused on fast product iterations 项目地址: https://gitcode.com/gh_mirrors/sc/scaffold-eth

组件库概览

Scaffold-ETH提供了丰富的React组件库，位于packages/react-app/src/components目录下，包含账户管理、交易处理、UI展示等20+核心组件。这些组件采用模块化设计，支持直接复用与二次开发，覆盖区块链应用开发常见场景。

核心组件分类

功能类别	组件列表
账户管理	Account.jsx、Wallet.jsx、WalletImport.jsx
数据展示	Address.jsx、Balance.jsx、TokenBalance.jsx
交互表单	EtherInput.jsx、AddressInput.jsx、BytesStringInput.jsx
网络工具	NetworkSwitch.jsx、GasGauge.jsx、L2Bridge.jsx

基础组件复用

Account组件使用示例

Account.jsx是账户管理核心组件，集成地址展示、余额查询和钱包连接功能：

<Account
  address={userAddress}
  localProvider={localProvider}
  mainnetProvider={mainnetProvider}
  price={ethPrice}
  web3Modal={web3Modal}
  loadWeb3Modal={loadWeb3Modal}
  logoutOfWeb3Modal={logoutOfWeb3Modal}
  blockExplorer={blockExplorerUrl}
/>

组件自动处理ENS解析、余额单位转换（ETH/USD）和钱包连接状态管理，减少80%重复代码。

数据展示组件组合

通过组合Blockie.jsx和Address.jsx实现用户身份卡片：

<div className="user-profile">
  <Blockie address={userAddress} size={40} />
  <Address address={userAddress} ensProvider={mainnetProvider} />
  <TokenBalance 
    address={userAddress} 
    tokenAddress={usdcAddress} 
    provider={localProvider} 
  />
</div>

自定义组件开发

扩展EtherInput组件

基于EtherInput.jsx开发限额输入组件，添加最大金额限制：

import EtherInput from "./EtherInput";

const LimitedEtherInput = ({ maxAmount, ...props }) => {
  const handleChange = (value) => {
    if (value.gt(maxAmount)) {
      notification.warning({ message: `金额不能超过${maxAmount} ETH` });
      return props.onChange(maxAmount);
    }
    props.onChange(value);
  };

  return <EtherInput {...props} onChange={handleChange} />;
};

智能合约交互组件

利用Contract子组件构建自定义合约调用界面：

import { FunctionForm, DisplayVariable } from "./Contract";

const TokenMinter = ({ contract }) => (
  <div className="token-minter">
    <DisplayVariable contract={contract} variable="totalSupply" />
    <FunctionForm 
      contract={contract} 
      functionName="mint" 
      inputs={[
        { name: "to", type: "address" },
        { name: "amount", type: "uint256" }
      ]}
      onSuccess={(tx) => alert(`Minted: ${tx.transactionHash}`)}
    />
  </div>
);

主题与样式定制

主题切换实现

通过ThemeSwitch.jsx配合CSS变量实现暗色/亮色模式：

// 暗色主题变量 [themes/dark-theme.less](https://link.gitcode.com/i/7f300724b898897020c6d74463456e7f)
@primary-color: #2caad9;
@text-color: #e5e5e5;
@background-color: #1a1a1a;

// 亮色主题变量 [themes/light-theme.less](https://link.gitcode.com/i/37477fd47765d77653b8911d7d84dec4)
@primary-color: #1890ff;
@text-color: #333333;
@background-color: #ffffff;

自定义组件样式覆盖

使用CSS模块隔离自定义样式：

/* CustomButton.module.css */
.customButton {
  composes: ant-btn from '~antd/dist/antd.css';
  background: var(--primary-color);
  border-radius: 8px;
  padding: 8px 24px;
}

高级应用场景

跨链转账组件

组合L2Bridge.jsx和Swap.jsx实现跨链资产转换：

<L2Bridge
  fromNetwork="mainnet"
  toNetwork="arbitrum"
  onTransfer={(tx) => trackTransaction(tx)}
>
  <Swap
    tokenIn={ethAddress}
    tokenOut={arbEthAddress}
    onSwap={(amount) => setBridgeAmount(amount)}
  />
</L2Bridge>

交易历史可视化

使用Timeline.jsx展示用户交易记录：

<Timeline
  data={transactions.map(tx => ({
    time: new Date(tx.timestamp * 1000),
    title: tx.method,
    description: `${tx.value} ETH → ${tx.to.slice(0, 6)}`,
    status: tx.status ? "success" : "error"
  }))}
/>

组件开发最佳实践

1. 状态隔离：使用useLocalStorage.js管理组件状态，避免全局污染
2. 类型定义：参考utils.jsx添加PropTypes验证
3. 主题适配：通过currentTheme实现样式响应式
4. 错误处理：集成Transactor工具处理区块链交互异常：

import { useTransactor } from '../helpers/Transactor';

const transact = useTransactor();
const handleMint = () => transact(contract.mint, [toAddress, amount]);

总结

Scaffold-ETH组件库通过"即插即用"设计降低区块链开发门槛，核心优势：

• 减少重复劳动：20+预制组件覆盖90%常见功能
• 统一交互体验：符合Web3用户习惯的操作流程
• 无缝生态集成：与hardhat部署脚本和subgraph索引完美协同

完整组件文档见components/index.js，所有组件支持Tree-Shaking优化，最小化生产环境体积。

【免费下载链接】scaffold-eth 🏗 forkable Ethereum dev stack focused on fast product iterations 项目地址: https://gitcode.com/gh_mirrors/sc/scaffold-eth