/ethereum-react-native-boilerplate

The ultimate full-stack Ethereum React Native Dapp Boilerplate which gives you maximum flexibility and speed. Feel free to fork and contribute. Although this repo is called "Ethereum Boilerplate" it works with any EVM system! Happy BUIDL!๐Ÿ‘ทโ€โ™‚๏ธ

Primary LanguageJavaScript

ethereum-react-native-boilerplate

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

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.

App Home WalletConnect Authentication
Github Demo 1 Github Demo 2
Transactions NFT Screen
NFT screenrecording IMG_4512

โญ๏ธ 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

๐Ÿ“„ Clone or fork ethereum-react-native-boilerplate:

git clone https://github.com/ethereum-boilerplate/ethereum-react-native-boilerplate.git

๐Ÿ’ฟ Install the expo CLI globally:

npm i -g expo-cli

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

REACT_APP_MORALIS_APPLICATION_ID = xxxxxxxxxxxx
REACT_APP_MORALIS_SERVER_URL = https://xxxxxx.grandmoralis.com:2053/server

๐Ÿ’ฟ Install all dependencies:

cd ethereum-react-native-boilerplate
yarn install

๐Ÿšดโ€โ™‚๏ธ Run your App:

  • IOS: yarn ios for emulator Make sure you have Xcode or atleast Xcode command line tools installed
    • For physical IOS Device: Open the moraliscreatereactnativedapp.xcworkspace from ios folder in Xcode. Run the App by choosing your connected physical device.
  • Android:
    • Command yarn start
    • Open android folder from source code in Android Studio. Click "Run app" button to open either emulator or physical device. To see if devices are available, run command adb devices in your terminal.

๐Ÿงญ 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:

  • chain: chain to fetch data from.

<ERC20Balance />

๐Ÿ“จ <ERC20Balance /> : Displays all ERC20 Balances with Price. Options:

  • chain: chain to fetch data from.

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

Options:

  • address: Address to generate Blockie Icon from.
  • size: Size of the Icon. For more custom sizes, edit the component as to your liking

<Address />

Displays The user address that is copyable

๐Ÿงฐ Ethereum Hooks

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

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

useTokenPrice()

useNFTTransfers()

useNFTBalance()