Cryptocurrency wallet app using React Native is a user-friendly interface for managing digital assets. It is designed to facilitate the secure storage, management, and transaction of cryptocurrencies. cryptocurrency wallet app provides functionalities such as Balance Tracking, Transaction Management, Conversion and Exchange, Transaction History, User Profile, etc.
Preview of final output: Let us have a look at how the final application will look like.
Preview of the app
Prerequisites:
Approach to Create Cryptocurrency wallet App:
- Users can view their profile at the user icon in the top right, which includes their name.
- The app displays the total wallet balance of different cryptocurrencies on the main screen.
- Users can perform actions such as sending cryptocurrencies, requesting them, and viewing transaction history using the corresponding buttons.
- The app provides a list of cryptocurrencies along with their names, balances, and icons.
- Users can scroll through the list to view their holdings and relevant details.
- Creating a fully working cryptocurrency wallet app is very long and complex work so we have created only the homepage UI of the app.
Steps to Create React Native Application:
Step 1: Create a react native application by using this command in the command prompt
React-native init CryptocurrencyAppStep 2: We will use some Icons in our app so, we will install dependency for icon
npm i react-native-vector-iconsProject Structure:
Structure of the project
The updated dependencies in package.json file will look like:
"dependencies": {
"mobx": "4.1.0",
"mobx-react": "5.0.0",
"@expo/vector-icons": "^13.0.0",
"react-native-elements": "0.18.5",
"react-native-vector-icons/FontAwesome": "*",
"react-native-vector-icons": "10.0.3"
}
Example: Write the below source code into the App.js file.
Javascript
import React, { useState, useEffect } from 'react';
import { View, Text,
TouchableOpacity, ScrollView,
FlatList, StyleSheet
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
const CryptoWalletApp = () => { const [walletBalance, setWalletBalance] = useState(0);
const [cryptoCurrencies, setCryptoCurrencies] = useState([
{ id: 1, name: 'Bitcoin', balance: 0.25, icon: 'btc' },
{ id: 2, name: 'Ethereum', balance: 2.5, icon: 'eth' },
{ id: 3, name: 'Litecoin', balance: 5.0, icon: 'ltc' },
{ id: 4, name: 'Ripple', balance: 500, icon: 'xrp' },
{ id: 5, name: 'Cardano', balance: 3000, icon: 'ada' },
{ id: 6, name: 'Polkadot', balance: 10, icon: 'dot-circle' },
{ id: 7, name: 'Chainlink', balance: 50, icon: 'link' },
{ id: 8, name: 'Stellar', balance: 800, icon: 'xlm' },
{ id: 9, name: 'Uniswap', balance: 3, icon: 'university' },
{ id: 10, name: 'Dogecoin', balance: 1000, icon: 'dogecoin' },
{ id: 11, name: 'Bitcoin Cash', balance: 1.5, icon: 'btc' },
{ id: 12, name: 'Litecoin', balance: 4.0, icon: 'ltc' },
{ id: 13, name: 'Ripple', balance: 700, icon: 'xrp' },
{ id: 14, name: 'Cardano', balance: 2000, icon: 'ada' },
{ id: 15, name: 'Polkadot', balance: 15, icon: 'dot-circle' },
{ id: 16, name: 'Chainlink', balance: 80, icon: 'link' },
{ id: 17, name: 'Stellar', balance: 1200, icon: 'xlm' },
{ id: 18, name: 'Uniswap', balance: 5, icon: 'university' },
{ id: 19, name: 'Dogecoin', balance: 800, icon: 'dogecoin' },
{ id: 20, name: 'Bitcoin Cash', balance: 2.0, icon: 'btc' },
]);
const [buttonAction, setButtonAction] = useState('');
const [buttonData, setButtonData] = useState(null);
useEffect(() => {
const totalBalance =
cryptoCurrencies.reduce(
(sum, crypto) =>
sum + crypto.balance, 100);
setWalletBalance(totalBalance);
}, [cryptoCurrencies]);
const handleButtonPress = (action) => {
switch (action) {
case 'send':
setButtonAction('Send');
setButtonData({
recipient: 'manish',
amount: 0.08,
currency: 'BTC',
});
break;
case 'request':
setButtonAction('Request');
setButtonData({
sender: 'SampeSender',
amount: 0.10,
currency: 'BTC',
});
break;
case 'history':
setButtonAction('Transaction History');
setButtonData([
{
id: 1, type: 'Sent',
amount: 0.005, currency: 'BTC'
},
{
id: 2, type: 'Received',
amount: 0.01, currency: 'BTC'
},
{
id: 3, type: 'Sent',
amount: 0.015, currency: 'BTC'
},
]);
break;
default:
break;
}
};
const renderItem = ({ item }) => (
<View style={styles.cryptoItem}>
<Icon name={item.icon}
size={30} color="#3498db" />
<View>
<Text style={styles.cryptoName}>
{item.name}
</Text>
<Text style={styles.cryptoBalance}>
{item.balance}
{item.name}
</Text>
</View>
</View>
);
const renderButtonData = () => {
if (!buttonData) {
return null;
}
if (Array.isArray(buttonData)) {
return (
<View style={styles.buttonDataContainer}>
<Text style={styles.buttonActionText}>
{buttonAction}
</Text>
{buttonData.map((dataItem) => (
<View key={dataItem.id}>
<Text>{dataItem.type}:
{dataItem.amount}
{dataItem.currency}
</Text>
</View>
))}
</View>
);
} else {
return (
<View style={styles.buttonDataContainer}>
<Text style={styles.buttonActionText}>
{buttonAction}
</Text>
<Text>
Recipient:
{buttonData.recipient}
</Text>
<Text>
Amount:
{buttonData.amount}
{buttonData.currency}
</Text>
</View>
);
}
};
return (
<View style={styles.container}>
<View style={styles.profileSection}>
<TouchableOpacity>
<Icon name="user-circle"
size={30} color="#3498db" />
</TouchableOpacity>
<Text style={styles.profileName}>
Manish Prajapati
</Text>
</View>
<View style={styles.banner}>
<Text style={styles.bannerText}>
Total Wallet Balance:
</Text>
<Text style={styles.bannerBalance}>
{walletBalance} BTC
</Text>
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity
style={styles.button}
onPress={
() =>
handleButtonPress('send')
}
>
<Icon name="send"
size={20} color="#3498db" />
<Text>Send</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleButtonPress('request')}
>
<Icon name="arrow-up" size={20}
color="#3498db" />
<Text>Request</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => handleButtonPress('history')}
>
<Icon name="history" size={20}
color="#3498db" />
<Text>Transaction history</Text>
</TouchableOpacity>
</View>
{renderButtonData()}
<ScrollView>
<View style={styles.cryptoList}>
<Text style={styles.sectionTitle}>
Cryptocurrencies
</Text>
<FlatList
data={cryptoCurrencies}
keyExtractor={
(item) =>
item.id.toString()
}
renderItem={renderItem}
/>
</View>
</ScrollView>
</View>
);
};const styles = StyleSheet.create({ container: {
flex: 1,
padding: 16,
},
profileSection: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginTop: 6,
},
banner: {
backgroundColor: '#3498db',
padding: 16,
borderRadius: 8,
marginBottom: 16,
marginTop: 10,
alignItems: 'center',
},
bannerText: {
fontSize: 18,
color: '#fff',
marginBottom: 8,
},
bannerBalance: {
fontSize: 24,
color: '#fff',
fontWeight: 'bold',
},
buttonsContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 16,
},
button: {
flex: 1,
backgroundColor: '#e0e0e0',
padding: 12,
borderRadius: 8,
alignItems: 'center',
flexDirection: 'row',
},
cryptoList: {
flex: 1,
},
sectionTitle: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
},
cryptoItem: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0',
},
cryptoName: {
fontSize: 18,
fontWeight: 'bold',
marginLeft: 12,
},
cryptoBalance: {
fontSize: 14,
color: '#555',
marginLeft: 12,
},
buttonDataContainer: {
backgroundColor: '#f2f2f2',
padding: 16,
margin: 16,
borderRadius: 8,
},
buttonActionText: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
},
});export default CryptoWalletApp;
|
Step to Run the Project:
Step 1: Depending on your operating system, type the following command
- For android:
React-native run-android- For IOS:
React-native run-iosOutput:
Output of the app
Article Tags :
Recommended Articles