TypeScript Setup

Prerequisites

Before getting started, ensure you have the following:

• Node.js (v18+) and npm/pnpm/yarn: Download Node.js
• Okto API Keys: You need your CLIENT_PRIVATE_KEY and CLIENT_SWA. Obtain these from the Okto Developer Dashboard.
• Okto Account Setup: Ensure you have sufficient Okto Credits, enable the required Chains and Tokens , and optionally Activate Sponsorship.
• Google OAuth Credentials (if using Google authentication): Create OAuth 2.0 credentials in the Google Cloud Console to get your GOOGLE_CLIENT_ID.

Sponsorship Setup (Optional)

To enable sponsorship for transactions via Okto, follow the steps below:

1. Enable Supported Chains: Ensure the chains you wish to sponsor transactions on are enabled in your Okto Dashboard under Chains & Tokens.

2. Create and Configure a Treasury Wallet: Create at least one Treasury Wallet in your Okto Dashboard.

• For each supported chain:
  • The Treasury Wallet used as the feePayerAddress must have its corresponding destination chain address funded with a small amount of native tokens for one-time verification.
  • Refer to the Treasury Wallet Docs for setup and verification details.

3. Activate Sponsorship: Navigate to the Sponsorship section in the Okto Dashboard and enable sponsorship for each chain individually.

4. Fund the Sponsor Wallet: Deposit a sufficient amount of native tokens into your Sponsor Wallet for each chain where sponsorship is active. These tokens will be used to cover user transaction fees.

Initialize a TypeScript Project

If you already have a TypeScript project, you can skip this step and proceed directly to Step 2 to start integrating Okto.

mkdir my-okto-app
cd my-okto-app
npm init -y
npm install typescript @types/node --save-dev
npx tsc --init

Install Dependencies

Install the required packages:

npm install @okto_web3/core-js-sdk@latest

pnpm add @okto_web3/core-js-sdk@latest

yarn add @okto_web3/core-js-sdk@latest

Configure Environment Variables

Create a .env file in your project root:

CLIENT_PRIVATE_KEY=YOUR_CLIENT_PRIVATE_KEY
CLIENT_SWA=YOUR_CLIENT_SWA
ENVIRONMENT=sandbox

Create a configuration file to load these variables:

import * as dotenv from 'dotenv';
dotenv.config();
 
export const config = {
    environment: process.env.ENVIRONMENT || 'sandbox',
    clientPrivateKey: process.env.CLIENT_PRIVATE_KEY! ,
    clientSWA: process.env.CLIENT_SWA!,
};

Initialize Okto Client

Create your main file:

import { Hash, Hex, OktoClient } from '@okto_web3/core-js-sdk';
import { config } from './config';
 
const oktoClient = new OktoClient({
    environment: config.environment,
    clientPrivateKey: config.clientPrivateKey as Hash,
    clientSWA: config.clientSWA as Hex,
});
 
async function main() {
    // Your code will go here
    console.log("Okto client initialized!");
}
 
main().catch(console.error);

Implement Authentication

Currently, you can onboard users and support on-chain interaction via the Okto Embedded wallet. To do this you must first authenticate your user via social login. We currently support Google OAuth.

Update your main file to include authentication:

async function authenticate(idToken: string) {
    try {
        const user = await oktoClient.loginUsingOAuth({
            idToken,
            provider: "google",
        });
        console.log("Authentication successful:", user);
        return user;
    } catch (error) {
        console.error("Authentication failed:", error);
        throw error;
    }
}

Start Development

Run your application:

npx ts-node index.ts

Congratulations!

🎉 Your basic Okto integration is now complete! You're ready to bring your dApp to life. Let's try out a simple user operation!

1. Get Your Wallet Address

First, get your Polygon wallet address:

import { getAccount } from "@okto_web3/react-sdk";
 
const accounts = await getAccount(oktoClient);
const polygonAccount = accounts.data.find(account => account.network_name === "POLYGON_TESTNET_AMOY");
console.log("Your Polygon Amoy address:", polygonAccount.address);

2. Fund Your Wallet

To perform a token transfer, you'll need some funds in your wallet. Add funds to this address using the Polygon Amoy Faucet.

3. Check Network Information

Before creating the user operation, check the Network Information Guide for getting the correct CAIP-2 IDs of chains.

4. Implement Token Transfer

Add this function to your main file:

import { tokenTransfer } from "@okto_web3/core-js-sdk";
 
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);
        console.log(`Transfer jobId! Result: ${jobId}`);
 
    } catch (error) {
        console.error("Transfer failed:", error);
        throw error;
    }
}

Verify The Transfer

After the transfer is complete, you can verify it through:

• The getPortfolio method to check your updated balance
• The Polygon Amoy Explorer using the transaction hash which can be fetched using the getOrdersHistory method using the jobId.