Save this link to facebook.
Hit like and share it with others.
02-Nov-2021
02-Nov-2021
,
zip,
Free, github, HTML, javascript, scripts
ethereum-boilerplate
React components and hooks for fast building dApps without running own backend
This boilerplate is built on react-moralis and Moralis. Also has its own context provider for quick access to chainId or ethAddress
There are many components in this boilerplate that do not require an active web3 provider, they use Moralis Web3 API. Moralis supports the most popular blockchains and their test networks. You can find a list of all available networks in Moralis Supported Chains
Please check the official documentation of Moralis for all the functionalities of Moralis.
⭐️Star us
If this boilerplate helps you build Ethereum dapps faster – please star this project, every star makes us very happy!
? Quick Start
? Clone or fork ethereum-boilerplate:
git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git
? Install all dependencies:
cd ethereum-boilerplate
yarn install
✏ Provide your appId and serverUrl from Moralis (How to start Moralis Server) to
?♂️ Run your App:
yarn start
? Table of contents
ethereum-boilerplate
? Quick Start
? Table of contents
? Ethereum Components
? Ethereum Hooks
useAPIContract()
useWeb3Contract()
useERC20Balance()
useERC20Transfers()
useNativeBalance()
useNativeTransactions()
useNFTBalance()
useNFTTransfers()
useNFTTransfers()
useIPFS()
useChain()
useTokenPrice()
useInchDex()
? Ethereum Components
? The ready for use react-components are located in src/components. They are designed to be used anywhere in your dApp.
⚡ Note that many components may get params like chain, address, size and etc.
?
: Displays an Ethereum address with Blockie avatar.?
Options:
autoFocus (optional): focuses object after rendering the component.
placeholder (optional): text to display before entering address.
onChange (required): your setState hook.
const [address, setAddress] = useState();
⛓
Options:
props (optional): networks to display. Added by default: polygon, eth, bsc and avalanche
?
Options:
address (required): Token contract address
chain (optional): The network to which the token is deployed. Default: ETH
image (optional): local path or link to token logo
size (optional): logo size
?
Options:
chain (optional): network for displaying balances on. Will use your wallet network if you do not specify chain yourself
?
Options:
chain (optional): network for displaying transfers on. Will use your wallet network if you do not specify chain yourself
?
Options:
chain (optional): network. Available: Ethereum (“eth”), Binance Smart Chain (“bsc”), Polygon (“polygon”)
?
return (
{JSON.stringify(contractResponse),
null,
2,
)}
}
)
}
useWeb3Contract()
? Runs on-chain functions. Requires active Web3 Provider.
Options:
chain (optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value Eth.
functionName (required): The function name
contractAddress (required): A smart contract address
abi (required): contract or function ABI(should be provided as an array)
params (optional): Parameters needed for your specific function
Example:
const ShowUniswapObserveValues = () => {
const { runContractFunction, contractResponse, error, isRunning, isLoading } = useWeb3Contract({
abi: usdcEthPoolAbi,
contractAddress: usdcEthPoolAddress,
functionName: “observe”,
params: {
secondsAgos: [0, 10],
},
});
return (
{JSON.stringify(contractResponse),
null,
2,
)}
}
)
}
useERC20Balance()
? Gets all token balances of a current user or specified address.
Options:
chain (optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value: current chain.
address (optional): A user address (i.e. 0x1a2b3x…). If specified, the user attached to the query is ignored and the address will be used instead.
to_block (optional): The block number on which the balances should be checked
Returns (Object) : number of tokens and the array of token objects
const { fetchERC20Balance, assets } = useERC20Balance({ chain : “eth” });
useERC20Transfers()
? Gets ERC20 token transfers of a current user or specified address.
Options:
chain (optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value: current chain.
address (optional): A user address (i.e. 0x1a2b3x…). If specified, the user attached to the query is ignored and the address will be used instead.
from_date (optional): The date from where to get the transactions (any format that is accepted by momentjs). Provide the param ‘from_block’ or ‘from_date’ If ‘from_date’ and ‘from_block’ are provided, ‘from_block’ will be used.
to_date (optional): Get the transactions to this date (any format that is accepted by momentjs). Provide the param ‘to_block’ or ‘to_date’ If ‘to_date’ and ‘to_block’ are provided, ‘to_block’ will be used.
from_block (optional): The minimum block number from where to get the transactions Provide the param ‘from_block’ or ‘from_date’ If ‘from_date’ and ‘from_block’ are provided, ‘from_block’ will be used.
to_block (optional): The maximum block number from where to get the transactions. Provide the param ‘to_block’ or ‘to_date’ If ‘to_date’ and ‘to_block’ are provided, ‘to_block’ will be used.
offset (optional): Offset.
limit (optional): Limit.
Returns (Array) : ERC20 token transfers
const { fetchERC20Transfers, ERC20Transfers } = useERC20Transfers({ chain : “eth” });
useNativeBalance()
? Gets native balance for a current user or specified address. The nativeName from useNativeBalance() shows name of chain(Example: “BNB”, “ETH”, …)
Options:
chain (optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value: current chain.
address (optional): A user address (i.e. 0x1a2b3x…). If specified, the user attached to the query is ignored and the address will be used instead.
to_block (optional): The block number on which the balances should be checked
Returns (Object) : { inWei: balance in Wei , formatted: balance in Eth style }
Example:
function NativeBalance() {
const { getBalance, balance, nativeName, error, isLoading } = useNativeBalance({ chain : “eth” });
return (
);
}
useNativeTransactions()
? Gets the transactions from the current user or specified address. Returns an object with the number of transactions and the array of native transactions
Options:
chain (optional): The blockchain to get data from. Valid values are listed on the intro page in the Transactions and Balances section. Default value: current chain.
address (optional): A user address (i.e. 0x1a2b3x…). If specified, the user attached to the query is ignored and the address will be used instead.
from_date (optional): The date from where to get the transactions (any format that is accepted by momentjs). Provide the param ‘from_block’ or ‘from_date’ If ‘from_date’ and ‘from_block’ are provided, ‘from_block’ will be used.
to_date (optional): Get the transactions to this date (any format that is accepted by momentjs). Provide the param ‘to_block’ or ‘to_date’ If ‘to_date’ and ‘to_block’ are provided, ‘to_block’ will be used.
from_block (optional): The minimum block number from where to get the transactions Provide the param ‘from_block’ or ‘from_date’ If ‘from_date’ and ‘from_block’ are provided, ‘from_block’ will be used.
to_block (optional): The maximum block number from where to get the transactions. Provide the param ‘to_block’ or ‘to_date’ If ‘to_date’ and ‘to_block’ are provided, ‘to_block’ will be used.
offset (optional): Offset.
limit (optional): Limit.
Returns (Array) : native transactions
useNFTBalance()
useNFTTransfers()
useChain()
useInchDex()
useTokenPrice()
useIPFS()