Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
The wagmi npm package is a collection of React Hooks for Ethereum, designed to make it easier to work with Ethereum-based applications. It provides a set of tools to manage wallet connections, interact with smart contracts, and handle blockchain data in a React environment.
Wallet Connection
This feature allows users to connect and disconnect their Ethereum wallets. It provides hooks to manage the wallet connection state and handle different wallet connectors.
import { useAccount, useConnect, useDisconnect } from 'wagmi';
function Wallet() {
const { address, isConnected } = useAccount();
const { connect, connectors } = useConnect();
const { disconnect } = useDisconnect();
return (
<div>
{isConnected ? (
<div>
<p>Connected to {address}</p>
<button onClick={() => disconnect()}>Disconnect</button>
</div>
) : (
<div>
{connectors.map((connector) => (
<button key={connector.id} onClick={() => connect(connector)}>
Connect with {connector.name}
</button>
))}
</div>
)}
</div>
);
}
Smart Contract Interaction
This feature allows users to read from and write to smart contracts. It provides hooks to interact with smart contract functions and manage the state of these interactions.
import { useContractRead, useContractWrite } from 'wagmi';
const contractConfig = {
addressOrName: '0xContractAddress',
contractInterface: ContractABI,
};
function ContractInteraction() {
const { data: balance } = useContractRead({ ...contractConfig, functionName: 'balanceOf', args: ['0xAddress'] });
const { write: transfer } = useContractWrite({ ...contractConfig, functionName: 'transfer', args: ['0xRecipient', 100] });
return (
<div>
<p>Balance: {balance?.toString()}</p>
<button onClick={() => transfer()}>Transfer</button>
</div>
);
}
Blockchain Data
This feature allows users to access blockchain data such as the current block number and the connected network. It provides hooks to fetch and display this data in a React component.
import { useBlockNumber, useNetwork } from 'wagmi';
function BlockchainData() {
const { data: blockNumber } = useBlockNumber();
const { chain } = useNetwork();
return (
<div>
<p>Current Block Number: {blockNumber}</p>
<p>Connected Network: {chain?.name}</p>
</div>
);
}
web3-react is a library for managing Ethereum wallet connections in React applications. It provides hooks for connecting to wallets, handling network changes, and interacting with smart contracts. Compared to wagmi, web3-react is more focused on wallet connection management and less on providing a comprehensive set of hooks for various blockchain interactions.
ethers.js is a library for interacting with the Ethereum blockchain and its ecosystem. It provides utilities for connecting to Ethereum nodes, interacting with smart contracts, and managing wallets. While ethers.js is not React-specific, it can be used in conjunction with React to achieve similar functionalities as wagmi.
React Hooks library for Ethereum, built on ethers.js.
🚀 20+ hooks for working with wallets, ENS, contracts, transactions, signing, etc.
💼 Built-in wallet connectors for MetaMask, WalletConnect, and Coinbase Wallet
🌀 Auto-refresh data on wallet and network changes
🦄 TypeScript ready
💨 Zero-dependencies (besides ethers.js peer dependency)
🌳 Test suite and documentation
📖 MIT License
Visit https://wagmi-xyz.vercel.app to view the full documentation.
pnpm add wagmi ethers
Provider
component.import { Provider } from 'wagmi'
const App = () => (
<Provider>
<YourRoutes />
</Provider>
)
import { useAccount } from 'wagmi'
const Page = () => {
const [{ data, error, loading }, disconnect] = useAccount({
fetchEns: true,
})
return ...
}
Every component inside the Provider
is set up with the default InjectedConnector
for connecting wallets and ethers.js Default Provider for fetching data.
Want to learn more? Check out the guides or browse the API docs.
Feel free to join the discussions on GitHub or reach out on Twitter!
MIT.
wagmi
FAQs
React Hooks for Ethereum
The npm package wagmi receives a total of 125,492 weekly downloads. As such, wagmi popularity was classified as popular.
We found that wagmi demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.