Skip to content

Commit

Permalink
Merge pull request #201 from okto-hq/main
Browse files Browse the repository at this point in the history
new sdk intro pages, showcase icon fix
  • Loading branch information
oviawork authored Jan 2, 2025
2 parents c268c17 + d90c40e commit a31fa63
Show file tree
Hide file tree
Showing 6 changed files with 327 additions and 12 deletions.
44 changes: 43 additions & 1 deletion app/showcase/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,46 @@ export const LinkLogo = () => (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
{/* SVG content */}
</svg>
);
);

export const HackIdeasIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="20" height="20" strokeWidth="2.5" stroke="currentColor" fill="none">
<line x1="50.4" y1="24.38" x2="58.3" y2="23.14" />
<line x1="47.93" y1="17.11" x2="52.87" y2="14.2" />
<line x1="42.89" y1="11.73" x2="46.21" y2="4.51" />
<line x1="33.45" y1="10.69" x2="33.41" y2="4.96" />
<line x1="24.29" y1="12.09" x2="21.62" y2="4.51" />
<line x1="17.99" y1="17.03" x2="12.96" y2="14.29" />
<line x1="15.78" y1="23.97" x2="8.03" y2="22.66" />
<path d="M26.22 45.47c0-5.16-3.19-9.49-4.91-12.69A12.24 12.24 0 0 1 19.85 27c0-6.79 6.21-12.3 13-12.3" />
<path d="M39.48 45.47c0-5.16 3.19-9.49 4.91-12.69A12.24 12.24 0 0 0 45.85 27c0-6.79-6.21-12.3-13-12.3" />
<rect x="23.63" y="45.19" width="18.93" height="4.25" rx="2.12" />
<rect x="24.79" y="49.43" width="16.61" height="4.25" rx="2.12" />
<path d="M36.32 53.68v.84a3.23 3.23 0 1 1-6.44 0v-.84" />
<path d="M24.57 26.25a7.5 7.5 0 0 1 7.88-7.11" />
</svg>
);

export const AddProjectIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
);

export const DollarSignIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20" // Set the desired width
height="20" // Set the desired height
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="lucide lucide-dollar-sign"
>
<line x1="12" x2="12" y1="2" y2="22" />
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
);
18 changes: 10 additions & 8 deletions app/showcase/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { DollarSign } from 'lucide-react';
import { GitHubIcon, LinkLogo } from './icons';
import { GitHubIcon, LinkLogo, HackIdeasIcon, AddProjectIcon, DollarSignIcon } from './icons';
import { showcases } from './projects';

