Security News
Supply Chain Attack Detected in @solana/web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
@web3-ui/core
Advanced tools
A set of React components and hooks made for web3-specific use cases. Fully compatible with and built on top of ChakraUI.
This package is an opinionated combination of @web3-ui/components
and @web3-ui/hooks
.
yarn add @web3-ui/core
At the root of your React app, wrap your app in the <Provider>
component:
// _app.tsx (or the root of your app)
import { Provider, NETWORKS } from '@web3-ui/core';
function MyApp({ Component, pageProps }) {
return (
<Provider network={NETWORKS.rinkeby}>
<Component {...pageProps} />
</Provider>
);
}
This is the list of components the package currently provides:
The Provider component is a parent provider, wrapping the ComponentsProvider
and the HooksProvider
. You need to wrap this component around your entire App.
See Getting Started for an example.
ConnectWallet
is a Button
based component with the following behaviour:
When wallet is connected,
When wallet is not connected,
import { ConnectWallet } from '@web3-ui/core';
<ConnectWallet />;
TokenGate
lets you conditionally render some content depending on whether the current connected user has enough amount of a specific token. The component only supports ERC20 and ERC721 (NFTs) tokens at the moment but support for other standards is coming soon.
import { TokenGate } from '@web3-ui/core';
<TokenGate
tokenContractAddress="0x08149745590e9025b52b6801e9dd3E752e60F3A2"
requiredQuantity={+ethers.utils.parseEther('1')} // the component expects the amount in wei.
deniedContent={
<p>This message will show up if the user doesn't have enough tokens.</p>
}
tokenType="ERC721" // optional, defaults to ERC20
>
<h1>This message will be visible if the user has enough tokens.</h1>
</TokenGate>;
TokeBalance
is a component that fetches and renders the balance of an ERC20 token for a given address.
import { TokenBalance } from '@web3-ui/core';
<TokenBalance
accountAddress="0x503828976D22510aad0201ac7EC88293211D23Da"
tokenAddress="0x6B175474E89094C44Da98b954EedeAC495271d0F"
usdRate={0.9955}
/>;
This package exports all the hooks provided by the @web3-ui/hooks
package.
// Example
import { useWallet } from '@web3-ui/core';
const { connectWallet } = useWallet();
FAQs
React UI components for web3
The npm package @web3-ui/core receives a total of 10 weekly downloads. As such, @web3-ui/core popularity was classified as not popular.
We found that @web3-ui/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.