Guide
Get Details
Fetch Supported Chains

Before the user can transfer assets from and to their wallets, they need to know the networks and tokens supported by your API Key.

Fetch Supported Networks and Tokens

First, let's fetch the supported networks and tokens from Okto. Use the getSupportedNetworks and getSupportedTokens methods to obtain the respective data. We will start by creating a new screen with the name supported-chains.tsx and add the required methods.

screen/supported-chains.tsx
import { useOkto, type OktoContextType, type Token, type Network } from 'okto-sdk-react-native';
import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
 
const SupportedChainScreen = () => {
    const { getSupportedNetworks, getSupportedTokens } = useOkto() as OktoContextType;
    const [networks, setNetworks] = useState<Network[]>([]);
    const [tokens, setTokens] = useState<Token[]>([]);
 
    useEffect(() => {
        getSupportedNetworks()
          .then((result) => {
            setNetworks(result);
          })
          .catch((error) => {
            console.error(`error:`, error);
          });
 
        getSupportedTokens()
          .then((result) => {
            setTokens(result);
          })
          .catch((error) => {
            console.error(`error:`, error);
          });
    }, []);
 
    return (
        <View style={{ flexDirection: "row", backgroundColor: "#fff", flex: 1 }}>
            <View style={{ flex: 0.5 }}>
                <Text>Supported Networks</Text>
                <View>
                    {networks.map((network, index) => (
                        <View key={index} style={{ marginVertical: 10 }}>
                            <Text>{network.network_name}</Text>
                        </View>
                    ))}
                </View>
            </View>
            <View style={{ flex: 0.5 }}>
                <Text>Supported Tokens</Text>
                <View>
                    {tokens.map((token, index) => (
                        <View key={index} style={{ marginVertical: 10 }}>
                            <Text>{token.token_name}</Text>
                        </View>
                    ))}
                </View>
            </View>
        </View>
    );
};
 
export default SupportedChainScreen;

Add Navigation

Finally, we need to add a way to navigate to this screen. Let's add a link in the user-profile.tsx to navigate to the supported-chains.tsx.

screen/user-profile.tsx
import { Pressable, Text, View } from 'react-native';
import React from 'react';
import { useNavigation } from '@react-navigation/native';
 
const UserProfileScreen = () => {
    const navigation = useNavigation();
 
    return (
        <View>
            ...
 
            <View style={{ alignItems: "center" }}>
                <Pressable onPress={() => navigation.navigate("SupportedChains")}>
                    <Text style={{ color: "#008AE6" }}>Check Supported Chains</Text>
                </Pressable>
            </View>
        </View>
    );
};
 
export default UserProfileScreen;
Fetch PortfolioTransfer Tokens