search

ethereum-boilerplate / ethereum-nextjs-boilerplate

MIT License
60 stars 41 forks source link

readme

ethereum-boilerplate

React components and hooks for fast building dApps without running own backend

🚀DEMO: https://davidparseen.github.io/ethereum-nextjs-boilerplate

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.

Dapp

⭐️ Star us

If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us very happy!

🤝 Need help?

If you need help with setting up the boilerplate or have other questions - don't hesitate to write in our community forum and we will check asap. Forum link. The best thing about this boilerplate is the super active community ready to help at any time! We help each other.

🚀 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

✏ Rename .env.local.example to .env in the main folder and provide your appId and serverUrl from Moralis (How to start Moralis Server) Example:

NEXT_PUBLIC_MORALIS_APPLICATION_ID = xxxxxxxxxxxx
NEXT_PUBLIC_MORALIS_SERVER_URL = https://xxxxxx.grandmoralis.com:2053/server

🚴‍♂️ Run your App:

yarn start

🧭 Table of contents

🏗 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.

<Account />

Account

📒 <Account /> : Easy web3 authentication via MetaMask.

<Account />

<Address />

address

📨 <Address /> : Displays an Ethereum address with Blockie avatar.

Options:

<Address />
<Address avatar />
<Address avatar copyable />
<Address avatar copyable size="4"  />

<AddressInput />

input

📫 <AddressInput /> : Input for eth address. Displays Blockie avatar for the entered wallet. Helps to validate addresses. After entering 42 characters (0x... wallet length) or valid crypto domain freezes input and calls setValidatedAddress. Supported domains: [".eth", ".crypto", ".coin", ".wallet", ".bitcoin", ".x", ".888", ".nft", ".dao", ".blockchain"]

Options:

const [address, setAddress] = useState();

<AddressInput
    autoFocus
    placeholder='Input your Address'
    onChange={setAddress}
/>;

<Chains />

network

⛓ <Chains /> : Active network switch. Supports Ethereum, Polygon, BSC and Avalacnhe blockchains. Works only with networks that have already been added to Injected Wallet. You can find a guide on how to programmatically add a new network here. Easily customizable, you can add other networks

Options:

<Chains polygon eth bsc avalanche />

<CoinPrice />

price

💵 <CoinPrice /> : displays the price of the token specified in the settings. Uses Moralis Web3API (does not require an active web3 provider).

Options:

<CoinPrice address='0x1...3' chain='eth' image='https://img.png' size='40px' />

<ERC20Balance />

image

💰 <ERC20Balance /> : displays the ERC20 balance of an address. Uses Moralis Web3API (does not require an active web3 provider).

Options:

<ERC20Balance chain='polygon' />

<ERC20Transfers />

image

💸 <ERC20Transfers /> : displays the ERC20 transfers of an address. Uses Moralis Web3API (does not require an active web3 provider).

Options:

<ERC20Transfers chain='polygon' />

<DEX />

dex

💱 <InchDex /> : interface for Moralis 1Inch Plugin. This plugin integrates the DeFi / DEX aggregator 1Inch to any project that uses Moralis.

Options:

<InchDex chain='eth' />

<Wallet />

wallet

💼 <Wallet /> : example interface for interacting with your wallet. Uses components from the boilerplate: <Blockie />, <Address />, <NativeBalance />, <AddressInput />. Has the functionality to send tokens

<Wallet />

<Blockie />

<NativeBalance />

<Contract />

🧰 Ethereum Hooks

useAPIContract()

📋 Runs a given function of a contract abi and returns readonly data. Uses Moralis Web3API (does not require an active web3 provider).

Options:

Example:

import { useAPIContract } from "react-moralis"

const ShowUniswapObserveValues = () => {
  const { runContractFunction, data, error, isLoading, isFetching } = useAPIContract({
    abi: usdcEthPoolAbi,
    address: usdcEthPoolAddress,
    functionName: "observe",
    params: {
      secondsAgos: [0, 10],
    },
  });

  return (<div>
    {error && <ErrorMessage error={error} />}
    <button onClick={() => runContractFunction()} disabled={isLoading}>Fetch data</button>
    {contractResponse && JSON.stringify(contractResponse)}
    </pre>}
  </div>)
}

useWeb3Contract()

📋 Runs on-chain functions. Requires active Web3 Provider.

Options:

Example:

import { useWeb3Contract } from "react-moralis"

const ShowUniswapObserveValues = () => {
  const { runContractFunction, contractResponse, error, isRunning, isLoading } = useWeb3Contract({
    abi: usdcEthPoolAbi,
    contractAddress: usdcEthPoolAddress,
    functionName: "observe",
    params: {
      secondsAgos: [0, 10],
    },
  });

  return (<div>
    {error && <ErrorMessage error={error} />}
    <button onClick={() => runContractFunction()} disabled={isLoading}>Fetch data</button>
    {contractResponse && JSON.stringify(contractResponse)}
    </pre>}
  </div>)
}