// SDK type for the tabs
Expand Down Expand Up @@ -95,18 +94,21 @@ export default function Showcase() {
{/* Right Side: Buttons */}
<div className="flex lg:flex-col flex-wrap lg:items-end gap-4 lg:ml-auto">
<ULink href="https://docs.google.com/document/d/1zDPUZoHrI4hpdOUgINWkILJJQPrOi3VqGbd2dpyIrdM/edit?usp=sharing" className="text-inherit">
<Button className="flex gap-1 rounded-full" variant="outline">
<DollarSign size={17} /> Hack Ideas
<Button className="flex gap-2 rounded-full w-60 items-center justify-center" variant="outline">
<HackIdeasIcon />
Hack Ideas
</Button>
</ULink>
<ULink href="https://forms.gle/VN19AYHnvm7V5qe2A" className="text-inherit">
<Button className="flex gap-1 rounded-full" variant="outline">
<DollarSign size={17} /> Add your project
<Button className="flex gap-1 rounded-full w-60" variant="outline">
<AddProjectIcon />
Add Your Project
</Button>
</ULink>
<ULink href="https://teamcoindcx.typeform.com/to/CvPAQNAU" className="text-inherit">
<Button className="flex gap-1 rounded-full" variant="outline">
<DollarSign size={17} /> Apply for Okto Grants
<Button className="flex gap-1 rounded-full w-60" variant="outline">
<DollarSignIcon />
Apply for Okto Grants
</Button>
</ULink>
</div>
Expand Down
6 changes: 3 additions & 3 deletions content/docs/introduction-to-okto/future-sdk-scope.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Okto is working on creating a seamless connection between the main Okto app and

To link the Okto app profile with the SDK:

1. **Setup SDK**: Integrate the Okto SDK into your application by following the setup instructions provided in the [Okto SDK Documentation](https://okto-sdk-docs-new.vercel.app/docs/introduction-to-okto/future-sdk-scope#).
1. **Setup SDK**: Integrate the Okto SDK into your application by following the setup instructions provided in the [Okto SDK Documentation](/docs/react-sdk/getting-started/quickstart-okto-react/new-okto-react-setup).
2. **Authenticate Profile**: Use the SDK to authenticate users and link their profiles with the Okto app. This involves passing user credentials and ensuring secure communication between the app and the SDK.
3. **Synchronize Data**: Ensure that user wallet data and profile information are consistently updated across both platforms.

Expand All @@ -22,8 +22,8 @@ To link the Okto app profile with the SDK:
Okto is committed to decentralization, working towards creating a more open and transparent ecosystem. Our **path to decentralization** includes the development of the Okto chain, which will facilitate a more decentralized approach to managing transactions and user data.

* **Okto Chain**: The Okto chain is a critical component in our decentralization strategy. It aims to enhance security, scalability, and decentralization within the Okto ecosystem.
* **Whitepaper**: Learn more about our vision for the Okto chain in the [Okto Chain Whitepaper](https://okto-sdk-docs-new.vercel.app/docs/introduction-to-okto/future-sdk-scope#).
* **Blogs**: Stay updated with our progress and insights by reading our [Okto Decentralization Blogs](https://okto-sdk-docs-new.vercel.app/docs/introduction-to-okto/future-sdk-scope#).
* **Whitepaper**: Learn more about our vision for the Okto chain in the [Okto Chain Whitepaper](http://whitepaper.okto.tech/).
* **Blogs**: Stay updated with our progress and insights by reading the [Okto Blogs](https://www.okto.tech/blog).

## **Users' Wallet Ecosystem Inside Okto**

Expand Down
2 changes: 2 additions & 0 deletions content/docs/introduction-to-okto/meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"pages": [
"okto-universe",
"overview-embedded-wallets",
"okto-sdk",
"okto-sdk-architecture",
"use-cases",
"chains-supported-tokens",
"okto-vendor-user"
],
Expand Down
113 changes: 113 additions & 0 deletions content/docs/introduction-to-okto/okto-sdk.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
---
title: Introduction to Okto SDK
description: Learn about the Okto SDK and how it simplifies blockchain interactions for both developers and users.
full: false
---

import { Callout } from 'fumadocs-ui/components/callout';

## What is Okto SDK?

The **Okto SDK** is a powerful chain abstraction toolkit that transforms how applications, both Web2 and Web3, interact with blockchain technology. It lets developers build blockchain-enabled applications using familiar development patterns, delivering user experiences that match the simplicity of traditional web apps while integrating advanced blockchain capabilities.

By acting as a comprehensive abstraction layer, the Okto SDK automatically handles most blockchain complexities. Rather than integrating multiple protocols or manually managing network details, developers can rely on Okto’s **plug-and-play** solution to create sophisticated Web3 features—ranging from token transfers to multi-chain interactions—via a streamlined, developer-friendly API.

What sets **Okto** apart is its ability to simplify blockchain development for both developers and end users. For developers, Okto hides the underlying blockchain operations—like wallet management, multi-chain support, and transaction handling—behind straightforward APIs. For end users, this unlocks near–Web2-like interactions, including single-click transactions and frictionless cross-chain asset management.

---

## What Makes Okto SDK Special?

### 1. Easy Authentication

Traditionally, blockchain applications require users to navigate complex steps: installing browser extensions, managing private keys, and remembering seed phrases. Okto changes this paradigm by providing an authentication system that feels familiar to users—such as logging in with Google or Email—while preserving the secure nature of blockchain operations.

Under the hood, **Multi-Party Computation (MPC)** handles user key creation and storage. When someone signs in with their preferred method (e.g., Google OAuth or email verification), Okto automatically provisions and manages their blockchain wallet in the background. This ensures:

- A **streamlined user onboarding** that requires minimal blockchain knowledge
- **Robust security** through MPC, eliminating single points of compromise
- **Non-disruptive** transitions between regular app usage and blockchain-enabled features

<Callout title="Learn More">
Check out our detailed guides on [Google OAuth](../react-sdk/advanced-sdk-config/authenticate-users/google-oauth/learn), [Email OTP](../react-sdk/advanced-sdk-config/authenticate-users/email-otp/learn), or [Phone OTP](../react-sdk/advanced-sdk-config/authenticate-users/phone-otp/learn) implementations to set up these flows.
</Callout>

### 2. Simple Transactions

Making blockchain transactions work properly is usually one of the hardest parts of development. Developers need to handle complex payload constructions, gas estimations where the system is designed for high fluctuations, different blockchain ecosystems, and complex error cases. Okto makes this simple.

When your app needs to send tokens or interact with smart contracts, you simply specify what you want to do, and Okto takes care of the rest:

- Lets you provide the desired blockchain network as a parameter, eliminating the need to handle node providers, connection setups, or chain-specific configurations
- Automatically estimates and manages gas fees
- Abstracts transaction lifecycle management, including retrying failed transactions and monitoring their status

As a developer, you define the **what** (e.g., "transfer tokens" or "invoke a smart contract"), and Okto handles the **how** behind the scenes, offloading most blockchain-specific boilerplate and keeping your codebase clean.

### 3. Managing Different Blockchains

Many Web3 apps focus on a single chain due to the complexity of supporting multiple ecosystems. With Okto, multi-chain interactions become straightforward. Whether your app is on **Ethereum**, **Polygon**, **Aptos**, or another chain, Okto provides one consistent interface to handle them all.

This means you can:

- Seamlessly move assets across networks
- Unify multi-chain token balances
- Interact with multiple protocols

…all without retooling the entire application.

---

## Integration Scenarios

### Web2 Projects Moving to Web3

For Web2 projects looking to integrate blockchain features, Okto provides a gradual, low-friction path. The SDK allows you to maintain your existing application architecture while adding Web3 capabilities. This approach is particularly valuable for:

- **E-commerce Platforms**: Accept crypto payments or introduce NFT-based loyalty rewards without rewriting your storefront
- **Content Platforms**: Gate premium content with tokens or let creators issue NFTs to monetize their work
- **Social Applications**: Enhance user engagement via token rewards, NFT collectables, or on-chain identities

Throughout this incremental adoption, users continue to enjoy Web2-like UX while gaining access to new blockchain features.

### Web3 Projects: Expanding Capabilities

For existing Web3 projects, Okto simplifies multi-chain support and helps you reach a broader user base. Key benefits include:

- **Multi-chain Expansion**: Extend your dApp from one primary blockchain to multiple networks without additional bridging solutions
- **Improved User Experience**: Implement simplified onboarding (social logins, OTPs) and frictionless in-app transactions
- **Security**: Leverage Okto's infrastructure for key management and transaction signing

<Callout title="Note">
Currently, Okto only supports the MPC-embedded wallet, which is a smart contract account with delegated custody. If your Web3 application has users with EOA wallets or other self-custody wallets, we will soon introduce support for *connect wallet* and *import wallet* features.

Integrating Okto into existing Web3 dApps replaces the current interaction libraries (e.g., `ethers.js`, `viem`, `solanaweb3.js`, `aptos-ts-sdk`) with a single Okto library. To make this migration process even simpler, we are bringing built-in compatibility for the most popular libraries within Okto itself. This ensures minimal code migration, allowing existing apps to quickly enjoy the benefits of Okto.
</Callout>

---

## Why Developers Should Choose Okto SDK

### Practical Advantages

- **Accelerated Development**: By offloading chain selection, transaction orchestration, and wallet management to the SDK, developers can focus on core application logic. With Okto, app development time can be reduced by up to 90%.
- **Reduced Complexity**: No need to manually configure network endpoints, handle seed phrases, or navigate different chain quirks.
- **Familiar Patterns**: Use standard REST/JS approaches instead of diving deep into raw blockchain logic.

### Technical Benefits

- **Unified Interface for Multi-Chain Operations**: Manage tokens, contract calls, bridging, and more across diverse ecosystems via a single API.
- **Automatic Transaction Lifecycle**: Okto handles gas, retries, and asynchronous feedback so you don’t have to.
- **Robust User Authentication**: MPC ensures high-level security without imposing complicated UI and wallet workflows on the user.

### Business Benefits

- **Faster Time-to-Market**: Shortened development cycles mean you can deploy blockchain features ahead of competitors.
- **Lower Maintenance Overhead**: Okto’s managed environment and continuous upgrades reduce the headache of staying current with chain or wallet protocol changes.
- **Better User Adoption**: A streamlined UX typically translates to higher customer satisfaction, retention, and conversion rates for any blockchain-based product.

---

## Summary

The Okto SDK provides a bridge between the complexity of blockchain networks and the streamlined, user-friendly experiences that modern applications demand. By managing core blockchain tasks—**key custody**, **cross-chain support**, **transaction orchestration**, and **robust authentication**—Okto enables faster development, broader functionality, and enhanced security for any dApp or Web2 app looking to embrace Web3 capabilities.
Loading

0 comments on commit a31fa63

Please sign in to comment.