React Setup

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { OktoProvider } from "@okto_web3/react-sdk"; 
 
const config = { 
    environment: import.meta.env.VITE_OKTO_ENVIRONMENT, 
    clientPrivateKey: import.meta.env.VITE_OKTO_CLIENT_PRIVATE_KEY, 
    clientSWA: import.meta.env.VITE_OKTO_CLIENT_SWA, 
}; 
 
ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <OktoProvider config={config}> 
            <App />
        </OktoProvider> 
    </React.StrictMode>
);

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { GoogleOAuthProvider } from "@react-oauth/google"; 
import { OktoProvider } from "@okto_web3/react-sdk";
 
const config = {
    environment: import.meta.env.VITE_OKTO_ENVIRONMENT,
    clientPrivateKey: import.meta.env.VITE_OKTO_CLIENT_PRIVATE_KEY,
    clientSWA: import.meta.env.VITE_OKTO_CLIENT_SWA,
};
 
ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>  
            <OktoProvider config={config}>
                <App />
            </OktoProvider>
        </GoogleOAuthProvider>  
    </React.StrictMode>
);

import { useState } from "react";
import { useOkto } from "@okto_web3/react-sdk";
import { GoogleLogin } from "@react-oauth/google"; 
import { UserDashboard } from "./components/UserDashboard";
 
function App() {
    const oktoClient = useOkto();
    const [isLoading, setIsLoading] = useState(false);
 
    async function handleGoogleLogin(credentialResponse: any) { 
        try { 
            setIsLoading(true); 
            await oktoClient.loginUsingOAuth({ 
                idToken: credentialResponse.credential, 
                provider: "google", 
            }); 
        } catch (error) {
            console.error("Authentication error:", error);
        } finally {
            setIsLoading(false);
        }
    }
 
    return (
        <div>
            {isLoading ? (
                <div>Loading...</div>
            ) : oktoClient.userSWA ? (
                <UserDashboard />
            ) : (
                <GoogleLogin onSuccess={handleGoogleLogin} /> 
            )}
        </div>
    );
}
 
export default App;

import { useOkto, getAccount, getPortfolio } from "@okto_web3/react-sdk"; 
import { useEffect, useState } from "react";
 
export function UserDashboard() {
    const oktoClient = useOkto();
    const [accounts, setAccounts] = useState([]);
    const [portfolio, setPortfolio] = useState(null);
 
    useEffect(() => {
        async function fetchUserData() { 
            // Get user's accounts/wallets
            const userAccounts = await getAccount(oktoClient); 
            setAccounts(userAccounts); 
 
            // Get user's portfolio
            const userPortfolio = await getPortfolio(oktoClient); 
            setPortfolio(userPortfolio); 
        }
 
        fetchUserData();
    }, []);
 
    return (
        <div>
            <h2>Welcome {oktoClient.userSWA}</h2>
            <h3>Your Accounts:</h3>
            {accounts.map(account => (
                <div key={account.caipId}>
                    <p>Network: {account.networkName}</p>
                    <p>Address: {account.address}</p>
                </div>
            ))}
 
            <h3>Portfolio:</h3>
            <pre>{JSON.stringify(portfolio, null, 2)}</pre>
        </div>
    );
}

import { useOkto } from "@okto_web3/react-sdk";
import { tokenTransfer } from "@okto_web3/react-sdk"; 
import { useState } from "react";
 
export function TokenTransfer() {
    const oktoClient = useOkto();
    const [status, setStatus] = useState("");
 
    async function handleTransfer() {
        try {
            const transferParams = { 
                amount: BigInt("1000000000000000000"), // 1 POL (18 decimals)
                recipient: "RECIPIENT_ADDRESS", 
                token: "", // Empty string for native token
                caip2Id: "eip155:80002" // Polygon Amoy Testnet chain ID
            };
 
            // Execute the transfer
            const jobId = await tokenTransfer(oktoClient, transferParams); 
            setStatus(`Transfer jobId! Result: ${jobId}`);
        } catch (error) {
            console.error("Transfer failed:", error);
            setStatus(`Transfer failed: ${error.message}`);
        }
    }
 
    return (
        <div>
            <h2>Token Transfer</h2>
            <button onClick={handleTransfer}>
                Send 1 POL
            </button>
            <p>{status}</p>
        </div>
    );
}