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

npx @react-native-community/cli@latest init OktoApp
cd OktoApp

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { OktoProvider } from '@okto_web3/react-native-sdk';
 
const config = {
    environment: "sandbox",
    clientPrivateKey: "YOUR_CLIENT_PRIVATE_KEY",  // Replace with your actual private key
    clientSWA: "YOUR_CLIENT_SWA",             // Replace with your actual SWA
};
 
function Root() {
    return (
        <OktoProvider config={config}>
            <App />
        </OktoProvider>
    );
}
 
AppRegistry.registerComponent(appName, () => Root);

buildscript {
    ext {
        // ... existing config
        googlePlayServicesAuthVersion = "19.0.0"
    }
    // ... rest of the file
    dependencies {
        // ... existing dependencies
        classpath('com.google.gms:google-services:4.3.4')
    }
}

import React, { useState } from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { GoogleSignin, User } from '@react-native-community/google-signin';
import { useOkto } from '@okto_web3/react-native-sdk';
 
GoogleSignin.configure({
    webClientId: 'OAUTH_WEB_CLIENT_ID',     // Replace with your actual Web Client ID
    androidClientId: 'OAUTH_ANDROID_CLIENT_ID',     // Replace with your actual Android Client ID
    iosClientId: 'OAUTH_IOS_CLIENT_ID',     // Replace with your actual iOS Client ID
    offlineAccess: false,
});
 
export function GoogleSignInButton() {
    const oktoClient = useOkto();
    const [userInfo, setUserInfo] = useState<User | null>(null);
 
    const signIn = async () => {
        try {
            await GoogleSignin.hasPlayServices();
            const userInfo = await GoogleSignin.signIn();
            setUserInfo(userInfo);
            
            await oktoClient.loginUsingOAuth({
                idToken: userInfo.idToken,
                provider: "google",
            });
        } catch (error) {
            console.error('Sign-in error:', error);
        }
    };
 
    return (
        <View style={styles.container}>
            {userInfo ? (
                <Text>Welcome {userInfo.user.name}</Text>
            ) : (
                <Button title="Sign in with Google" onPress={signIn} />
            )}
        </View>
    );
}
 
const styles = StyleSheet.create({
    container: {
        padding: 20,
    }
});

import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { useOkto, getAccount, getPortfolio } from '@okto_web3/react-native-sdk';
 
export function Dashboard() {
    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 style={styles.container}>
            <Text style={styles.title}>Your Accounts</Text>
            {accounts.map((account: any) => (
                <View key={account.caip_id} style={styles.accountCard}>
                    <Text>Network: {account.network_name}</Text>
                    <Text>Address: {account.address}</Text>
                </View>
            ))}
            
            <Text style={styles.title}>Portfolio</Text>
            <Text>{JSON.stringify(portfolio, null, 2)}</Text>
        </ScrollView>
    );
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        marginVertical: 10,
    },
    accountCard: {
        padding: 10,
        marginVertical: 5,
        backgroundColor: '#f5f5f5',
        borderRadius: 5,
    },
});