Fetch Portfolio

We have received the user details and their wallets as well. Now we will get the user's portfolio details. This returns all the token assets owned by the user across all the wallets.

First, let's create a new screen with the name user-portfolio.tsx. Fetch the user portfolio details using getPortfolio from Okto and store them in a state.

screens/user-portfolio.tsx

import { useOkto, type OktoContextType, type Portfolio } from 'okto-sdk-react-native';
import React, { useState } from 'react';
import { View, Text } from "react-native";
 
const UserPortfolioScreen = () => {
    const { getPortfolio } = useOkto() as OktoContextType;
    const [portfolio, setPortfolio] = useState<Portfolio[]>([]);
 
    React.useEffect(() => {
        getPortfolio()
              .then((result) => {
                  setPortfolio(result);
              })
              .catch((error) => {
                  console.error(`error:`, error);
              });
    }, []);
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>User Portfolio</Text>
            <View>
                {portfolio.map((item, index) => (
                    <View key={index} style={{ flexDirection: "row", justifyContent: "space-between", alignItems: 'center' }}>
                        <View style={{ flexDirection: "row", gap: 10 }}>
                            <Text>{item.token_name}</Text>
                            <Text>{item.quantity}</Text>
                        </View>
                        <Text>{item.amount_in_inr}</Text>
                    </View>
                ))}
            </View>
        </View>
    );
};
 
export default UserPortfolioScreen;

Display Portfolio Details

Now that we have the portfolio details, we can display them in the app.

screens/user-portfolio.tsx

import { View, Text } from "react-native";
import React, { useState } from 'react';
import { useOkto, type OktoContextType, type Portfolio } from 'okto-sdk-react-native';
 
const UserPortfolioScreen = () => {
    const { getPortfolio } = useOkto() as OktoContextType;
    const [portfolio, setPortfolio] = useState<Portfolio[]>([]);
 
    React.useEffect(() => {
        getPortfolio()
              .then((result) => {
                  setPortfolio(result);
              })
              .catch((error) => {
                  console.error(`error:`, error);
              });
    }, []);
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>User Portfolio</Text>
            <View>
                {portfolio.map((item, index) => (
                    <View key={index} style={{ flexDirection: "row", justifyContent: "space-between", alignItems: 'center' }}>
                        <View style={{ flexDirection: "row", gap: 10 }}>
                            <Text>{item.token_name}</Text>
                            <Text>{item.quantity}</Text>
                        </View>
                        <Text>{item.amount_in_inr}</Text>
                    </View>
                ))}
            </View>
        </View>
    );
};
 
export default UserPortfolioScreen;

Add to Navigation

Finally, add the user-portfolio.tsx screen to the navigate from user-profile.tsx.

screens/user-profile.tsx

import { View, Button } from 'react-native';
import React from 'react';
import { useNavigation } from '@react-navigation/native';
 
const UserProfileScreen = () => {
    const navigation = useNavigation();
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <View style={{ flexDirection: "row", justifyContent: "space-between", marginTop: 10 }}>
                <Button
                    title="Portfolio"
                    onPress={() => navigation.navigate("UserPortfolio")}
                />
            </View>
 
            ...
 
        </View>
    );
};
 
export default UserProfileScreen;

Fetch Wallets Fetch Supported Chains