NFT Crypto Wallet App

This article describes a React Native non custodian crypto wallet app with NFT features.

Screenshot

For NFT functionality, the app is able to display NFT asset information that is owned by the logged in wallet address. To do so, it calls Opensea API to retrieve NFT asset info. Besides that, the app demonstrates calling Opensea Javascript SDK to fetch NFT asset info.

const assets = await this.openseaport.api.getAsset({tokenAddress: address, tokenId: null});

For crypto libraries, the app uses ethereumjs-wallet for managing wallet address, bip39 for generating seed phrase, react-native-crypto and crypto-js for crypto related activities.

In terms of wallet management, it can create a new wallet address, recover the wallet address from seed phrase, or recover the wallet address from private key.

To recover wallet account from private key, the app calls

const account = web3.eth.accounts.privateKeyToAccount(privateKey)

which returns an account object.

For state management, the React Native app uses react redux for storing data, redux saga for asynchronous call.

For navigation, the app uses @react-navigation/native-stack for transition of stack screens.

For image carousel in the starting screen, the app uses react-native-snap-carousel.

For multi tab screen, the app uses @react-navigation/bottom-tabs createBottomTabNavigator.

To send ether to the destination address, private key of the wallet account is used to sign the transaction, and web3 sendSignTransaction() is called.

const hash = await this.web3Instance.eth.sendSignedTransaction(signedTx.rawTransaction)

The ethereum RPC endpoint is provided by Alchemy.

For denoting absolute path in the code, the app uses metro-react-native-babel-preset and declares the path in babel.config.js. The file jsconfig.json is only used by Visual Studio Code, For environment variables, the app uses react-native-dotenv and declares the settings in .babelrc.

The app is tested on Ethereum Rinkeby testnet. The source code is available at my github repo.

The link is as below.

GitHub - victoryeo/CryptoWalletApp: RN Crypto wallet app

March 2023 update:

I update the react-native dependency to 0.70.7, and find out there are dependencies issues when running the App.

In particular, it is necessary to patch the react-native, react-native-os, react-native-tcp package. Please see the link below for more info:

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from…

Basically, i have to patch three npm packages, as below:

npx patch-package react-native

npx patch-package react-native-os

npx patch-package react-native-tcp

The readme file of the repo also contains specific instructions about running the app.