Transfer Tokens – Okto Docs

The user can now start transferring tokens from one account to another. We can dive straight into the implementation of the transfer tokens feature.

Adding required fields

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

network - The network to use for the transfer.
tokenAddress - The address of the token to transfer.
amount - The amount of tokens to transfer.
recipient - The address of the recipient. We will create a new screen named transfer-tokens.tsx and start by creating states and a method to handle the submission of the form fields.

screen/transfer-token.tsx

import React, { useState } from 'react';
import { useOkto, type OktoContextType} from 'okto-sdk-react-native';
 
const TransferTokensScreen = () => {
    const { transferTokens } = useOkto() as OktoContextType;
    const [networkName, setNetworkName] = useState("APTOS_TESTNET");
    const [tokenAddress, setTokenAddress] = useState("0x1::aptos_coin::AptosCoin");
    const [quantity, setQuantity] = useState("1");
    const [recipientAddress, setRecipientAddress] = useState("0x6b244684313dd6a9fc75c8e76cb648d407374d59970583dd990c686cda767984");
 
    const handleSubmit = () => {
        transferTokens({
            network_name: networkName,
            token_address: tokenAddress,
            recipient_address: recipientAddress,
            quantity: quantity
        }).then((result) => {
                console.log('Transfer success', result);
        })
        .catch((error) => {
            console.log('Transfer 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 TransferTokensScreen = () => {
    
    ...
 
    return (
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text>Transfer Tokens</Text>
            <TextInput
                value={networkName}
                onChangeText={(value) => setNetworkName(value)}
                placeholder="Enter Network Name"
            />
            <TextInput
                value={tokenAddress}
                onChangeText={(value) => setTokenAddress(value)}
                placeholder="Enter Token Address"
            />
            <TextInput
                value={quantity}
                onChangeText={(value) => setQuantity(value)}
                placeholder="Enter Quantity"
            />
            <TextInput
                value={recipientAddress}
                onChangeText={(value) => setRecipientAddress(value)}
                placeholder="Enter Recipient Address"
            />
            <Button
                title="Transfer Tokens"
                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/user-profile.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>
    )
}

Fetch Supported Chains Order Details