Transfer Nft – Okto Docs

After being able to transfer tokens and track the orders, we will add a Functionality to transfer NFTs from one account to another.

Adding required fields

We will be using the transferNFT method to transfer NFTs from one account to another. This method requires the following fields:

operationType: The type of operation to be performed. In this case, it will be NFT_TRANSFER.
quantity: The quantity of NFTs to be transferred.
recipientAddress: The address of the recipient account.
networkName: The name of the network to perform the transfer on.
nftAddress: The address of the NFT to be transferred.
collectionAddress: The address of the collection containing the NFT.
collectionName: The name of the collection containing the NFT.

We will create a new screen named transfer-nft.tsx and start by creating states and a method to handle the submission of the form fields.

screen/transfer-nft.tsx

import React, { useState } from 'react';
import { useOkto, type OktoContextType} from 'okto-sdk-react-native';
 
const TransferNFTScreen = () => {
    const { transferNft } = useOkto() as OktoContextType;
    const operationType = "NFT_TRANSFER"
    const [networkName, setNetworkName] = useState<string>("APTOS_TESTNET")
    const [collectionAddress, setCollectionAddress] = useState<string>("0x171e643e8e8dabc66b838b9055dbdf88647cf6601b164f5987f50a497bedfbe1")
    const [collectionName, setCollectionName] = useState<string>("super avengers")
    const [quantity, setQuantity] = useState<string>("1")
    const [recipientAddress, setRecipientAddress] = useState<string>("0x46e5fb2f9af287a5bcd9756ff35494c41b7371446da3daf98e1f1de58331c55f")
    const [nftAddress, setNftAddress] = useState<string>("0xf137ad32d4d695c9eb7cb4831e6198924afe5fb8c51576e8a5b5b07f6da8e0d3")
 
    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) => {
                console.log(result)
            }).catch((error) => {
                console.error(`error:`, error);
            });
       
    }
}

Add Form

We will add form fields to the screen to capture the required fields. Additionally, we will include a button to submit the form.

screen/transfer-token.tsx

import { View, TextInput, Button } from 'react-native';
 
const TransferNFTScreen = () => {
    
    ...
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>Transfer NFT</Text>
            <TextInput
                value={networkName}
                onChangeText={(value) => setNetworkName(value)}
                placeholder="Enter Network Name"
            />
            <TextInput
                value={collectionAddress}
                onChangeText={(value) => setCollectionAddress(value)}
                placeholder="Enter Collection Address"
            />
            <TextInput
                value={collectionName}
                onChangeText={(value) => setCollectionName(value)}
                placeholder="Enter Collection Name"
            />
            <TextInput
                value={quantity}
                onChangeText={(value) => setQuantity(value)}
                placeholder="Enter Quantity"
            />
            <TextInput
                value={recipientAddress}
                onChangeText={(value) => setRecipientAddress(value)}
                placeholder="Enter Recipient Address"
            />
            <TextInput
                value={nftAddress}
                onChangeText={(value) => setNftAddress(value)}
                placeholder="Enter NFT Address"
            />
            <Button
                title="Transfer NFT"
                onPress={handleSubmit}
            />
        </View>
    )
}

Add Navigation

Now, let's add a way for the user to navigate to this screen by including a button in the user-profile.tsx to navigate to the transfer-tokens.tsx.

screen/transfer-token.tsx

import { Button, View } from 'react-native';
 
const UserProfileScreen = ({ navigation }: { navigation: any }) => {
    
    ...
    
    return (
        <View>
            ...
 
            <View style={{ alignItems: "center" }}>
                <Button
                    title="Transfer Tokens"
                    onPress={() => navigation.navigate('TransferTokens')}
                />
            </View>
        </View>
    )
}

Order Details NFT Order Details