Fetch Wallets

Let's continue by adding more information to the User Profile Screen. Add a new section to the screen that will display all wallet information of the user.

First, let's fetch the wallets information of the user using the getWallets method. We will continue developing in the user-profile.tsx.

screens/user-profile.tsx

import { useOkto, type OktoContextType, type Wallet } from 'okto-sdk-react-native';
import React, { useState } from 'react';
import { View, Text } from "react-native";
 
const UserProfileScreen = () => {
    const { getWallets } = useOkto() as OktoContextType;
    const [userWallets, setUserWallets] = useState<Wallet[]>([]);
 
    React.useEffect(() => {
        getWallets()
              .then((result) => {
                setUserWallets(result);
              })
              .catch((error) => {
                console.error(`error:`, error);
              });
    }, []);
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>User Wallets</Text>
            <View>
                {userWallets.map((wallet, index) => (
                    <View key={index} style={{ marginVertical: 10 }}>
                        <Text>{wallet.network_name}</Text>
                        <Text>{wallet.address}</Text>
                    </View>
                ))}
            </View>
        </View>
    );
};
 
export default UserProfileScreen;

Display Wallets

Now, we will display the wallets information of the user.

screens/user-profile.tsx

import { View, Text } from "react-native";
import React, { useState } from 'react';
import { useOkto, type OktoContextType, type Wallet } from 'okto-sdk-react-native';
 
const UserProfileScreen = () => {
    const { getWallets } = useOkto() as OktoContextType;
    const [userWallets, setUserWallets] = useState<Wallet[]>([]);
 
    React.useEffect(() => {
        getWallets()
              .then((result) => {
                setUserWallets(result);
              })
              .catch((error) => {
                console.error(`error:`, error);
              });
    }, []);
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>User Wallets</Text>
            <View>
                {userWallets.map((wallet, index) => (
                    <View key={index} style={{ marginVertical: 10 }}>
                        <Text>{wallet.network_name}</Text>
                        <Text>{wallet.address}</Text>
                    </View>
                ))}
            </View>
        </View>
    );
};
 
export default UserProfileScreen;

Now that the user details are displayed, in the next step, we will fetch the user's wallet details and display them in the app.

Fetch User Fetch Portfolio