+
+
+---
+
## Get Started Today
Pick your SDK and start building.
diff --git a/content/docs/okto-sdk/use-cases.mdx b/content/docs/okto-sdk/use-cases.mdx
index ecc4e25..7577aaa 100644
--- a/content/docs/okto-sdk/use-cases.mdx
+++ b/content/docs/okto-sdk/use-cases.mdx
@@ -142,7 +142,6 @@ You run an established Web2 service (e.g., e-commerce, a streaming platform, or
1. **Explore Our Docs:**
- Check the [SDK Overview](/docs/sdk-overview) for a breakdown of each supported framework.
- - Dive into the [API Reference](/api-docs) for details on methods like `transferTokens` and `transferNft`.
2. **Build a Proof of Concept:**
- Use one of our [quickstart templates](https://github.com/okto-hq/okto-sdk-react-template-app) or read the [React Setup Guide](/docs/react-sdk/getting-started/new-okto-react-setup).
- Experiment with a single chain or a single feature to see how Okto simplifies everything.
diff --git a/content/docs/react-sdk/(Account)/meta.json b/content/docs/react-sdk/(Account)/meta.json
index fe6ca33..d8cc1c0 100644
--- a/content/docs/react-sdk/(Account)/meta.json
+++ b/content/docs/react-sdk/(Account)/meta.json
@@ -1,6 +1,6 @@
{
"title": "Account",
"pages": [
- "estimate", "signUserOp" , "executeUserOp"
+ "userop-learn", "estimate", "signUserOp" , "executeUserOp"
]
}
\ No newline at end of file
diff --git a/content/docs/react-sdk/(Account)/userop-learn.mdx b/content/docs/react-sdk/(Account)/userop-learn.mdx
new file mode 100644
index 0000000..9e6ace8
--- /dev/null
+++ b/content/docs/react-sdk/(Account)/userop-learn.mdx
@@ -0,0 +1,75 @@
+---
+title: Understanding UserOp
+description: Learn about User Operations (UserOp) in the context of Account Abstraction and the Okto SDK.
+full: false
+---
+
+## What is a User Operation?
+
+User Operations (UserOps) are fundamental to [**ERC-4337 Account Abstraction**](https://eips.ethereum.org/EIPS/eip-4337). They are **pseudo-transaction objects** utilized for interacting with smart contract accounts. Unlike traditional transactions initiated by Externally Owned Accounts (EOAs), UserOps serve as structured instructions directed to a smart contract account to perform a blockchain action. Okto SDK provides tools to facilitate the creation, signing, and submission of UserOps.
+
+## How ERC-4337 Works
+
+ERC-4337 is the leading standard for account abstraction, enabling permissionless smart contract wallet functionality. The standard introduces several key components that work together to execute transactions:
+
+
+
+The transaction flow works as follows:
+
+1. When a user wants to execute an action, they create a **User Operation** instead of a regular transaction. This structured object contains all necessary information about the intended transaction.
+
+2. The User Operation enters a special **mempool** where **Bundlers** (decentralized network participants) monitor for valid operations. Bundlers validate these operations and bundle them together for efficiency.
+
+3. The **Entry Point** contract serves as the central gateway, coordinating with the user's **Account** contract through two phases:
+ - First, it validates the operation's legitimacy through the validation loop
+ - Then, if valid, it executes the actual transaction data via the execution loop
+
+4. **Paymasters** can optionally sponsor gas fees, allowing for flexible payment arrangements and improved user experience.
+
+This architecture enables powerful features like batched transactions, sponsored gas fees, and custom validation logic while maintaining security and decentralization.
+
+## User Operation Structure
+
+In the traditional EOA model, transactions are signed and broadcast directly to the network. ERC-4337 introduces smart contract wallets and the concept of **UserOperation** to modify this process. Instead of directly sending transactions, users construct a **UserOperation**, a structured object detailing the intended action.
+
+The UserOperation object comprises specific fields that define transaction details and instructions for the smart contract account:
+
+| Field | Type | Description |
+| :---------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sender` | `address` | The address of the smart contract account. This account is designated to initiate the action. |
+| `nonce` | `uint256` | Anti-replay mechanism. Ensures each UserOperation is unique and cannot be replayed. Also functions as a salt for initial account deployment. |
+| `initCode` | `bytes` | Code for deploying the smart contract account (`sender`) if it is not yet deployed on-chain. Relevant for the initial interaction with a new smart contract wallet. |
+| `callData` | `bytes` | Encoded function call data and parameters intended for execution by the smart contract account (`sender`). Defines the action to be performed. |
+| `callGasLimit` | `uint256` | Gas limit allocated for the execution phase of the `callData` within the smart contract account. |
+| `verificationGasLimit` | `uint256` | Gas limit allocated for the verification phase of the UserOperation, encompassing signature checks and policy validations. |
+| `preVerificationGas` | `uint256` | Gas units to compensate the Bundler for the overhead of UserOperation submission. Bundlers are responsible for upfront gas payment. |
+| `maxFeePerGas` | `uint256` | Maximum fee per gas willing to be paid for the UserOperation, analogous to `maxFeePerGas` in EIP-1559 transactions. |
+| `maxPriorityFeePerGas` | `uint256` | Maximum priority fee per gas willing to be paid, analogous to `maxPriorityFeePerGas` in EIP-1559 transactions. Incentivizes Bundler prioritization. |
+| `paymasterAndData` | `bytes` | Optional field for Paymaster contract integration. Contains the Paymaster contract address and data required for verification and execution. Enables gas sponsorship scenarios. |
+| `signature` | `bytes` | Cryptographic signature for UserOperation authorization. Validated during the verification phase by the EntryPoint contract. |
+
+Understanding the UserOperation structure is essential for working with ERC-4337 Account Abstraction. It provides a framework for executing actions via smart contract accounts.
+
+## Okto SDK Abstraction
+
+The Okto SDK simplifies working with UserOperations by abstracting away some of the more complex fields. Specifically, Okto often handles:
+
+* **Gas Limits:** `callGasLimit`, `verificationGasLimit`
+* **Gas Fees:** `maxFeePerGas`, `maxPriorityFeePerGas`
+* **Paymaster Interaction:** `paymasterAndData` (depending on client configuration)
+* **PreVerification Gas:** `preVerificationGas`
+
+Okto SDK intelligently estimates and sets these values for you in most common scenarios, making it easier to create and execute UserOperations without needing to manually calculate all the gas parameters. However, for advanced use cases, you might still have the option to customize these fields.
+
+**With Okto SDK, developers primarily focus on specifying:**
+
+* `sender` address (Smart Account).
+* `callData` (Function call and parameters).
+
+Okto SDK manages the construction of a valid UserOperation, including gas parameters and signature, to facilitate account abstraction implementation.
+
+## Learn More
+
+For a deeper dive into User Operations and the ERC-4337 standard, refer to the official documentation:
+
+[ERC-4337 User Operation Documentation](https://www.erc4337.io/docs/understanding-ERC-4337/user-operation)
\ No newline at end of file
diff --git a/content/docs/react-sdk/(Example Apps)/templateRepo.mdx b/content/docs/react-sdk/(Example Apps)/templateRepo.mdx
index 895860e..50e5f5e 100644
--- a/content/docs/react-sdk/(Example Apps)/templateRepo.mdx
+++ b/content/docs/react-sdk/(Example Apps)/templateRepo.mdx
@@ -3,10 +3,70 @@ title: Template Repo
full: false
---
+A comprehensive walkthrough of the React Template app built using the Okto SDK. This template demonstrates core Okto functionality including authentication, wallet management, and blockchain interactions.
+
import { Callout } from 'fumadocs-ui/components/callout';
-Walkthrough for understanding the simple React Template app built using the Okto SDK. Check out the app [here](https://v2-react-sdk-sample-app.vercel.app/).
+
+
+
+## Getting Started
+
+
+ Template Repository
+
+
+
+ 
+
+
+1. Clone the repository:
+```bash
+git clone https://github.com/okto-hq/okto-sdkv2-react-template-app.git
+```
+
+2. Install dependencies:
+```bash
+cd okto-sdkv2-react-template-app
+npm install
+```
+
+3. Set up environment variables:
+```bash
+cp .env.sample .env.local
+```
+
+4. Add your API keys to `.env.local`:
+```
+VITE_VENDOR_PRIVATE_KEY="YOUR_VENDOR_PRIVATE_KEY"
+VITE_VENDOR_SWA="YOUR_VENDOR_SWA"
+
+VITE_GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET"
+VITE_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID"
+```
-
+
+
@@ -156,18 +158,33 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+
-
-
-
----
-
## Navigating the React SDK Docs
-Our documentation is organized to guide you through every stage of your development journey—from setting up the SDK to implementing advanced features. Below is an overview of the key sections and what they offer:
+Our documentation is organized into several sections to help you at every stage of your development journey—from initial setup to advanced features. Here’s an updated overview of the main sections:
### 1. Getting Started
-
-Begin your journey by learning the essentials of setting up and configuring Okto within a new or existing React Native project.
-
-- [**Prerequisites**](./react-sdk/getting-started/prerequisites): Before you can begin, confirm you’ve got the necessary dependencies (Node, React, Okto API key) and set up your Google OAuth credentials if you’re using that flow.
-
-- [**Quickstart Guide**](./react-sdk/getting-started/new-okto-react-setup): A step-by-step walkthrough to install and initialize the SDK in less than 10 minutes.
-
----
-
-### 2. Using React Features
-
-Discover how to make the most of the Okto React SDK with prebuilt components and hooks that simplify common Web3 operations.
-
-- [**Components**](./react-sdk/using-react-features/components/OktoProvider): Set up the `OktoProvider` to initialize your app with all of Okto’s functionalities.
-
-- [**Hooks**](./react-sdk/using-react-features/hooks/useOkto): Access a host of capabilities—from token transfers to on-chain reads—through a single hook in any component.
-
----
-
-### 3. SDK Configurations
-
-Explore the capabilities of the Okto React SDK to maximize the potential of your Web3 application. From multi-chain support and user authentication to token management and smart contract interactions, this section provides a deep dive into features designed for scalability and customization.
-
-- [**Chains and Tokens**](./react-sdk/chains-tokens/supported-networks): Learn how to retrieve network and token information using the Okto SDK.
-
-- [**Authenticate Users**](./react-sdk/authenticate-users/google-oauth/learn): Implement authentication login flows, including Google OAuth, email OTP, and phone OTP.
-
-- [**Okto Embedded Wallet**](./react-sdk/okto-embedded-wallet/setup-embedded-wallets/create-embedded-wallets): Build a robust in-app wallet experience with multi-chain token/NFT support, raw transactions, and custom UI screens.
----
-
-### 4. Example Apps
-
-Learn by example with practical implementations of the Okto React SDK.
-
-- [**Template App**](./react-sdk/example-apps/template-app): A fully working starter dApp that demonstrates best practices for integrating authentication, wallets, and multi-chain operations.
-- [**Example Repos**](./react-sdk/example-apps/example-repos): Check out some of the example repos to see what others have been building using Okto.
-
----
-
-### 5. Troubleshooting & FAQ
-
-Find solutions to common issues, debug errors, and learn how to get help when needed.
-
-- [**Common Issues and Error Codes**](./react-sdk/troubleshooting-faq/sdk-error-warnings): A comprehensive list of errors, warnings, and their resolutions.
-- [**Contact Us**](./react-sdk/troubleshooting-faq/contact-us): Reach out to our support team for personalized assistance or additional resources.
+- [Quickstart Guide](/docs/react-sdk/quickstart/new-okto-react-setup): Learn how to create a new React app and integrate the Okto SDK in minutes.
+- [Prerequisites](/docs/react-sdk/quickstart/prerequisites): A checklist of required dependencies, API keys, and initial setup steps.
+
+### 2. Authentication
+Implement secure user login and session management:
+- [Okto Auth](/docs/react-sdk/authenticate-users/okto-auth): Learn about authorization in Okto and Okto Auth Token
+- [Google OAuth](/docs/react-sdk/authenticate-users/google-oauth/learn): Setup and authenticate users via Google.
+- [Session Management](/docs/react-sdk/authenticate-users/login-logout): Manage user sessions and tokens.
+
+### 3. Wallets
+Manage wallet functionality and customization:
+- [Wallet Overview](/docs/react-sdk/wallets/overview): An introduction to wallet features within the SDK.
+- [Embedded Wallets](/docs/react-sdk/wallets/(embedded-wallets)): Configure self-custodial wallets integrated into your app.
+- [External Wallets](/docs/react-sdk/wallets/external-wallets) (Coming Soon): Integrate and manage third-party wallet solutions.
+
+### 4. Usage & Features
+Explore the core capabilities of the SDK:
+- [Usage Overview](/docs/react-sdk/usage-overview): A complete guide to using the Okto React SDK.
+- [Hooks](/docs/react-sdk/(hooks)/useOkto): Leverage React hooks to tap into Okto functionality.
+- [Account Operations](/docs/react-sdk/(Account)/estimate): Sign and execute user operations for on-chain actions.
+- [Explorer Functions](/docs/react-sdk/(Explorer)/getAccount): Retrieve account details, supported chains, tokens, and portfolio data.
+- [Intent Operations](/docs/react-sdk/(Intents)/…): Create and manage blockchain transactions such as token or NFT transfers.
+
+### 5. Resources
+Access additional reference materials and support:
+- [Technical Reference](/docs/react-sdk/technical-reference): In-depth documentation of classes, methods, and data models.
+- [SDK Error Warnings](/docs/react-sdk/sdk-error-warnings): A list of common error messages and troubleshooting tips.
+- [Troubleshooting](/docs/react-sdk/troubleshooting): Guidance on resolving common issues.
+- [Changelog](/docs/react-sdk/changelog): Detailed release notes and updates.
+- [Feature Support](/docs/react-sdk/feature-support): Information on supported chains, tokens, and additional functionalities.
+- [Example Apps](/docs/react-sdk/(Example Apps)/template-app): Sample projects showcasing best practices with the SDK.
+
+### 6. Migration
+- [V2 Migration Guide](/docs/react-sdk/v2migration) (Coming Soon): Instructions and tips for upgrading from previous versions of the SDK.
---
## Get Started
-Ready to dive in? We recommend you begin with our **[Getting Started guide](./react-sdk/getting-started/new-okto-react-setup)** to set up your environment, get your Okto API key, and spin up a simple React app. Once you’re comfortable with the basics, feel free to explore more advanced features or check out our example apps.
+Ready to dive in? We recommend you begin with our **[Getting Started guide](./react-sdk/quickstart/new-okto-react-setup)** to set up your environment, get your Okto API key, and spin up a simple React app. Once you’re comfortable with the basics, feel free to explore more advanced features or check out our example apps.
-If you have any questions or need assistance, don’t hesitate to reach out via our **[Contact Us](./react-sdk/troubleshooting-faq/contact-us)** page or email us at `devrel@coindcx.com`.
+If you have any questions or need assistance, don’t hesitate to reach out via our **[Troubleshooting](./react-sdk/troubleshooting)** page or email us at `devrel@coindcx.com`.
**Happy Building!**
diff --git a/content/docs/react-sdk/technical-reference.mdx b/content/docs/react-sdk/technical-reference.mdx
index 258f958..2a9b7f8 100644
--- a/content/docs/react-sdk/technical-reference.mdx
+++ b/content/docs/react-sdk/technical-reference.mdx
@@ -105,7 +105,10 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
|--------------|----------|
| APTOS | aptos:1 |
| APTOS_TESTNET | aptos:2 |
+| ARBITRUM | eip155:42161 |
+| AVALANCHE | eip155:43114 |
| BASE | eip155:8453 |
+| BSC | eip155:56 |
| POLYGON | eip155:137 |
| POLYGON_TESTNET_AMOY | eip155:80002 |
| SOLANA | solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp |
@@ -130,10 +133,9 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
| Value | Description |
|-------|-------------|
- | `MINT` | Indicates that the order is for minting a new NFT. |
| `NFT_TRANSFER` | Indicates that the order is for transferring an NFT to another address. |
- | `TOKEN_TRANSFER_EXECUTE` | Indicates that the order is for executing a token transfer transaction. |
- | `EXECUTE_RAW_TX` | Indicates that the order is for executing a raw blockchain transaction. |
+ | `TOKEN_TRANSFER` | Indicates that the order is for executing a token transfer transaction. |
+ | `RAW_TRANSACTION` | Indicates that the order is for executing a raw blockchain transaction. |
### ENTITY_TYPE
-
+Defines the type of NFT or asset involved in the transaction.
+Defines the category of asset involved in the transaction.
+
+
+---
+
+ | Value | Description |
+ |-------|-------------|
+ | `TOKENS` | Fungible tokens |
+ | `NETWORKS` | Blockchain networks |
+ | `NFTS` | Non-fungible tokens |
+
+
+### ERC_TYPE
+
Specifies the ERC standard for NFTs on EVM-compatible blockchains.
+
| Value | Description |
|-------|-------------|
- | `ERC721` | An ERC-721 standard NFT on EVM-compatible blockchains. |
+ | `ERC721` | An ERC-721 standard NFT on EVM-compatible blockchains |
| `ERC1155` | An ERC-1155 standard NFT on EVM-compatible blockchains. |
- | `NFT` | An NFT on non-EVM blockchains. |
Contains user authentication and session information.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `userId` | Unique identifier for the user | string | | `userAddress` | User's wallet address | string | @@ -203,7 +220,7 @@ const user = {Represents a user operation for account abstraction.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `callData` | Execution call data | Hex | | `callGasLimit` | Gas limit for main call | Hex | @@ -246,7 +263,7 @@ const userOp = {Represents a blockchain wallet with its network details.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `caipId` | Chain agnostic identifier | string | | `networkName` | Name of the network | string | @@ -268,7 +285,7 @@ const wallet = {Describes a cryptocurrency token and its properties.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `address` | Token contract address | string | | `caipId` | Chain agnostic identifier | string | @@ -304,7 +321,7 @@ const token = {Contains information about supported blockchain networks.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `caipId` | Chain agnostic identifier | string | | `networkName` | Network name | string | @@ -332,7 +349,7 @@ const network = {Represents an order/transaction status and details.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `downstreamTransactionHash` | Array of downstream tx hashes | string[] | | `transactionHash` | Array of transaction hashes | string[] | @@ -361,7 +378,7 @@ const order = {Parameters for initiating a token transfer.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `amount` | Transfer amount | number \| bigint | | `recipient` | Recipient's address | Address | @@ -382,7 +399,7 @@ const tokenTransferParams = {Parameters for initiating an NFT transfer.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `caip2Id` | Chain identifier | string | | `collectionAddress` | NFT collection address | Address | @@ -407,7 +424,7 @@ const nftTransferParams = {Contains user's portfolio and holdings information.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `aggregatedData` | Portfolio summary | Object | | `aggregatedData.holdingsCount` | Number of holdings | string | diff --git a/content/docs/typescript-sdk/authentication/google-oauth/auth-user-via-code.mdx b/content/docs/typescript-sdk/authentication/google-oauth/auth-user-via-code.mdx deleted file mode 100644 index 436a2c3..0000000 --- a/content/docs/typescript-sdk/authentication/google-oauth/auth-user-via-code.mdx +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Authenticate User using Google OAuth -description: Learn how to authenticate users with OAuth using the Okto SDK. -full: false ---- diff --git a/content/docs/typescript-sdk/authentication/google-oauth/meta.json b/content/docs/typescript-sdk/authentication/google-oauth/meta.json index 4ba12f8..c1ba8c5 100644 --- a/content/docs/typescript-sdk/authentication/google-oauth/meta.json +++ b/content/docs/typescript-sdk/authentication/google-oauth/meta.json @@ -3,7 +3,6 @@ "pages": [ "learn", "get-token-id", - "google-console-setup", - "auth-user-via-code" + "google-console-setup" ] } \ No newline at end of file diff --git a/content/docs/typescript-sdk/authentication/session-management/getAuthToken.mdx b/content/docs/typescript-sdk/authentication/session-management/getAuthToken.mdx new file mode 100644 index 0000000..fbe9722 --- /dev/null +++ b/content/docs/typescript-sdk/authentication/session-management/getAuthToken.mdx @@ -0,0 +1,78 @@ +--- +title: Get Auth Token +description: Learn how to retrieve the authorization token using the Okto SDK. +full: false +--- + +import { TypeTable } from 'fumadocs-ui/components/type-table'; +import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; +import { Callout } from 'fumadocs-ui/components/callout'; +import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; +import { Icon as IIcon } from '@iconify/react'; + +The `getAuthorizationToken()` method retrieves the current user's authorization token for authenticated operations. + +### Method Overview + +| Methods | Description | +|---------|-------------| +| async `OktoClient.getAuthorizationToken` | Get the current authorization token | + +
+
+## Get Authorization Token
+
+async `OktoClient.getAuthorizationToken()` retrieves the current authorization token for the authenticated user.
+
+### Parameters
+
+This method doesn't take any parameters.
+
+### Response
+
+
+
+| Field Name | Type | Description |
+|------------|------|-------------|
+| `result` | `Promise` | Returns the authorization token |
+
+
+
+
+
+
+
+ ```typescript
+ import { OktoClient } from "@okto_web3/core-js-sdk";
+ import { Env } from "@okto_web3/core-js-sdk/dist/core/types";
+
+ function TokenRetrieval() {
+ // Initialize OktoClient
+ const oktoClient = new OktoClient({
+ environment: process.env.ENVIRONMENT as Env,
+ vendorPrivKey: process.env.VENDOR_PRIVATE_KEY as Env,
+ vendorSWA: process.env.VENDOR_SWA as Env,
+ });
+
+ async function getToken() {
+ try {
+ const token = await oktoClient.getAuthorizationToken();
+ console.log("Auth token retrieved");
+ } catch (error) {
+ console.error("Failed to get token:", error);
+ }
+ }
+
+ return ;
+ }
+ ```
+
+
+
+
+
+
+
+
-
-## Login using OAuth
-
-async `loginUsingOauth(authData)`
-
-| Field Name | Type | Description |
-|------------|-----------------------|-----------------------------------------------|
-| `result` | [`Promise`](/api-docs#model/user) | Returns the newly created user object |
-
-
-
-
-
-
-
-
- ```typescript
- const user = await oktoClient.loginUsingOAuth({
- idToken: 'idToken', // your ID token
- provider: 'google', // your OAuth provider
- });
- ```
-
-
-
-
-
-
-
-
-
-## Verify login
-
-async `verifyLogin()`
-
-| Field Name | Type | Description |
-|------------|-----------------------|-----------------------------------------------|
-| `result` | [`Promise`](/api-docs#model/user) | Returns true if the login is verified |
-
-
-
-
-
-
-
-
- ```typescript
- const isVerified = await oktoClient.auth.verifyLogin();
- ```
-
-
-
-
-
-
-
-
-
-## Generate authorization token
-
-`generateAuthorizationToken()`
-
-| Field Name | Type | Description |
-|------------|-----------------------|-----------------------------------------------|
-| `result` | [`string`](/api-docs#model/user) | Returns the authorization token |
-
-
-
-
-
-
-
-
- ```typescript
- const token = await oktoClient.auth.generateAuthorizationToken();
- ```
-
-
-
-
-
-
\ No newline at end of file
diff --git a/content/docs/typescript-sdk/authentication/session-management/loginUsingOAuth.mdx b/content/docs/typescript-sdk/authentication/session-management/loginUsingOAuth.mdx
new file mode 100644
index 0000000..9de9895
--- /dev/null
+++ b/content/docs/typescript-sdk/authentication/session-management/loginUsingOAuth.mdx
@@ -0,0 +1,110 @@
+---
+title: Login Using OAuth
+description: Learn how to authenticate users using OAuth with the Okto SDK.
+full: false
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Icon as IIcon } from '@iconify/react';
+
+import '../../../styles.css';
+
+The `loginUsingOAuth()` method authenticates users using OAuth providers. It generates a session key pair, creates an authenticate payload, and sends it to the Gateway service. Upon successful authentication, it updates the user session.
+
+### Method Overview
+
+| Method | Description |
+|---------|-------------|
+| async `OktoClient.loginUsingOAuth` | Authenticate user using OAuth |
+
+
+
+## Login Using OAuth
+
+async `OktoClient.loginUsingOAuth(data: AuthData)` authenticates users using OAuth providers and establishes their session.
+
+### Parameters
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `data` | `AuthData` | Authentication data containing the OAuth provider details |
+
+Where `AuthData` is one of:
+
+| Type | Fields | Description |
+|------|--------|-------------|
+| Google OAuth | `{ idToken: string; provider: 'google' }` | For authentication using Google OAuth |
+| Okto Auth | `{ authToken: string; provider: 'okto' }` | For authentication using Okto token |
+
+### Response
+
+
+
+| Field Name | Type | Description |
+|------------|------|-------------|
+| `result` | `Promise` | Returns the user data on successful login |
+
+
+
+
+
+
+
+```typescript
+import { OktoClient } from "@okto_web3/core-js-sdk";
+import { GoogleLogin } from '@react-oauth/google';
+import { Env } from "@okto_web3/core-js-sdk/dist/core/types";
+
+function LoginComponent() {
+ // Initialize OktoClient
+ const oktoClient = new OktoClient({
+ environment: process.env.ENVIRONMENT as Env,
+ vendorPrivKey: process.env.VENDOR_PRIVATE_KEY as Env,
+ vendorSWA: process.env.VENDOR_SWA as Env,
+ });
+
+ // Using Google OAuth
+ async function handleGoogleLogin(credentialResponse: any) {
+ try {
+ const user = await oktoClient.loginUsingOAuth({
+ idToken: credentialResponse.credential,
+ provider: "google",
+ });
+ console.log("Login successful:", user);
+ } catch (error) {
+ console.error("Login failed:", error);
+ }
+ }
+
+ // Using Okto auth token
+ async function handleOktoLogin(authToken: string) {
+ try {
+ const user = await oktoClient.loginUsingOAuth({
+ authToken: authToken,
+ provider: "okto",
+ });
+ console.log("Login successful:", user);
+ } catch (error) {
+ console.error("Login failed:", error);
+ }
+ }
+
+ return (
+
+
+
+
+
+
\ No newline at end of file
diff --git a/content/docs/typescript-sdk/authentication/session-management/meta.json b/content/docs/typescript-sdk/authentication/session-management/meta.json
index 412014d..55bb68d 100644
--- a/content/docs/typescript-sdk/authentication/session-management/meta.json
+++ b/content/docs/typescript-sdk/authentication/session-management/meta.json
@@ -1,6 +1,8 @@
{
"title": "Session Management",
"pages": [
- "login"
+ "loginUsingOAuth",
+ "verifyLogin",
+ "getAuthToken"
]
}
\ No newline at end of file
diff --git a/content/docs/typescript-sdk/authentication/session-management/verifyLogin.mdx b/content/docs/typescript-sdk/authentication/session-management/verifyLogin.mdx
new file mode 100644
index 0000000..b4888f9
--- /dev/null
+++ b/content/docs/typescript-sdk/authentication/session-management/verifyLogin.mdx
@@ -0,0 +1,74 @@
+---
+title: Verify Login
+description: Learn how to verify user login status using the Okto SDK.
+full: false
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Icon as IIcon } from '@iconify/react';
+
+The `verifyLogin()` method checks if a user is currently logged in. If the user is not logged in, it automatically clears the auth options to maintain consistency.
+
+### Method Overview
+
+| Methods | Description |
+|---------|-------------|
+| async `OktoClient.verifyLogin` | Verify if user is logged in |
+
+
+
+ );
+}
+```
+
+
+## Verify Login
+
+async `OktoClient.verifyLogin()` checks the current login status of the user.
+
+### Parameters
+
+This method doesn't take any parameters.
+
+### Response
+
+
+
+| Field Name | Type | Description |
+|------------|------|-------------|
+| `result` | `Promise` | Returns true if user is logged in, false otherwise |
+
+
+
+
+
+
+
+ ```typescript
+ import { OktoClient } from "@okto_web3/core-js-sdk";
+ import { Env } from "@okto_web3/core-js-sdk/dist/core/types";
+
+ function AuthCheck() {
+ // Initialize OktoClient
+ const oktoClient = new OktoClient({
+ environment: process.env.ENVIRONMENT as Env,
+ vendorPrivKey: process.env.VENDOR_PRIVATE_KEY as Env,
+ vendorSWA: process.env.VENDOR_SWA as Env,
+ });
+
+ async function checkLoginStatus() {
+ try {
+ const isLoggedIn = await oktoClient.verifyLogin();
+ console.log("Login status:", isLoggedIn);
+ } catch (error) {
+ console.error("Verification failed:", error);
+ }
+ }
+
+ return ;
+ }
+ ```
+
+
+
+
+
+
diff --git a/content/docs/typescript-sdk/index.mdx b/content/docs/typescript-sdk/index.mdx
index 9e7859e..67ffd3e 100644
--- a/content/docs/typescript-sdk/index.mdx
+++ b/content/docs/typescript-sdk/index.mdx
@@ -2,4 +2,82 @@
title: Overview of Typescript SDK
description: Okto is a platform that allows you to integrate web3 functionality into your app without building things from scratch.
full: false
----
\ No newline at end of file
+---
+
+import TechnologyCard from 'app/components/mdx/TechnologyCard';
+import { IoCodeSlashOutline } from "react-icons/io5";
+
+## Introduction to Okto TypeScript SDK
+
+**Okto TypeScript SDK** is your comprehensive toolkit for integrating Web3 functionality into TypeScript applications. With an intuitive API and built-in type safety, it simplifies blockchain interactions—helping you quickly onboard users to the decentralized ecosystem and manage secure transactions with ease.
+
+
+
+
+---
+
+## Installation & Quickstart
+
+Kickstart your project by following our [Quickstart Guide](/docs/typescript-sdk/quickstart). This guide will take you through installing the SDK, configuring your project, and executing your first transaction.
+
+---
+
+## Key Features
+
+- **Wallet Management:** Create and manage embedded wallets for your users, ensuring secure and seamless account handling.
+- **Multi-Chain Support:** Effortlessly interact with multiple blockchain networks, including EVM-compatible chains and beyond.
+- **Asset Management:** Handle various digital assets like tokens and NFTs with robust functionalities.
+- **Type Safety:** Leverage TypeScript’s powerful type system for enhanced code reliability and developer productivity.
+- **Easy Integration:** Enjoy a simple setup process with minimal configuration required to get started.
+
+---
+
+## Navigating the TypeScript SDK Docs
+
+Our documentation is organized to support every aspect of your development journey—from initial setup to advanced operations:
+
+### 1. Getting Started
+- [Quickstart Guide](/docs/typescript-sdk/quickstart): Set up your TypeScript project and integrate the Okto SDK in minutes.
+- [Prerequisites](/docs/typescript-sdk/prerequisites): A checklist of required dependencies, API keys, and setup steps.
+
+### 2. Authentication
+Implement secure user login and session management:
+- [Google OAuth](/docs/typescript-sdk/authentication/google-oauth/learn): Set up and authenticate users via Google.
+- [Session Management](/docs/typescript-sdk/authentication/session-management/login): Manage user sessions and tokens.
+
+### 3. Usage & Features
+Explore the full suite of capabilities provided by the SDK:
+- [Usage Overview](/docs/typescript-sdk/usage/overview): Comprehensive guide to utilizing the SDK effectively.
+
+### 4. Additional Resources
+Access further support and development tools:
+- [Technical Reference](/docs/typescript-sdk/technical-reference): In-depth documentation of classes, methods, and data models.
+- [SDK Error Warnings](/docs/typescript-sdk/sdk-error-warnings): A list of common error messages and troubleshooting tips.
+- [Troubleshooting](/docs/typescript-sdk/troubleshooting): Guidance on resolving common issues.
+- [Changelog](/docs/typescript-sdk/changelog): Detailed release notes and updates.
+- [Feature Support](/docs/typescript-sdk/feature-support): Information on supported chains, tokens, and additional functionalities.
+- [Example Apps](/docs/typescript-sdk/example-apps/template-repo): Sample projects showcasing best practices with the SDK.
+
+---
+
+## Get Started
+
+Ready to dive in? Begin with our **[Quickstart Guide](/docs/typescript-sdk/quickstart)** to set up your environment, obtain your Okto API key, and build your first TypeScript application powered by the Okto SDK.
+**Happy Building!**
+
diff --git a/content/docs/typescript-sdk/technical-reference.mdx b/content/docs/typescript-sdk/technical-reference.mdx
index 258f958..2a9b7f8 100644
--- a/content/docs/typescript-sdk/technical-reference.mdx
+++ b/content/docs/typescript-sdk/technical-reference.mdx
@@ -105,7 +105,10 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
|--------------|----------|
| APTOS | aptos:1 |
| APTOS_TESTNET | aptos:2 |
+| ARBITRUM | eip155:42161 |
+| AVALANCHE | eip155:43114 |
| BASE | eip155:8453 |
+| BSC | eip155:56 |
| POLYGON | eip155:137 |
| POLYGON_TESTNET_AMOY | eip155:80002 |
| SOLANA | solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp |
@@ -130,10 +133,9 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
| Value | Description |
|-------|-------------|
- | `MINT` | Indicates that the order is for minting a new NFT. |
| `NFT_TRANSFER` | Indicates that the order is for transferring an NFT to another address. |
- | `TOKEN_TRANSFER_EXECUTE` | Indicates that the order is for executing a token transfer transaction. |
- | `EXECUTE_RAW_TX` | Indicates that the order is for executing a raw blockchain transaction. |
+ | `TOKEN_TRANSFER` | Indicates that the order is for executing a token transfer transaction. |
+ | `RAW_TRANSACTION` | Indicates that the order is for executing a raw blockchain transaction. |
@@ -156,18 +158,33 @@ import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+
### ENTITY_TYPE
-
+Defines the type of NFT or asset involved in the transaction.
+Defines the category of asset involved in the transaction.
+
+
+---
+
+ | Value | Description |
+ |-------|-------------|
+ | `TOKENS` | Fungible tokens |
+ | `NETWORKS` | Blockchain networks |
+ | `NFTS` | Non-fungible tokens |
+
+
+### ERC_TYPE
+
Specifies the ERC standard for NFTs on EVM-compatible blockchains.
+
| Value | Description |
|-------|-------------|
- | `ERC721` | An ERC-721 standard NFT on EVM-compatible blockchains. |
+ | `ERC721` | An ERC-721 standard NFT on EVM-compatible blockchains |
| `ERC1155` | An ERC-1155 standard NFT on EVM-compatible blockchains. |
- | `NFT` | An NFT on non-EVM blockchains. |
Contains user authentication and session information.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `userId` | Unique identifier for the user | string | | `userAddress` | User's wallet address | string | @@ -203,7 +220,7 @@ const user = {Represents a user operation for account abstraction.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `callData` | Execution call data | Hex | | `callGasLimit` | Gas limit for main call | Hex | @@ -246,7 +263,7 @@ const userOp = {Represents a blockchain wallet with its network details.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `caipId` | Chain agnostic identifier | string | | `networkName` | Name of the network | string | @@ -268,7 +285,7 @@ const wallet = {Describes a cryptocurrency token and its properties.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `address` | Token contract address | string | | `caipId` | Chain agnostic identifier | string | @@ -304,7 +321,7 @@ const token = {Contains information about supported blockchain networks.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `caipId` | Chain agnostic identifier | string | | `networkName` | Network name | string | @@ -332,7 +349,7 @@ const network = {Represents an order/transaction status and details.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `downstreamTransactionHash` | Array of downstream tx hashes | string[] | | `transactionHash` | Array of transaction hashes | string[] | @@ -361,7 +378,7 @@ const order = {Parameters for initiating a token transfer.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `amount` | Transfer amount | number \| bigint | | `recipient` | Recipient's address | Address | @@ -382,7 +399,7 @@ const tokenTransferParams = {Parameters for initiating an NFT transfer.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `caip2Id` | Chain identifier | string | | `collectionAddress` | NFT collection address | Address | @@ -407,7 +424,7 @@ const nftTransferParams = {Contains user's portfolio and holdings information.
-| Key | Value | Data Type | +| Key | Description | Data Type | |-----|--------|-----------| | `aggregatedData` | Portfolio summary | Object | | `aggregatedData.holdingsCount` | Number of holdings | string | diff --git a/content/docs/typescript-sdk/usage/OktoClient.mdx b/content/docs/typescript-sdk/usage/OktoClient.mdx index c8d4b43..1dbf1a5 100644 --- a/content/docs/typescript-sdk/usage/OktoClient.mdx +++ b/content/docs/typescript-sdk/usage/OktoClient.mdx @@ -18,9 +18,9 @@ import '../../styles.css'; | Parameter | Type | Description | |-------------|-----------------------------|----------------------------------------| -| `environment` | [`string`](/api-docs#model/userop) | The environment to use | -| `vendorPriKey` | [`string`](/api-docs#model/userop) | The vendor private key to use | -| `vendorSWA` | [`string`](/api-docs#model/userop) | The vendor's sender wallet address to use | +| `environment` | [`string`](/docs/typescript-sdk/technical-reference#models) | The environment to use | +| `vendorPriKey` | [`string`](/docs/typescript-sdk/technical-reference#models) | The vendor private key to use | +| `vendorSWA` | [`string`](/docs/typescript-sdk/technical-reference#models) | The vendor's sender wallet address to use | ### Response diff --git a/content/docs/typescript-sdk/usage/estimate.mdx b/content/docs/typescript-sdk/usage/estimate.mdx index 0ba4d59..b64cdc6 100644 --- a/content/docs/typescript-sdk/usage/estimate.mdx +++ b/content/docs/typescript-sdk/usage/estimate.mdx @@ -22,7 +22,7 @@ import '../../styles.css'; ## Estimate -async `estimate(OktoClient, recipientWalletAddress, networkId, tokenAddress, amount)`