useERC20Balances()

💰 Gets all token balances of a current user or specified address.

Options:

Example

import { useERC20Balances } from "react-moralis";

const { fetchERC20Balances, data, isLoading, isFetching, error } =
    useERC20Balances();

const ERC20Balances = () => {
    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button
                onClick={() =>
                    fetchERC20Balances({ params: { chain: "0x1" } })
                }>
                Refetch
            </button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Example return (Object)

{
    "total": 1,
    "page": 0,
    "page_size": 500,
    "result": [
        {
            "token_address": "0x2d30ca6f024dbc1307ac8a1a44ca27de6f797ec22ef20627a1307243b0ab7d09",
            "name": "Kylin Network",
            "symbol": "KYL",
            "logo": "https://cdn.moralis.io/eth/0x67b6d479c7bb412c54e03dca8e1bc6740ce6b99c.png",
            "thumbnail": "https://cdn.moralis.io/eth/0x67b6d479c7bb412c54e03dca8e1bc6740ce6b99c_thumb.png",
            "decimals": "18",
            "balance": "123456789"
        }
    ]
}

useERC20Transfers()

🧾 Gets ERC20 token transfers of a current user or specified address.

Options:

Example

import { useERC20Transfers } from "react-moralis";

const { fetchERC20Transfers, data, error, isLoading, isFetching } =
    useERC20Transfers();

const ERC20Transfers = () => {
    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button
                onClick={() =>
                    fetchERC20Transfers({ params: { chain: "0x1" } })
                }>
                Refetch
            </button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Example return (Object)

{
    "total": 1,
    "page": 0,
    "page_size": 500,
    "result": [
        {
            "transaction_hash": "0x2d30ca6f024dbc1307ac8a1a44ca27de6f797ec22ef20627a1307243b0ab7d09",
            "address": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "block_timestamp": "2021-04-02T10:07:54.000Z",
            "block_number": "12526958",
            "block_hash": "0x0372c302e3c52e8f2e15d155e2c545e6d802e479236564af052759253b20fd86",
            "to_address": "0x62AED87d21Ad0F3cdE4D147Fdcc9245401Af0044",
            "from_address": "0xd4a3BebD824189481FC45363602b83C9c7e9cbDf",
            "value": "650000000000000000"
        }
    ]
}

useNativeBalance()

💰 Gets native balance for a current user or specified address.

Options:

Example:

import { useNativeBalance } from "react-moralis";

function NativeBalance() {
    const {
        getBalance,
        data: balance,
        nativeToken,
        error,
        isLoading,
    } = useNativeBalance({ chain: "ropsten" });

    return <div>{balance.formatted}</div>;
}

Example return of balance (Object)

{
  balance: '996869309795359886',
  formatted: '0.9969 ROP'
}

Example return of nativeToken (Object)

{
  name: 'Ropsten Ether',
  symbol: 'ROP',
  decimals: 18
}

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:

Example

import { useNativeTransactions } from "react-moralis";

const { getNativeTransations, data, chainId, error, isLoading, isFetching } =
    useNativeTransactions();

const NativeTransactions = () => {
    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button
                onClick={() =>
                    getNativeTransations({ params: { chain: "0x1" } })
                }>
                Refetch
            </button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Example return (Object)

{
    "total": 1,
    "page": 0,
    "page_size": 500,
    "result": [
        {
            "hash": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "nonce": "326595425",
            "transaction_index": "25",
            "from_address": "0xd4a3BebD824189481FC45363602b83C9c7e9cbDf",
            "to_address": "0xa71db868318f0a0bae9411347cd4a6fa23d8d4ef",
            "value": "650000000000000000",
            "gas": "6721975",
            "gas_price": "20000000000",
            "input": "string",
            "receipt_cumulative_gas_used": "1340925",
            "receipt_gas_used": "1340925",
            "receipt_contract_address": "0x1d6a4cf64b52f6c73f201839aded7379ce58059c",
            "receipt_root": "string",
            "receipt_status": "1",
            "block_timestamp": "2021-04-02T10:07:54.000Z",
            "block_number": "12526958",
            "block_hash": "0x0372c302e3c52e8f2e15d155e2c545e6d802e479236564af052759253b20fd86"
        }
    ]
}

useNFTBalances()

🎨 Gets all NFTs from the current user or address. Supports both ERC721 and ERC1155. Returns an object with the number of NFT objects and the array of NFT objects.

Options:

Example

import { useNFTBalances } from "react-moralis";

const { getNFTBalances, data, error, isLoading, isFetching } = useNFTBalances();

const NFTBalances = () => {
    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button
                onClick={() => getNFTBalances({ params: { chain: "0x1" } })}>
                Refetch NFTBalances
            </button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Example return (Object)

{
    "total": 1,
    "page": 0,
    "page_size": 500,
    "result": [
        {
            "token_address": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "token_id": "15",
            "contract_type": "ERC721",
            "owner_of": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "block_number": "88256",
            "block_number_minted": "88256",
            "token_uri": "string",
            "metadata": "string",
            "synced_at": "string",
            "amount": "1",
            "name": "CryptoKitties",
            "symbol": "RARI"
        }
    ]
}

useNFTTransfers()

🎨 Gets the NFT transfers. Returns an object with the number of NFT transfers and the array of NFT transfers.

Options:

Example

import { useNFTTransfers } from "react-moralis";

const { fetch, data, error, isLoading, isFetching } = useNFTTransfers();

const NFTTransfers = () => {
    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button onClick={() => fetch({ params: { chain: "0x1" } })}>
                Refetch
            </button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Example return (Object)

{
    "total": 1,
    "page": 0,
    "page_size": 500,
    "result": [
        {
            "token_address": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "token_id": "15",
            "from_address": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "to_address": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "amount": "1",
            "contract_type": "ERC721",
            "block_number": "88256",
            "block_timestamp": "2021-06-04T16:00:15",
            "block_hash": "string",
            "transaction_hash": "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
            "transaction_type": "string",
            "transaction_index": "string",
            "log_index": 0
        }
    ]
}

useChain()

⛓ Hook for fast network switching or getting info about current network. To change the current network, set the target chainId to switchNetwork function. If the user does not have the target network in the wallet, it will automatically ask permission to add it to the wallet.

Example:

import { useChain } from "react-moralis";

function Chains() {
    const { switchNetwork, chainId, chain, account } = useChain();
    return (
        <>
            <button onClick={() => switchNetwork("0x1")}>
                Switch to Ethereum
            </button>
            <p>Current chainId: {chainId}</p>
        </>
    );
}

useTokenPrice()

💰 Gets the price nominated in the native token and usd for a given token contract address

Options:

Example

import { useTokenPrice } from "react-moralis";

const TokenPrice = () => {
    const {
        fetchTokenPrice,
        data: formattedData,
        error,
        isLoading,
        isFetching,
    } = useTokenPrice({ address: "0x1f9840...1f984", chain: "eth" });

    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button
                onClick={() =>
                    fetchTokenPrice({
                        params: { address: "0x6...361", chain: "bsc" },
                    })
                }>
                Refetch
            </button>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};

Example return (Object)

{
    "exchangeAddress": "0x1f98431c8ad98523631ae4a59f267346ea31f984",
    "exchangeName": "Uniswap v3",
    "formattedNative": "0.004695 ETH",
    "formattedUsd": "$20.38",
    "nativePrice": {
        "decimals": 18,
        "name": "Ether",
        "symbol": "ETH",
        "value": "4695118425598734"
    },
    "usdPrice": 20.37791922835578
}

DEX Hooks

useOneInchQuote()

💸 Hook for getting swap quote info.

Example:

import { useOneInchQuote } from "react-moralis";

function Quote() {
    const { getQuote, data, isFetching, isLoading, error } = useOneInchQuote({
        chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)
        fromTokenAddress: "0x0da6ed8b13214ff28e9ca979dd37439e8a88f6c4", // The token you want to swap
        toTokenAddress: "0x6fd7c98458a943f469e1cf4ea85b173f5cd342f4", // The token you want to receive
        amount: 1000,
    });
    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

useOneInchQuote()

💸 Hook for swap.

Example:

import { useOneInchQuote } from "react-moralis";

function Swap() {
    const { swap, data, isFetching, isLoading, error } = useOneInchSwap();

    const options = {
        chain: "bsc", // The blockchain you want to use (eth/bsc/polygon)
        fromTokenAddress: "0x0da6ed8b13214ff28e9ca979dd37439e8a88f6c4", // The token you want to swap
        toTokenAddress: "0x6fd7c98458a943f469e1cf4ea85b173f5cd342f4", // The token you want to receive
        amount: 1000,
        fromAddress: "0x6217e65d864d77DEcbFF0CFeFA13A93f7C1dD064", // Your wallet address
        slippage: 1,
    };

    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <button onClick={() => swap(options)}>Swap</button>
        </div>
    );
}

useOneInchTokens()

💸 Hook for get supported token list.

Example:

import { useOneInchQuote } from "react-moralis";

const SupportedTokens = () => {
    const { getSupportedTokens, data, isFetching, isLoading, error } =
        useOneInchTokens({ chain: "bsc" });

    return (
        <div>
            {error && <>{JSON.stringify(error)}</>}
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
};