Status – Okto Docs

Now that the transaction is executed, we get a jobId after the API is successful. We can use the jobId to track the status of the transaction.

We will get the transaction details using the raw-transaction-status API. This API will return the status of the transaction and other transaction details. Create a new screen with the name raw-transaction-status and we will fetch the details here.

Fetch Transaction Details

Setup navigation to accept the jobId as a parameter. You can follow the same steps as we did for Order Details.

raw-transaction-status.tsx

import { useOkto, type OktoContextType} from 'okto-sdk-react-native';
 
const FetchRawTransactionScreen = ({ route }: { route: RouteProp<RootStackParamList, "FetchRawTransaction"> }) => {
    const { getRawTransactionStatus } = useOkto() as OktoContextType;
    const { jobId } = route.params;
    const [transactionDetails, setTransactionDetails] = useState<Job[]>([]);
 
    useEffect(() => {
        getRawTransactionStatus({order_id: jobId})
            .then((result) => {
                const job = orders.find((order: any) => order.order_id === jobId);
                if(job) setTransactionDetails(job);
            })
            .catch((error) => {
                console.error(`error:`, error);
            });
    }, []);
}

Display Transaction Details

We will display the transaction details on the screen.

raw-transaction-status.tsx

import { View, Text } from "react-native";
 
const FetchRawTransactionScreen = () => {
    ...
 
    return (
        <View>
            <Text>Raw Polygon Transaction Status</Text>
            {transactionDetails.map((transaction, index) => (
                <View key={index}>
                    <Text>Network: {transaction.order_id}</Text>
                    <Text>Status: {transaction.status}</Text>
                    <Text>Transaction Hash: {transaction.transaction_hash}</Text>
                </View>
            ))}
        </View>
    );
}

Add to Navigation

Add the navigation to the send-raw-transaction screen on the success function to navigate to the raw-transaction-status screen.

send-raw-transaction.tsx

const SendRawTransactionScreen = ({ navigation }: { navigation: any }) => {
    const sendTransaction = async () => {
        ...
 
        executeRawTransaction(requestData)
            .then((result) => {
                console.log(result.jobId);
                navigation.navigate("FetchRawTransaction", { jobId: result.jobId });
            })
            .catch((error) => {
                console.error(`error:`, error);
            });
    };
 
    ...
}

Execute Transaction Mint NFT (S2S Only)