ethereum-react-native-boilerplate

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

This project is using:

• create-react-native-dapp to bootstrap the project.
• WalletConnect v1 react-native integration for authenthication (we use a slightly modiefied version, located in ./src/WalletConnect to allow to modify the enable function of Moralis).
• react-moralis for react hooks

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

⭐️ Star us

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

? 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

? Install all dependencies:

cd ethereum-react-native-boilerplate
yarn install 

?‍♂️ Run your App:

• Web: yarn web
• IOS: yarn ios
• Android: yarn android

? Table of contents

• ethereum-react-native-boilerplate

• ? Quick Start

• ? Table of contents

• ? Ethereum Components

• • <CryptoAuth />
  • <NativeBalance />
  • <ERC20Balance />
  • <Assets />
  • RecentTransactions
  • <TransactionDetails />
  • <Header />

• ? Ethereum Hooks

  • useTokenPrice()
  • useERC20Balance()
  • useERC20Transfers()

? 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

<Header />

Displays The user address that is copyable

? Ethereum Hooks

useTokenPrice()

useERC20balance()

useERC20Transfers()

GitHub

View Github