Skip to content

Commit

Permalink
Merge pull request #49 from okto-hq/zaje-patch
Browse files Browse the repository at this point in the history
Update Documentation
  • Loading branch information
oviawork authored Feb 12, 2025
2 parents 253b421 + 3392c39 commit 105e3a5
Show file tree
Hide file tree
Showing 47 changed files with 1,388 additions and 356 deletions.
2 changes: 1 addition & 1 deletion app/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ export default function NavbarComponent() {
];

const sdkOptions = [
{ href: "/docs/typescript-sdk", label: "Typescript", subpath: '/', icons: <SiTypescript /> },
{ href: "/docs/react-sdk", label: "React", subpath: '/', icons: <FaReact /> },
{ href: "/docs/react-native-sdk", label: "React Native (Coming Soon)", subpath: '/', icons: <TbBrandReactNative /> },
{ href: "/docs/flutter-sdk", label: "Flutter (Coming Soon)", subpath: '/', icons: <SiFlutter /> },
{ href: "/docs", label: "Unity (Coming Soon)", subpath: '/unity-sdk', icons: <FaUnity /> },
{ href: "/docs/typescript-sdk", label: "Typescript", subpath: '/', icons: <SiTypescript /> },
];

const getFrameworkLabel = () => {
Expand Down
2 changes: 1 addition & 1 deletion content/docs/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
"system-capabilities",
"---SDK---",
"okto-sdk",
"typescript-sdk",
"react-sdk",
"react-native-sdk",
"flutter-sdk",
"unity-sdk",
"typescript-sdk",
"---Resources---",
"developer-admin-dashboard",
"brand-kit",
Expand Down
2 changes: 1 addition & 1 deletion content/docs/okto-sdk/feature-support.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ Okto provides a seamless and secure way to integrate blockchain functionality in

Okto offers a range of SDKs tailored to diverse development platforms, ensuring you have the right tools for your project:

- [**TypeScript**](/docs/typescript-sdk) – A TypeScript SDK for building Web3 applications.
- [**React**](/docs/react-sdk) – A React library for integrating Okto into web applications.
- [**React Native**](/docs/react-native-sdk) **(Coming Soon)** – A React Native SDK for mobile applications.
- [**Flutter**](/docs/flutter-sdk) **(Coming Soon)** – A Flutter SDK for cross-platform applications.
- [**Unity**](/docs/unity-sdk) **(Coming Soon)** – A Unity SDK for blockchain-based gaming apps.
- [**TypeScript**](/docs/typescript-sdk) – A TypeScript SDK for building Web3 applications.

The Okto SDK supports multiple chains like **EVM, Solana and Aptos**, enabling seamless cross-chain interactions.

Expand Down
13 changes: 7 additions & 6 deletions content/docs/okto-sdk/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,6 @@ Get started with Okto SDK in just four steps:
Pick the right SDK for your platform and start integrating Web3 features:

<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 lg:gap-8">
<TechnologyCard
icon={<SiTypescript size={"3rem"} />}
title="TypeScript"
subtitle="for web"
link="/docs/typescript-sdk"
/>

<TechnologyCard
icon={<FaReact size={"3rem"} />}
Expand All @@ -85,6 +79,13 @@ Pick the right SDK for your platform and start integrating Web3 features:
link="/docs/flutter-sdk"
/>

<TechnologyCard
icon={<SiTypescript size={"3rem"} />}
title="TypeScript"
subtitle="for web"
link="/docs/typescript-sdk"
/>

</div>

---
90 changes: 47 additions & 43 deletions content/docs/okto-sdk/supported-sdk-platforms.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,7 @@ full: false
import TechnologyCard from "app/components/mdx/TechnologyCard";
import { IoBookOutline, IoCodeSlashOutline, IoRocketOutline, IoAppsOutline } from "react-icons/io5";

## 1. **Typescript SDK**
The Typescript SDK is designed for developers building Web3 applications with TypeScript. It simplifies blockchain interactions, enabling seamless onboarding and smooth user experiences.

**Use Case**: Client-side web apps that don’t require a React-based solution

<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 lg:gap-8">
<TechnologyCard
icon={<IoBookOutline size={"1.5rem"} />}
title="Learn More"
subtitle="Explore Typescript SDK documentation"
link="/docs/typescript-sdk"
/>

<TechnologyCard
icon={<IoCodeSlashOutline size={"1.5rem"} />}
title="GitHub Repository"
subtitle="Access the source code"
link="https://github.com/okto-hq/okto-js-sdk-monorepo"
/>

<TechnologyCard
icon={<IoRocketOutline size={"1.5rem"} />}
title="Quick Start Guide"
subtitle="Get up and running quickly"
link="/docs/typescript-sdk/quickstart"
/>

<TechnologyCard
icon={<IoAppsOutline size={"1.5rem"} />}
title="Template App"
subtitle="Example implementation"
link="https://github.com/okto-hq/okto-sdkv2-ts-template"
/>
</div>

---

## 2. **React SDK**
## 1. **React SDK**
The React SDK is designed for developers building Web3 applications for the web. It simplifies blockchain interactions, enabling seamless onboarding and smooth user experiences.

**Use Case**: Web applications
Expand All @@ -61,7 +24,7 @@ The React SDK is designed for developers building Web3 applications for the web.
icon={<IoCodeSlashOutline size={"1.5rem"} />}
title="GitHub Repository"
subtitle="Access the source code"
link="https://github.com/okto-hq/okto-sdk-react"
link="https://github.com/okto-hq/okto-js-sdk-monorepo"
/>

<TechnologyCard
Expand All @@ -75,7 +38,7 @@ The React SDK is designed for developers building Web3 applications for the web.
icon={<IoAppsOutline size={"1.5rem"} />}
title="Template App"
subtitle="Example implementation"
link="https://github.com/okto-hq/okto-sdk-react-template-app"
link="/docs/react-sdk/templateRepo"
/>

<TechnologyCard
Expand All @@ -95,7 +58,7 @@ The React SDK is designed for developers building Web3 applications for the web.

---

## 3. **React Native SDK** (Coming Soon)
## 2. **React Native SDK** (Coming Soon)
If you’re developing mobile-first Web3 applications, the React Native SDK is your go-to option. It provides all the tools necessary to onboard users to Web3 seamlessly.

**Use Case**: Mobile applications for iOS and Android
Expand Down Expand Up @@ -133,7 +96,7 @@ If you’re developing mobile-first Web3 applications, the React Native SDK is y

---

## 4. **Flutter SDK** (Coming Soon)
## 3. **Flutter SDK** (Coming Soon)
The Flutter SDK caters to developers using Flutter and Dart to build cross-platform mobile applications. It reduces setup complexity and enhances user experiences.

**Use Case**: Cross-platform mobile applications (Android and iOS)
Expand Down Expand Up @@ -173,14 +136,55 @@ The Flutter SDK caters to developers using Flutter and Dart to build cross-platf

---

## 5. **Unity SDK** (Coming Soon)
## 4. **Unity SDK** (Coming Soon)

The Unity SDK will empower game developers to integrate Web3 features into their games across platforms such as web, mobile, and desktop.

**Use Case**: Web3-enabled gaming experiences

---

## 5. **Typescript SDK**
The Typescript SDK is designed for developers building Web3 applications with TypeScript. It simplifies blockchain interactions, enabling seamless onboarding and smooth user experiences.

**Use Case**: Client-side web apps that don’t require a React-based solution

<Callout title="Important Note">
The Okto TypeScript SDK is built exclusively for client-side (frontend) usage. Do not use this SDK in server-side applications or backend services.
</Callout>

<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 lg:gap-8">
<TechnologyCard
icon={<IoBookOutline size={"1.5rem"} />}
title="Learn More"
subtitle="Explore Typescript SDK documentation"
link="/docs/typescript-sdk"
/>

<TechnologyCard
icon={<IoCodeSlashOutline size={"1.5rem"} />}
title="GitHub Repository"
subtitle="Access the source code"
link="https://github.com/okto-hq/okto-js-sdk-monorepo"
/>

<TechnologyCard
icon={<IoRocketOutline size={"1.5rem"} />}
title="Quick Start Guide"
subtitle="Get up and running quickly"
link="/docs/typescript-sdk/quickstart"
/>

<TechnologyCard
icon={<IoAppsOutline size={"1.5rem"} />}
title="Template App"
subtitle="Example implementation"
link="https://github.com/okto-hq/okto-sdkv2-ts-template"
/>
</div>

---

## Get Started Today

Pick your SDK and start building.
Expand Down
1 change: 0 additions & 1 deletion content/docs/okto-sdk/use-cases.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion content/docs/react-sdk/(Account)/meta.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"title": "Account",
"pages": [
"estimate", "signUserOp" , "executeUserOp"
"userop-learn", "estimate", "signUserOp" , "executeUserOp"
]
}
75 changes: 75 additions & 0 deletions content/docs/react-sdk/(Account)/userop-learn.mdx
Original file line number Diff line number Diff line change
@@ -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:

