Merge pull request #19 from okto-hq/react-structure

update: about okto and sdk
okto-hq · Feb 3, 2025 · a0f83d2 · a0f83d2
2 parents 9b3eda1 + baf52d2
commit a0f83d2
Show file tree

Hide file tree

Showing 14 changed files with 718 additions and 306 deletions.
diff --git a/.content-collections/generated/index.js b/.content-collections/generated/index.js
@@ -1,4 +1,4 @@
-// generated by content-collections at Mon Feb 03 2025 16:22:06 GMT+0530 (India Standard Time)
+// generated by content-collections at Mon Feb 03 2025 18:59:06 GMT+0530 (India Standard Time)
 
 import allBlogs from "./allBlogs.js";
 

diff --git a/.source/index.js b/.source/index.js
diff --git a/content/docs/index.mdx b/content/docs/index.mdx
@@ -20,37 +20,6 @@ import { IoDocumentOutline } from "react-icons/io5";
 
 ---
 
-## Quick Start
-
-Get started with Okto SDK in just three steps:
-
-<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 lg:gap-8">
-
-  <TechnologyCard 
-      icon={<LuLayoutDashboard size={"1.5rem"}/>}
-      title="1. Get Your App Secret from Okto Dashboard" 
-      subtitle="Sign up and retrieve your Okto App Secret" 
-      link="https://dashboard.okto.tech/"
-  />
-
-  <TechnologyCard 
-      icon={<LuToggleLeft size={"1.5rem"}/>}
-      title="2. Configure Chains & Tokens in Dashboard" 
-      subtitle="Easily select and configure the blockchains and tokens your application will support" 
-      link="https://docs.okto.tech/docs/developer-admin-dashboard/wallet-control"
-  />
-
-  <TechnologyCard 
-      icon={<LuCode size={"1.5rem"}/>}
-      title="3. Choose Your SDK & Start Building!" 
-      subtitle="Select the Okto SDK that best fits your project's platform and begin integrating Web3 features effortlessly." 
-      link="/docs/sdk-overview"
-  />
-
-</div>
-
----
-
 ## Explore Okto: Dive Deeper & Learn More
 
 Ready to understand the power of Okto in detail? Explore these key resources:

