Create a Cryptocurrency wallet using React-Native

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:

• React Native
• React Native State
• React Native Props

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 CryptocurrencyApp

Step 2: We will use some Icons in our app so, we will install dependency for icon

npm i react-native-vector-icons

Project 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-ios

Output:

Output of the app