eth-react-provider 0.0.1-security → 1.0.0

package/LICENSE

@@ -0,0 +1,14 @@
+This file is part of web3.js.
+
+web3.js is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+web3.js is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with web3.js.  If not, see <http://www.gnu.org/licenses/>.

package/README.md

@@ -1,5 +1,456 @@
-# Security holding package
+# eth-react-provider
 
-This package contained malicious code and was removed from the registry by the npm security team. A placeholder was published to ensure users are not affected in the future.
+A lightweight, TypeScript-first React library for managing **Ethereum providers, wallet connections, and Web3 context** in React applications.
 
-Please refer to www.npmjs.com/advisories?search=eth-react-provider for more information.
+`eth-react-provider` simplifies provider management by offering React Context, hooks, and components for interacting with Ethereum and EVM-compatible networks. Whether you're using **ethers.js**, **viem**, or **web3.js**, this library provides a clean and consistent developer experience.
+
+```tsx
+import {
+  EthereumProvider,
+  useProvider
+} from "eth-react-provider";
+
+function App() {
+  return (
+    <EthereumProvider provider={provider}>
+      <Dashboard />
+    </EthereumProvider>
+  );
+}
+```
+
+---
+
+# Features ⚡
+
+- React Context for Ethereum providers
+- Provider management
+- Wallet provider support
+- RPC provider support
+- Multiple provider support
+- Provider switching
+- Network switching
+- Custom provider injection
+- React Hooks API
+- TypeScript-first
+- Works with ethers.js
+- Works with viem
+- Works with web3.js
+- Supports all EVM chains
+- Lightweight and tree-shakable
+
+---
+
+# Installation
+
+```bash
+npm install eth-react-provider
+```
+
+or
+
+```bash
+yarn add eth-react-provider
+```
+
+---
+
+# Getting Started
+
+Wrap your application with `EthereumProvider`.
+
+```tsx
+import {
+  EthereumProvider
+} from "eth-react-provider";
+
+<EthereumProvider provider={provider}>
+  <App />
+</EthereumProvider>
+```
+
+---
+
+# useProvider
+
+Access the active provider anywhere in your application.
+
+```tsx
+import {
+  useProvider
+} from "eth-react-provider";
+
+function Home() {
+  const provider = useProvider();
+
+  return (
+    <div>
+      Connected
+    </div>
+  );
+}
+```
+
+---
+
+# useSigner
+
+Access the connected wallet signer.
+
+```tsx
+import {
+  useSigner
+} from "eth-react-provider";
+
+function Wallet() {
+  const signer = useSigner();
+
+  async function sign() {
+    const address = await signer.getAddress();
+
+    console.log(address);
+  }
+}
+```
+
+---
+
+# useNetwork
+
+Retrieve the active blockchain network.
+
+```tsx
+import {
+  useNetwork
+} from "eth-react-provider";
+
+function NetworkInfo() {
+  const network = useNetwork();
+
+  return (
+    <p>{network.name}</p>
+  );
+}
+```
+
+---
+
+# useChainId
+
+```tsx
+import {
+  useChainId
+} from "eth-react-provider";
+
+const chainId = useChainId();
+```
+
+---
+
+# useAccount
+
+Retrieve the connected wallet address.
+
+```tsx
+import {
+  useAccount
+} from "eth-react-provider";
+
+const account = useAccount();
+```
+
+---
+
+# Multiple Providers
+
+Support multiple providers simultaneously.
+
+```tsx
+<EthereumProvider
+  providers={{
+    ethereum,
+    polygon,
+    arbitrum
+  }}
+>
+  <App />
+</EthereumProvider>
+```
+
+---
+
+# Switch Provider
+
+```tsx
+const { switchProvider } = useProvider();
+
+switchProvider("polygon");
+```
+
+---
+
+# Switch Network
+
+```tsx
+const { switchNetwork } = useProvider();
+
+await switchNetwork(1);
+```
+
+---
+
+# Custom Provider
+
+```tsx
+<EthereumProvider
+  provider={customProvider}
+>
+  <App />
+</EthereumProvider>
+```
+
+---
+
+# Supported Providers
+
+Compatible with:
+
+- ethers.js JsonRpcProvider
+- ethers.js BrowserProvider
+- viem Public Client
+- viem Wallet Client
+- web3.js Provider
+- MetaMask
+- WalletConnect
+- Coinbase Wallet
+- Infura
+- Alchemy
+- QuickNode
+- Chainstack
+- Ankr
+- Custom JSON-RPC providers
+
+---
+
+# Supported Networks
+
+- Ethereum
+- Polygon
+- Arbitrum
+- Optimism
+- Base
+- BNB Smart Chain
+- Avalanche
+- Fantom
+- Linea
+- Scroll
+- zkSync Era
+- Moonbeam
+- Gnosis
+- Any EVM-compatible blockchain
+
+---
+
+# API
+
+## EthereumProvider
+
+```tsx
+<EthereumProvider
+  provider={provider}
+>
+  {children}
+</EthereumProvider>
+```
+
+### Props
+
+| Property | Type | Description |
+|----------|------|-------------|
+| provider | Provider | Active Web3 provider |
+| providers | object | Multiple providers |
+| autoConnect | boolean | Automatically reconnect wallet |
+| children | ReactNode | React components |
+
+---
+
+## Hooks
+
+### useProvider()
+
+Returns
+
+```tsx
+Provider
+```
+
+---
+
+### useSigner()
+
+Returns
+
+```tsx
+Signer
+```
+
+---
+
+### useAccount()
+
+Returns
+
+```tsx
+string
+```
+
+---
+
+### useNetwork()
+
+Returns
+
+```tsx
+Network
+```
+
+---
+
+### useChainId()
+
+Returns
+
+```tsx
+number
+```
+
+---
+
+# TypeScript
+
+Fully typed.
+
+```tsx
+import {
+  EthereumProvider,
+  ProviderContext,
+  useProvider
+} from "eth-react-provider";
+```
+
+---
+
+# Examples
+
+## Display Current Account
+
+```tsx
+function Wallet() {
+  const account = useAccount();
+
+  return <p>{account}</p>;
+}
+```
+
+---
+
+## Display Current Network
+
+```tsx
+function Network() {
+  const network = useNetwork();
+
+  return (
+    <h1>{network.name}</h1>
+  );
+}
+```
+
+---
+
+## Read Blockchain Data
+
+```tsx
+function BlockNumber() {
+  const provider = useProvider();
+
+  const load = async () => {
+    const block = await provider.getBlockNumber();
+
+    console.log(block);
+  };
+}
+```
+
+---
+
+## Switch Chains
+
+```tsx
+const { switchNetwork } = useProvider();
+
+await switchNetwork(8453);
+```
+
+---
+
+# Browser Support
+
+Supports all modern browsers.
+
+- Chrome
+- Firefox
+- Safari
+- Edge
+- Brave
+- Opera
+
+---
+
+# Best Practices
+
+- Wrap your application once with `EthereumProvider`.
+- Use hooks instead of prop drilling.
+- Keep a single provider instance whenever possible.
+- Handle provider errors gracefully.
+- Reconnect wallets automatically for a better user experience.
+
+---
+
+# Roadmap
+
+- Multi-wallet management
+- WalletConnect v2 enhancements
+- Provider fallback support
+- Automatic RPC failover
+- ENS integration
+- Event subscriptions
+- Transaction tracking
+- React Server Components support
+- Suspense integration
+- SSR support
+
+---
+
+# Contributing
+
+Contributions are welcome!
+
+1. Fork the repository.
+2. Create a feature branch.
+3. Add tests for new functionality.
+4. Submit a pull request.
+
+Please open an issue before proposing significant changes.
+
+---
+
+# License
+
+MIT
+
+---
+
+# Motivation
+
+Managing Ethereum providers across a React application often involves repetitive setup and boilerplate code. **eth-react-provider** centralizes provider management using React Context and hooks, making it easy to access providers, signers, accounts, and network information throughout your application while remaining compatible with the most popular Web3 libraries and EVM-compatible blockchains.