Guide
Transfer Assets
Order Details

Once the token 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 orderHistory method to fetch all the 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 order-details.tsx and fetch all the orders and filter the order details using the order_id.

But before that we need to register the screen in the navigation.tsx file with orderId as parameter

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

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

screen/order-details.tsx
import React, { useState } from 'react';
import { RootStackParamList } from "../navigtion";
import { useOkto, type OktoContextType, type Order} from 'okto-sdk-react-native';
 
const OrderDetailsScreen = ({ route }: { route: RouteProp<RootStackParamList, "OrderDetails"> }) => {
    const { orderHistory } = useOkto() as OktoContextType;
    const { orderId } = route.params;
    const [order, setOrder] = React.useState<Order | null>(null);
 
    React.useEffect(() => {
        orderHistory({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/order-details.tsx
import { RootStackParamList } from "../navigtion";
import { View, TextInput, Button } from 'react-native';
 
const OrderDetailsScreen = ({ route }: { route: RouteProp<RootStackParamList, "OrderDetails"> }) => {
    
    ...
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>Order Details</Text>
            {order && <View>
                <Text>Order ID: {order.order_id}</Text>
                <Text>Order Type: {order.order_type}</Text>
                <Text>Order Status: {order.status}</Text>
                <Text>Order Transaction Hash: {order.transaction_hash}</Text>
                <Text>Order Network Name: {order.network_name}</Text>
            </View>}
        </View>
    )
}

Add Navigation

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

screen/transfer-token.tsx
 
const TransferTokensScreen = ({ navigation }: { navigation: any }) => {
    
    const handleSubmit = () => {
        transferTokens(
            networkName,
            tokenAddress,
            recipientAddress,
            quantity
        ).then((result) => {
                navigation.navigate('OrderDetails', { order_id: result.order_id })
        })
        .catch((error) => {
            console.log('Transfer error', error);
        });
    }
    
    return (
        ...
    )
}
Transfer TokensTransfer NFT