React Native Quickstart

npx create-expo-app@latest my-okto-app
cd my-okto-app

import { Hash, Hex, OktoProvider } from '@okto_web3/react-native-sdk';
import { ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
 
const config = {
    environment: "sandbox",
    clientPrivateKey: "YOUR_CLIENT_PRIVATE_KEY" as Hash,  // Replace with your actual private key
    clientSWA: "YOUR_CLIENT_SWA" as Hex,             // Replace with your actual SWA
};
 
export default function RootLayout() {
    return (
        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
            <OktoProvider config={config}>
                <Stack>
                    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                    <Stack.Screen name="+not-found" />
                </Stack>
            </OktoProvider>
            <StatusBar style="auto" />
        </ThemeProvider>
    );
}

import { View, Text, TouchableOpacity } from 'react-native';
import { useOkto } from '@okto_web3/react-native-sdk';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import { useEffect } from 'react';
 
WebBrowser.maybeCompleteAuthSession();
 
export default function Index() {
    const oktoClient = useOkto();
    const [request, response, promptAsync] = Google.useAuthRequest({     
        webClientId: 'YOUR_WEB_CLIENT_ID',             //for web & Expo Go
        iosClientId: 'YOUR_IOS_CLIENT_ID',             //for ios
        androidClientId: 'YOUR_ANDROID_CLIENT_ID',     //for android
        scopes: ['openid', 'profile', 'email']
    });
 
    const handleAuthenticate = async (idToken: string) => {
        try {
            const response = await oktoClient.loginUsingOAuth({
                idToken: idToken,
                provider: 'google',
            });
            console.log("Authenticated with Okto", response);
        } catch (error) {
            console.error("Authentication failed:", error);
        }
    };
 
    useEffect(() => {
        if (response?.type === 'success') {
            const { id_token } = response.params;
            if (id_token) {
                handleAuthenticate(id_token);
            } else {
                console.warn("ID token not returned!");
            }
        }
    }, [response]);
 
    return (
        <View>
            <Text>Welcome to Okto</Text>
            <TouchableOpacity onPress={() => promptAsync()}>
                <Text>Sign in with Google</Text>
            </TouchableOpacity>
        </View>
    );
}

import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { useOkto, getAccount, getPortfolio } from '@okto_web3/react-native-sdk';
 
export function HomeScreen() {
    const oktoClient = useOkto();
    const [accounts, setAccounts] = useState<any>([]);
    const [portfolio, setPortfolio] = useState<any>();
 
    useEffect(() => {
        async function fetchUserData() {
            try {
                // Get user's accounts
                const userAccounts = await getAccount(oktoClient);
                setAccounts(userAccounts.data);
 
                // Get user's portfolio
                const userPortfolio = await getPortfolio(oktoClient);
                setPortfolio(userPortfolio);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }
 
        fetchUserData();
    }, []);
 
    return (
        <ScrollView>
            <Text>Your Accounts</Text>
            {accounts.map((account: any) => (
                <View key={account.caip_id}>
                    <Text>Network: {account.network_name}</Text>
                    <Text>Address: {account.address}</Text>
                </View>
            ))}
            
            <Text>Portfolio</Text>
            <Text>{JSON.stringify(portfolio, null, 2)}</Text>
        </ScrollView>
    );
}

npx expo start