This project is a mobile bitcoin wallet application built in React Native and Expo, with Redux for state management, and Jest for component integration testing.
The app allows users to send and receive bitcoin, similar to bitcoin exchange apps like Binance and Coinbase.
React.Native.Bitcoin.Exchange.mov
We use Axios to fetch the live bitcoin price from the coingecko API to calculate how much our mocked bitcoin is worth in dollar terms.
The <WalletBalance /> uses Redux selectors to display the wallet balance in both BTC and USD. We set the default mock balance to 0.175 BTC when the app first loads, then the user can receive more bitcoin to increase their balance.
The <ReceiveBitcoin /> component allows the user to receive 0.1 BTC to a random bitcoin wallet address generated by the package bitcoinjs-lib. The wallet balance is then updated in Redux with the new bitcoin, and the new transaction is added to the transactions history state in Redux.
The <SendBitcoin /> component fetches the mocked wallet balance and BTC price data from Redux, which displays to the user to show much bitcoin they can send. The user can enter in an amount of BTC into the input field and paste in a bitcoin address into another input field.
When the user taps on the "Send Bitcoin" button, we complete a bunch of validation including:
- If the BTC address is valid using btcRegex (needs to be either a legacy address that starts with 1 or 3 with 26–35 characters total, or a SegWit address that starts with bc1 followed by 39 to 59 characters)
- If the values entered are numerical (and greater than 0)
- If the user has a sufficient balance (including 0.00001 BTC network fee)
Then we dispatch a Redux action to add the new transaction to the transactions history state and we dispatch another action to update the wallet balance.
We use the package reduxjs/toolkit for state management. This allows us to store the application state in multiple Redux slices (Reducers), one each for the balance, bitcoin price, and transactions state.
Then we can use Redux selectors to display the state in the component UI, along with dispatching Redux actions to update our state.
We use the jest-expo package for component-level integration tests. This is valuable because we can test real user behavior and see if the different pieces of React UI, Redux, and navigation work together.
You can use this tool to generate bitcoin addresses to use with this project.
You can run the app with:
npm install -g expo-cli
npm install
npm startYou can run the component intergration tests with:
npm test