Merge pull request #131 from okto-hq/main

demo app
okto-hq · Nov 15, 2024 · 3956baf · 3956baf
2 parents 92eb085 + 54ee240
commit 3956baf
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 44 deletions.
diff --git a/.../docs/flutter-sdk/advanced-sdk-config/authenticate-users/auth-user-via-code.mdx b/.../docs/flutter-sdk/advanced-sdk-config/authenticate-users/auth-user-via-code.mdx
@@ -16,15 +16,15 @@ import '../../styles.css';
 
 | Methods                                                                | Description                     |                 
 |------------------------------------------------------------------------|---------------------------------|
-| [`isLoggedIn`](#check-if-the-user-is-logged-in)                      | Check if the User is Logged In  |
-| <sub><i>async</i></sub> [`authenticate`](#authenticate-a-user)              | Authenticate a User             |
-| <sub><i>async</i></sub> [`logOut`](#log-out)                                                 | Log Out                         |
+| [`isLoggedIn`](#check-if-the-user-is-logged-in)                        | Check if the User is Logged In  |
+| <sub><i>async</i></sub> [`authenticate`](#authenticate-a-user)         | Authenticate a User             |
+| <sub><i>async</i></sub> [`logOut`](#log-out)                           | Log Out                         |
 
 <div className="method-box">
 
 ## Check if the User is Logged In
 
-`isLoggedIn`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L66" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> checks if the user is currently logged in.
+`isLoggedIn`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L78" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> checks if the user is currently logged in.
 
 ### Parameters
 
@@ -42,13 +42,20 @@ There are no parameters for this function.
 
 <Accordions>
 <Accordion title="Example">
-<Tabs items={['Typescript']}>
-  <Tab value="Typescript">
-    ```typescript
-    import { useOkto, type OktoContextType} from 'okto-sdk-react';
-
-    const { isLoggedIn } = useOkto() as OktoContextType;
-    isLoggedIn().then(result => console.log(isLoggedIn ? "User is logged in" : "User is logged out"));
+<Tabs items={['Dart']}>
+  <Tab value="Dart">
+    ```dart
+    import 'package:my_app/okto.dart';
+
+    Future<void> checkLoginStatus() async {
+      bool isLoggedIn = await okto.isLoggedIn();
+      if (isLoggedIn) {
+        print('User is logged in');
+      } else {
+        print('User is logged out');
+      }
+    }
+
 ```
   </Tab>
 </Tabs>
@@ -61,13 +68,12 @@ There are no parameters for this function.
 
 ## Authenticate a User
 
-<sub><i>async</i></sub> `authenticate(idToken, callback)`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L163" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> authenticates a user using an ID token.
+<sub><i>async</i></sub> `authenticate(idToken)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L47" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> authenticates a user using an ID token.
 
 ### Parameters
 | Parameter   | Type                     | Description |
 |-------------|--------------------------|------------------------------------------------------|
 | `idToken`   | `string`                 | Token received from Google OAuth2                    | 
-| `callback`  | `function(result, error)`| Callback function to be called after authentication. | 
 
 ### Response
 
@@ -84,21 +90,69 @@ There are no parameters for this function.
 <Tabs items={['Typescript']}>
   <Tab value="Typescript">
     ```typescript
-    import {
-      useOkto,
-      type OktoContextType,
-    } from 'okto-sdk-react';
-
-    const { authenticate } = useOkto() as OktoContextType;
-    const idToken = 'USER_ID_TOKEN';
-    authenticate(idToken, (result, error) => {
-      if (result) {
-          console.log('authentication successful');
-      }
-      if (error) {
-          console.error('authentication error:', error);
+    import 'package:my_app/okto.dart';
+    import 'package:my_app/screens/home/home_page.dart';
+    import 'package:flutter/material.dart';
+
+    class LoginWithGoogle extends StatefulWidget {
+      const LoginWithGoogle({super.key});
+
+      @override
+      State<LoginWithGoogle> createState() => _LoginWithGoogleState();
+    }
+
+    class _LoginWithGoogleState extends State<LoginWithGoogle> {
+      final GoogleSignIn googleSignIn = GoogleSignIn(
+        scopes: [
+          'email',
+          'https://www.googleapis.com/auth/userinfo.profile',
+          'openid',
+        ],
+      );
+      @override
+      Widget build(BuildContext context) {
+        return Scaffold(
+          backgroundColor: const Color(0xff5166EE),
+          body: SafeArea(
+            child: Column(
+              children: [
+                Expanded(
+                  child: Container(
+                    alignment: Alignment.center,
+                    margin: const EdgeInsets.all(40),
+                    child: const Text(
+                      'Login with google',
+                      style: TextStyle(color: Colors.white, fontWeight: FontWeight.w800, fontSize: 30),
+                    ),
+                  ),
+                ),
+                ElevatedButton(
+                    onPressed: () async {
+                      try {
+                        final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
+                        final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;
+                        if (googleAuth != null) {
+                          final String? idToken = googleAuth.idToken;
+                          await okto!.authenticate(idToken: idToken!);
+                          Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const HomePage()));
+                        }
+                      } catch (e) {
+                        print(e.toString());
+                        setState(() {
+                          error = e.toString();
+                        });
+                      }
+                    },
+                    child: const Text('Login with Google')),
+                Text(error),
+                const SizedBox(height: 20)
+              ],
+            ),
+          ),
+        );
       }
-  });
+    }
+
 ```
   </Tab>
 </Tabs>
@@ -111,7 +165,7 @@ There are no parameters for this function.
 
 ## Log Out
 
-<sub><i>async</i></sub> `logOut()`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L476" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> logs out the current user from the session.
+<sub><i>async</i></sub> `logOut()`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L295" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> logs out the current user from the session.
 
 ### Parameters
 
@@ -131,10 +185,35 @@ There are no parameters for this function.
 <Tabs items={['Typescript']}>
   <Tab value="Typescript">
    ```typescript
-  import { useOkto, type OktoContextType} from 'okto-sdk-react';
-
-  const { logout } = useOkto() as OktoContextType;
-  logout().then(result => console.log("logged out"));
+  import 'package:flutter/material.dart';
+  import 'package:okto_flutter_sdk/okto_wallet_sdk.dart';
+  import 'package:okto_test/okto.dart';
+
+  class OktoWalletFlutter extends StatefulWidget {
+    const OktoWalletFlutter({super.key});
+
+    @override
+    State<OktoWalletFlutter> createState() => _OktoWalletFlutter();
+  }
+
+  class _OktoWalletFlutter extends State<OktoWalletFlutter> {
+    @override
+    Widget build(BuildContext context) {
+      return Scaffold(
+        body: Center(
+          child: TextButton(
+              onPressed: () async {
+                try {
+                  await okto.logout();
+                } catch (e) {
+                  print(e);
+                }
+              },
+              child: const Text('logout')),
+        ),
+      );
+    }
+  }
   ```
   </Tab>
 </Tabs>

diff --git a/...sdk-config/okto-embedded-wallet/built-in-ui-screens/show-ui-screen-via-code.mdx b/...sdk-config/okto-embedded-wallet/built-in-ui-screens/show-ui-screen-via-code.mdx
@@ -22,7 +22,7 @@ import '../../../styles.css';
 
 ## Show modal
 
-`openBottomSheet()`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L480" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> displays the widget modal.
+`openBottomSheet()`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L300" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> displays the widget modal.
 
 ### Parameters
 

diff --git a/...nced-sdk-config/okto-embedded-wallet/use-user-embedded-wallet/transfer-nfts.mdx b/...nced-sdk-config/okto-embedded-wallet/use-user-embedded-wallet/transfer-nfts.mdx
@@ -23,7 +23,7 @@ import '../../../styles.css';
 
 ## Transfer NFTs
 
-<sub><i>async</i></sub> `transferNft(data)`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L384" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> transfers a NFT based on the provided data.
+<sub><i>async</i></sub> `transferNft(data)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L220" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> transfers a NFT based on the provided data.
 
 ### Parameters
 
@@ -182,7 +182,7 @@ import '../../../styles.css';
 
 ## Get NFT order details
 
-<sub><i>async</i></sub> `orderDetailsNft(query)`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L320" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> fetches details of a specific NFT order based on the provided query.
+<sub><i>async</i></sub> `orderDetailsNft(query)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L249" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> fetches details of a specific NFT order based on the provided query.
 
 ### Parameters
 

diff --git a/...ed-sdk-config/okto-embedded-wallet/use-user-embedded-wallet/transfer-tokens.mdx b/...ed-sdk-config/okto-embedded-wallet/use-user-embedded-wallet/transfer-tokens.mdx
@@ -23,7 +23,7 @@ import '../../../styles.css';
 
 ## Transfer tokens
 
-<sub><i>async</i></sub> `transferTokens(data)`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L344" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> transfers tokens based on the provided data.
+<sub><i>async</i></sub> `transferTokens(data)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L165" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> transfers tokens based on the provided data.
 
 ### Parameters
 
@@ -165,7 +165,7 @@ import '../../../styles.css';
 
 ## Fetch order history
 
-<sub><i>async</i></sub> `orderHistory(query)`<a href="https://github.com/okto-hq/okto-sdk-react/blob/main/src/OktoProvider.tsx#L315" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> fetches the order history based on the provided query.
+<sub><i>async</i></sub> `orderHistory(query)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L187" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> fetches the order history based on the provided query.
 
 ### Parameters
 

diff --git a/content/docs/index.mdx b/content/docs/index.mdx
@@ -80,7 +80,7 @@ With Okto SDK, developers can transform their Web2 applications into Web3-powere
       icon={<MousePointer2 size={"1.5rem"}/>}
       title="Interactive demo" 
       subtitle="Experience features in real-time" 
-      link="https://okto-sdk-demo-app-weld.vercel.app/"
+      link="https://demo.okto.tech/"
   />
 
    <TechnologyCard 

diff --git a/content/docs/introduction-to-okto/overview.mdx b/content/docs/introduction-to-okto/overview.mdx
@@ -75,7 +75,7 @@ Okto SDK is the fastest and easiest way a developer can build on Web3. Okto SDK
       icon={<MousePointer2 size={"1.5rem"}/>}
       title="Interactive demo" 
       subtitle="Experience features in real-time" 
-      link="https://okto-sdk-demo-app-weld.vercel.app/"
+      link="https://demo.okto.tech/"
   />
 
    <TechnologyCard 

diff --git a/content/docs/meta.json b/content/docs/meta.json
@@ -2,7 +2,7 @@
     "title": "Okto SDK",
     "pages": [
       "---Basics---",
-      "overview",
+      "index",
       "quickstart",
       "introduction-to-okto",
       "developer-admin-dashboard",

diff --git a/content/docs/overview.mdx b/content/docs/overview.mdx
@@ -1,6 +1,9 @@
 ---
 title: Overview
-description: 'Welcome to Okto’s documentation ✦ Learn how to get started with Okto SDK in your project. Then, explore Okto’s main concepts and discover additional resources to help you grow and maintain your app powered by Okto.'
+description: ✦ Welcome to Okto’s documentation ✦ Get started with Okto SDK in
+  your project. Learn the basics, explore how Okto works, and find helpful
+  resources to build and improve your app. We're here to guide you from your
+  first steps to creating amazing Web3 experiences.
 full: false
 icon: Star
 ---
@@ -52,7 +55,9 @@ import { IoDocumentOutline } from "react-icons/io5";
 
 ## What is Okto SDK?
 
-Okto SDK is the fastest and easiest way a developer can build on Web3. Okto SDK offers interoperable embedded wallets for developers to onboard users on Web3 in a web2 like experience. Developer can convert their web2 applications to web3 in a few simple steps.
+Okto SDK provides developers with a fast and seamless way to build on Web3. It offers interoperable embedded wallets, enabling a Web2-like user experience while onboarding users to Web3 effortlessly. 
+
+With Okto SDK, developers can transform their Web2 applications into Web3-powered platforms in just a few steps, without compromising user-friendliness. This powerful toolkit simplifies cross-chain interactions and ensures a smooth transition for both developers and users, accelerating Web3 adoption and integration.
 
 ## Learn More 
 
@@ -75,7 +80,7 @@ Okto SDK is the fastest and easiest way a developer can build on Web3. Okto SDK
       icon={<MousePointer2 size={"1.5rem"}/>}
       title="Interactive demo" 
       subtitle="Experience features in real-time" 
-      link="https://okto-sdk-demo-app-weld.vercel.app/"
+      link="https://demo.okto.tech/"
   />
 
    <TechnologyCard 
@@ -101,4 +106,4 @@ Okto SDK is the fastest and easiest way a developer can build on Web3. Okto SDK
 <Accordion title="What can I build with Okto?">
   You can integrate Okto SDK intro mobile app & web apps to add web3 functionality to your app without building things from scratch.
 </Accordion>
-</Accordions>
+</Accordions>