![ERC-4337 Flow Diagram](/images/erc4337-flow.png)

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)
68 changes: 64 additions & 4 deletions content/docs/react-sdk/(Example Apps)/templateRepo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
<div className="bg-white dark:bg-[#1a1a1e] rounded-lg shadow-sm border border-gray-200 dark:border-[#2b2b2c] p-4 w-full my-4">
<div className="flex items-center justify-between">
<span className="text-base font-semibold text-gray-900 dark:text-gray-100">Template Repository</span>
<div className="flex gap-3">
<a
href="https://v2-react-sdk-sample-app.vercel.app/"
target="_blank"
rel="noopener noreferrer"
className="no-underline px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors min-w-[120px] text-center"
>
Live Demo
</a>
<a
href="https://github.com/okto-hq/okto-sdkv2-react-template-app"
target="_blank"
rel="noopener noreferrer"
className="no-underline px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors min-w-[120px] text-center"
>
View on GitHub
</a>
</div>
</div>
</div>

## Getting Started

<div className="max-w-[450px] my-5 mx-auto">
<img
src="/images/react-template.png"
alt="Template App"
className="w-full rounded-lg shadow-sm"
/>
</div>

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"
```

<Callout title="Github Repo">
View the entire code in the Github repo [here](https://github.com/okto-hq/okto-sdkv2-react-template-app).
</Callout>
5. Start the development server:
```bash
npm start
```
Loading

0 comments on commit 105e3a5

Please # to comment.