Nft Order Details – Okto Docs

Once the NFT transfer is initiated, the API will return a order_id, which can be used to track the status of the transfer along with other order details.

Fetch Order Details

We will be using the getNftOrderDetails method to fetch all the NFT order details for the user. Then we can use the order_id to check our current order details.

We will create a new screen named nft-order-details.tsx and fetch all the orders and filter the order details using the order_id.

And similar to the transfer-tokens.tsx screen, we will register the screen in the navigation.tsx file with orderId as parameter

navigation.tsx

export type RootStackParamList = {
    
    ...
 
    NftOrderDetails: { 
        order_id: string 
    };
}
 
export default function Navigation(){
    return (
        <Stack.Navigator initialRouteName="Login">
            
            ...
 
            <Stack.Screen name="NftOrderDetails" component={NftOrderDetailsScreen} />
        </Stack.Navigator>
    )
}

Now we can accept the order_id as a parameter in the nft-order-details.tsx screen.

screen/nft-order-details.tsx

import React, { useState } from 'react';
import { RootStackParamList } from "../navigtion";
import { useOkto, type OktoContextType, type NftOrderDetails} from 'okto-sdk-react-native';
 
const NftOrderDetailsScreen = ({ route }: { route: RouteProp<RootStackParamList, "NftOrderDetails"> }) => {
    const { getNftOrderDetails } = useOkto() as OktoContextType;
    const { orderId } = route.params;
    const [order, setOrder] = React.useState<NftOrderDetails | null>(null);
 
    React.useEffect(() => {
        getNftOrderDetails({order_id: orderId})
          .then((orders) => {
            const order = orders.find((order: any) => order.order_id === orderId);
            if(order) setOrder(order);
          })
          .catch((error) => {
            console.error(`error:`, error);
          });
    }, [])
}

Display Order Details

We will now display the order details on the screen. We will use the order state to display the details.

screen/nft-order-details.tsx

import { RootStackParamList } from "../navigtion";
import { View, TextInput, Button } from 'react-native';
 
const NftOrderDetailsScreen = ({ route }: { route: RouteProp<RootStackParamList, "OrderDetails"> }) => {
    
    ...
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>NFT Order Details</Text>
            {order && <View>
                <Text>Order ID: {order.id}</Text>
                <Text>Order NFT Name: {order.nft_name}</Text>
                <Text>Order Type: {order.type}</Text>
                <Text>Order Network Name: {order.network_name}</Text>
                <Text>Order Collection Address: {order.collection_address}</Text>
            </View>}
        </View>
    )
}

Add Navigation

Now, let's add a automatic navigation from transfer-nft.tsx to take the user to nft-order-details.tsx for checking the order details.

screen/transfer-nft.tsx

 
const TransferNFTScreen = ({ navigation }: { navigation: any }) => {
    
    const handleSubmit = () => {
        transferNft(
            {
                operation_type: operationType,
                network_name: networkName,
                collection_address: collection_address,
                collection_name: collection_name,
                quantity: quantity,
                recipient_address: recipientAddress,
                nft_address: nftAddress
            }).then((result) => {
                navigation.navigate('NftOrderDetails', { order_id: result.order_id })
            })
        );
    }
    
    return (
        ...
    )
}

Transfer NFT Execute Transaction