diff --git a/content/docs/meta.json b/content/docs/meta.json
@@ -3,7 +3,6 @@
     "pages": [
       "---About Okto---",
       "index",
-      "okto-ecosystem",
       "okto-abstraction-approach",
       "supported-chains",
       "okto-layer",
@@ -14,7 +13,6 @@
       "react-sdk",
       "react-native-sdk",
       "flutter-sdk",
-      "rate-limits",
       "---Resources---",
       "brand-kit",
       "faq",

diff --git a/content/docs/okto-abstraction-approach.mdx b/content/docs/okto-abstraction-approach.mdx
@@ -1,9 +1,21 @@
 ---
 title: Okto's Abstraction Approach
-description: Discover how Okto simplifies blockchain interactions through its chain abstraction approach, addressing challenges in UX, transaction management, and liquidity access.
 full: false
 ---
 
+
+Okto is a comprehensive orchestration layer designed to simplify the complex world of blockchain technology. Our goal is to make Web3 more accessible by addressing common challenges such as:
+- **Chain Abstraction** (accessing multiple blockchains seamlessly),
+- **Account Management** (secure self-custody without complex private key handling),
+- **Transaction Handling** (orchestration and automation of multi-step, cross-chain tasks),
+- **Fee Management** (abstracting away different gas tokens and payment flows).
+
+Our goal is to help both developers and end-users navigate Web3 effortlessly, enabling a new era of decentralized applications with **Web2-like** simplicity.
+
+![Okto](/images/index-image.png)
+
+---
+
 ## What is Okto's Abstraction Approach?
 
 Blockchain adoption faces significant challenges due to fragmented ecosystems, complex user experiences, and liquidity issues. **Okto’s Abstraction Approach** addresses these hurdles by hiding the underlying complexities of blockchain technology, enabling seamless, user-friendly experiences across chains, transactions, and wallets.
@@ -14,6 +26,20 @@ Okto achieves this by combining cutting-edge solutions like **chain abstraction*
 
 ---
 
+
+## Background & Motivation
+
+While Web3 promises decentralization, transparency, and user empowerment, mainstream adoption has been hindered by challenges like:
+
+- **Complex Wallet Management:** Users often need to juggle multiple wallets, manage private keys, and remember numerous seed phrases.
+- **Diverse Gas Fee Requirements:** Navigating varying native tokens for gas across different networks complicates transactions.
+- **Fragmented Liquidity and Bridging:** Moving assets between chains involves multiple protocols and bridging steps.
+- **Inconsistent Developer Experiences:** Building on diverse blockchain networks often requires dealing with low-level details and bespoke integrations.
+
+Okto was created to bridge these gaps by combining robust crypto primitives with a developer-friendly abstraction layer. Our goal is to make blockchain interactions as simple as “click and done,” allowing dApps to onboard users without friction and empowering developers to build innovative applications without deep blockchain expertise.
+
+---
+
 ## The Six Dimensions of Okto's Abstraction
 
 Through its innovative architecture, Okto simplifies blockchain interactions across six critical dimensions:

diff --git a/content/docs/okto-layer/meta.json b/content/docs/okto-layer/meta.json
@@ -1,7 +1,7 @@
 {
-    "title": "Okto Layer",
+    "title": "Okto Orchestration Layer",
     "pages": [
-        "okto-vendor-user",
+        "walletprovider-client-user",
         "architecture",
         "okto-chain",
         "dwn",

diff --git a/content/docs/okto-layer/okto-vendor-user.mdx → ...okto-layer/walletprovider-client-user.mdx b/content/docs/okto-layer/okto-vendor-user.mdx → ...okto-layer/walletprovider-client-user.mdx
@@ -1,6 +1,6 @@
 ---
-title: Okto / Vendor / User
-description: "In the Okto documentation, you'll frequently encounter three main personas: Okto, Vendor, and User. These personas are key to navigating how Okto interacts with developers and users across its platform. Let's break down each of these roles to understand their place in the ecosystem."
+title: Wallet Provider / Client / User
+description: "In the Okto documentation, you'll frequently encounter three main personas: Wallet Provider, Client, and User. These personas are key to navigating how Okto interacts with developers and users across its platform. Let's break down each of these roles to understand their place in the ecosystem."
 full: false
 ---
 
@@ -12,39 +12,43 @@ import PersonaDescriptionCard from "app/components/mdx/PersonaDescriptionCard";
 <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
       <PersonaCard
         icon="/images/okto-persona.svg"
-        title="Okto"
-        description="Okto refers to our company, our platform, and the suite of services we provide, including Wallet and Lite."
+        title="Wallet Provider"
+        description="Wallet Provider refers to our company, our platform, and the suite of services we provide, including Wallet and SDK."
       />
       <PersonaCard
         icon="/images/vendor-persona.svg"
-        title="Vendor"
-        description="Vendor is any developer or company building an application that integrates Okto's services"
+        title="Client"
+        description="Client is any developer or company building an application that integrates Okto's services"
       />
       <PersonaCard
         icon="/images/user-persona.svg"
         title="User"
-        description="User is any individual who uses a Vendor's app and, by extension, uses Okto's services"
+        description="User is any individual who uses a Client's app and, by extension, uses Okto's services"
       />
 </div>
 
 ## Dive deep into what & how each personas work
 
-<PersonaDescriptionCard/>
+<PersonaDescriptionCard 
+  title="Wallet Provider"
+  description="Wallet Provider refers to our company, our platform, and the suite of services we provide"
+
+/ >
 <br/>
 <PersonaDescriptionCard
   iconPath="/images/vendor-persona-description.svg"
-  title="Vendor"
-  description="Vendor is any developer or company building an application that integrates Okto's services"
+  title="Client"
+  description="Client is any developer or company building an application that integrates Okto's services"
   whatItDoes={["Builds applications using Okto's API and SDK", "Integrates Okto's wallet and services into their own apps", "Serves as the intermediary bringing Okto's functionalities to end-users"]}
-  whatItIs={["Each Vendor has a unique Vendor ID", "Vendors receive an API ID and secret for secure integration", "Vendors can onboard Users to the Okto ecosystem through their apps"]}
-  howToIdentify={["Each Vendor receives a unique Vendor ID", "Vendors also get an API ID and secret for secure API calls", "This system ensures each Vendor's app is distinctly recognized on our platform"]}
+  whatItIs={["Each Client has a unique Client ID", "Clients receive an API ID and secret for secure integration", "Clients can onboard Users to the Okto ecosystem through their apps"]}
+  howToIdentify={["Each Client receives a unique Client ID", "Clients also get an API ID and secret for secure API calls", "This system ensures each Client's app is distinctly recognized on our platform"]}
 />
 <br/>
 <PersonaDescriptionCard
   iconPath="/images/user-persona-description.svg"
   title="User"
-  description="User is any individual who uses a Vendor's app and, by extension, uses Okto's services"
-  whatItDoes={["Interacts with Vendor applications", "Manages wallets, sends tokens, and engages with blockchain features", "Benefits from the simplified blockchain experience provided by Okto and the Vendor"]}
-  whatItIs={["Each User has a unique User ID within the Okto ecosystem", "Users can interact with multiple Vendor apps using the same Okto account", "User experiences are tailored by Vendors but powered by Okto"]}
-  howToIdentify={["Every User is assigned a unique User ID", "This ID manages their interactions, wallets, and transactions across the Okto ecosystem", "The same User ID works across multiple Vendor apps, providing a unified experience", "Since Okto is interoperable, the same user ID can be associated with multiple Vendor apps, allowing Users to have a unified experience across different applications while leveraging the same Okto infrastructure."]}
+  description="User is any individual who uses a Client's app and, by extension, uses Okto's services"
+  whatItDoes={["Interacts with Client applications", "Manages wallets, sends tokens, and engages with blockchain features", "Benefits from the simplified blockchain experience provided by Okto and the Client"]}
+  whatItIs={["Each User has a unique User ID within the Okto ecosystem", "Users can interact with multiple Client apps using the same Okto account", "User experiences are tailored by Clients but powered by Okto"]}
+  howToIdentify={["Every User is assigned a unique User ID", "This ID manages their interactions, wallets, and transactions across the Okto ecosystem", "The same User ID works across multiple Client apps, providing a unified experience", "Since Okto is interoperable, the same user ID can be associated with multiple Client apps, allowing Users to have a unified experience across different applications while leveraging the same Okto infrastructure."]}
 />
diff --git a/content/docs/okto-sdk/feature-support.mdx b/content/docs/okto-sdk/feature-support.mdx
@@ -1,5 +1,74 @@
 ---
 title: Feature Support
-description: Learn about the Okto SDK and how it simplifies blockchain interactions for both developers and users.
 full: false
 ---
+
+Okto provides a seamless and secure way to integrate blockchain functionality into your applications. The Okto SDK enables developers to onboard users, manage wallets, interact with multiple chains, and facilitate smooth crypto transactions.
+
+---
+
+## SDK Support
+
+Okto offers multiple SDKs to support different platforms:
+
+- [**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) – A React Native SDK for mobile applications.
+- [**Flutter**](/docs/flutter-sdk) – A Swift SDK for iOS applications.
+- [**Unity**](/docs/unity-sdk) – A Unity SDK for blockchain-based gaming apps.
+
+The Okto SDK supports multiple chains like **EVM, Solana and Aptos** , enabling seamless cross-chain interactions.
+
+---
+
+## Feature Matrix
+
+Check out the matrix below to determine which features are supported in each Okto SDK.
+
+### Authentication
+
+| Feature               | Typescript | React | React Native | Flutter | Unity |
+| --------------------- | ---------- | ----- | ------------ | ------- | ----- |
+| Email                 | ✅         | ✅    | ✅           | ✅      | ✅    |
+| SMS                   | ✅         | ✅    | ✅           | ✅      |       |
+| Google OAuth          | ✅         | ✅    | ✅           | ✅      |       |
+| Telegram              | ✅         |       |              |         |       |
+| Custom Authentication | ✅         | ✅    | ✅           | ✅      |       |
+| Passkeys              | ✅         | ✅    |              |         |       |
+
+### Okto Smart Wallets
+
+| Feature                   | Typescript | React | React Native | Flutter | Unity |
+| ------------------------- | ---------- | ----- | ------------ | ------- | ----- |
+| Automatic Wallet Creation | ✅         | ✅    | ✅           | ✅      | ✅    |
+| Embedded Wallets          | ✅         | ✅    | ✅           | ✅      | ✅    |
+| Signing Transactions      | ✅         | ✅    | ✅           | ✅      | ✅    |
+| Broadcasting Transactions | ✅         | ✅    | ✅           | ✅      | ✅    |
+| Transaction MFA           | ✅         | ✅    | ✅           | ✅      |       |
+| Wallet Key Export         | ✅         | ✅    | ✅           | ✅      |       |
+| HD Wallets                | ✅         | ✅    | ✅           | ✅      |       |
+
+### Custom Blockchain Support
+
+| Feature                     | Typescript | React | React Native | Flutter | Unity |
+| --------------------------- | ---------- | ----- | ------------ | ------- | ----- |
+| Custom EVM Chain Support    | ✅         | ✅    | ✅           | ✅      | ✅    |
+| Custom Solana Chain Support | ✅         | ✅    | ✅           | ✅      | ✅    |
+
+### Connectors
+
+| Feature                                          | Typescript | React | React Native | Flutter | Unity |
+| ------------------------------------------------ | ---------- | ----- | ------------ | ------- | ----- |
+| External Wallets (MetaMask, WalletConnect, etc.) | ✅         | ✅    | ✅           | ✅      | ✅    |
+| Wagmi                                            | ✅         |       |              |         |       |
+| Viem                                             | ✅         |       |              |         |       |
+| Ethers.js                                        | ✅         |       |              |         |       |
+| @solana/web3.js                                  | ✅         |       |              |         |       |
+
+### Funding & Payments
+
+| Feature                | Typescript                                                                                                                                                                                                                                                                                                    | React | React Native | Flutter | Unity |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | ------------ | ------- | ----- |
+| Transfer from Wallet   | <img src="https://cdn3.emoji.gg/emojis/7187-solana.png" className='not-prose' style={{display: 'inline'}} width="20px" height="20px" alt="Solana" /> <img src="https://cdn3.emoji.gg/emojis/3031-ethereum.png" className='not-prose' style={{display: 'inline'}} width="20px" height="20px" alt="Ethereum" /> | ✅    | ✅           | ✅      | ✅    |
+| Transfer from Exchange | ✅                                                                                                                                                                                                                                                                                                            | ✅    | ✅           | ✅      |       |
+| Pay with Card          | ✅                                                                                                                                                                                                                                                                                                            | ✅    | ✅           | ✅      |       |