diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 73e54f6..2bf68ef 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -52,9 +52,9 @@ export default function NavbarComponent() { const sdkOptions = [ { href: "/docs/react-sdk", label: "React", subpath: '/', icons: }, - { href: "/docs/react-native-sdk", label: "React Native (Coming Soon)", subpath: '/', icons: }, - { href: "/docs/flutter-sdk", label: "Flutter (Coming Soon)", subpath: '/', icons: }, - { href: "/docs", label: "Unity (Coming Soon)", subpath: '/unity-sdk', icons: }, + { href: "/docs/react-native-sdk", label: "React Native", subpath: '/', icons: }, + // { href: "/docs/flutter-sdk", label: "Flutter (Coming Soon)", subpath: '/', icons: }, + // { href: "/docs", label: "Unity (Coming Soon)", subpath: '/unity-sdk', icons: }, { href: "/docs/typescript-sdk", label: "Typescript", subpath: '/', icons: }, ]; @@ -62,8 +62,8 @@ export default function NavbarComponent() { if (pathname.startsWith('/docs/typescript-sdk')) return 'Typescript'; if (pathname.startsWith('/docs/react-sdk')) return 'React'; if (pathname.startsWith('/docs/react-native-sdk')) return 'React Native'; - if (pathname.startsWith('/docs/flutter-sdk')) return 'Flutter'; - if (pathname.startsWith('/docs/unity-sdk')) return 'Unity'; + // if (pathname.startsWith('/docs/flutter-sdk')) return 'Flutter'; + // if (pathname.startsWith('/docs/unity-sdk')) return 'Unity'; return 'SDKs'; }; diff --git a/app/components/mdx/CollapsibleCallout.tsx b/app/components/mdx/CollapsibleCallout.tsx new file mode 100644 index 0000000..ef0ef15 --- /dev/null +++ b/app/components/mdx/CollapsibleCallout.tsx @@ -0,0 +1,80 @@ +"use client"; +import React, { useState } from "react"; +import { ChevronRight, Info, AlertTriangle, Lightbulb, BookOpen } from "lucide-react"; +import { cn } from "@/lib/utils"; + +interface CollapsibleCalloutProps { + title: string; + type?: "info" | "warning" | "tip" | "note"; + children: React.ReactNode; +} + +const typeStyles: { [key: string]: string } = { + info: "border-blue-500/20 bg-blue-50/50 text-blue-700 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-300", + warning: "border-yellow-500/20 bg-yellow-50/50 text-yellow-700 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-300", + tip: "border-green-500/20 bg-green-50/50 text-green-700 dark:border-green-500/30 dark:bg-green-500/10 dark:text-green-300", + note: "border-gray-500/20 bg-gray-50/50 text-gray-700 dark:border-gray-500/30 dark:bg-gray-500/10 dark:text-gray-300", +}; + +const typeIcons = { + info: Info, + warning: AlertTriangle, + tip: Lightbulb, + note: BookOpen, +}; + +const typeTitles = { + info: "Info", + warning: "Warning", + tip: "Tip", + note: "Note", +}; + +export default function CollapsibleCallout({ + title, + type = "info", + children, +}: CollapsibleCalloutProps) { + const [isOpen, setIsOpen] = useState(false); + const toggleOpen = () => setIsOpen(!isOpen); + const Icon = typeIcons[type]; + + return ( +
+
+
+ + + {typeTitles[type]}: + {title} +
+ + {isOpen ? "Hide" : "Show"} + +
+
+
+ {children} +
+
+
+ ); +} \ No newline at end of file diff --git a/app/components/mdx/ExternalLink.tsx b/app/components/mdx/ExternalLink.tsx new file mode 100644 index 0000000..5b851ce --- /dev/null +++ b/app/components/mdx/ExternalLink.tsx @@ -0,0 +1,27 @@ +"use client"; +import React from "react"; + +interface ExternalLinkProps { + href?: string; + children?: React.ReactNode; + className?: string; +} + +const ExternalLink: React.FC = ({ + href = "#", + children, + className = "" +}) => { + return ( + + {children} + + ); +}; + +export default ExternalLink; \ No newline at end of file diff --git a/app/components/mdx/FeatureCard.tsx b/app/components/mdx/FeatureCard.tsx new file mode 100644 index 0000000..46400e6 --- /dev/null +++ b/app/components/mdx/FeatureCard.tsx @@ -0,0 +1,27 @@ +import { LucideIcon } from "lucide-react"; + +interface FeatureCardProps { + icon: React.ReactNode; + title: string; + description: string; + iconColor?: string; +} + +export default function FeatureCard({ + icon, + title, + description, + iconColor = "text-blue-500", +}: FeatureCardProps) { + return ( +
+
+
+
{icon}
+

{title}

+
+

{description}

+
+
+ ); +} \ No newline at end of file diff --git a/app/components/mdx/QuickStartBanner.tsx b/app/components/mdx/QuickStartBanner.tsx index a0bc2ec..37a05fe 100644 --- a/app/components/mdx/QuickStartBanner.tsx +++ b/app/components/mdx/QuickStartBanner.tsx @@ -1,34 +1,70 @@ import { FaReact } from "react-icons/fa6"; -import { TbBrandNextjs } from "react-icons/tb"; +import { TbBrandNextjs, TbBrandReactNative } from "react-icons/tb"; import { SiTypescript } from "react-icons/si"; -import Link from 'next/link'; +import Link from "next/link"; export default function QuickStartBanner() { return ( -
-
-

- Get straight to building your Okto-powered app with our Quickstart Guides. +

+
+

+ Quick Start Guides +

+

+ Get straight to building your Okto-powered app with our Quickstart Guides.

-
- + - + + + React Quickstart + - - + + + Next.js Quickstart + - + + + React Native Quickstart + + + + - + + + TypeScript Quickstart +
diff --git a/app/components/mdx/TechnologyCard.tsx b/app/components/mdx/TechnologyCard.tsx index 894ead5..76bed89 100644 --- a/app/components/mdx/TechnologyCard.tsx +++ b/app/components/mdx/TechnologyCard.tsx @@ -10,9 +10,16 @@ interface TechnologyCardProps { title: string subtitle: string link: string + className?: string } -export default function TechnologyCard({ icon, title, subtitle, link }: TechnologyCardProps = { +export default function TechnologyCard({ + icon, + title, + subtitle, + link, + className = "" +}: TechnologyCardProps = { icon:
, title: "Technology", subtitle: "for something", @@ -21,9 +28,9 @@ export default function TechnologyCard({ icon, title, subtitle, link }: Technolo return ( - +
@@ -38,7 +45,7 @@ export default function TechnologyCard({ icon, title, subtitle, link }: Technolo
- {/* Added shrink-0 */} + diff --git a/app/global.css b/app/global.css index 0a677db..8ccd6b1 100644 --- a/app/global.css +++ b/app/global.css @@ -161,4 +161,9 @@ html { src: url('/fonts/FunnelDisplay.ttf') format('ttf'); font-weight: bold; font-style: normal; +} + +/* Add this rule to make the "About Okto" link bold in the sidebar */ +#nd-docs-layout aside a[href="/"] { + font-weight: bold; } \ No newline at end of file diff --git a/content/docs/flutter-sdk/meta.json b/content/docs/flutter-sdk/meta.json index af110a3..157c3cc 100644 --- a/content/docs/flutter-sdk/meta.json +++ b/content/docs/flutter-sdk/meta.json @@ -1,7 +1,7 @@ { "title": "Flutter (Coming Soon)", "pages": [ - "[About Okto](/)", + "[← Back to Home](/)", "index", "getting-started", "authentication", diff --git a/content/docs/index.mdx b/content/docs/index.mdx index 56a1ce2..b4aaaab 100644 --- a/content/docs/index.mdx +++ b/content/docs/index.mdx @@ -4,66 +4,97 @@ full: false icon: Star --- -# Welcome to the Future of Web3 Development with Okto! - -Build powerful decentralized applications with the ease of Web2 and the power of chain abstraction. **Okto SDK** lets you integrate blockchain functionality without infrastructure complexity. Add multi-chain wallets, secure transactions, and Web3 features to any app in days, not months. - import TechnologyCard from "app/components/mdx/TechnologyCard"; +import FeatureCard from "app/components/mdx/FeatureCard"; import QuickStartBanner from "app/components/mdx/QuickStartBanner"; import { - LuLayoutDashboard, LuToggleLeft, LuCode, LuWallet, LuBookOpen + LuLayoutDashboard, LuToggleLeft, LuCode, LuWallet, LuBookOpen, + LuKey, LuArrowRightLeft, LuNetwork, LuMousePointerClick, + LuUserPlus, LuShoppingCart, LuGamepad2, LuBoxes } from "react-icons/lu"; import { FaDiscord } from "react-icons/fa6"; import { MousePointer2 } from 'lucide-react'; - +# Welcome to the Future of Web3 Development with Okto! -
+ -## Start building with Okto SDK in 4 Steps +The **Okto SDK** is a game-changer for developers looking to integrate blockchain seamlessly into their applications, whether they are Web2 companies exploring Web3 or existing Web3 projects expanding capabilities. It eliminates the complexity of blockchain interactions by providing a **plug-and-play** abstraction layer, allowing developers to focus on building **intuitive and user-friendly experiences**. -
+## Key Features - } - title="1. Get Your App Secret from Okto Dashboard" - subtitle="Create account & get App Secret" - link="https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?usp=sharing" +
+ } + title="Social Logins" + description="Seamless authentication with popular social providers" + iconColor="text-blue-500" /> - - } - title="2. Configure Chains & Tokens" - subtitle="Select and configure the chains and tokens your application will support" - link="https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?usp=sharing" + } + title="Automated Transactions" + description="Simplified transaction handling and gas management" + iconColor="text-green-500" /> - - } - title="3. Enable Sponsorship (if needed)" - subtitle="Configure gas sponsorship for a smoother user experience. Required for Solana, optional for other chains." - link="https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?usp=sharing" + } + title="Multi-chain Support" + description="Seamless interaction across different blockchains" + iconColor="text-purple-500" /> - - } - title="4. 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/okto-sdk/supported-sdk-platforms" + } + title="One-click Transactions" + description="Simplified user experience for multi chain transactions" + iconColor="text-orange-500" + /> + } + title="Asset Management" + description="Cross-chain asset handling and portfolio management" + iconColor="text-red-500" + /> + } + title="Easy Onboarding" + description="Simplified user onboarding for Web3 applications" + iconColor="text-teal-500" /> -
- - -📱 Check out our [supported SDK platforms](/docs/okto-sdk/supported-sdk-platforms) to find the perfect SDK for your project - -⚡ Explore our comprehensive [feature support](/docs/okto-sdk/feature-support) to see what you can build with Okto +
+
+

+ Why Okto SDK? +

