Merge pull request #204 from okto-hq/zaje/blog

Add Building the Future with Okto SDK Blog

app/blogs/[slug]/page.tsx

@@ -1,13 +1,29 @@
 import { blogSource } from '@/app/source';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { notFound } from 'next/navigation';
+import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
 
-export default async function BlogPost({ params }: { params: { slug: string } }) {
-  const post = await blogSource.getPage([params.slug]);
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
+}) {
+  const params = await props.params;
+  const page = blogSource.getPage([params.slug]);
+
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}
 
-  if (!post) {
-    notFound();
-  }
+export default async function BlogPost(props: {
+  params: Promise<{ slug: string }>;
+}) {
+  const params = await props.params;
+  const post = blogSource.getPage([params.slug]);
 
+  if (!post) notFound();
   const MDXContent = post.data.body;
 
   const noiseSvg = `<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'>
@@ -34,6 +50,7 @@ export default async function BlogPost({ params }: { params: { slug: string } })
           <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 dark:text-white mb-4">
             {post.data.title}
           </h1>
+          <p className="mb-4 text-white">{post.data.description}</p>
           {post.data.date && (
             <p className="text-sm text-black/70 dark:text-white/70">
               {new Date(post.data.date).toLocaleDateString('en-US', {
@@ -47,15 +64,17 @@ export default async function BlogPost({ params }: { params: { slug: string } })
       </div>
 
       <article className="prose prose-lg dark:prose-invert mx-auto mb-12 p-6 rounded-xl bg-white dark:bg-inherit shadow-sm">
-        {post.data.description && (
-          <p className="text-lg text-gray-600 dark:text-gray-300 not-prose mb-8 font-medium">
-            {post.data.description}
-          </p>
-        )}
-        <div className="mdx-content">
-          <MDXContent />
+      <div className="prose min-w-0">
+          <InlineTOC items={post.data.toc} />
+          <MDXContent components={defaultMdxComponents} />
         </div>
       </article>
     </main>
   );
-} 
+} 
+
+export function generateStaticParams(): { slug: string }[] {
+  return blogSource.getPages().map((page) => ({
+    slug: page.slugs[0],
+  }));
+}

app/blogs/page.tsx

@@ -9,6 +9,12 @@ export default async function BlogsPage() {
         notFound();
     }
 
+    const sortedBlogs = blogs.sort((a, b) => {
+        const dateA = new Date(a.data.date || ''); 
+        const dateB = new Date(b.data.date || ''); 
+        return dateB.getTime() - dateA.getTime(); // Descending order
+    });
+
     const noiseSvg = `<svg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'>
     <filter id='noiseFilter'>
       <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/>
@@ -38,7 +44,7 @@ export default async function BlogsPage() {
             </div>
 
             <div className="grid grid-cols-1 border md:grid-cols-2 lg:grid-cols-3 rounded-md">
-                {blogs.map((post) => (
+                {sortedBlogs.map((post) => (
                     <Link
                         key={post.url}
                         href={post.url}

content/blogs/building-the-future-with-okto-sdk.mdx

@@ -0,0 +1,124 @@
+---
+title: "Building the Future with Okto SDK: Simplifying Blockchain for Everyone"
+description: Learn how Okto SDK simplifies blockchain development, enabling developers to build powerful Web3 applications with ease.
+date: 2024-12-14
+author: Ejaaz
+---
+
+![Building with Okto SDK](/images/building_the_future_with_okto_sdk_blog_cover.png)
+
+<em><strong>TL;DR:</strong> Okto SDK enables developers to build Web3 apps with Web2-like ease, offering features like easy authentication, simple transactions, and cross-chain interoperability. Whether you're creating consumer apps, DeFi protocols, or blockchain games, Okto SDK accelerates development and enhances user experiences. This blog covers what makes Okto special, real-world use cases, and how to get started in 3 simple steps.</em>
+
+Blockchain technology is revolutionizing the way we interact with the digital world, but let’s face it—it can be complicated. For developers, integrating blockchain features into apps often means dealing with complex protocols, managing multiple chains, and handling tricky user onboarding processes. For users, it can mean navigating confusing wallet setups, remembering seed phrases, and dealing with clunky transaction flows. Enter **Okto SDK**, a game-changing toolkit designed to make blockchain development and user experiences as simple as using any regular app.
+
+---
+
+## What is Okto SDK?
+
+**Okto SDK** is a powerful toolkit that acts as a bridge between traditional web development and blockchain technology. It’s designed to help developers build blockchain-enabled applications without needing to dive deep into the complexities of blockchain networks. Whether you’re building a Web2 app that’s dipping its toes into Web3 or a full-fledged decentralized application (dApp), Okto SDK makes the process smoother and faster.
+
+At its core, Okto SDK is a **chain abstraction layer**. This means it handles all the heavy lifting of blockchain operations—like wallet management, transaction handling, and multi-chain support—so developers can focus on creating great user experiences. For end users, this translates to seamless, Web2-like interactions, such as single-click transactions and easy cross-chain asset management.
+
+---
+
+## What Makes Okto SDK Stand Out?
+
+### 1. Easy Authentication
+
+One of the biggest hurdles in blockchain adoption is user onboarding. Traditional blockchain apps require users to install browser extensions, manage private keys, and remember seed phrases. Okto changes this by offering familiar authentication methods like **Google OAuth**, **Email OTP**, and **Phone OTP**.
+
+Behind the scenes, Okto uses **Multi-Party Computation (MPC)** to securely create and manage user wallets. This means users can log in with their preferred method, and Okto takes care of the rest—no seed phrases, no complicated setups, all while ensuring secure handling and maintenance of user wallets. The result? A smooth onboarding experience that feels just like logging into any regular app.
+
+### 2. Simple Transactions
+
+Blockchain transactions can be a headache for developers. From gas fee estimations to handling different blockchain ecosystems, there’s a lot that can go wrong. Okto simplifies this process by abstracting away the complexity.
+
+For example, if your app needs to send tokens or interact with a smart contract, you simply tell Okto what you want to do, and it handles the rest. It manages payload creations based on the ecosystem you are interacting with, estimating gas fees in a volatile environment, retries failed transactions, and monitors transaction statuses—all behind the scenes. This allows developers to focus on building features rather than wrestling with blockchain intricacies.
+
+### 3. Multi-Chain Support
+
+Many blockchain apps are limited to a single chain because supporting multiple ecosystems is complex and time-consuming. Okto changes this by providing a unified interface for interacting with multiple blockchains. Whether your app is on **Ethereum**, **Polygon**, **Aptos**, or another chain, Okto makes it easy to manage assets and transactions across networks.
+
+This opens up exciting possibilities, like seamless cross-chain asset transfers, unified token balances, and interactions with multiple protocols—all without needing to rewrite your app for each chain.
+
+---
+
+## Real-World Use Cases for Okto SDK
+
+Now that we’ve covered what Okto SDK can do, let’s look at some practical ways you can use it to build amazing applications.
+
+### 1. Consumer Apps with Web3 Features
+
+Imagine building a consumer app that feels as simple as Instagram or TikTok but has blockchain-powered features like token rewards or NFT collectibles. With Okto, you can onboard users with familiar logins (like Google or email) and automatically create wallets for them. This makes it easy to integrate features like token gating, NFT-based memberships, or even crypto payments—all without overwhelming your users.
+
+### 2. DeFi Protocols with Mobile-Friendly Interfaces
+
+Decentralized finance (DeFi) is one of the most exciting areas of blockchain, but it’s often held back by complex user interfaces. Okto makes it easy to build mobile-friendly DeFi apps where users can stake, borrow, or trade assets with just a few taps. Okto allows the option of sponsoring gas fees, transaction retries, and multi-chain interactions, so your users can focus on managing their finances, not wrestling with the app or paying additional charges.
+
+### 3. Blockchain-Based Gaming
+
+Blockchain gaming is booming, with players owning in-game assets like NFTs and tokens. Okto makes it easy to build games where players can securely manage their assets, trade them across chains, and even use them in multiple games with Okto’s interoperable wallets. With Okto’s MPC-backed wallets, players don’t have to worry about losing their valuable items, and developers can focus on creating engaging gameplay.
+
+### 4. Multi-Chain Super Apps
+
+What if you could build an app that lets users manage assets, NFTs, and transactions across multiple blockchains in one place? With Okto, this is possible. You can create a unified dashboard that aggregates user balances, handles cross-chain swaps, and even automates complex processes like yield harvesting and rebalancing.
+
+### 5. Chatbots for DeFi and Crypto
+
+Chatbots are becoming increasingly popular for managing crypto and DeFi activities. With Okto, you can build bots that handle tasks like trading, staking, or fetching user balances—all within popular messaging apps like Telegram or Discord. Okto’s APIs make it easy to integrate blockchain functionality into your bot, so users can manage their crypto without leaving their favorite chat app.
+
+---
+
+## Why Developers Love Okto SDK
+
+Okto SDK isn’t just a tool—it’s a developer’s best friend. It offers:
+
+- **Faster Development:** By handling blockchain complexities, Okto lets developers focus on building features, not boilerplate code. This can cut development time by up to 90%.
+- **Simplified Multi-Chain Support:** Okto’s unified interface makes it easy to build apps that work across multiple blockchains.
+- **Better User Experiences:** With Okto, you can create apps that feel as simple and intuitive as any Web2 app, making it easier to onboard new users.
+- **Robust Security:** Okto’s MPC-based wallets ensure user accounts are secure without requiring users to manage private keys or seed phrases.
+
+---
+
+## Getting Started with Okto SDK
+
+You can start building with Okto in just **3 simple steps**:
+
+1. **Get Your App Secret (API Key):**  
+   Go to the [Okto Dashboard](https://dashboard.okto.tech/login) and grab your **App Secret**. This key is essential for authenticating your API requests and integrating Okto’s features into your app.
+
+2. **Enable Chains and Tokens:**  
+   On the dashboard, enable the **chains and tokens** you want to build within your dApp. This ensures your app can interact seamlessly with the supported blockchain networks.
+
+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.  
+   - **[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.
+
+---
+
+### For More Information and Detailed Steps
+
+1. **Check Out the Getting Started Blog:**  
+   For a detailed step-by-step guide, read the [Getting Started with Okto SDK blog](https://docs.okto.tech/blogs/getting-started-with-okto). It covers everything from setting up your Okto App Secret to integrating authentication methods and choosing the right SDK for your project.
+
+2. **Explore the Docs:**  
+   Dive into the [SDK Overview](https://docs.okto.tech/docs/sdk-overview) and [API Reference](https://docs.okto.tech/api-docs) to learn more about Okto’s features and how to use them.
+
+3. **Build a Proof of Concept:**  
+   Use one of Okto’s [quickstart templates](https://github.com/okto-hq/okto-sdk-react-template-app) to experiment with the SDK and see how it works.
+
+4. **Scale Your App:**  
+   Once you’ve built a basic prototype, you can add more features, like **NFT minting**, **cross-chain swaps**, or **advanced transaction flows**.
+
+---
+
+## Conclusion
+
+Blockchain technology holds immense potential, but its complexity has been a barrier to widespread adoption. Okto SDK changes that by making blockchain development accessible and user-friendly. Whether you’re building a consumer app, a DeFi protocol, or a blockchain-based game, Okto provides the tools you need to create seamless, secure, and scalable applications.
+
+So, what are you waiting for? Dive into the world of Web3 with Okto SDK and start building the future today. Happy coding! 🚀

content/blogs/getting-started-with-okto.mdx

@@ -1,7 +1,7 @@
 ---
-title: Getting Started with Okto
+title: Getting Started with Okto SDK
 description: Learn how to get started with Okto SDKs, check out the different available SDKs, and set up your first project using it.
-date: 2024-12-13
+date: 2024-12-15
 author: Ejaaz
 ---
 

content/blogs/interact-tokens-with-okto.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Interacting with Tokens on Okto SDK: A Comprehensive Guide"
 description: Interacting with tokens on Okto SDK is a crucial part of building Web3 applications. This guide provides a comprehensive overview of how to interact with tokens using Okto SDK, including how to get token balances, send tokens, and more.
-date: 2024-12-15
+date: 2024-12-16
 author: Ejaaz
 ---