website·Indexed 29 days ago
https://raid-guild.github.io/quiverA collection of React hooks and components designed to simplify the development of frontends for Ethereum dApps. It provides utilities for wallet connection, ENS resolution, contract interaction via useContract and useReadContract, and token balance tracking, with integrations for Gnosis Safe and web3modal.
ethers package for Ethereum functionality and integrates Web3Modal for wallet connectivity. It provides full TypeScript support, including typed contracts via TypeChain.The useWallet hook provides a switchNetwork method to programmatically change the user's connected network. This is particularly useful for applications supporting multiple networks where defaultChainId is not provided (as providing a defaultChainId typically enables auto-switching).
Preconditions for switching networks:
const { switchNetwork } = useWallet();
return (
<>
<button onClick={() => switchNetwork("0x1")}>Switch to Mainnet</button>
<button onClick={() => switchNetwork("0x4")}>Switch to Rinkeby</button>
</>
);You can jumpstart your smart contract and web3 development using one of the following official starter projects:
useCGPrice hook retrieves the current price of a token from CoinGecko. By default, it returns the value in USD. You can specify a tokenId (the CoinGecko ID for the token) and optionally a vsCurrency to get the price in a different currency.const { price: ufoPrice } = useCGPrice({ tokenId: "ufo-gaming" });safe-apps-web3modal wrapper. To enable this integration, add a manifest.json file to the root of your project. This manifest defines the app's identity, icons, and display settings within the Safe ecosystem.{
"short_name": "Safe App",
"name": "Gnosis Safe App Starter",
"description": "Describe your Safe App here",
"iconPath": "logo.svg",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}useWriteContract hook is used to execute public write functions on a smart contract. It requires the contract object, the function name, and an options object to handle the transaction lifecycle. The hook returns a mutate method that triggers the transaction. Arguments for the contract function can be passed directly to the mutate method when called.const { mutate: harvestPlasma } = useWriteContract(
stakingContract,
"withdrawReward",
{
onConfirmation: () => toast.success("Transaction Confirmed"),
onError: (error) => toast.error(error?.message),
onResponse: () => toast.success("Waiting for transaction..."),
}
);
// Triggering the write
const claimPlasma = async () => {
try {
await harvestPlasma();
} catch (error) {
console.error(error);
}
};@raidguild/quiver, ethers, and web3modal to be installed in your project.yarn add @raidguild/quiver ethers web3modalTo use Quiver, ensure your project meets the following minimum requirements:
ethersreact version 16 or higherweb3modalsafe-apps-web3modal wrapper around web3modal. To enable this integration, add a manifest.json file to the root of your project. This file defines the app's identity, icons, and display settings within the Safe ecosystem.{
"short_name": "Safe App",
"name": "Gnosis Safe App Starter",
"description": "Describe your Safe App here",
"iconPath": "logo.svg",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}ethers for blockchain functionality, Web3Modal for wallet connectivity, and TypeChain for TypeScript contract typing. To get started, install the core package along with its primary dependencies.yarn add @raidguild/quiver ethers web3modal