+
+ By handling blockchain complexity behind the scenes, Okto SDK accelerates development, enhances security, and ensures a superior user experience—paving the way for mass adoption. 🚀 +
+
+
-🔨 Get inspired by [real-world use cases](/docs/okto-sdk/use-cases) that can be built with Okto SDK - +## Real-World Applications ---- +
+ } + title="E-commerce" + description="Integrate crypto payments and NFT loyalty rewards without backend rework" + iconColor="text-blue-500" + /> + } + title="Gaming" + description="Enable seamless cross-chain asset trading in gaming environments" + iconColor="text-purple-500" + /> + } + title="Web3 Projects" + description="Scale across multiple chains with abstracted gas management" + iconColor="text-green-500" + /> +
## Explore Okto: Dive Deeper & Learn More @@ -71,7 +102,7 @@ import { MousePointer2 } from 'lucide-react'; } title="Introduction to Okto Universe" - subtitle="Discover the core concepts, architecture, and benefits of the Okto Layer and its components." + subtitle="Discover the core concepts of the Okto Layer and its components." link="/docs/okto-ecosystem" /> @@ -85,24 +116,14 @@ import { MousePointer2 } from 'lucide-react'; } title="Master the Developer Dashboard" - subtitle="Learn how to leverage the Okto Admin Dashboard to configure your application, manage sponsorship, and customize onboarding flows." + subtitle="Learn how to leverage the Okto Admin Dashboard to configure your application." link="docs/developer-admin-dashboard/overview" /> - } - title="Real World Use Cases & Examples" - subtitle="Explore practical use cases and code examples demonstrating how to build various Web3 applications with Okto SDK." - link="/docs/okto-sdk/use-cases" - /> - } title="Join the Okto Community" subtitle="Connect with the Okto team and fellow developers on Discord for support, feedback, and collaboration." link="https://discord.com/invite/okto-916349620383252511" /> - -
-
\ No newline at end of file diff --git a/content/docs/meta.json b/content/docs/meta.json index 5f1be59..d16b339 100644 --- a/content/docs/meta.json +++ b/content/docs/meta.json @@ -11,11 +11,12 @@ "okto-sdk", "react-sdk", "react-native-sdk", - "flutter-sdk", - "unity-sdk", + "!flutter-sdk", + "!unity-sdk", "typescript-sdk", "---Resources---", "developer-admin-dashboard", + "troubleshooting", "brand-kit", "faq", "glossary", diff --git a/content/docs/okto-sdk/index.mdx b/content/docs/okto-sdk/index.mdx index 714da47..d64f567 100644 --- a/content/docs/okto-sdk/index.mdx +++ b/content/docs/okto-sdk/index.mdx @@ -1,100 +1,95 @@ --- title: About SDK -description: Okto provides a suite of SDKs tailored to different platforms, enabling you to integrate Web3 functionalities effortlessly. Whether you're building for the web, mobile, or other platforms, Okto has an SDK to match your needs. Below is an overview of each SDK, its use case, and links to get started. +description: Okto provides a suite of SDKs tailored to different platforms, enabling you to integrate Web3 functionalities effortlessly. full: false --- +import { Step, Steps } from "fumadocs-ui/components/steps"; import TechnologyCard from "/app/components/mdx/TechnologyCard"; import { IoBookOutline, IoCodeSlashOutline, IoRocketOutline, IoAppsOutline } from "react-icons/io5"; import { LuLayoutDashboard, LuToggleLeft, LuCode, LuBookOpen, LuWallet } from "react-icons/lu"; import { FaReact, FaUnity } from "react-icons/fa6"; -import { TbBrandReactNative, TbApi } from "react-icons/tb"; +import { TbBrandReactNative, TbBrandNextjs } from "react-icons/tb"; import { SiFlutter, SiTypescript } from "react-icons/si"; +## What is Okto SDK? ---- - -## Quick Start - -Get started with Okto SDK in just four steps: - -
+Okto SDK is a powerful chain abstraction toolkit that simplifies blockchain development. It handles complex blockchain operations behind the scenes—from wallet management to cross-chain transactions—allowing developers to build Web3 applications using familiar development patterns. - } - title="1. Get Your App Secret from Okto Dashboard" - subtitle="Sign up and retrieve your Okto App Secret" - link="https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?usp=sharing" - /> +Whether you're creating a DeFi platform, NFT marketplace, or adding Web3 features to an existing app, Okto SDK provides the tools you need with Web2-like simplicity. - } - title="2. Configure Chains & Tokens in Dashboard" - subtitle="Easily select and configure the blockchains and tokens your application will support" - link="https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?usp=sharing" - /> +[Learn more about Okto SDK →](/docs/okto-sdk/sdk-introduction) - } - title="3. Enable Sponsorship (if needed)" - subtitle="Configure gas sponsorship for a smoother user experience. Required for Solana, optional for other chains." - link="https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?usp=sharing" - /> - - } - title="4. 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/okto-sdk/supported-sdk-platforms" - /> +--- -
+## Start building with Okto SDK in 3 Steps + + + + ### Get Your API Keys from Okto Dashboard + Create your account + on the Okto Dashboard and obtain your App Secret to begin integrating the SDK. + + + + ### Configure Chains and Tokens + Select and configure the chains and tokens + your application will support. If needed, set up gas sponsorship for a smoother user experience (required for Solana, optional for other chains). + + + + ### Start Building! + + Select the Okto SDK that best fits your project's platform and begin integrating Web3 features effortlessly. + +
+ + } + title="React" + subtitle="for web" + link="/docs/react-sdk/quickstart/new-okto-react-setup" + /> + + } + title="Next.js" + subtitle="for web" + link="/docs/react-sdk/quickstart/new-okto-nextjs-setup" + /> + + } + title="React Native" + subtitle="for mobile" + link="/docs/react-native-sdk/getting-started/quickstart" + /> + + } + title="TypeScript" + subtitle="for web" + link="/docs/typescript-sdk/quickstart" + /> + +
+ + -📱 Check out our [supported SDK platforms](/docs/okto-sdk/supported-sdk-platforms) to find the perfect SDK for your project - ⚡ Explore our comprehensive [feature support](/docs/okto-sdk/feature-support) to see what you can build with Okto 🔨 Get inspired by [real-world use cases](/docs/okto-sdk/use-cases) that can be built with Okto SDK ---- - -## Explore Okto SDKs - -Pick the right SDK for your platform and start integrating Web3 features: - -
- - } - title="React" - subtitle="for web" - link="/docs/react-sdk" - /> - - } - title="React Native" - subtitle="for mobile" - link="/docs/react-native-sdk" - /> - - } - title="Flutter" - subtitle="for Android and iOS" - link="/docs/flutter-sdk" - /> - - } - title="TypeScript" - subtitle="for web" - link="/docs/typescript-sdk" - /> - -
- ---- \ No newline at end of file diff --git a/content/docs/react-native-sdk/index.mdx b/content/docs/react-native-sdk/index.mdx index 3970ca7..491b549 100644 --- a/content/docs/react-native-sdk/index.mdx +++ b/content/docs/react-native-sdk/index.mdx @@ -1,5 +1,97 @@ --- title: Overview of React Native SDK -description: Okto is a platform that allows you to integrate web3 functionality into your app without building things from scratch. +description: A complete guide to integrating Okto into your React Native applications. full: false ---- \ No newline at end of file +--- + +import TechnologyCard from 'app/components/mdx/TechnologyCard'; +import { + IoCodeSlashOutline, + IoKeyOutline, + IoWalletOutline, + IoBookOutline, + IoConstructOutline, + IoGitBranchOutline, + IoHelpCircleOutline, + IoSwapHorizontalOutline +} from "react-icons/io5"; + +## Introduction to Okto React Native SDK + +**Okto React Native SDK** is your all-in-one toolkit for integrating Web3 functionality into any React Native application. With minimal setup time, you can effortlessly onboard your users to the Web3 ecosystem and provide them with a seamless mobile experience. + +
+ } + title="GitHub Repository" + subtitle="View SDK Source Code" + link="https://github.com/okto-hq/okto-js-sdk-monorepo" + /> + } + title="Template Repository" + subtitle="Example Implementation" + link="https://github.com/okto-hq/okto-sdkv2-react-native-template-app" + /> +
+ +## Installation & Quickstart + +Kickstart your project by following our [Quickstart Guide](/docs/react-native-sdk/quickstart). This guide will take you through installing the SDK, configuring your project, and executing your first transaction. + +## Explore the React Native SDK + +
+ } + title="Authentication" + subtitle="Implement secure user login and session management" + link="/docs/react-native-sdk/authenticate-users/okto-auth" + /> + } + title="Wallet Management" + subtitle="Configure and manage embedded and external wallets" + link="/docs/react-native-sdk/wallets/overview" + /> + } + title="Usage & Features" + subtitle="Explore hooks, explorer functions, and intent operations" + link="/docs/react-native-sdk/usage-overview" + /> + } + title="Technical Reference" + subtitle="In-depth documentation of classes, methods, and data models" + link="/docs/react-native-sdk/technical-reference" + /> + } + title="Troubleshooting" + subtitle="Common issues and their solutions" + link="/docs/react-native-sdk/troubleshooting" + /> + } + title="Migration Guide" + subtitle="Upgrade from previous versions of the SDK" + link="/docs/react-native-sdk/v2migration" + /> +
+ +## Get Started + +Ready to dive in? Begin with our **[Quickstart Guide](/docs/react-native-sdk/quickstart)** to set up your environment, obtain your Okto API key, and build your first React Native application powered by the Okto SDK. + +If you have any questions or need assistance, don't hesitate to reach out via our **[Troubleshooting](/docs/react-native-sdk/troubleshooting)** page or email us at `devrel@coindcx.com`. + +**Happy Building!** \ No newline at end of file diff --git a/content/docs/react-sdk/(Intents)/intents.mdx b/content/docs/react-sdk/(Intents)/intents.mdx new file mode 100644 index 0000000..45bffad --- /dev/null +++ b/content/docs/react-sdk/(Intents)/intents.mdx @@ -0,0 +1,61 @@ +--- +title: Understanding Intents +full: false +--- + +Intents make Web3 easy. Instead of complex steps, you simply tell Okto your *intent* – what you want to achieve. Okto handles the rest, making blockchain actions feel simple. + +## What are Intents on Okto? + +Intents are like simple instructions for Web3. You say what you want, not *how* to do it. The Okto Platform figures out the best way to make it happen. The Okto Platform takes care of: + +- **Breaking Down Complex Tasks:** Intents become easy steps for the system. +- **Smart Fee Handling:** Okto makes sure you pay the right amount for fees. +- **Automatic Steps:** The system does all the work in the background. +- **Cross-Chain Made Easy:** Moving things between blockchains is automatic. + + +Cross-chain liquidity intents are coming soon! These will enable seamless token swaps across different blockchain networks. To learn more about upcoming cross-chain capabilities, check out [Cross-Chain Intents →](/docs/system-capabilities/cross-chain-intents) + + +## Key Benefits: + +### 1. User-Friendly: + +- **Simple Instructions:** Tell Okto what you want in plain terms. +- **No Tech Knowledge Needed:** Skip the blockchain details. +- **Fewer Errors:** Automation reduces mistakes. + +### 2. Smart & Fast: + +- **Smart Fees:** Automatic, cost-effective fees. +- **Best Routes:** Okto finds the fastest and cheapest way to do things. +- **Quick Actions:** Complex tasks get done faster. + +### 3. Secure & Reliable: + +- **Safe Steps:** Transactions happen in a secure order. +- **Protection Built-In:** Okto helps avoid common Web3 problems. +- **Dependable Transfers:** Your cross-chain actions are handled reliably. + +## Core Intent Types: + +Okto SDK V2 provides these Intent types: + +### 1. Token Transfer Intent: + +Easily transfer tokens. Okto handles fees and routing. + +[Learn more →](/docs/react-sdk/tokenTransfer) + +### 2. NFT Transfer Intent: + +Transfer NFTs with ease and security. + +[Learn more →](/docs/react-sdk/nftTransfer) + +### 3. Raw Transaction Intent: + +For advanced users: direct contract calls and complex operations. + +[Learn more →](/docs/react-sdk/rawTransaction) \ No newline at end of file diff --git a/content/docs/react-sdk/(Intents)/meta.json b/content/docs/react-sdk/(Intents)/meta.json index b714463..47a59ec 100644 --- a/content/docs/react-sdk/(Intents)/meta.json +++ b/content/docs/react-sdk/(Intents)/meta.json @@ -1,6 +1,6 @@ { "title": "Intents", "pages": [ - "tokenTransfer", "nftTransfer", "createNFTCollection", "rawTransaction" + "intents", "tokenTransfer", "nftTransfer", "createNFTCollection", "rawTransaction" ] } \ No newline at end of file diff --git a/content/docs/react-sdk/authenticate-users/okto-auth.mdx b/content/docs/react-sdk/authenticate-users/okto-auth.mdx index a9dcec9..a9e3a18 100644 --- a/content/docs/react-sdk/authenticate-users/okto-auth.mdx +++ b/content/docs/react-sdk/authenticate-users/okto-auth.mdx @@ -55,4 +55,13 @@ For debugging or understanding the token's contents, you can manually verify the ### Managing Expired Auth Tokens -When an Okto Token expires, subsequent API requests using that token will fail. Okto SDK provides mechanisms to help you handle token expiration \ No newline at end of file +When an Okto Token expires, subsequent API requests using that token will fail. Okto SDK provides mechanisms to help you handle token expiration. + +--- + +## Next Steps + +Learn more about authentication methods and session management: + +- [Google OAuth Authentication](./google-oauth/learn) - Implement secure authentication using Google OAuth +- [Login & Session Management](./login-logout/loginUsingOAuth) - Handle user login and session states diff --git a/content/docs/react-sdk/index.mdx b/content/docs/react-sdk/index.mdx index f84e1b2..170a6ee 100644 --- a/content/docs/react-sdk/index.mdx +++ b/content/docs/react-sdk/index.mdx @@ -4,9 +4,19 @@ description: A complete guide to integrating Okto into your React applications. full: false --- - import TechnologyCard from 'app/components/mdx/TechnologyCard'; -import { IoCodeSlashOutline } from "react-icons/io5"; +import { + IoCodeSlashOutline, + IoKeyOutline, + IoWalletOutline, + IoBookOutline, + IoConstructOutline, + IoGitBranchOutline, + IoHelpCircleOutline, + IoSwapHorizontalOutline +} from "react-icons/io5"; +import { FaReact, FaBook, FaTools, FaExchangeAlt } from "react-icons/fa6"; +import { VscDebugConsole } from "react-icons/vsc"; ## Introduction to Okto React SDK @@ -14,12 +24,14 @@ import { IoCodeSlashOutline } from "react-icons/io5";
} + className="h-25" + icon={} title="GitHub Repository" subtitle="View SDK Source Code" link="https://github.com/okto-hq/okto-js-sdk-monorepo" /> } title="Template Repository" subtitle="Example Implementation" @@ -35,52 +47,60 @@ Kickstart your project by following our [Quickstart Guide](/docs/react-sdk/quick --- -## Navigating the React SDK Docs - -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 -- [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/loginUsingOAuth): 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. -- [Feature Support](/docs/react-sdk/feature-support): Information on supported chains, tokens, and additional functionalities. -- [Template Apps](/docs/react-sdk/templateRepo): 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. +## Explore the React SDK + +
+ } + title="Authentication" + subtitle="Implement secure user login and session management" + link="/docs/react-sdk/authenticate-users/okto-auth" + /> + } + title="Wallet Management" + subtitle="Configure and manage embedded and external wallets" + link="/docs/react-sdk/wallets/overview" + /> + } + title="Usage & Features" + subtitle="Explore hooks, explorer functions, and intent operations" + link="/docs/react-sdk/usage-overview" + /> + } + title="Technical Reference" + subtitle="In-depth documentation of classes, methods, and data models" + link="/docs/react-sdk/technical-reference" + /> + } + title="Troubleshooting" + subtitle="Common issues and their solutions" + link="/docs/react-sdk/troubleshooting" + /> + } + title="Migration Guide" + subtitle="Upgrade from previous versions of the SDK" + link="/docs/react-sdk/v2migration" + /> +
--- ## Get Started -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. +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 **[Troubleshooting](./react-sdk/troubleshooting)** 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/meta.json b/content/docs/react-sdk/meta.json index 35803f1..190031f 100644 --- a/content/docs/react-sdk/meta.json +++ b/content/docs/react-sdk/meta.json @@ -1,12 +1,14 @@ { "title": "React", "pages": [ - "[About Okto](/)", + "[← Back to Home](/)", "index", - "quickstart", - "templateRepo", "feature-support", - "v2migration", + "---Quickstart---", + "./quickstart/prerequisites", + "./quickstart/new-okto-react-setup", + "./quickstart/new-okto-nextjs-setup", + "templateRepo", "---Authentication---", "./authenticate-users/okto-auth", "./authenticate-users/google-oauth", diff --git a/content/docs/react-sdk/quickstart/new-okto-nextjs-setup.mdx b/content/docs/react-sdk/quickstart/new-okto-nextjs-setup.mdx index 0b96089..9c9e94a 100644 --- a/content/docs/react-sdk/quickstart/new-okto-nextjs-setup.mdx +++ b/content/docs/react-sdk/quickstart/new-okto-nextjs-setup.mdx @@ -6,29 +6,52 @@ full: false import { Step, Steps } from "fumadocs-ui/components/steps"; import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; +import CollapsibleCallout from 'app/components/mdx/CollapsibleCallout'; +import ExternalLink from 'app/components/mdx/ExternalLink'; -Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-apps/template-repo) and follow the steps provided to get your dApp running in minutes! +Want an even faster setup? Check out our Template Repo to get your dApp running in minutes! + +Before you begin, make sure you have: +- Created your Okto Dashboard account. +- Retrieved your API keys from the dashboard (`NEXT_PUBLIC_CLIENT_PRIVATE_KEY` and `NEXT_PUBLIC_CLIENT_SWA`). +- Enabled the chains and tokens your application will use. + +If you need help, see our Dashboard Setup Guide for detailed instructions. + + -## Prerequisites -Before you begin, ensure you have: + ## Prerequisites -- **Node.js (v18+) and npm/pnpm/yarn:** [Download Node.js](https://nodejs.org/) -- **Okto API Keys:** You'll need your Okto API keys to connect your app to the Okto platform. Obtain your `NEXT_PUBLIC_VENDOR_PRIVATE_KEY` and `NEXT_PUBLIC_VENDOR_SWA` from the Okto Dashboard. -- **Google OAuth Credentials:** Set up your OAuth 2.0 credentials in [Google Cloud Console](https://console.cloud.google.com/) to get your `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET`. - - Need help? Follow our [Google Console Setup Guide](/docs/react-sdk/authenticate-users/google-oauth/google-console-setup) -- **Auth Secret:** NextAuth needs a secret key to keep your app secure. You can easily generate one by running this command in your terminal: `openssl rand -base64 32`. + Before getting started, ensure you have the following: + - **Node.js (v18+) and npm/pnpm/yarn:** Download Node.js + - **Okto API Keys:** You need your `NEXT_PUBLIC_CLIENT_PRIVATE_KEY` and `NEXT_PUBLIC_CLIENT_SWA`. Obtain these from the Okto Dashboard. + - **Google OAuth Credentials:** Create OAuth 2.0 credentials in the Google Cloud Console to get your `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET`. + - **Auth Secret:** NextAuth requires a secret for signing tokens. Generate one by running: + + ```bash:title="bash" + openssl rand -base64 32 + ``` + + + 1. Go to Google Cloud Console. + 2. Create OAuth 2.0 credentials for your project. + 3. Set the redirect URI to: `[YOUR_APP_URL]/api/auth/callback/google` (for example, `http://localhost:3000/api/auth/callback/google` during local development). + 4. Save your Client ID and Client Secret. + + Need detailed instructions? Check our Google Console Setup Guide. + - ## Create Your NextJS App + ## 1. Create Your NextJS App - If you already have a React app, you can skip this step and proceed directly to Step 3 to start integrating Okto. + If you already have a NextJS app, you can skip this step and proceed directly to the next step to start integrating Okto. Let's start by creating a brand new Next.js app! Open your terminal and run these commands: @@ -36,19 +59,31 @@ Before you begin, ensure you have: npx create-next-app@latest my-okto-app cd my-okto-app ``` - This will: - - `npx create-next-app@latest my-okto-app`: Create a new Next.js project named `my-okto-app` in a folder of the same name. - - `cd my-okto-app`: This command moves you *inside* the `my-okto-app` folder you just created, so all subsequent commands apply to your new project. + + + When prompted during setup, select: + - **TypeScript:** Yes + - **ESLint:** Yes + - **Tailwind CSS:** Yes + - **Use `src/` directory:** Yes + - **App Router:** Yes + - **Customize default import alias:** No + + + + - Creates a new Next.js project named `my-okto-app`. + - Switches you into the project directory. + - ## Install Dependencies + ## 2. Install Dependencies Please use version 0.0.0-dev.42 of the npm package. - Your Next.js app needs the Okto SDK and NextAuth to work. Let's install them! Run the command below that matches your package manager (`npm`, `pnpm`, or `yarn`): + Your Next.js app needs the Okto SDK and NextAuth to work. Let's install them! Run the command below for the package manager of your choice: @@ -71,84 +106,35 @@ Before you begin, ensure you have: - ## Set up Environment Variables + ## 3. Set up Environment Variables - Create `.env` in your project root: + Create a `.env` file in your project root and add the following environment variables: ```bash title=".env" - NEXT_PUBLIC_VENDOR_PRIVATE_KEY = YOUR_OKTO_VENDOR_PRIVATE_KEY - NEXT_PUBLIC_VENDOR_SWA = YOUR_OKTO_VENDOR_SWA + NEXT_PUBLIC_CLIENT_PRIVATE_KEY = YOUR_OKTO_CLIENT_PRIVATE_KEY + NEXT_PUBLIC_CLIENT_SWA = YOUR_OKTO_CLIENT_SWA NEXT_PUBLIC_ENVIRONMENT = sandbox # or production - AUTH_SECRET = YOUR_AUTH_SECRET # Use: openssl rand -base64 32 + AUTH_SECRET = YOUR_AUTH_SECRET # Generate using: openssl rand -base64 32 - # Google OAuth credentials (Required only if you want to enable Google Sign-In) + # Google OAuth credentials (Required only if using Google Sign-In) GOOGLE_CLIENT_SECRET = YOUR_GOOGLE_CLIENT_SECRET GOOGLE_CLIENT_ID = YOUR_GOOGLE_CLIENT_ID ``` - - - **Replace Placeholders!** Don't forget to replace `YOUR_GOOGLE_CLIENT_SECRET`, `YOUR_GOOGLE_CLIENT_ID`, `YOUR_AUTH_SECRET`, `YOUR_OKTO_VENDOR_PRIVATE_KEY`, and `YOUR_OKTO_VENDOR_SWA` with *your actual keys and secrets*. - - **`AUTH_SECRET` Generation:** If you haven't already, run `openssl rand -base64 32` in your terminal to generate a secure `AUTH_SECRET` and paste it into `.env`. - - For `NEXT_PUBLIC_ENVIRONMENT`, use `sandbox` for testing and development, and `production` for live environments. - - - - Never commit your `.env` file to version control. Add it to your `.gitignore`! - - - - - ## Set Up Root Layout (`layout.tsx`) - - The `layout.tsx` file is the main structure of your app. Let's modify it to include the `AppProvider`, which sets up the Okto SDK and session management for your whole application. - 1. **Open `layout.tsx`:** Go to the `app` directory in your project and open the `layout.tsx` file. - 2. **Replace content:** Replace the existing code in `layout.tsx` with the code below: - - ```tsx title="layout.tsx" - import type { Metadata } from "next"; - import { Inter } from "next/font/google"; - import "./globals.css"; - import AppProvider from "./components/providers"; - import { getServerSession } from "next-auth"; - import { authOptions } from "./api/auth/[...nextauth]/route"; - - const inter = Inter({ subsets: ["latin"] }); - - export const metadata: Metadata = { - title: "Okto React SDK with Google Auth", - description: "Next.js app integrated with Okto SDK and Google Authentication", - }; - - export default async function RootLayout({ - children, - }: Readonly<{ - children: React.ReactNode; - }>) { - const session = await getServerSession(authOptions); - return ( - - - {children} - - - ); - } - ``` - This layout sets up the basic structure of your app and wraps it with `AppProvider` for session and Okto context. + + - Replace all placeholder values (`YOUR_...`) with your actual keys. + - Never commit your `.env` file to version control. Add it to your `.gitignore`. + - ## Create Providers Component (`providers.tsx`) + ## 4. Set Up the Okto Provider - Now, let's create the `providers.tsx` component we imported in `layout.tsx`. This component will actually initialize the Okto SDK. + Create a provider component to initialize the Okto SDK and authentication context. Create a file at `app/components/providers.tsx` with the following code: - 1. **Create `components` folder:** If you don't already have a folder named `components` inside your `app` directory, create one now. - 2. **Create `providers.tsx`:** Inside the `components` folder, create a new file named `providers.tsx`. - 3. **Add code:** Paste the following code into `providers.tsx`: - - ```tsx title="components/providers.tsx" + ```tsx title="app/components/providers.tsx" "use client"; import { SessionProvider } from "next-auth/react"; import { OktoProvider } from "@okto_web3/react-sdk"; @@ -156,8 +142,8 @@ Before you begin, ensure you have: const config = { // Configuration for Okto SDK environment: process.env.NEXT_PUBLIC_ENVIRONMENT || 'sandbox', // Environment from .env - vendorPrivKey: process.env.NEXT_PUBLIC_VENDOR_PRIVATE_KEY || '', // Vendor Private Key from .env - vendorSWA: process.env.NEXT_PUBLIC_VENDOR_SWA || '', // Vendor SWA from .env + clientPrivKey: process.env.NEXT_PUBLIC_CLIENT_PRIVATE_KEY || '', // Client Private Key from .env + clientSWA: process.env.NEXT_PUBLIC_CLIENT_SWA || '', // Client SWA from .env }; function AppProvider({ children, session }) { @@ -173,19 +159,30 @@ Before you begin, ensure you have: export default AppProvider; ``` + + The `AppProvider` wraps your app with: + - `SessionProvider` for authentication. + - `OktoProvider` to initialize the Okto SDK using your environment settings. + + Remember that the `"use client"` directive is required for client-side components. + + - ## Configure Google Login with NextAuth + + ## 5. Configure Google Authentication - To enable Google Login, you need to configure NextAuth. You'll create a `route.ts` file in a specific directory structure within your `app` folder. + Set up NextAuth using Google as the provider. Create the file at `app/api/auth/[...nextauth]/route.ts`: - 1. **Create `api/auth/[...nextauth]` folders:** Inside your `app` directory, create these folders in order: - - First, create a folder named `api`. - - Inside `api`, create a folder named `auth`. - - Inside `auth`, create a folder named `[...nextauth]` *(that's square brackets, then three dots, then `nextauth`, then closing square brackets)*. This special folder name in Next.js is for dynamic routes. - 2. **Create `route.ts`:** Inside the `[...nextauth]` folder, create a new file named `route.ts`. - 3. **Add code:** Paste the following code into `route.ts`: + + Create these folders in your app directory: + app/ + └── api/ + └── auth/ + └── [...nextauth]/ + └── route.ts + ```tsx title="app/api/auth/[...nextauth]/route.ts" import NextAuth from "next-auth"; @@ -196,8 +193,8 @@ Before you begin, ensure you have: secret: process.env.AUTH_SECRET, providers: [ GoogleProvider({ // Configure Google Provider - clientId: process.env.GOOGLE_CLIENT_ID!, // Your GOOGLE_CLIENT_ID from .env - clientSecret: process.env.GOOGLE_CLIENT_SECRET!, // Your GOOGLE_CLIENT_SECRET from .env + clientId: process.env.GOOGLE_CLIENT_ID!, // From .env + clientSecret: process.env.GOOGLE_CLIENT_SECRET!, // From .env }), ], session: { @@ -222,18 +219,64 @@ Before you begin, ensure you have: export { handler as GET, handler as POST }; ``` - This configuration sets up NextAuth with Google Provider and ensures the `id_token` is passed in the session, which is needed by Okto SDK for authentication. + + This configuration: + - Sets up NextAuth to use Google for authentication. + - Utilizes JWT for session management. + - Seeds the session with Google's `id_token`, which is later used by the Okto SDK. + - ## Create a Sample Login Page (`page.tsx`) + ## 6. Set up Root Layout + + Update your root layout to include the `AppProvider` so that the authentication and Okto context are available throughout your app. Modify `app/layout.tsx` as follows: + + ```tsx title="app/layout.tsx" + import type { Metadata } from "next"; + import { Inter } from "next/font/google"; + import "./globals.css"; + import AppProvider from "./components/providers"; + import { getServerSession } from "next-auth"; + import { authOptions } from "./api/auth/[...nextauth]/route"; + + const inter = Inter({ subsets: ["latin"] }); + + export const metadata: Metadata = { + title: "Okto React SDK with Google Auth", + description: "Next.js app integrated with Okto SDK and Google Authentication", + }; + + export default async function RootLayout({ + children, + }: Readonly<{ + children: React.ReactNode; + }>) { + const session = await getServerSession(authOptions); + return ( + + + {children} + + + ); + } + ``` + + Using `AppProvider` ensures that every page in your application has access to both the session and Okto context. + + + - Now, let's create a simple page where users can log in and you can test the Okto SDK! We'll create a `LoginButton` component and a `GetButton` component to interact with Okto. + + ## 7. Create a Sample Login Page (`page.tsx`) - ### 1. **Create `LoginButton.tsx` in `components` folder:** - Inside your `app/components` folder, create a new file named `LoginButton.tsx` and paste this code: + Let's build a simple page to test out authentication and basic Okto operations. You will create two components—`LoginButton` and `GetButton`—and update your home page. + ### a. Create the Login Button Component + + This component will trigger Google authentication. Create the file `app/components/LoginButton.tsx`: ```tsx title="components/LoginButton.tsx" "use client"; @@ -260,9 +303,15 @@ Before you begin, ensure you have: ); } ``` + + Using the `signIn` method from NextAuth, this button starts the Google authentication flow. No extra configuration is required on the client side. + - ### 2. **Create `GetButton.tsx` in `components` folder:** - In the same `app/components` folder, create `GetButton.tsx` and paste this code: + ### b. Create the Get Button Component + + This component is designed to call a function (such as logging out or fetching account details) and display the result in a modal. + + Create the file `app/components/GetButton.tsx`: ```tsx title="components/GetButton.tsx" "use client"; @@ -339,9 +388,14 @@ Before you begin, ensure you have: export default GetButton; ``` + + This component accepts a SDK function as a prop. When clicked, it calls the function with the Okto client, displays the JSON response in a modal, and handles any errors. + - ### **Update `page.tsx` in `app` directory:** - Open `app/page.tsx` and replace its content with this code: + ### c. Update the App Home Page + Integrate both buttons on your home page. + + Replace the content of `app/page.tsx` with: ```tsx title="app/page.tsx" "use client"; @@ -350,6 +404,7 @@ Before you begin, ensure you have: import { LoginButton } from "@/app/components/LoginButton"; import GetButton from "@/app/components/GetButton"; import {getAccount, useOkto } from '@okto_web3/react-sdk'; + import { TokenTransfer } from "@/app/components/TokenTransfer"; export default function Home() { @@ -394,35 +449,27 @@ Before you begin, ensure you have: +
+ +
); } ``` - Your project structure should look like this: - ``` - my-okto-app/ - ├── app/ - │ ├── api/ - │ │ └── auth/ - │ │ └── [...nextauth]/ - │ │ └── route.ts - │ ├── components/ - │ │ ├── providers.tsx - │ │ ├── LoginButton.tsx - │ │ └── GetButton.tsx - │ ├── layout.tsx - │ └── page.tsx - ├── .env - └── package.json - ``` + + After launching the app, use these buttons to: + - Initiate Google authentication. + - Trigger a logout. + - Retrieve your account(list of wallets)details. + -## 5. Run Your Dapp +## 8. Run Your dApp -Time to run your app and see it in action! In your terminal, inside the `my-okto-app` directory, run the command that matches your package manager: +It's time to see your work in action. Inside the `my-okto-app` directory, run the appropriate command based on your package manager: @@ -441,34 +488,24 @@ Time to run your app and see it in action! In your terminal, inside the `my-okto ``` -This command starts the Next.js development server. -Now, open your web browser and go to [http://localhost:3000](http://localhost:3000). +Open your browser and navigate to [http://localhost:3000](http://localhost:3000). You should see your "Template App" with buttons to: +- Authenticate using Google. +- Log out. +- Retrieve your account details with the `getAccount` function. -You should see your "Template App" with an "Authenticate with Google" button and "Okto Log out" and "getAccount" buttons! - -- **Click "Authenticate with Google"**: You should be prompted to log in with your Google account. -- **After logging in**: You might not see any immediate changes on the page in this very basic example, but in the background, your app has authenticated with Okto using your Google login! -- **Click "getAccount"**: This button will call the `getAccount` function from the Okto SDK and display the result in a pop-up modal. -- **Click "Okto Log out"**: This will log you out of your app. - - + If you encounter any errors when running `npm run dev` (or `pnpm dev`, `yarn dev`), check your terminal for error messages. Common issues include: - **Environment Variable Errors**: Double-check that you correctly set up your `.env` file and that all the `YOUR_...` placeholders are replaced with your actual keys and secrets. - **Package Installation Errors**: If you see errors related to missing packages, try re-running the install command (e.g., `npm install`) to make sure all dependencies are installed correctly. - - - - - ## 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! +

+ ## Trying Out a User Operation Now that we have our basic setup complete, let's implement a token transfer on Solana devnet to understand how user operations work in Okto. @@ -476,9 +513,9 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## Get Your Wallet Address + ### 1. Get Your Wallet Address - First, get your Solana wallet address: + Retrieve your Solana wallet address using: ```tsx import { getAccounts } from "@okto_web3/react-sdk"; @@ -490,21 +527,21 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## Fund Your Wallet + ### 2. Fund Your Wallet - To perform a token transfer, you'll need some funds in your wallet. Add funds to this address using the [Solana Devnet Faucet](https://faucet.solana.com). + Before transferring tokens, fund your wallet using the Solana Devnet Faucet. - ## Check Network Information + ### 3. Review Network Information - Before creating the user operation, check the [Network Information Guide](/docs/react-sdk/technical-reference#network-information) for getting the correct CAIP-2 IDs of chains. + Consult the Network Information Guide to ensure you have the correct CAIP-2 chain identifiers. - ## Implement Token Transfer + ### 4. Implement Token Transfer - Create a new component for handling the transfer: + Create a new component called `TokenTransfer.tsx` to handle a token transfer: ```tsx title="app/components/TokenTransfer.tsx" "use client"; @@ -514,6 +551,7 @@ Now that we have our basic setup complete, let's implement a token transfer on S export function TokenTransfer() { const oktoClient = useOkto(); const [status, setStatus] = useState(""); + const [modalVisible, setModalVisible] = useState(false); async function handleTransfer() { try { @@ -533,6 +571,7 @@ Now that we have our basic setup complete, let's implement a token transfer on S const txHash = await oktoClient.executeUserOp(signedOp); setStatus(`Transfer complete! Hash: ${txHash}`); + setModalVisible(true); } catch (error) { console.error("Transfer failed:", error); setStatus(`Transfer failed: ${error.message}`); @@ -540,26 +579,169 @@ Now that we have our basic setup complete, let's implement a token transfer on S } return ( -
-

