diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index 1159598..e463c62 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -51,9 +51,9 @@ export default function NavbarComponent() { ]; const sdkOptions = [ - { href: "/docs/react-sdk", label: "React", subpath: '/getting-started/overview-okto-react', icons: }, - { href: "/docs/react-native-sdk", label: "React Native", subpath: '/getting-started/overview-okto-react-native', icons: }, - { href: "/docs/flutter-sdk", label: "Flutter", subpath: '/getting-started/overview-okto-flutter', icons: }, + { href: "/docs/react-sdk", label: "React", subpath: '/', icons: }, + { href: "/docs/react-native-sdk", label: "React Native", subpath: '/', icons: }, + { href: "/docs/flutter-sdk", label: "Flutter", subpath: '/', icons: }, { href: "/docs", label: "Unity", subpath: '/unity-sdk', icons: }, ]; diff --git a/content/blogs/building-the-future-with-okto-sdk.mdx b/content/blogs/building-the-future-with-okto-sdk.mdx index 5d1c268..32ae587 100644 --- a/content/blogs/building-the-future-with-okto-sdk.mdx +++ b/content/blogs/building-the-future-with-okto-sdk.mdx @@ -92,9 +92,9 @@ You can start building with Okto in just **3 simple steps**: 3. **Choose Your Platform:** Select a platform for your application from the various SDKs we offer: - - **[React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup):** For web applications built with React. - - **[React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/quickstart-okto-react-native/new-okto-react-setup):** For mobile apps using React Native. - - **[Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup):** For cross-platform mobile development with Flutter. + - **[React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/new-okto-react-setup):** For web applications built with React. + - **[React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/new-okto-react-native-setup):** For mobile apps using React Native. + - **[Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/new-okto-flutter-setup):** For cross-platform mobile development with Flutter. - **[Unity SDK](https://docs.okto.tech/docs/unity-sdk):** For game developers using Unity. Alternatively, you can directly invoke our **[APIs](https://docs.okto.tech/api-docs)** for more flexibility. diff --git a/content/blogs/getting-started-with-okto.mdx b/content/blogs/getting-started-with-okto.mdx index 57c0087..f969265 100644 --- a/content/blogs/getting-started-with-okto.mdx +++ b/content/blogs/getting-started-with-okto.mdx @@ -96,22 +96,22 @@ Now that you’ve completed the prerequisites, let’s take a closer look at the If you’re building a web application with React, the Okto React SDK is your go-to solution. It streamlines the integration of Web3 functionalities, allowing you to onboard users into the Web3 ecosystem effortlessly. With minimal setup, you can start providing users with a seamless Web3 experience. -1. Learn More: [Okto React SDK Overview](https://docs.okto.tech/docs/react-sdk/getting-started/overview-okto-react) -2. Quick Start Guide: [Get Started with Okto React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup) +1. Learn More: [Okto React SDK Overview](https://docs.okto.tech/docs/react-sdk) +2. Quick Start Guide: [Get Started with Okto React SDK](https://docs.okto.tech/docs/react-sdk/getting-started/new-okto-react-setup) ### 2. Okto Flutter SDK For developers using Flutter, the Okto Flutter SDK provides a straightforward way to add Web3 features to your app. It’s designed to minimize setup time so you can focus on delivering a smooth and engaging user experience, all while taking advantage of Flutter’s cross-platform capabilities. -1. Learn More: [Okto Flutter SDK Overview](https://docs.okto.tech/docs/flutter-sdk/getting-started/overview-okto-flutter) -2. Quick Start Guide: [Get Started with Okto Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup) +1. Learn More: [Okto Flutter SDK Overview](https://docs.okto.tech/docs/flutter-sdk) +2. Quick Start Guide: [Get Started with Okto Flutter SDK](https://docs.okto.tech/docs/flutter-sdk/getting-started/new-okto-flutter-setup) ### 3. Okto React Native SDK Mobile app developers working with React Native will find the Okto React Native SDK invaluable. It simplifies the process of integrating Web3 functionalities into your mobile applications, providing users with a smooth Web3 journey from any device. -1. Learn More: [Okto React Native SDK Overview](https://docs.okto.tech/react-native-sdk) -2. Quick Start Guide: [Get Started with Okto React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/quickstart-okto-react-native/new-okto-react-setup) +1. Learn More: [Okto React Native SDK Overview](https://docs.okto.tech/docs/react-native-sdk) +2. Quick Start Guide: [Get Started with Okto React Native SDK](https://docs.okto.tech/docs/react-native-sdk/getting-started/new-okto-react-native-setup) ### 4. Okto Unity SDK diff --git a/content/docs/flutter-sdk/getting-started/meta.json b/content/docs/flutter-sdk/getting-started/meta.json index 816d2c9..8038cd3 100644 --- a/content/docs/flutter-sdk/getting-started/meta.json +++ b/content/docs/flutter-sdk/getting-started/meta.json @@ -1,7 +1,7 @@ { "title": "Getting Started", "pages": [ - "overview-okto-flutter", - "quickstart-okto-flutter" + "prerequisites", + "new-okto-flutter-setup" ] } \ No newline at end of file diff --git a/content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup.mdx b/content/docs/flutter-sdk/getting-started/new-okto-flutter-setup.mdx similarity index 100% rename from content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/new-okto-flutter-setup.mdx rename to content/docs/flutter-sdk/getting-started/new-okto-flutter-setup.mdx diff --git a/content/docs/flutter-sdk/getting-started/overview-okto-flutter.mdx b/content/docs/flutter-sdk/getting-started/overview-okto-flutter.mdx deleted file mode 100644 index c0c5833..0000000 --- a/content/docs/flutter-sdk/getting-started/overview-okto-flutter.mdx +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Overview of the Okto Flutter SDK -description: Flutter SDK for Okto ---- - -import TechnologyCard from 'app/components/mdx/TechnologyCard'; -import { IoCodeSlashOutline } from "react-icons/io5"; - -## Introduction to Okto Flutter SDK - -The **Okto Flutter SDK** offers a streamlined solution for integrating Web3 functionalities into your Flutter application. With minimal setup time, you can effortlessly onboard your users to the Web3 ecosystem and provide them with a seamless experience. - -
- } - title="GitHub Repository" - subtitle="Checkout the SDK Source Code" - link="https://github.com/okto-hq/okto-sdk-flutter" - /> -
- -### Quick Setup - -With just ten minutes of setup, the Okto Flutter SDK provides: - -**Out-of-the-Box Chain Support**: Integrate with a wide range of blockchain networks, including: - - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks. - - **Non-EVM Chains**: Solana and Aptos. - - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further. - -**Customizable UIs**: Tailor the onboarding experience to fit your app’s design and user flow. The SDK offers various UI components and configurations to progressively onboard users, making it easy to guide them through the Web3 integration process. - -**Comprehensive Toolkit**: Access a robust set of tools to handle: - - **Tokens**: Manage and interact with various cryptocurrencies and tokens. - - **NFTs**: Support for minting, transferring, and managing NFTs. - - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app. - -{/* ## Video Walkthrough - -
- -
*/} - -## Conclusion - -The Okto Flutter SDK is designed to make Web3 integration straightforward and efficient. With support for multiple chains, customizable UI options, and a comprehensive toolkit, it enables developers to create powerful Web3 applications with ease. \ No newline at end of file diff --git a/content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/prerequisites.mdx b/content/docs/flutter-sdk/getting-started/prerequisites.mdx similarity index 100% rename from content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/prerequisites.mdx rename to content/docs/flutter-sdk/getting-started/prerequisites.mdx diff --git a/content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/meta.json b/content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/meta.json deleted file mode 100644 index 4357f05..0000000 --- a/content/docs/flutter-sdk/getting-started/quickstart-okto-flutter/meta.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "title": "Quickstart", - "pages": [ - "prerequisites", - "new-okto-flutter-setup" - ] - } \ No newline at end of file diff --git a/content/docs/flutter-sdk/index.mdx b/content/docs/flutter-sdk/index.mdx new file mode 100644 index 0000000..f5bf85e --- /dev/null +++ b/content/docs/flutter-sdk/index.mdx @@ -0,0 +1,107 @@ +--- +title: Okto Flutter SDK Documentation +description: A complete guide to integrating Okto into your Flutter projects. +full: false +--- + +import TechnologyCard from 'app/components/mdx/TechnologyCard'; +import { IoCodeSlashOutline } from "react-icons/io5"; + +## Introduction to the Okto Flutter SDK + +**Okto Flutter SDK** is your all-in-one toolkit for adding Web3 functionality to any Flutter application. With minimal setup time, you can effortlessly onboard your users to the Web3 ecosystem and provide them with a seamless experience. +
+ } + title="GitHub Repository" + subtitle="View Source Code" + link="https://github.com/okto-hq/okto-sdk-flutter" + /> +
+ +## Key Features + +- **Out-of-the-Box Chain Support** + Integrate with a wide range of blockchain networks, including: + - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks. + - **Non-EVM Chains**: Solana and Aptos. + - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further. + + +- **Customizable UI** + Tailor the onboarding experience to fit your app’s design and user flow. The SDK offers various UI components and configurations to progressively onboard users, making it easy to guide them through the Web3 integration process. + + +- **Comprehensive Toolkit** + - **Tokens**: Easily manage token balances, transfers, and other operations. + - **NFTs**: Mint, transfer, and display NFTs without leaving your Flutter codebase. + - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app. + +- **Multiple Authentication Methods** + Secure user logins with Google OAuth, Email OTP or Phone OTP. Whatever fits your users and use case best. + +--- + +## Navigating the Flutter SDK Docs + +Below is an overview of the main sections in our Flutter SDK documentation, guiding you from basic setup to advanced, production-ready features. + +### 1. Getting Started + +Begin your journey with the Okto Flutter SDK by learning the essentials. This section is perfect for first-time users and covers the initial steps required to get the SDK integrated into your Flutter Project. + + +- [**Prerequisites**](/docs/flutter-sdk/getting-started/prerequisites) + Ensure you have the necessary Flutter environment, Okto API key, and Google OAuth credentials (if required). + +- [**Quickstart Guide**](/docs/flutter-sdk/getting-started/new-okto-flutter-setup) + Follow a step-by-step tutorial to install the SDK, configure authentication, and deploy your first Okto-powered app in under 10 minutes. + +--- + +### 2. Advanced SDK Configurations + +Discover how to unlock the SDK’s powerful features, from multi-chain wallet management to raw transaction execution. + +- [**Chains and Tokens**](/docs/flutter-sdk/advanced-sdk-config/chains-tokens/supported-networks) + Learn how to retrieve network and token information using the Okto SDK. + +- [**Authenticate Users**](/docs/flutter-sdk/advanced-sdk-config/authenticate-users/google-oauth/learn) + Implement secure authentication flows—Google OAuth, phone or email OTP, plus session management. + +- [**Okto Embedded Wallet**](/docs/flutter-sdk/advanced-sdk-config/okto-embedded-wallet/setup-embedded-wallets/create-embedded-wallets) + Build a robust in-app wallet experience with multi-chain token/NFT support, raw transactions, and custom UI screens. + +--- + +### 3. Example Apps + +Learn by examining practical, real-world implementations of the Okto Flutter SDK. + +- [**Template App**](/docs/flutter-sdk/example-apps/template-app) + A starter Flutter project showing best practices for authentication, wallet usage, and cross-chain operations. + +- [**Example Repos**](/docs/flutter-sdk/example-apps/example-repos) + Check out some of the example repos to see what others have been building using Okto. + +--- + +### 4. Troubleshooting & FAQ + +Find solutions to common issues, debug errors, and learn how to get help when needed. + +- [**Common Issues and Error Codes**](/docs/flutter-sdk/troubleshooting-faq/sdk-error-warnings) + A comprehensive list of errors, warnings, and their resolutions. + +- [**Contact Us**](/docs/flutter-sdk/troubleshooting-faq/contact-us) + Reach out to our support team for personalized assistance or additional resources. + +--- + +## Get Started + +Ready to integrate Okto into your Flutter app? Begin with our [**Getting Started guide**](/docs/flutter-sdk/getting-started/new-okto-flutter-setup) to set up your environment, obtain your Okto API key, and create a simple app. From there, explore advanced features like raw transactions, cross-chain NFT management, or UI customizations. + +For additional questions or direct support, check out our [**Contact Us**](/docs/flutter-sdk/troubleshooting-faq/contact-us) page or email us at `devrel@coindcx.com`. + +**Happy Building!** diff --git a/content/docs/flutter-sdk/meta.json b/content/docs/flutter-sdk/meta.json index 64dc226..49e2972 100644 --- a/content/docs/flutter-sdk/meta.json +++ b/content/docs/flutter-sdk/meta.json @@ -1,6 +1,7 @@ { "title": "Flutter", "pages": [ + "index", "getting-started", "!using-flutter-features", "advanced-sdk-config", diff --git a/content/docs/index.mdx b/content/docs/index.mdx index e9c2018..3e0f0df 100644 --- a/content/docs/index.mdx +++ b/content/docs/index.mdx @@ -65,21 +65,21 @@ Pick the right SDK for your platform and start integrating Web3 features: icon={} title="React" subtitle="for web" - link="/docs/react-sdk/getting-started/overview-okto-react" + link="/docs/react-sdk" /> } title="React Native" subtitle="for mobile" - link="/docs/react-native-sdk/getting-started/overview-okto-react-native" + link="/docs/react-native-sdk" /> } title="Flutter" subtitle="for Android and iOS" - link="/docs/flutter-sdk/getting-started/overview-okto-flutter" + link="/docs/flutter-sdk" /> } title="React" subtitle="for web" - link="/docs/react-sdk/getting-started/overview-okto-react" + link="/docs/react-sdk" /> } title="React Native" subtitle="for mobile" - link="/docs/react-native-sdk/getting-started/overview-okto-react-native" + link="/docs/react-native-sdk" /> } title="Flutter" subtitle="for Android and iOS" - link="/docs/flutter-sdk/getting-started/overview-okto-flutter" + link="/docs/flutter-sdk" /> } title="React" subtitle="for web" - link="/docs/react-sdk/getting-started/overview-okto-react" + link="/docs/react-sdk" /> } title="React Native" subtitle="for mobile" - link="/docs/react-native-sdk/getting-started/overview-okto-react-native" + link="/docs/react-native-sdk" /> } title="Flutter" subtitle="for Android and iOS" - link="/docs/flutter-sdk/getting-started/overview-okto-flutter" + link="/docs/flutter-sdk" /> - } - title="GitHub Repository" - subtitle="Checkout the SDK Source Code" - link="https://github.com/okto-hq/okto-sdk-react-native" - /> - - -### Quick Setup - -With just ten minutes of setup, the Okto React Native SDK provides: - -**Out-of-the-Box Chain Support**: Integrate with a wide range of blockchain networks, including: - - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks. - - **Non-EVM Chains**: Solana and Aptos. - - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further. - -**Customizable UIs**: Tailor the onboarding experience to fit your app’s design and user flow. The SDK offers various UI components and configurations to progressively onboard users, making it easy to guide them through the Web3 integration process. - -**Comprehensive Toolkit**: Access a robust set of tools to handle: - - **Tokens**: Manage and interact with various cryptocurrencies and tokens. - - **NFTs**: Support for minting, transferring, and managing NFTs. - - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app. - -## Conclusion - -The Okto React Native SDK is designed to make Web3 integration straightforward and efficient. With support for multiple chains, customizable UI options, and a comprehensive toolkit, it enables developers to create powerful Web3 applications with ease. \ No newline at end of file diff --git a/content/docs/react-native-sdk/getting-started/quickstart-okto-react-native/prerequisites.mdx b/content/docs/react-native-sdk/getting-started/prerequisites.mdx similarity index 100% rename from content/docs/react-native-sdk/getting-started/quickstart-okto-react-native/prerequisites.mdx rename to content/docs/react-native-sdk/getting-started/prerequisites.mdx diff --git a/content/docs/react-native-sdk/getting-started/quickstart-okto-react-native/meta.json b/content/docs/react-native-sdk/getting-started/quickstart-okto-react-native/meta.json deleted file mode 100644 index 632897c..0000000 --- a/content/docs/react-native-sdk/getting-started/quickstart-okto-react-native/meta.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "title": "Quickstart", - "pages": [ - "prerequisites", - "new-okto-react-setup" - ] - } \ No newline at end of file diff --git a/content/docs/react-native-sdk/index.mdx b/content/docs/react-native-sdk/index.mdx new file mode 100644 index 0000000..1938f50 --- /dev/null +++ b/content/docs/react-native-sdk/index.mdx @@ -0,0 +1,105 @@ +--- +title: Okto React Native SDK Documentation +description: A complete guide to integrating Okto into your React Native applications. +full: false +--- + +import TechnologyCard from 'app/components/mdx/TechnologyCard'; +import { IoCodeSlashOutline } from "react-icons/io5"; + +## Introduction to Okto React Native SDK + +**Okto React Native SDK** is your comprehensive toolkit for bringing Web3 capabilities 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 experience. + +
+ } + title="GitHub Repository" + subtitle="View Source Code" + link="https://github.com/okto-hq/okto-sdk-react-native" + /> +
+ +## Key Features + +- **Out-of-the-Box Chain Support** + Integrate with a wide range of blockchain networks, including: + - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks. + - **Non-EVM Chains**: Solana and Aptos. + - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further. + +- **Customizable UI** + Take advantage of built-in components for common wallet actions, or customize the interface to match your brand and user experience goals. + +- **Comprehensive Toolkit** + - **Tokens**: Easily handle token balances, transfers, and more. + - **NFTs**: Mint, transfer, and manage NFTs within your app. + - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app. + +- **Multiple Authentication Methods** + Securely authenticate your users with Google OAuth, Email OTP, or even Phone OTP flows. + +--- + +## Navigating the React Native SDK Docs + +Below is an overview of the main sections in our React Native documentation, designed to guide you from initial setup through advanced use cases. + +### 1. Getting Started + +Begin your journey by learning the essentials of setting up and configuring Okto within a new or existing React Native project. + +- [**Prerequisites**](/docs/react-native-sdk/getting-started/prerequisites): + Verify you have the required dependencies (Node, React Native CLI, Okto API key), and set up your Google OAuth credentials if needed. + +- [**Quickstart Guide**](/docs/react-native-sdk/getting-started/new-okto-react-native-setup): + Follow a step-by-step approach to install and initialize the SDK in under 10 minutes. + +--- + +### 2. Advanced SDK Configurations + +Leverage the Okto React Native SDK’s more powerful features to handle multi-chain scenarios, user authentication, smart contract interactions, and more. + +- [**Chains and Tokens**](/docs/react-native-sdk/advanced-sdk-config/chains-tokens/supported-networks): + Learn how to retrieve network and token information using the Okto SDK. + +- [**Authenticate Users**](/docs/react-native-sdk/advanced-sdk-config/authenticate-users/google-oauth/learn): + Implement authentication login flows, including Google OAuth, email OTP, and phone OTP. + +- [**Okto Embedded Wallet**](/docs/react-native-sdk/advanced-sdk-config/okto-embedded-wallet/setup-embedded-wallets/create-embedded-wallets): + Integrate multi-chain wallets, execute transactions, and embed prebuilt UI components directly in your React Native views. + +--- + +### 3. Example Apps + +Learn by example with real implementations of the Okto React Native SDK. + +- [**Template App**](/docs/react-native-sdk/example-apps/template-app): + A functioning reference app that showcases best practices in authentication, wallet usage, and multi-chain integration. + +- [**Example Repos**](/docs/react-native-sdk/example-apps/example-repos): + Check out some of the example repos to see what others have been building using Okto. + +--- + +### 4. Troubleshooting & FAQ + +Find solutions to common issues, debug errors, and learn how to get help when needed. + +- [**Common Issues and Error Codes**](/docs/react-native-sdk/troubleshooting-faq/sdk-error-warnings): + A comprehensive list of errors, warnings, and their resolutions. + +- [**Contact Us**](/docs/react-native-sdk/troubleshooting-faq/contact-us): + Reach out to our support team for personalized advice and additional resources. + +--- + +## Get Started + +Ready to integrate Okto into your React Native app? We suggest beginning with our [**Getting Started guide**](/docs/react-native-sdk/getting-started/new-okto-react-native-setup) to install the SDK, set up credentials, and create your first wallet interaction. Once you’ve mastered the basics, explore advanced features like raw transactions, NFT handling, or cross-chain data reads. + +If you have any questions or need extra support, feel free to reach out via our [**Contact Us**](/docs/react-native-sdk/troubleshooting-faq/contact-us) page or email us at `devrel@coindcx.com`. + +**Happy Building!** diff --git a/content/docs/react-native-sdk/meta.json b/content/docs/react-native-sdk/meta.json index 7f2f46f..3d649d2 100644 --- a/content/docs/react-native-sdk/meta.json +++ b/content/docs/react-native-sdk/meta.json @@ -1,6 +1,7 @@ { "title": "React Native", "pages": [ + "index", "getting-started", "!using-react-native-features", "advanced-sdk-config", diff --git a/content/docs/react-sdk/getting-started/meta.json b/content/docs/react-sdk/getting-started/meta.json index e3cd2f5..827c1c6 100644 --- a/content/docs/react-sdk/getting-started/meta.json +++ b/content/docs/react-sdk/getting-started/meta.json @@ -1,7 +1,7 @@ { "title": "Getting Started", "pages": [ - "overview-okto-react", - "quickstart-okto-react" + "prerequisites", + "new-okto-react-setup" ] } \ No newline at end of file diff --git a/content/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup.mdx b/content/docs/react-sdk/getting-started/new-okto-react-setup.mdx similarity index 100% rename from content/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup.mdx rename to content/docs/react-sdk/getting-started/new-okto-react-setup.mdx diff --git a/content/docs/react-sdk/getting-started/overview-okto-react.mdx b/content/docs/react-sdk/getting-started/overview-okto-react.mdx deleted file mode 100644 index 17b5bff..0000000 --- a/content/docs/react-sdk/getting-started/overview-okto-react.mdx +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Overview of the Okto React SDK -description: The Okto React SDK is the easiest way to onboard your users to web3 in your React App. -full: false ---- - -import TechnologyCard from 'app/components/mdx/TechnologyCard'; -import { IoCodeSlashOutline } from "react-icons/io5"; - -## Introduction to Okto React SDK - -The **Okto React SDK** offers a streamlined solution for integrating Web3 functionalities into your React application. With minimal setup time, you can effortlessly onboard your users to the Web3 ecosystem and provide them with a seamless experience. - -
- } - title="GitHub Repository" - subtitle="Checkout the SDK Source Code" - link="https://github.com/okto-hq/okto-sdk-react" - /> -
- -### Quick Setup - -With just ten minutes of setup, the Okto React SDK provides: - -**Out-of-the-Box Chain Support**: Integrate with a wide range of blockchain networks, including: - - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks. - - **Non-EVM Chains**: Solana and Aptos. - - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further. - -**Customizable UIs**: Tailor the onboarding experience to fit your app’s design and user flow. The SDK offers various UI components and configurations to progressively onboard users, making it easy to guide them through the Web3 integration process. - -**Comprehensive Toolkit**: Access a robust set of tools to handle: - - **Tokens**: Manage and interact with various cryptocurrencies and tokens. - - **NFTs**: Support for minting, transferring, and managing NFTs. - - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app. - -## Video Walkthrough - -
- -
- -## Conclusion - -The Okto React SDK is designed to make Web3 integration straightforward and efficient. With support for multiple chains, customizable UI options, and a comprehensive toolkit, it enables developers to create powerful Web3 applications with ease. \ No newline at end of file diff --git a/content/docs/react-sdk/getting-started/quickstart-okto-react/prerequisites.mdx b/content/docs/react-sdk/getting-started/prerequisites.mdx similarity index 100% rename from content/docs/react-sdk/getting-started/quickstart-okto-react/prerequisites.mdx rename to content/docs/react-sdk/getting-started/prerequisites.mdx diff --git a/content/docs/react-sdk/getting-started/quickstart-okto-react/meta.json b/content/docs/react-sdk/getting-started/quickstart-okto-react/meta.json deleted file mode 100644 index 632897c..0000000 --- a/content/docs/react-sdk/getting-started/quickstart-okto-react/meta.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "title": "Quickstart", - "pages": [ - "prerequisites", - "new-okto-react-setup" - ] - } \ No newline at end of file diff --git a/content/docs/react-sdk/index.mdx b/content/docs/react-sdk/index.mdx new file mode 100644 index 0000000..8c22d9a --- /dev/null +++ b/content/docs/react-sdk/index.mdx @@ -0,0 +1,118 @@ +--- +title: Okto React SDK Documentation +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"; + +## Introduction to Okto React SDK + +**Okto React SDK** is your all-in-one toolkit for integrating Web3 functionality into any React application. With minimal setup time, you can effortlessly onboard your users to the Web3 ecosystem and provide them with a seamless experience. + +
+ } + title="GitHub Repository" + subtitle="View Source Code" + link="https://github.com/okto-hq/okto-sdk-react" + /> +
+ +## Key Features + +- **Out-of-the-Box Chain Support** + + Integrate with a wide range of blockchain networks, including: + - **EVM Chains**: Ethereum, Polygon, Binance Smart Chain, and other EVM-compatible networks. + - **Non-EVM Chains**: Solana and Aptos. + - **Upcoming Support**: Cosmos will be supported soon, expanding your app's capabilities further. + +- **Customizable UI** + Leverage Okto’s built-in components or tailor the user interface to match your app’s branding, offering a seamless onboarding journey. + +- **Comprehensive Toolkit** + - **Tokens**: Manage and interact with various cryptocurrencies and tokens. + - **NFTs**: Support for minting, transferring, and managing NFTs. + - **Advanced Contract Interactions**: Execute and interact with smart contracts directly from your app. + +- **Multiple Authentication Methods** + Integrate Google OAuth, Email/Phone OTP, or JWT flows to give users multiple ways to sign in—without compromising on security. + +--- + +## Video Walkthrough + +
+ +
+ +--- + +## Navigating the React SDK Docs + +Our documentation is organized to guide you through every stage of your development journey—from setting up the SDK to implementing advanced features. Below is an overview of the key sections and what they offer: + +### 1. Getting Started + +Begin your journey by learning the essentials of setting up and configuring Okto within a new or existing React Native project. + +- [**Prerequisites**](./react-sdk/getting-started/prerequisites): Before you can begin, confirm you’ve got the necessary dependencies (Node, React, Okto API key) and set up your Google OAuth credentials if you’re using that flow. + +- [**Quickstart Guide**](./react-sdk/getting-started/new-okto-react-setup): A step-by-step walkthrough to install and initialize the SDK in less than 10 minutes. + +--- + +### 2. Using React Features + +Discover how to make the most of the Okto React SDK with prebuilt components and hooks that simplify common Web3 operations. + +- [**Components**](./react-sdk/using-react-features/components/OktoProvider): Set up the `OktoProvider` to initialize your app with all of Okto’s functionalities. + +- [**Hooks**](./react-sdk/using-react-features/hooks/useOkto): Access a host of capabilities—from token transfers to on-chain reads—through a single hook in any component. + +--- + +### 3. Advanced SDK Configurations + +Explore the advanced capabilities of the Okto React SDK to maximize the potential of your Web3 application. From multi-chain support and user authentication to token management and smart contract interactions, this section provides a deep dive into features designed for scalability and customization. + +- [**Chains and Tokens**](./react-sdk/advanced-sdk-config/chains-tokens/supported-networks): Learn how to retrieve network and token information using the Okto SDK. + +- [**Authenticate Users**](./react-sdk/advanced-sdk-config/authenticate-users/google-oauth/learn): Implement authentication login flows, including Google OAuth, email OTP, and phone OTP. + +- [**Okto Embedded Wallet**](./react-sdk/advanced-sdk-config/okto-embedded-wallet/setup-embedded-wallets/create-embedded-wallets): Build a robust in-app wallet experience with multi-chain token/NFT support, raw transactions, and custom UI screens. +--- + +### 4. Example Apps + +Learn by example with practical implementations of the Okto React SDK. + +- [**Template App**](./react-sdk/example-apps/template-app): A fully working starter dApp that demonstrates best practices for integrating authentication, wallets, and multi-chain operations. +- [**Example Repos**](./react-sdk/example-apps/example-repos): Check out some of the example repos to see what others have been building using Okto. + +--- + +### 5. Troubleshooting & FAQ + +Find solutions to common issues, debug errors, and learn how to get help when needed. + +- [**Common Issues and Error Codes**](./react-sdk/troubleshooting-faq/sdk-error-warnings): A comprehensive list of errors, warnings, and their resolutions. +- [**Contact Us**](./react-sdk/troubleshooting-faq/contact-us): Reach out to our support team for personalized assistance or additional resources. + +--- + +## Get Started + +Ready to dive in? We recommend you begin with our **[Getting Started guide](./react-sdk/getting-started/new-okto-react-setup)** to set up your environment, get your Okto API key, and spin up a simple React app. Once you’re comfortable with the basics, feel free to explore more advanced features or check out our example apps. + +If you have any questions or need assistance, don’t hesitate to reach out via our **[Contact Us](./react-sdk/troubleshooting-faq/contact-us)** page or email us at `devrel@coindcx.com`. + +**Happy Building!** diff --git a/content/docs/react-sdk/meta.json b/content/docs/react-sdk/meta.json index db89236..ca990ae 100644 --- a/content/docs/react-sdk/meta.json +++ b/content/docs/react-sdk/meta.json @@ -1,6 +1,7 @@ { "title": "React", "pages": [ + "index", "getting-started", "using-react-features", "advanced-sdk-config", diff --git a/content/docs/sdk-overview.mdx b/content/docs/sdk-overview.mdx index d722670..57fb229 100644 --- a/content/docs/sdk-overview.mdx +++ b/content/docs/sdk-overview.mdx @@ -1,5 +1,5 @@ --- -title: Overview +title: Overview of Okto SDKs 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. full: false --- @@ -17,7 +17,7 @@ The React SDK is designed for developers building Web3 applications for the web. icon={} title="Learn More" subtitle="Explore React SDK documentation" - link="/docs/react-sdk/getting-started/overview-okto-react" + link="/docs/react-sdk" /> } title="Quick Start Guide" subtitle="Get up and running quickly" - link="/docs/react-sdk/getting-started/overview-okto-react" + link="/docs/react-sdk/getting-started/new-okto-react-setup" /> } title="Learn More" subtitle="Explore React Native SDK documentation" - link="/docs/react-native-sdk/getting-started/overview-okto-react-native" + link="/docs/react-native-sdk" /> } title="Quick Start Guide" subtitle="Get up and running quickly" - link="/docs/react-native-sdk/getting-started/overview-okto-react-native" + link="/docs/react-native-sdk/getting-started/new-okto-react-native-setup" /> } title="Learn More" subtitle="Explore Flutter SDK documentation" - link="/docs/flutter-sdk/getting-started/overview-okto-flutter" + link="/docs/flutter-sdk" /> } title="Quick Start Guide" subtitle="Get up and running quickly" - link="/docs/flutter-sdk/getting-started/overview-okto-flutter" + link="/docs/flutter-sdk/getting-started/new-okto-flutter-setup" />