Home

Awesome

ethereum-react-native-boilerplate

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

Discord Discourse topics GitHub last commit

GitHub Repo stars Twitter URL

This project is using:

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.

Check the corresponding docs for additional information and help.

Iphone demo 2 (2)

⭐️ Star us

If this boilerplate helps you build Ethereum mobile 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

💿 Install all dependencies:

cd ethereum-react-native-boilerplate
yarn install

cd ios
pod install

cd ..

🚴‍♂️ Run your App:

IMPORTANT:

What's New:

🧭 Table of contents

🏗 Ethereum Components

🛠 The ready for use react-native-components are located in frontend/Components. They are designed to be used anywhere in your dApp.

<CryptoAuth />

📒 <CryptoAuth /> : Easy web3 authentication via WalletConnect.

<NativeBalance />

Options:

<ERC20Balance />

📨 <ERC20Balance /> : Displays all ERC20 Balances with Price. Options:

<Assets />

💰 <Assets /> : Screen to display all Chain ERC20 and NAtive Assets with Prices

<RecentTransactions />

💰 <RecentTransactions /> : Screen to display all Chain ERC20 Transactions

<TransactionDetails />

<TransactionDetails /> : Modal to display all ERC20 Transaction related content

<Blockie />

A custom Blockie indenticon generator for React Native.

<img src="https://user-images.githubusercontent.com/9363303/143417343-8280bd77-552f-4417-b3b2-bce6900c7dc1.jpg" width="302" height="69"> <img src="https://user-images.githubusercontent.com/9363303/143417572-7b283258-f737-4a36-81c4-ddd23d9037af.jpg" width="314.5" height="79"> <img src="https://user-images.githubusercontent.com/9363303/143417345-6c7a328f-48b8-465b-90be-2ced124c14ec.jpg" width="300" height="75.5">

Options:

<Address />

Displays The user address that is copyable

🧰 Ethereum Hooks

useERC20balance()

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

Options:

Returns (Object) : number of tokens and the array of token objects

const {fetchERC20Balance, assets} = useERC20Balance({chain: 'eth'});

useNativeBalance()

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

Options:

Example:

import useNativeBalance from './hooks/useNativeBalance';

function NativeBalance() {
  const {nativeBalance} = useNativeBalance(chain);

  return (
    <View style={styles.itemView}>
      <Text style={styles.name}> {nativeBalance} </Text>
    </View>
  );
}

Example return of nativeBalance (string)

'0.1581 BNB';

useERC20Transfers()

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

Options:

Returns (Array) : ERC20 token transfers

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:

Returns (Array) : native transactions

useTokenPrice()

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

Options:

Example

import {useTokenPrice} from './hooks/useTokenPrice';

const TokenPrice = () => {
  const {tokenPrice} = useTokenPrice({chain, tokenAddress});

  return (
    <View>
      <Text>{tokenPrice.usdPrice}</Text>
    </View>
  );
};

Example return (Object)

{
  "exchangeAddress": "0x5757371414417b8C6CAad45bAeF941aBc7d3Ab32",
  "exchangeName": "Quickswap",
  "nativePrice": "0.0003 MATIC",
  "usdPrice": "$1.08"
}

{
  "exchangeAddress": "0xcA143Ce32Fe78f1f7019d7d551a6402fC5350c73",
  "exchangeName": "PancakeSwap v2",
  "nativePrice": "0.0005 BNB",
  "usdPrice": "$0.28"
}

useNFTTransfers()

useNFTBalance()

🎨 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 return (Object)

[
  {
    "amount": "1",
    "block_number": "9449788",
    "block_number_minted": "9449091",
    "contract_type": "ERC1155",
    "frozen": 0,
    "image": "https://nyc-feb-19-2020.s3.amazonaws.com/skin-slip-animation.gif",
    "is_valid": 1,
    "metadata": {
      "description": "On February 19th, we will introduce the future of b̶l̶o̶c̶k̶c̶h̶a̶i̶n̶ gaming. And you’ll see why Kitties were just the start.",
      "external_url": "https://www.nycfeb192020.com/",
      "image": "https://nyc-feb-19-2020.s3.amazonaws.com/skin-slip-animation.gif",
      "name": "NYC Feb 19th 2020"
    },
    "name": "NYC February 19th 2020",
    "owner_of": "0x71a11bc477048cca56d645ffc66ca762f62d1c3c",
    "symbol": "NYCFEB192020",
    "synced_at": "2021-12-06T19:02:12.378Z",
    "syncing": 2,
    "token_address": "0xd193a22224795c43d837a3f3d7394b4d0cc15f60",
    "token_id": "1",
    "token_uri": "https://nyc-feb-19-2020.s3.amazonaws.com/metadata.json"
  }
]