Okto React SDK

⚠️ Important Notice: This is an older version of the Okto SDK. If you're building for ETHDenver 2025, please use @okto_web3/react-sdk which includes the latest features and improvements.

Overview

The Okto React SDK is a powerful tool designed to onboard users to the Web3 ecosystem seamlessly within React applications. With minimal setup, developers can integrate multi-chain Web3 capabilities into their apps, including wallet management, token operations, and advanced smart contract interactions. This guide provides a comprehensive walkthrough for developers and contributors to get started, implement core features, and contribute to the SDK’s development.

Table of Contents

1. Features
2. Prerequisites
3. Installation
4. Configuration
5. Core Features
6. Advanced Features
7. Error Handling
8. Contributing to the SDK
9. API Reference
10. Troubleshooting
11. Support

Features

Supported Chains

• EVM-Compatible Chains: Ethereum, Polygon, Binance Smart Chain, and others.
• Non-EVM Chains: Solana, Aptos.
• Upcoming Support: Cosmos ecosystem.

Core Capabilities

• Authentication: Options include Google OAuth, Email OTP, and Phone OTP.
• Wallet Management: Create, manage, and interact with multiple wallets.
• Token Operations: Transfer and manage various tokens seamlessly.
• NFT Integration: Mint, transfer, and manage NFTs.
• Smart Contract Interactions: Directly interact with smart contracts.
• Portfolio Management: Track digital assets efficiently.
• Customizable UI: Easily adapt designs to match your application.

Prerequisites

Development Environment

1. Node.js and npm (or yarn) installed.
2. React application setup with a compatible version.
3. Required dependencies installed (see Installation).

Credentials

• Okto API Key: Obtainable from the Okto Developer Dashboard.
• Google OAuth Credentials: Required for authentication.

Environment

• Sandbox Environment: Default for testing and development.
• Production Environment: Enabled through the Admin Panel.

Installation

Method 1: Integrate into an Existing React App

npm install okto-sdk-react @react-oauth/google axios

Method 2: Use create-okto-app

For a preconfigured React app:

npx create-okto-app@latest
cd my-okto-app
npm install

Method 3: Next.js Integration

npx create-okto-app@latest
# Select Next.js template
cd my-okto-app
npm install

Configuration

Step 1: Environment Variables

Create a .env file in the project root:

REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id
REACT_APP_OKTO_CLIENT_API_KEY=your_okto_api_key

Step 2: SDK Provider Setup

Wrap your app with the OktoProvider in index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { OktoProvider, BuildType } from "okto-sdk-react";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
      <OktoProvider
        apiKey={process.env.REACT_APP_OKTO_CLIENT_API_KEY}
        buildType={BuildType.SANDBOX}
      >
        <App />
      </OktoProvider>
    </GoogleOAuthProvider>
  </React.StrictMode>
);

Core Features

1. Google OAuth Authentication

Authenticate users with Google OAuth for seamless onboarding:

import { GoogleLogin } from "@react-oauth/google";
import { useOkto } from "okto-sdk-react";

const Login = () => {
  const { authenticate } = useOkto();

  const handleGoogleLogin = async (response) => {
    try {
      await authenticate(response.credential);
      console.log("User authenticated successfully!");
    } catch (err) {
      console.error("Authentication failed:", err);
    }
  };

  return <GoogleLogin onSuccess={handleGoogleLogin} />;
};

2. Wallet Management

Create and manage wallets:

const Wallets = () => {
  const { getWallets, createWallet } = useOkto();
  const [wallets, setWallets] = React.useState([]);

  React.useEffect(() => {
    const fetchWallets = async () => {
      const userWallets = await getWallets();
      setWallets(userWallets);
    };
    fetchWallets();
  }, []);

  const addWallet = async () => {
    const newWallet = await createWallet();
    setWallets((prev) => [...prev, newWallet]);
  };

  return (
    <div>
      <button onClick={addWallet}>Create Wallet</button>
      {wallets.map((wallet) => (
        <p key={wallet.address}>Address: {wallet.address}</p>
      ))}
    </div>
  );
};

3. Token Transfers

Transfer tokens across supported networks:

const Transfer = () => {
  const { transferTokens } = useOkto();

  const handleTransfer = async () => {
    try {
      await transferTokens({
        network_name: "Ethereum",
        token_address: "0xTokenAddress",
        recipient_address: "0xRecipientAddress",
        quantity: "1",
      });
      console.log("Transfer successful!");
    } catch (err) {
      console.error("Transfer failed:", err);
    }
  };

  return <button onClick={handleTransfer}>Transfer Tokens</button>;
};

Contributing to the SDK

Development Workflow

1. Clone the repository:

   git clone https://github.com/okto-hq/okto-sdk-react.git
   cd okto-sdk-react

2. Install dependencies:

   npm install

3. Run tests locally:

   npm test

Guidelines

• Write clear, concise, and reusable code.
• Adhere to the existing coding standards.
• Document new features and provide example implementations.

Issues and Feature Requests

Submit issues or feature requests via GitHub. Ensure you provide clear steps to reproduce bugs or detailed descriptions for feature suggestions.

API Reference

Authentication

authenticate(idToken: string): Promise<AuthResponse>;
logout(): void;
isLoggedIn(): boolean;

Wallet Operations

getWallets(): Promise<Wallet[]>;
createWallet(): Promise<Wallet>;
getPortfolio(): Promise<Portfolio>;

Token Operations

transferTokens(data: TransferData): Promise<TransactionReceipt>;
getSupportedTokens(): Promise<Token[]>;

Troubleshooting

Common Issues

• Authentication Errors: Verify API keys and OAuth credentials.
• Transaction Failures: Check network configurations and wallet balances.
• Network Connectivity: Ensure proper RPC endpoints are configured.

Debugging Tips

1. Use browser dev tools to monitor network requests.
2. Log SDK responses for debugging purposes.

Support

• Documentation: Okto SDK Docs
• Email: [email protected]

Built with ❤️ by the Okto team.