Token Transfer

- -

{status}

+ + {modalVisible && ( +
+
+
+

Token Transfer Status

+ +
+
+ 
+                                    {status}
+
+
+
+ +
+
+
+ )}
); } ``` + + Before executing the transfer, verify: + - That you have replaced `"YOUR_RECIPIENT_ADDRESS"` with an actual wallet address. + - You are using the correct CAIP-2 identifier for the Solana devnet (`"SOLANA_CHAIN_ID"`). + - ## Verify The Transfer + ### 5. Add the Component to Your Home Page + + Update your `app/page.tsx` to include the new TokenTransfer component: + + ```tsx title="app/page.tsx" + // Add to your imports + import { TokenTransfer } from "@/app/components/TokenTransfer"; + + // Add inside your grid div +
+ +
+ ``` + + ### 6. Test the Token Transfer - After the transfer is complete, you can verify it through: - - The `getPortfolio` method to check your updated balance - - The [Solana Explorer](https://explorer.solana.com) (devnet) using the transaction hash + - Run your dApp, open [http://localhost:3000](http://localhost:3000), and sign in with Google. + - Then, navigate to the page where your **Token Transfer** component is displayed and click on the **Send 1 SOL** button. + - A modal will appear showing the transfer status (e.g., "Transfer successful! Transaction Hash: …"). + + + + ### 7. Verify The Transfer + + Once complete, verify its success by: + - Checking your updated balance using the `getPortfolio` method. + - Viewing the transaction details on the Solana Explorer (select devnet). -Now that you've completed your first user operation, you're ready to explore more advanced features! Check out our [Usage Guide](/docs/react-sdk/usage-overview) to learn about other operations like NFT transfers, contract interactions, and more. \ No newline at end of file +Congratulations! You have successfully integrated the Okto SDK with your Next.js app and executed your first user operation. +
+
+ +## SDK Reference + +### Get Commands + +| Command | Description | Documentation | +|---------|-------------|---------------| +| `const account = await getAccount(oktoClient);` | Get user's wallet details | Method Overview | +| `const chains = await getChains(oktoClient);` | List supported blockchain networks | Method Overview | +| `const tokens = await getTokens(oktoClient);` | List supported tokens | Method Overview | +| `const portfolio = await getPortfolio(oktoClient);` | Get user's token holdings | Method Overview | +| `const nfts = await getPortfolioNFT(oktoClient);` | Get user's NFT holdings | Method Overview | +| `const activity = await getPortfolioActivity(oktoClient);` | Get transaction history | Method Overview | +| `const orders = await getOrdersHistory(oktoClient);` | Get transaction order history | Method Overview | +| `const collections = await getNftCollections(oktoClient);` | Get NFT collections | Method Overview | + +### User Operations (Intents) + +Intents are pre-built action templates within the Okto SDK that simplify common Web3 tasks. They provide one-liner functions for complex blockchain interactions. + +#### 1. Token Transfer +Send tokens to another address. Learn more + +```typescript +const transferParams = { + amount: BigInt("1000000000000000000"), // Amount in smallest unit + recipient: "0xRecipientAddress...", // Recipient wallet address + token: "0xTokenAddress...", // Token address ("" for native token) + chain: "eip155:1", // Target chain CAIP-2 ID +}; +const result = await tokenTransfer(oktoClient, transferParams); +``` + +#### 2. NFT Transfer +Transfer NFTs between addresses. Learn more + +```typescript +const nftParams = { + caip2Id: "eip155:1", // Target chain CAIP-2 ID + collectionAddress: "0xCollectionAddress...", // NFT Collection address + nftId: "NFTTokenID", // NFT identifier + recipientWalletAddress: "0xRecipientAddress...",// Recipient address + amount: 1n, + nftType: "ERC721", // or "ERC1155" +}; +const result = await nftTransfer(oktoClient, nftParams); +``` + +#### 3. Raw Transaction (EVM) +Execute custom EVM contract calls. Learn more + +```typescript +import { encodeFunctionData } from 'viem'; + +// 1. Define Contract Interaction +const contractAddress = '0xContractAddress...'; +const functionName = 'setValue'; +const functionArgs = [123]; + +// 2. Encode Function Data +const functionData = encodeFunctionData({ + abi: [ + { + "name": functionName, + "type": "function", + "stateMutability": "nonpayable", + "inputs": [{ "type": "uint256", "name": "_value" }] + } + ] as const, + functionName, + args: functionArgs, +}); + +// 3. Execute Transaction +const rawTxParams = { + networkId: "eip155:1", + transaction: { + to: contractAddress, + data: functionData, + // value: BigInt(0), // Optional: for payable functions + }, +}; +const result = await evmRawTransaction(oktoClient, rawTxParams); +``` \ No newline at end of file diff --git a/content/docs/react-sdk/quickstart/new-okto-react-setup.mdx b/content/docs/react-sdk/quickstart/new-okto-react-setup.mdx index ffb1aa3..f67da35 100644 --- a/content/docs/react-sdk/quickstart/new-okto-react-setup.mdx +++ b/content/docs/react-sdk/quickstart/new-okto-react-setup.mdx @@ -6,19 +6,26 @@ full: false import { Step, Steps } from "fumadocs-ui/components/steps"; import { Tab, Tabs } from "fumadocs-ui/components/tabs"; - -## Vite-React-App - -This approach uses Vite to create a React App and manually configures the Okto SDK. Follow these steps to set up your project and execute your first token transfer. +import CollapsibleCallout from 'app/components/mdx/CollapsibleCallout'; +import ExternalLink from 'app/components/mdx/ExternalLink'; -Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-apps/template-repo) and follow the steps provided to get your dApp running in minutes! +Want an even faster setup? Check out our Template Repo to get your dApp running in minutes! + +Before proceeding with this guide, please ensure you have: +- Created your Okto Dashboard account +- Obtained your API keys from the dashboard +- Enabled the specific chains and tokens you plan to use in your application + +Without completing these steps first, your application won't be able to interact with the Okto platform properly. Need help? Check out our Dashboard Setup Guide for detailed instructions. + + - ## Initialize a Vite React App + ## 1. Initialize a Vite React App If you already have a React app, you can skip this step and proceed directly to Step 2 to start integrating Okto. @@ -31,7 +38,7 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Install Dependencies + ## 2. Install Dependencies Please use version 0.0.0-dev.42 of the npm package. @@ -59,24 +66,35 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Configure Environment Variables + ## 3. Configure Environment Variables Create a `.env` file in your project root: ```bash title=".env" - VITE_VENDOR_PRIV_KEY="YOUR_VENDOR_PRIVATE_KEY" - VITE_VENDOR_SWA="YOUR_VENDOR_SWA" + VITE_CLIENT_PRIV_KEY="YOUR_CLIENT_PRIVATE_KEY" + VITE_CLIENT_SWA="YOUR_CLIENT_SWA" # Google OAuth credentials (Required only if you want to enable Google Sign-In) - VITE_GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET" VITE_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID" ``` Replace the placeholders with your actual credentials. + + - Replace all placeholder values (`YOUR_...`) with your actual keys. + - Never commit your `.env` file to version control. Add it to your `.gitignore`. + + + 1. Go to Google Cloud Console. + 2. Create OAuth 2.0 credentials for your project. + 3. Set the redirect URI to: `[YOUR_APP_URL]/auth/google` (for example, `http://localhost:5173/auth/google` during local development). + 4. Save your Client ID and Client Secret. + + Need detailed instructions? Check our Google Console Setup Guide. + - ## Set Up Okto Provider + ## 4. Set Up Okto Provider Update your `main.tsx` to initialize the Okto SDK: @@ -88,8 +106,8 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app const config = { environment: "sandbox", - vendorPrivKey: import.meta.env.VITE_VENDOR_PRIV_KEY, - vendorSWA: import.meta.env.VITE_VENDOR_SWA, + clientPrivKey: import.meta.env.VITE_CLIENT_PRIV_KEY, + clientSWA: import.meta.env.VITE_CLIENT_SWA, }; ReactDOM.createRoot(document.getElementById("root")!).render( @@ -103,7 +121,7 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Set Up Google OAuth Provider + ## 5. Set Up Google OAuth Provider Wrap your app with the Google OAuth provider: @@ -116,8 +134,8 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app const config = { environment: "sandbox", - vendorPrivKey: import.meta.env.VITE_VENDOR_PRIV_KEY, - vendorSWA: import.meta.env.VITE_VENDOR_SWA, + clientPrivKey: import.meta.env.VITE_CLIENT_PRIV_KEY, + clientSWA: import.meta.env.VITE_CLIENT_SWA, }; ReactDOM.createRoot(document.getElementById("root")!).render( @@ -133,7 +151,7 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Implement Authentication + ## 6. 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. @@ -183,7 +201,7 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Get User Details and Portfolio + ## 7. Get User Details and Portfolio Create a UserDashboard component to display user information: @@ -225,7 +243,7 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Start Development Server + ## 8. Start Development Server Run your app: @@ -237,7 +255,7 @@ Want an even faster setup? Clone our [Template Repo](/docs/react-sdk/example-app - ## Congratulations! + ## 9. 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! @@ -252,7 +270,7 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## Get Your Wallet Address + ## 1. Get Your Wallet Address First, get your Solana wallet address: @@ -266,19 +284,19 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## Fund Your Wallet + ## 2. Fund Your Wallet To perform a token transfer, you'll need some funds in your wallet. Add funds to this address using the [Solana Devnet Faucet](https://faucet.solana.com). - ## Check Network Information + ## 3. Check Network Information Before creating the user operation, check the [Network Information Guide](/docs/react-sdk/technical-reference#network-information) for getting the correct CAIP-2 IDs of chains. - ## Implement Token Transfer + ## 4. Implement Token Transfer Create a new component for handling the transfer: @@ -331,7 +349,7 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## Verify The Transfer + ## 5. Verify The Transfer After the transfer is complete, you can verify it through: - The `getPortfolio` method to check your updated balance @@ -346,3 +364,86 @@ Now that you've completed your first user operation, you're ready to explore mor For more examples and advanced usage, check out the [Template Repo](https://github.com/okto-hq/okto-sdkv2-react-template-app). +## SDK Reference + +### Get Commands + +| Command | Description | Documentation | +|---------|-------------|---------------| +| `const account = await getAccount(oktoClient);` | Get user's wallet details | Method Overview | +| `const chains = await getChains(oktoClient);` | List supported blockchain networks | Method Overview | +| `const tokens = await getTokens(oktoClient);` | List supported tokens | Method Overview | +| `const portfolio = await getPortfolio(oktoClient);` | Get user's token holdings | Method Overview | +| `const nfts = await getPortfolioNFT(oktoClient);` | Get user's NFT holdings | Method Overview | +| `const activity = await getPortfolioActivity(oktoClient);` | Get transaction history | Method Overview | +| `const orders = await getOrdersHistory(oktoClient);` | Get transaction order history | Method Overview | +| `const collections = await getNftCollections(oktoClient);` | Get NFT collections | Method Overview | + +### User Operations (Intents) + +Intents are pre-built action templates within the Okto SDK that simplify common Web3 tasks. They provide one-liner functions for complex blockchain interactions. + +#### 1. Token Transfer +Send tokens to another address. Learn more + +```typescript +const transferParams = { + amount: BigInt("1000000000000000000"), // Amount in smallest unit + recipient: "0xRecipientAddress...", // Recipient wallet address + token: "0xTokenAddress...", // Token address ("" for native token) + chain: "eip155:1", // Target chain CAIP-2 ID +}; +const result = await tokenTransfer(oktoClient, transferParams); +``` + +#### 2. NFT Transfer +Transfer NFTs between addresses. Learn more + +```typescript +const nftParams = { + caip2Id: "eip155:1", // Target chain CAIP-2 ID + collectionAddress: "0xCollectionAddress...", // NFT Collection address + nftId: "NFTTokenID", // NFT identifier + recipientWalletAddress: "0xRecipientAddress...",// Recipient address + amount: 1n, + nftType: "ERC721", // or "ERC1155" +}; +const result = await nftTransfer(oktoClient, nftParams); +``` + +#### 3. Raw Transaction (EVM) +Execute custom EVM contract calls. Learn more + +```typescript +import { encodeFunctionData } from 'viem'; + +// 1. Define Contract Interaction +const contractAddress = '0xContractAddress...'; +const functionName = 'setValue'; +const functionArgs = [123]; + +// 2. Encode Function Data +const functionData = encodeFunctionData({ + abi: [ + { + "name": functionName, + "type": "function", + "stateMutability": "nonpayable", + "inputs": [{ "type": "uint256", "name": "_value" }] + } + ] as const, + functionName, + args: functionArgs, +}); + +// 3. Execute Transaction +const rawTxParams = { + networkId: "eip155:1", + transaction: { + to: contractAddress, + data: functionData, + // value: BigInt(0), // Optional: for payable functions + }, +}; +const result = await evmRawTransaction(oktoClient, rawTxParams); +``` \ No newline at end of file diff --git a/content/docs/react-sdk/quickstart/prerequisites.mdx b/content/docs/react-sdk/quickstart/prerequisites.mdx index 1cf2c22..62a75bb 100644 --- a/content/docs/react-sdk/quickstart/prerequisites.mdx +++ b/content/docs/react-sdk/quickstart/prerequisites.mdx @@ -4,31 +4,35 @@ title: Prerequisites import { Callout } from 'fumadocs-ui/components/callout'; -### Setup and Configuration - -1. **React and Dependencies** - - Ensure you have React set up in your project. - - For a detailed list of required dependencies, refer to our [`package.json`](https://github.com/okto-hq/okto-sdkv2-react-template-app/blob/main/package.json). - -2. **Okto API Key & Setup** - - Obtain your API Key from the [Okto Dashboard](https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?tab=t.0). - - Enable the required chains and tokens for your integration. - - If you require sponsorship, enable it for the desired chains in the [Sponsorship Section](https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?tab=t.0). - -3. **Authentication Methods** - - The Okto SDK supports multiple authentication methods: - - - **Google OAuth** - - To authenticate users via Google, you'll need to set up a Google Console Project. - - Follow our guide to [set up your Google Console Project](/docs/react-sdk/authenticate-users/google-oauth/learn). - - **Email OTP** (Coming Soon) - - **Phone OTP** (Coming Soon) +## Setup Requirements + +1. **React Environment** + - A React project (version 16.8 or higher) + - Node.js (version 14 or higher) + - npm or yarn package manager + - For a complete list of dependencies, check our [`package.json`](https://github.com/okto-hq/okto-sdkv2-react-template-app/blob/main/package.json) + +2. **Okto Dashboard Setup** + - Create an account on the [Okto Dashboard](https://docs.google.com/document/d/1nZZefjQ-1dPE--FmsBB8TLOzMOorNg8N85pMDg3rmCY/edit?tab=t.0) + - Obtain your API Key + - Configure your desired chains and tokens + - Enable sponsorship if needed (required for Solana, optional for other chains) + +3. **Google OAuth Configuration** + - Set up a [Google Console Project](https://console.cloud.google.com) for authentication + - Create OAuth 2.0 client credentials + - Follow our guide to [set up Google OAuth](/docs/react-sdk/authenticate-users/google-oauth/learn) + + +Additional authentication methods like Email OTP and Phone OTP will be available soon. + -By default, your project will use the **Sandbox** environment. To switch to the **Production** environment, please refer to our [Admin Panel documentation](/docs/developer-admin-dashboard/overview) for upgrade instructions. +Your project will use the **Sandbox** environment by default. For production deployment, please refer to our [Admin Panel documentation](/docs/developer-admin-dashboard/overview) for upgrade instructions. -### Next Steps +## Next Steps + +Once you've completed these prerequisites, proceed to the [Quickstart Guide](/docs/react-sdk/quickstart/new-okto-react-setup) to integrate the Okto SDK into your React project. -Once you've completed these prerequisites, you'll be ready to integrate the Okto SDK into your React project. If you encounter any issues during setup, please consult our troubleshooting guide or reach out to our support team. \ No newline at end of file +Need help? Check our [troubleshooting guide](/docs/react-sdk/troubleshooting) or reach out to our support team at `devrel@coindcx.com`. \ No newline at end of file diff --git a/content/docs/react-sdk/templateRepo.mdx b/content/docs/react-sdk/templateRepo.mdx index 800122b..08ca70c 100644 --- a/content/docs/react-sdk/templateRepo.mdx +++ b/content/docs/react-sdk/templateRepo.mdx @@ -89,8 +89,8 @@ For detailed installation instructions, select your framework below: 4. Add your API keys to the `.env` file: ``` - VITE_VENDOR_PRIVATE_KEY="YOUR_VENDOR_PRIVATE_KEY" - VITE_VENDOR_SWA="YOUR_VENDOR_SWA" + VITE_CLIENT_PRIVATE_KEY="YOUR_CLIENT_PRIVATE_KEY" + VITE_CLIENT_SWA="YOUR_CLIENT_SWA" VITE_GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET" VITE_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID" @@ -99,7 +99,7 @@ For detailed installation instructions, select your framework below: To obtain these credentials: - - **Vendor Private Key & SWA**: Get these from the Okto Dashboard. These keys are essential for authenticating your requests with Okto's services. + - **Client Private Key & SWA**: Get these from the Okto Dashboard. These keys are essential for authenticating your requests with Okto's services. - **Google OAuth Credentials**: Required for Google Sign-In functionality 1. Set up a project in [Google Cloud Console](https://console.cloud.google.com/) @@ -142,8 +142,8 @@ For detailed installation instructions, select your framework below: 4. Add your API keys to the `.env` file: ``` - NEXT_PUBLIC_VENDOR_PRIVATE_KEY="YOUR_VENDOR_PRIVATE_KEY" - NEXT_PUBLIC_VENDOR_SWA="YOUR_VENDOR_SWA" + NEXT_PUBLIC_CLIENT_PRIVATE_KEY="YOUR_CLIENT_PRIVATE_KEY" + NEXT_PUBLIC_CLIENT_SWA="YOUR_CLIENT_SWA" AUTH_SECRET="YOUR_AUTH_SECRET" NEXT_PUBLIC_GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET" NEXT_PUBLIC_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID" @@ -152,7 +152,7 @@ For detailed installation instructions, select your framework below: To obtain these credentials: - - **Vendor Private Key & SWA**: Get these from the Okto Dashboard. These keys are essential for authenticating your requests with Okto's services. + - **Client Private Key & SWA**: Get these from the Okto Dashboard. These keys are essential for authenticating your requests with Okto's services. - **Google OAuth Credentials**: Required for Google Sign-In functionality 1. Set up a project in [Google Cloud Console](https://console.cloud.google.com/) diff --git a/content/docs/react-sdk/usage-overview.mdx b/content/docs/react-sdk/usage-overview.mdx index 20c0199..1e09796 100644 --- a/content/docs/react-sdk/usage-overview.mdx +++ b/content/docs/react-sdk/usage-overview.mdx @@ -4,68 +4,155 @@ description: A comprehensive guide to using the Okto React SDK and its features 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 TechnologyCard from "app/components/mdx/TechnologyCard"; +import { + IoKeyOutline, + IoWalletOutline, + IoSearchOutline, + IoSwapHorizontalOutline, + IoCodeSlashOutline, + IoServerOutline, + IoAppsOutline, + IoListOutline, + IoRocketOutline +} from "react-icons/io5"; The Okto React SDK provides a comprehensive set of tools and hooks for integrating blockchain functionality into your React applications. This guide will help you understand the main components and features available in the SDK. -## Core Components - - - - -The SDK provides essential React hooks for accessing Okto functionality: - -| Hook | Description | -|------|-------------| -| `useOkto` | Primary hook that provides access to the OktoClient instance | - - - - - -Methods available on OktoClient for managing transactions: - -| Method | Description | -|--------|-------------| -| `signUserOp` | Sign user operations for transaction security | -| `executeUserOp` | Execute signed user operations on the blockchain | -| `estimate` | Calculate gas estimates for operations | - - - - - -Functions for retrieving blockchain and account data: - -| Function | Description | -|----------|-------------| -| `getAccount` | Retrieve user's wallet information | -| `getChains` | Get supported blockchain networks | -| `getTokens` | Fetch supported tokens list | -| `getPortfolio` | Access user's portfolio data | -| `getPortfolioActivity` | View portfolio transaction history | -| `getPortfolioNFT` | Get user's NFT holdings | -| `getNftCollections` | Retrieve NFT collection details | -| `getOrdersHistory` | Access transaction order history | - - - - - -Methods for creating different types of blockchain transactions: - -| Intent | Description | -|--------|-------------| -| `tokenTransfer` | Create operations for transferring tokens | -| `nftTransfer` | Handle NFT transfer operations | -| `evmRawTransaction` | Execute custom EVM transactions | - - - +## Core Functions + +
+ } + title="useOkto Hook" + subtitle="Primary hook that provides access to the OktoClient instance" + link="/docs/react-sdk/useOkto" + /> +
+ +## Account Operations + +
+ } + title="Understanding UserOp" + subtitle="Learn about user operations and best practices" + link="/docs/react-sdk/userop-learn" + /> + + } + title="signUserOp" + subtitle="Sign user operations for transaction integrity" + link="/docs/react-sdk/signUserOp" + /> + + } + title="executeUserOp" + subtitle="Submit signed operations to the blockchain" + link="/docs/react-sdk/executeUserOp" + /> + + } + title="estimate" + subtitle="Calculate gas and fee estimates for transactions" + link="/docs/react-sdk/estimate" + /> +
+ +## Explorer Functions + +
+ } + title="getAccount" + subtitle="Retrieve detailed account and wallet information" + link="/docs/react-sdk/getAccount" + /> + + } + title="getChains" + subtitle="Get list of supported blockchain networks" + link="/docs/react-sdk/getChains" + /> + + } + title="getNftCollection" + subtitle="Browse and verify NFT collections" + link="/docs/react-sdk/getNFTCollection" + /> + + } + title="getOrderHistory" + subtitle="View historical transactions and orders" + link="/docs/react-sdk/getOrderHistory" + /> + + } + title="getPortfolio" + subtitle="Get aggregated token holdings across chains" + link="/docs/react-sdk/getPortfolio" + /> + + } + title="getPortfolioActivity" + subtitle="Track recent portfolio changes and transactions" + link="/docs/react-sdk/getPortfolioActivity" + /> + + } + title="getPortfolioNFT" + subtitle="View NFT holdings and metadata" + link="/docs/react-sdk/getPortfolioNFT" + /> + + } + title="getTokens" + subtitle="List available tokens and their details" + link="/docs/react-sdk/getTokens" + /> +
+ +## Intents + +
+ } + title="Understanding Intents" + subtitle="Learn about Okto's simplified blockchain interactions" + link="/docs/react-sdk/intents" + /> + + } + title="tokenTransfer" + subtitle="Transfer fungible tokens between wallets" + link="/docs/react-sdk/tokenTransfer" + /> + + } + title="nftTransfer" + subtitle="Transfer NFTs between wallets" + link="/docs/react-sdk/nftTransfer" + /> + + } + title="rawTransaction" + subtitle="Create custom EVM transactions" + link="/docs/react-sdk/rawTransaction" + /> +
## Transaction Flow @@ -78,17 +165,4 @@ Most operations in the SDK follow this pattern: 4. Execute the operation using executeUserOp -For installation, initialization, and example implementations, refer to our [React](/docs/react-sdk/quickstart/new-okto-react-setup) or [Next.js](/docs/react-sdk/quickstart/new-okto-nextjs-setup) setup guides. - -## Key Features - -| Feature | Description | -|---------|-------------| -| Authentication | Built-in support for OAuth authentication | -| Multi-chain Support | Support for multiple blockchain networks | -| Asset Management | Comprehensive token and NFT handling | -| Portfolio Tracking | Built-in portfolio and activity tracking | -| Custom Transactions | Support for custom EVM transactions | -| Type Safety | Full TypeScript support | - -For detailed guides on specific features, refer to their respective documentation sections. \ No newline at end of file +For installation, initialization, and example implementations, refer to our [React](/docs/react-sdk/quickstart/new-okto-react-setup) or [Next.js](/docs/react-sdk/quickstart/new-okto-nextjs-setup) setup guides. \ No newline at end of file diff --git a/content/docs/react-sdk/wallets/overview.mdx b/content/docs/react-sdk/wallets/overview.mdx index c560eca..53ca2c8 100644 --- a/content/docs/react-sdk/wallets/overview.mdx +++ b/content/docs/react-sdk/wallets/overview.mdx @@ -10,6 +10,8 @@ Okto provides robust wallet management capabilities that enable users to interac With either approach, you can request on-chain actions—such as signatures and transactions—from your users. Although the basic logic for requesting these actions is the same across both wallet types, embedded wallets unlock additional customization options for how and when your users see signature or transaction prompts, offering a more streamlined in-app experience. +## Wallet Types + ### **Embedded Wallets** Embedded wallets are self-custodial wallets directly integrated into your application through the Okto SDK. They offer a seamless user experience as they eliminate the need for external wallet clients or browser extensions. Key characteristics of embedded wallets in Okto: @@ -32,4 +34,10 @@ External wallets are managed by third-party clients—for example, MetaMask, Pha Both embedded and external wallets within Okto enable you to easily request signatures and transactions, allowing your users to interact with your application on-chain. The choice depends on your target audience and the desired user experience. ---- \ No newline at end of file +--- + +### Next Steps + +- Learn more about [Embedded Wallets](/docs/react-sdk/wallets) +- Explore [External Wallet](/docs/react-sdk/wallets/external-wallets) integration +- Check out the [Usage Guide](/docs/react-sdk/usage-overview) for common wallet operations diff --git a/content/docs/troubleshooting.mdx b/content/docs/troubleshooting.mdx new file mode 100644 index 0000000..fdfa6a8 --- /dev/null +++ b/content/docs/troubleshooting.mdx @@ -0,0 +1,26 @@ +--- +title: Troubleshooting +description: Okto is a platform that allows you to integrate web3 functionality into your app without building things from scratch. +full: false +--- + +import { Callout } from 'fumadocs-ui/components/callout'; + +
+ +
+ +## Need further assistance? + + +If you have additional questions or require further support, please reach out to us [here](mailto:devrel@coindcx.com). + \ No newline at end of file diff --git a/content/docs/typescript-sdk/index.mdx b/content/docs/typescript-sdk/index.mdx index 8eaacda..3bc533b 100644 --- a/content/docs/typescript-sdk/index.mdx +++ b/content/docs/typescript-sdk/index.mdx @@ -1,11 +1,20 @@ --- -title: Overview of Typescript SDK +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 --- import TechnologyCard from 'app/components/mdx/TechnologyCard'; -import { IoCodeSlashOutline } from "react-icons/io5"; +import { + IoCodeSlashOutline, + IoKeyOutline, + IoWalletOutline, + IoBookOutline, + IoConstructOutline, + IoGitBranchOutline, + IoHelpCircleOutline, + IoSwapHorizontalOutline +} from "react-icons/io5"; ## Introduction to Okto TypeScript SDK @@ -17,12 +26,14 @@ The Okto TypeScript SDK is built exclusively for client-side (frontend) usage. D
} + className="h-25" + icon={} title="GitHub Repository" subtitle="View SDK Source Code" link="https://github.com/okto-hq/okto-js-sdk-monorepo" /> } title="Template Repository" subtitle="Example Implementation" @@ -30,47 +41,62 @@ The Okto TypeScript SDK is built exclusively for client-side (frontend) usage. D />
---- - ## 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. ---- - -## 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. +## Explore the TypeScript SDK -### 2. Authentication -Implement secure user login and session management: -- [Okto Auth](/docs/typescript-sdk/authentication/okto-auth): Learn about authorization in Okto and Okto Auth Token. -- [Google OAuth](/docs/typescript-sdk/authentication/google-oauth): Set up and authenticate users via Google. -- [Session Management](/docs/typescript-sdk/authentication/session-management/loginUsingOAuth): Manage user sessions and tokens. - -### 3. Usage & Features -Explore the core capabilities of the SDK: -- [Usage Overview](/docs/typescript-sdk/usage/overview): A complete guide to using the SDK effectively. -- [Core Operations](/docs/typescript-sdk/usage/OktoClient): Learn about the OktoClient and core functionality. -- [Account Operations](/docs/typescript-sdk/usage/userop-learn): Sign and execute user operations. -- [Explorer Functions](/docs/typescript-sdk/usage/getAccount): Access account details, chains, and portfolio data. -- [User Operations](/docs/typescript-sdk/usage/nftCreateCollection): Handle NFT and token transfers. - -### 4. Additional Resources -Access further support and development tools: -- [Feature Support](/docs/typescript-sdk/feature-support): Information on supported chains, tokens, and additional functionalities. -- [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. - ---- +
+ } + title="Authentication" + subtitle="Implement secure user login and session management" + link="/docs/typescript-sdk/authentication/okto-auth" + /> + } + title="Wallet Management" + subtitle="Configure and manage embedded and external wallets" + link="/docs/typescript-sdk/authentication/session-management/loginUsingOAuth" + /> + } + title="Usage & Features" + subtitle="Explore hooks, explorer functions, and intent operations" + link="/docs/typescript-sdk/usage/overview" + /> + } + title="Technical Reference" + subtitle="In-depth documentation of classes, methods, and data models" + link="/docs/typescript-sdk/technical-reference" + /> + } + title="Troubleshooting" + subtitle="Common issues and their solutions" + link="/docs/typescript-sdk/troubleshooting" + /> + } + title="Feature Support" + subtitle="Information on supported chains, tokens, and functionalities" + link="/docs/typescript-sdk/feature-support" + /> +
## 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. + +If you have any questions or need assistance, don't hesitate to reach out via our **[Troubleshooting](/docs/typescript-sdk/troubleshooting)** page or email us at `devrel@coindcx.com`. + **Happy Building!** diff --git a/content/docs/typescript-sdk/meta.json b/content/docs/typescript-sdk/meta.json index 97079f0..d5d0421 100644 --- a/content/docs/typescript-sdk/meta.json +++ b/content/docs/typescript-sdk/meta.json @@ -1,7 +1,7 @@ { "title": "Typescript", "pages": [ - "[About Okto](/)", + "[← Back to Home](/)", "index", "quickstart", "!example-apps", diff --git a/content/docs/typescript-sdk/quickstart.mdx b/content/docs/typescript-sdk/quickstart.mdx index 83439d9..199ead4 100644 --- a/content/docs/typescript-sdk/quickstart.mdx +++ b/content/docs/typescript-sdk/quickstart.mdx @@ -8,6 +8,15 @@ import { Step, Steps } from 'fumadocs-ui/components/steps'; import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; import { Callout } from 'fumadocs-ui/components/callout'; + +Before proceeding with this guide, please ensure you have: +- Created your Okto Dashboard account +- Obtained your API keys from the dashboard +- Enabled the specific chains and tokens you plan to use in your application + +Without completing these steps first, your application won't be able to interact with the Okto platform properly. Need help? Check out our [Dashboard Setup Guide](/docs/developer-admin-dashboard/overview) for detailed instructions. + + ## TypeScript App This approach shows how to create a TypeScript application and manually configure the Okto SDK. Follow these steps to set up your project and execute your first token transfer. @@ -58,8 +67,8 @@ This approach shows how to create a TypeScript application and manually configur Create a `.env` file in your project root: ```bash title=".env" - VENDOR_PRIVATE_KEY=YOUR_VENDOR_PRIVATE_KEY - VENDOR_SWA=YOUR_VENDOR_SWA + CLIENT_PRIVATE_KEY=YOUR_CLIENT_PRIVATE_KEY + CLIENT_SWA=YOUR_CLIENT_SWA ENVIRONMENT=sandbox ``` @@ -71,8 +80,8 @@ This approach shows how to create a TypeScript application and manually configur export const config = { environment: process.env.ENVIRONMENT || 'sandbox', - vendorPrivKey: process.env.VENDOR_PRIVATE_KEY!, - vendorSWA: process.env.VENDOR_SWA!, + clientPrivKey: process.env.CLIENT_PRIVATE_KEY!, + clientSWA: process.env.CLIENT_SWA!, }; ``` @@ -88,8 +97,8 @@ This approach shows how to create a TypeScript application and manually configur const oktoClient = new OktoClient({ environment: config.environment, - vendorPrivKey: config.vendorPrivKey, - vendorSWA: config.vendorSWA, + clientPrivKey: config.clientPrivKey, + clientSWA: config.clientSWA, }); async function main() { diff --git a/content/docs/typescript-sdk/usage/index.mdx b/content/docs/typescript-sdk/usage/index.mdx index 0c79111..605cc51 100644 --- a/content/docs/typescript-sdk/usage/index.mdx +++ b/content/docs/typescript-sdk/usage/index.mdx @@ -1,79 +1,166 @@ --- -title: Overview +title: Usage Overview full: false --- -This section provides a comprehensive overview of the functions available in the Typescript SDK. These functions empower you to interact seamlessly with the Okto platform—from initiating transaction operations to retrieving data related to accounts, portfolios, and more. +import TechnologyCard from "app/components/mdx/TechnologyCard"; +import { + IoKeyOutline, + IoWalletOutline, + IoSearchOutline, + IoSwapHorizontalOutline, + IoCodeSlashOutline, + IoServerOutline, + IoAppsOutline, + IoListOutline +} from "react-icons/io5"; -The functions are organized by their purpose, ensuring a clear separation of concerns and making it easier to integrate the right functionality into your application. +This section provides a comprehensive overview of the functions available in the Typescript SDK. These functions empower you to interact seamlessly with the Okto platform—from initiating transaction operations to retrieving data related to accounts, portfolios, and more. ## Core Functions -- **[OktoClient](/docs/typescript-sdk/usage/OktoClient)** - The heartbeat of the SDK, the `OktoClient` serves as the primary interface with the Okto system. It manages authentication, session management, and acts as the gateway for every operation you will perform. All further interactions—be it signing or executing user operations—are routed through this client. - -## Account Operations - -Functions in this category help you manage and execute user operations securely: - -- **[Understanding UserOp](/docs/typescript-sdk/usage/userop-learn)** - Gain a deeper understanding of how user operations work—including best practices for creating, signing, and managing them. - -- **[signUserOp](/docs/typescript-sdk/usage/signUserOp)** - This function signs a user operation. It ensures the integrity and authenticity of your transaction data before sending it for execution. - -- **[executeUserOp](/docs/typescript-sdk/usage/executeUserOp)** - Once a transaction has been signed, the `executeUserOp` function is used to submit it to the blockchain network. It handles the actual dispatching of the signed operation and returns a transaction hash or job identifier. - -- **[estimate](/docs/typescript-sdk/usage/estimate)** - Prior to execution, the `estimate` function calculates the necessary gas or fee estimates for your transaction. It helps in determining the cost associated with an operation. +
+ } + title="OktoClient" + subtitle="Primary interface for authentication and session management" + link="/docs/typescript-sdk/usage/OktoClient" + /> +
+ +## UserOp + +
+ } + title="Understanding UserOp" + subtitle="Learn about user operations and best practices" + link="/docs/typescript-sdk/usage/userop-learn" + /> + + } + title="signUserOp" + subtitle="Sign user operations for transaction integrity" + link="/docs/typescript-sdk/usage/signUserOp" + /> + + } + title="executeUserOp" + subtitle="Submit signed operations to the blockchain" + link="/docs/typescript-sdk/usage/executeUserOp" + /> + + } + title="estimate" + subtitle="Calculate gas and fee estimates for transactions" + link="/docs/typescript-sdk/usage/estimate" + /> +
## Explorer Functions -These functions allow you to retrieve critical information about account activity and network status: - -- **[getAccount](/docs/typescript-sdk/usage/getAccount)** - Retrieves detailed information about a user's account, including wallet details and associated metadata. - -- **[getChains](/docs/typescript-sdk/usage/getChains)** - Fetches a list of supported blockchain networks within the Okto ecosystem. Use this to present available networks to your users or to validate network-specific transactions. - -- **[getNftCollections](/docs/typescript-sdk/usage/getNftCollections)** - Retrieves data on available NFT collections. Whether you are browsing or verifying NFT collections, this function provides the required information. - -- **[getOrdersHistory](/docs/typescript-sdk/usage/getOrdersHistory)** - Provides a historical list of orders or transactions associated with a user. This is particularly useful for audit trails and transaction monitoring. - -- **[getPortfolio](/docs/typescript-sdk/usage/getPortfolio)** - Aggregates a user’s token holdings across multiple chains. This function gives an up-to-date snapshot of a user's overall portfolio. - -- **[getPortfolioActivity](/docs/typescript-sdk/usage/getPortfolioActivity)** - Offers insight into recent portfolio activities, including transactions, deposits, and withdrawals. It assists in tracking changes over time. - -- **[getPortfolioNFT](/docs/typescript-sdk/usage/getPortfolioNFT)** - Specifically lists the NFTs held by a user, detailing ownership and related metadata. - -- **[getTokens](/docs/typescript-sdk/usage/getTokens)** - Enumerates the tokens available or managed within the Okto platform. This ensures that your application displays the most accurate and current set of token details. - -## User Operation Functions - -These advanced functions cater to operations involving NFTs and tokens: - -- **[nftCreateCollection](/docs/typescript-sdk/usage/nftCreateCollection)** - Facilitates the creation of a new NFT collection. This function abstracts the underlying on-chain complexity, letting you establish collections quickly and efficiently. - -- **[nftTransfer](/docs/typescript-sdk/usage/nftTransfer)** - Enables the transfer of NFTs between wallets. With this function, you can initiate an NFT transfer by providing parameters such as chain identifiers, collection addresses, and recipient details. - -- **[tokenTransfer](/docs/typescript-sdk/usage/tokenTransfer)** - Handles the transfer of fungible tokens. Whether sending tokens between wallets or facilitating more complex token operations, this function manages the low-level details for you. - -- **[rawTransaction](/docs/typescript-sdk/usage/rawTransaction)** - Creates a user operation for raw EVM transactions. This function allows you to create custom transactions by specifying the raw transaction parameters. +
+ } + title="getAccount" + subtitle="Retrieve detailed account and wallet information" + link="/docs/typescript-sdk/usage/getAccount" + /> + + } + title="getChains" + subtitle="Get list of supported blockchain networks" + link="/docs/typescript-sdk/usage/getChains" + /> + + } + title="getNftCollections" + subtitle="Browse and verify NFT collections" + link="/docs/typescript-sdk/usage/getNftCollections" + /> + + } + title="getOrdersHistory" + subtitle="View historical transactions and orders" + link="/docs/typescript-sdk/usage/getOrdersHistory" + /> + + } + title="getPortfolio" + subtitle="Get aggregated token holdings across chains" + link="/docs/typescript-sdk/usage/getPortfolio" + /> + + } + title="getPortfolioActivity" + subtitle="Track recent portfolio changes and transactions" + link="/docs/typescript-sdk/usage/getPortfolioActivity" + /> + + } + title="getPortfolioNFT" + subtitle="View NFT holdings and metadata" + link="/docs/typescript-sdk/usage/getPortfolioNFT" + /> + + } + title="getTokens" + subtitle="List available tokens and their details" + link="/docs/typescript-sdk/usage/getTokens" + /> +
+ +## Intents + +
+ } + title="Understanding Intents" + subtitle="Learn about intents" + link="/docs/typescript-sdk/usage/intents" + /> + + } + title="nftCreateCollection" + subtitle="Create new NFT collections efficiently" + link="/docs/typescript-sdk/usage/nftCreateCollection" + /> + + } + title="nftTransfer" + subtitle="Transfer NFTs between wallets" + link="/docs/typescript-sdk/usage/nftTransfer" + /> + + } + title="tokenTransfer" + subtitle="Transfer fungible tokens between wallets" + link="/docs/typescript-sdk/usage/tokenTransfer" + /> + + } + title="rawTransaction" + subtitle="Create custom EVM transactions" + link="/docs/typescript-sdk/usage/rawTransaction" + /> +
## Conclusion -Together, these functions provide a robust, developer-friendly toolkit designed to cover all essential interactions with the Okto ecosystem. Whether you need to execute secure transactions, query account and portfolio data, or perform token and NFT operations, the Typescript SDK has you covered. For detailed usage instructions and examples, be sure to check out the individual documentation pages linked throughout the SDK. +Together, these functions provide a robust, developer-friendly toolkit designed to cover all essential interactions with the Okto ecosystem. Whether you need to execute secure transactions, query account and portfolio data, or perform token and NFT operations, the Typescript SDK has you covered. Happy building with Okto! \ No newline at end of file diff --git a/content/docs/typescript-sdk/usage/intents.mdx b/content/docs/typescript-sdk/usage/intents.mdx new file mode 100644 index 0000000..45bffad --- /dev/null +++ b/content/docs/typescript-sdk/usage/intents.mdx @@ -0,0 +1,61 @@ +--- +title: Understanding Intents +full: false +--- + +Intents make Web3 easy. Instead of complex steps, you simply tell Okto your *intent* – what you want to achieve. Okto handles the rest, making blockchain actions feel simple. + +## What are Intents on Okto? + +Intents are like simple instructions for Web3. You say what you want, not *how* to do it. The Okto Platform figures out the best way to make it happen. The Okto Platform takes care of: + +- **Breaking Down Complex Tasks:** Intents become easy steps for the system. +- **Smart Fee Handling:** Okto makes sure you pay the right amount for fees. +- **Automatic Steps:** The system does all the work in the background. +- **Cross-Chain Made Easy:** Moving things between blockchains is automatic. + + +Cross-chain liquidity intents are coming soon! These will enable seamless token swaps across different blockchain networks. To learn more about upcoming cross-chain capabilities, check out [Cross-Chain Intents →](/docs/system-capabilities/cross-chain-intents) + + +## Key Benefits: + +### 1. User-Friendly: + +- **Simple Instructions:** Tell Okto what you want in plain terms. +- **No Tech Knowledge Needed:** Skip the blockchain details. +- **Fewer Errors:** Automation reduces mistakes. + +### 2. Smart & Fast: + +- **Smart Fees:** Automatic, cost-effective fees. +- **Best Routes:** Okto finds the fastest and cheapest way to do things. +- **Quick Actions:** Complex tasks get done faster. + +### 3. Secure & Reliable: + +- **Safe Steps:** Transactions happen in a secure order. +- **Protection Built-In:** Okto helps avoid common Web3 problems. +- **Dependable Transfers:** Your cross-chain actions are handled reliably. + +## Core Intent Types: + +Okto SDK V2 provides these Intent types: + +### 1. Token Transfer Intent: + +Easily transfer tokens. Okto handles fees and routing. + +[Learn more →](/docs/react-sdk/tokenTransfer) + +### 2. NFT Transfer Intent: + +Transfer NFTs with ease and security. + +[Learn more →](/docs/react-sdk/nftTransfer) + +### 3. Raw Transaction Intent: + +For advanced users: direct contract calls and complex operations. + +[Learn more →](/docs/react-sdk/rawTransaction) \ No newline at end of file diff --git a/content/docs/typescript-sdk/usage/meta.json b/content/docs/typescript-sdk/usage/meta.json index b3991fd..beea15b 100644 --- a/content/docs/typescript-sdk/usage/meta.json +++ b/content/docs/typescript-sdk/usage/meta.json @@ -3,7 +3,7 @@ "pages": [ "---Core---", "OktoClient", - "---Account---", + "---UserOp---", "userop-learn", "signUserOp", "executeUserOp", @@ -17,7 +17,8 @@ "getPortfolioActivity", "getPortfolioNFT", "getTokens", - "---UserOp---", + "---Intents---", + "intents", "nftCreateCollection", "nftTransfer", "tokenTransfer",