diff --git a/app/components/mdx/QuickStartBanner.tsx b/app/components/mdx/QuickStartBanner.tsx index 37a05fe..5833a4f 100644 --- a/app/components/mdx/QuickStartBanner.tsx +++ b/app/components/mdx/QuickStartBanner.tsx @@ -16,7 +16,7 @@ export default function QuickStartBanner() {
+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 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. + + + + + + ## 1. Create Your NextJS App + + 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: + + ```bash title="bash" + npx create-next-app@latest my-okto-app + cd my-okto-app + ``` + + + 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. + + + + + ## 2. Install Dependencies + + 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: + + + + ```bash + npm i @okto_web3/react-sdk next-auth + ``` + + + ```bash + pnpm add @okto_web3/react-sdk next-auth + ``` + + + ```bash + yarn add @okto_web3/react-sdk next-auth + ``` + + + + + + + ## 3. Set up Environment Variables + + Create a `.env` file in your project root and add the following environment variables: + + ```bash title=".env" + 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 # Generate using: openssl rand -base64 32 + + # 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 all placeholder values (`YOUR_...`) with your actual keys. + - Never commit your `.env` file to version control. Add it to your `.gitignore`. + + + + + + ## 4. Set Up the Okto Provider + + Create a provider component to initialize the Okto SDK and authentication context. Create a file at `app/components/providers.tsx` with the following code: + + ```tsx title="app/components/providers.tsx" + "use client"; + import { SessionProvider } from "next-auth/react"; + import { OktoProvider } from "@okto_web3/react-sdk"; + import React from "react"; + + const config = { // Configuration for Okto SDK + environment: process.env.NEXT_PUBLIC_ENVIRONMENT || 'sandbox', // Environment 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 }) { + return ( + + + {children} + + + ); + } + + 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. + + + + + + + ## 5. Configure Google Authentication + + Set up NextAuth using Google as the provider. Create the file at `app/api/auth/[...nextauth]/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"; + import GoogleProvider from "next-auth/providers/google"; + import type { AuthOptions } from "next-auth"; + + export const authOptions: AuthOptions = { + secret: process.env.AUTH_SECRET, + providers: [ + GoogleProvider({ // Configure Google Provider + clientId: process.env.GOOGLE_CLIENT_ID!, // From .env + clientSecret: process.env.GOOGLE_CLIENT_SECRET!, // From .env + }), + ], + session: { + strategy: "jwt", + }, + callbacks: { + async jwt({ token, user, account }) { + if (account) { + token.id_token = account.id_token; + } + return token; + }, + async session({ session, token }) { + //@ts-ignore + session.id_token = token.id_token; + return session; + }, + }, + }; + + const handler = NextAuth(authOptions); + + export { handler as GET, handler as POST }; + ``` + + 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. + + + + + + ## 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. + + + + + + ## 7. Create a Sample Login Page (`page.tsx`) + + 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"; + import { useSession, signIn, signOut } from "next-auth/react"; + + export function LoginButton() { + const { data: session } = useSession(); // Get session data + + const handleLogin = () => { + signIn("google"); // Trigger Google sign-in + }; + + return ( + + ); + } + ``` + + Using the `signIn` method from NextAuth, this button starts the Google authentication flow. No extra configuration is required on the client side. + + + ### 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"; + import React, { useState } from "react"; + import { useOkto } from "@okto_web3/react-sdk"; + + interface GetButtonProps { + title: string; + apiFn: any; + } + + const GetButton: React.FC = ({ title, apiFn }) => { + const [modalVisible, setModalVisible] = useState(false); + const [resultData, setResultData] = useState(""); + const oktoClient = useOkto(); + + const handleButtonClick = () => { + apiFn(oktoClient) + .then((result: any) => { + console.log(`${title}:`, result); + const resultData = JSON.stringify(result, null, 2); + setResultData(resultData !== "null" ? resultData : "No result"); + setModalVisible(true); + }) + .catch((error: any) => { + console.error(`${title} error:`, error); + setResultData(`error: ${error}`); + setModalVisible(true); + }); + }; + + const handleClose = () => setModalVisible(false); + + return ( +
+ + + {modalVisible && ( +
+
+
+

{title} Result

+ +
+
+ 
+                                    {resultData}
+
+
+
+ +
+
+
+ )} +
+ ); + }; + + 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. + + + ### 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"; + import React, { useEffect, useMemo } from "react"; + import { useSession, signOut } from "next-auth/react"; + 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() { + const { data: session } = useSession(); + const oktoClient = useOkto(); + + //@ts-ignore + const idToken = useMemo(() => (session ? session.id_token : null), [session]); + + async function handleAuthenticate(): Promise { + if (!idToken) { + return { result: false, error: "No google login" }; + } + const user = await oktoClient.loginUsingOAuth({ + idToken: idToken, + provider: 'google', + }); + console.log("Authentication Success", user); + return JSON.stringify(user); + } + + async function handleLogout() { + try { + signOut(); + return { result: "logout success" }; + } catch (error) { + return { result: "logout failed" }; + } + } + + useEffect(()=>{ + if(idToken){ + handleAuthenticate(); + } + }, [idToken]) + + return ( +
+
Template App
+ +
+ + + +
+ +
+
+
+ ); + } + ``` + + + After launching the app, use these buttons to: + - Initiate Google authentication. + - Trigger a logout. + - Retrieve your account(list of wallets)details. + + + + +## 8. Run Your dApp + +It's time to see your work in action. Inside the `my-okto-app` directory, run the appropriate command based on your package manager: + + + + ```bash + npm run dev + ``` + + + ```bash + pnpm dev + ``` + + + ```bash + yarn dev + ``` + + + +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. + + +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. + + + + + +
+
+ +## 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. + + + + + ### 1. Get Your Wallet Address + + Retrieve your Solana wallet address using: + + ```tsx + import { getAccounts } from "@okto_web3/react-sdk"; + + const accounts = await getAccounts(oktoClient); + const solanaAccount = accounts.find(account => account.chain === "solana:devnet"); + console.log("Your Solana address:", solanaAccount.address); + ``` + + + + ### 2. Fund Your Wallet + + Before transferring tokens, fund your wallet using the Solana Devnet Faucet. + + + + ### 3. Review Network Information + + Consult the Network Information Guide to ensure you have the correct CAIP-2 chain identifiers. + + + + ### 4. Implement Token Transfer + + Create a new component called `TokenTransfer.tsx` to handle a token transfer: + + ```tsx title="app/components/TokenTransfer.tsx" + "use client"; + import { useOkto } from "@okto_web3/react-sdk"; + import { tokenTransfer } from "@okto_web3/react-sdk/abstracted"; + import { useState } from "react"; + + export function TokenTransfer() { + const oktoClient = useOkto(); + const [status, setStatus] = useState(""); + const [modalVisible, setModalVisible] = useState(false); + + async function handleTransfer() { + try { + const txHash = await tokenTransfer(oktoClient, { + amount: BigInt("1000000000"), // 1 SOL + recipient: "YOUR_RECIPIENT_ADDRESS", + token: "", // Empty string for native token + chain: "SOLANA_CHAIN_ID" // caip2id of Solana devnet from step 3 + }); + setStatus(`Transfer complete! Hash: ${txHash}`); + setModalVisible(true); + } catch (error) { + console.error("Transfer failed:", error); + setStatus(`Transfer failed: ${error.message}`); + } + } + + return ( +
+ + + {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"`). + + + + + ### 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 + + - 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). + + + + +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); +``` + +--- + +## Additional Resources + +- Troubleshooting Guide +- Technical Reference +- Advanced Usage Examples + +Need help? Join our Discord community or email us at `devrel@coindcx.com`. \ No newline at end of file diff --git a/content/docs/new-okto-react-native-setup.mdx b/content/docs/new-okto-react-native-setup.mdx new file mode 100644 index 0000000..198c568 --- /dev/null +++ b/content/docs/new-okto-react-native-setup.mdx @@ -0,0 +1,5 @@ +--- +title: React Native (Coming soon) +description: Okto is a platform that allows you to integrate web3 functionality into your app without building things from scratch. +full: false +--- diff --git a/content/docs/new-okto-react-setup.mdx b/content/docs/new-okto-react-setup.mdx new file mode 100644 index 0000000..19f9e15 --- /dev/null +++ b/content/docs/new-okto-react-setup.mdx @@ -0,0 +1,444 @@ +--- +title: React +description: Learn how to create a React app and initialize it with the Okto SDK, including setting up authentication and executing your first token transfer. +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? 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. + + + + + + ## 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. + + To create a new React app, run the following commands in your terminal: + + ```bash title="bash" + npx create vite@latest my-okto-app --template react-ts + cd my-okto-app + ``` + + + + ## 2. Install Dependencies + + Install the required packages: + + + + ```bash + npm i @okto_web3/react-sdk @react-oauth/google + ``` + + + ```bash + pnpm add @okto_web3/react-sdk @react-oauth/google + ``` + + + ```bash + yarn add @okto_web3/react-sdk @react-oauth/google + ``` + + + + + + ## 3. Configure Environment Variables + + Create a `.env` file in your project root: + + ```bash title=".env" + 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_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. + + + + + ## 4. Set Up Okto Provider + + Update your `main.tsx` to initialize the Okto SDK: + + ```tsx title="main.tsx" + import React from "react"; + import ReactDOM from "react-dom/client"; + import App from "./App"; + import { OktoProvider } from "@okto_web3/react-sdk"; + + const config = { + environment: "sandbox", + clientPrivKey: import.meta.env.VITE_CLIENT_PRIV_KEY, + clientSWA: import.meta.env.VITE_CLIENT_SWA, + }; + + ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + + ); + ``` + + + + ## 5. Set Up Google OAuth Provider + + Wrap your app with the Google OAuth provider: + + ```tsx title="main.tsx" + import React from "react"; + import ReactDOM from "react-dom/client"; + import App from "./App"; + import { GoogleOAuthProvider } from "@react-oauth/google"; + import { OktoProvider } from "@okto_web3/react-sdk"; + + const config = { + environment: "sandbox", + clientPrivKey: import.meta.env.VITE_CLIENT_PRIV_KEY, + clientSWA: import.meta.env.VITE_CLIENT_SWA, + }; + + ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + + + + ); + ``` + + + + ## 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. + + 1. Create the basic authentication component: + + ```tsx title="App.tsx" + import { useOkto } from "@okto_web3/react-sdk"; + import { GoogleLogin } from "@react-oauth/google"; + + function App() { + const oktoClient = useOkto(); + + async function handleGoogleLogin(credentialResponse: any) { + try { + await oktoClient.loginUsingOAuth({ + idToken: credentialResponse.credential, + provider: "google", + }); + } catch (error) { + console.error("Authentication error:", error); + } + } + + return ( +
+ {oktoClient.user ? ( + + ) : ( + + )} +
+ ); + } + + export default App; + ``` + + 2. After successful authentication, an Okto session is created and an Okto auth token is returned. The Okto Auth token is a JWT token similar to Google ID token and can be verified. + + 3. You can retrieve the auth token after login using: + + ```tsx + const authToken = await oktoClient.getAuthToken(); + ``` + + The user's embedded wallet is automatically created or retrieved once the session is created and can be accessed via TypeScript and React. + + + + ## 7. Get User Details and Portfolio + + Create a UserDashboard component to display user information: + + ```tsx title="UserDashboard.tsx" + import { useOkto, getWallets, getPortfolio } from "@okto_web3/react-sdk"; + import { useEffect, useState } from "react"; + + export function UserDashboard() { + const oktoClient = useOkto(); + const [wallets, setWallets] = useState([]); + const [portfolio, setPortfolio] = useState(null); + + useEffect(() => { + async function fetchUserData() { + // Get user's wallets + const userWallets = await getWallets(oktoClient); + setWallets(userWallets); + + // Get user's portfolio + const userPortfolio = await getPortfolio(oktoClient); + setPortfolio(userPortfolio); + } + + fetchUserData(); + }, []); + + return ( +
+

Welcome {oktoClient.user?.userAddress}

+

Your Wallets:

+ 
{wallets}
+ +

Portfolio:

+ 
{portfolio}
+
+ ); + } + ``` + + + + ## 8. Start Development Server + + Run your app: + + ```bash + npm run dev + ``` + + Visit `http://localhost:5173` in your browser. + + + + ## 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! + + + + +
+## 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. + + + + + ### 1. Get Your Wallet Address + + First, get your Solana wallet address: + + ```tsx + import { getAccounts } from "@okto_web3/react-sdk"; + + const accounts = await getAccounts(oktoClient); + const solanaAccount = accounts.find(account => account.chain === "solana:devnet"); + console.log("Your Solana address:", solanaAccount.address); + ``` + + + + ### 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). + + + + ### 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. + + + + ### 4. Implement Token Transfer + + Create a new component for handling the transfer: + + ```tsx title="TokenTransfer.tsx" + import { useOkto } from "@okto_web3/react-sdk"; + import { tokenTransfer } from "@okto_web3/react-sdk/abstracted"; + import { useState } from "react"; + + export function TokenTransfer() { + const oktoClient = useOkto(); + const [status, setStatus] = useState(""); + + async function handleTransfer() { + try { + const txHash = await tokenTransfer(oktoClient, { + amount: BigInt("1000000000"), // 1 SOL + recipient: "YOUR_RECIPIENT_ADDRESS", + token: "", // Empty string for native token + chain: "SOLANA_CHAIN_ID" // caip2id of Solana devnet from step 3 + }); + setStatus(`Transfer complete! Hash: ${txHash}`); + } catch (error) { + console.error("Transfer failed:", error); + setStatus(`Transfer failed: ${error.message}`); + } + } + + return ( +
+

Token Transfer

+ +

{status}

+
+ ); + } + ``` + + + + ### 5. Verify The 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 + + + + +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. + + +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); +``` + +--- + +## Additional Resources + +- Troubleshooting Guide +- Technical Reference +- Advanced Usage Examples + +Need help? Join our Discord community or email us at `devrel@coindcx.com`. \ No newline at end of file diff --git a/content/docs/new-okto-typescript-setup.mdx b/content/docs/new-okto-typescript-setup.mdx new file mode 100644 index 0000000..750f93c --- /dev/null +++ b/content/docs/new-okto-typescript-setup.mdx @@ -0,0 +1,333 @@ +--- +title: TypeScript +description: Learn how to create a TypeScript application and initialize it with the Okto SDK, including setting up authentication and executing your first token transfer. +full: false +--- + +import { Step, Steps } from 'fumadocs-ui/components/steps'; +import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; +import { Callout } from 'fumadocs-ui/components/callout'; +import CollapsibleCallout from 'app/components/mdx/CollapsibleCallout'; +import ExternalLink from 'app/components/mdx/ExternalLink'; + + +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. + + +## 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. + + + + + ## Initialize a TypeScript Project + + If you already have a TypeScript project, you can skip this step and proceed directly to Step 2 to start integrating Okto. + + ```bash title="bash" + mkdir my-okto-app + cd my-okto-app + npm init -y + npm install typescript @types/node --save-dev + npx tsc --init + ``` + + + + ## Install Dependencies + + Install the required packages: + + + + ```bash + npm install @okto_web3/core-js-sdk + ``` + + + ```bash + pnpm add @okto_web3/core-js-sdk + ``` + + + ```bash + yarn add @okto_web3/core-js-sdk + ``` + + + + + + ## Configure Environment Variables + + Create a `.env` file in your project root: + + ```bash title=".env" + CLIENT_PRIVATE_KEY=YOUR_CLIENT_PRIVATE_KEY + CLIENT_SWA=YOUR_CLIENT_SWA + ENVIRONMENT=sandbox + ``` + + Create a configuration file to load these variables: + + ```typescript title="config.ts" + import * as dotenv from 'dotenv'; + dotenv.config(); + + export const config = { + environment: process.env.ENVIRONMENT || 'sandbox', + clientPrivKey: process.env.CLIENT_PRIVATE_KEY!, + clientSWA: process.env.CLIENT_SWA!, + }; + ``` + + + + ## Initialize Okto Client + + Create your main file: + + ```typescript title="index.ts" + import { OktoClient } from '@okto_web3/core-js-sdk'; + import { config } from './config'; + + const oktoClient = new OktoClient({ + environment: config.environment, + clientPrivKey: config.clientPrivKey, + clientSWA: config.clientSWA, + }); + + async function main() { + // Your code will go here + console.log("Okto client initialized!"); + } + + main().catch(console.error); + ``` + + + + ## 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. + + Update your main file to include authentication: + + ```typescript title="index.ts" + async function authenticate(idToken: string) { + try { + const user = await oktoClient.loginUsingOAuth({ + idToken, + provider: "google", + }); + console.log("Authentication successful:", user); + return user; + } catch (error) { + console.error("Authentication failed:", error); + throw error; + } + } + ``` + + + + ## Start Development + + Run your application: + + ```bash + npx ts-node index.ts + ``` + + + + ## 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. + + + + + ## Get Your Wallet Address + + First, get your Solana wallet address: + + ```typescript + import { getAccounts } from "@okto_web3/core-js-sdk"; + + const accounts = await getAccounts(oktoClient); + const solanaAccount = accounts.find(account => account.chain === "solana:devnet"); + console.log("Your Solana address:", solanaAccount.address); + ``` + + + + ## 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 + + Before creating the user operation, check the Network Information Guide for getting the correct CAIP-2 IDs of chains. + + + + ## Implement Token Transfer + + Add this function to your main file: + + ```typescript title="index.ts" + import { tokenTransfer } from "@okto_web3/core-js-sdk"; + + async function handleTransfer() { + try { + console.log("Creating transfer..."); + + const userOp = await tokenTransfer(oktoClient, { + amount: BigInt("1000000000"), // 1 SOL + recipient: "YOUR_RECIPIENT_ADDRESS", + token: "", // Empty string for native token + chain: "SOLANA_CHAIN_ID" // caip2id of Solana devnet from step 3 + }); + + console.log("Signing operation..."); + const signedOp = await oktoClient.signUserOp(userOp); + + console.log("Executing transfer..."); + const txHash = await oktoClient.executeUserOp(signedOp); + + console.log(`Transfer complete! Hash: ${txHash}`); + return txHash; + } catch (error) { + console.error("Transfer failed:", error); + throw error; + } + } + ``` + + + + ## Verify The Transfer + + After the transfer is complete, you can verify it through: + - The `getPortfolio` method to check your updated balance + - The Solana Explorer (devnet) using the transaction hash + + + + +Now that you've completed your first user operation, you're ready to explore more advanced features! Check out our Usage Guide to learn about other operations like NFT transfers, contract interactions, and more. + +--- + +## 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); +``` + +--- + +## Additional Resources + +- Troubleshooting Guide +- Technical Reference +- Advanced Usage Examples + +Need help? Join our Discord community or email us at `devrel@coindcx.com`. + 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 9c9e94a..3cd632b 100644 --- a/content/docs/react-sdk/quickstart/new-okto-nextjs-setup.mdx +++ b/content/docs/react-sdk/quickstart/new-okto-nextjs-setup.mdx @@ -79,26 +79,22 @@ If you need help, see our - 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 for the package manager of your choice: ```bash - npm i @okto_web3/react-sdk@dev next-auth + npm i @okto_web3/react-sdk next-auth ``` ```bash - pnpm add @okto_web3/react-sdk@dev next-auth + pnpm add @okto_web3/react-sdk next-auth ``` ```bash - yarn add @okto_web3/react-sdk@dev next-auth + yarn add @okto_web3/react-sdk next-auth ``` @@ -545,7 +541,8 @@ Now that we have our basic setup complete, let's implement a token transfer on S ```tsx title="app/components/TokenTransfer.tsx" "use client"; - import { useOkto, tokenTransfer } from "@okto_web3/react-sdk"; + import { useOkto } from "@okto_web3/react-sdk"; + import { tokenTransfer } from "@okto_web3/react-sdk/abstracted"; import { useState } from "react"; export function TokenTransfer() { @@ -555,21 +552,12 @@ Now that we have our basic setup complete, let's implement a token transfer on S async function handleTransfer() { try { - setStatus("Creating transfer..."); - - const userOp = await tokenTransfer(oktoClient, { + const txHash = await tokenTransfer(oktoClient, { amount: BigInt("1000000000"), // 1 SOL recipient: "YOUR_RECIPIENT_ADDRESS", token: "", // Empty string for native token chain: "SOLANA_CHAIN_ID" // caip2id of Solana devnet from step 3 }); - - setStatus("Signing operation..."); - const signedOp = await oktoClient.signUserOp(userOp); - - setStatus("Executing transfer..."); - const txHash = await oktoClient.executeUserOp(signedOp); - setStatus(`Transfer complete! Hash: ${txHash}`); setModalVisible(true); } catch (error) { @@ -744,4 +732,14 @@ const rawTxParams = { }, }; const result = await evmRawTransaction(oktoClient, rawTxParams); -``` \ No newline at end of file +``` + +--- + +## Additional Resources + +- Troubleshooting Guide +- Technical Reference +- Advanced Usage Examples + +Need help? Join our Discord community or email us at `devrel@coindcx.com`. \ 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 f67da35..f088bb8 100644 --- a/content/docs/react-sdk/quickstart/new-okto-react-setup.mdx +++ b/content/docs/react-sdk/quickstart/new-okto-react-setup.mdx @@ -40,26 +40,22 @@ Without completing these steps first, your application won't be able to interact ## 2. Install Dependencies - - Please use version 0.0.0-dev.42 of the npm package. - - Install the required packages: ```bash - npm i @okto_web3/react-sdk@dev @react-oauth/google + npm i @okto_web3/react-sdk @react-oauth/google ``` ```bash - pnpm add @okto_web3/react-sdk@dev @react-oauth/google + pnpm add @okto_web3/react-sdk @react-oauth/google ``` ```bash - yarn add @okto_web3/react-sdk@dev @react-oauth/google + yarn add @okto_web3/react-sdk @react-oauth/google ``` @@ -270,7 +266,7 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## 1. Get Your Wallet Address + ### 1. Get Your Wallet Address First, get your Solana wallet address: @@ -284,24 +280,25 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## 2. 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). - ## 3. 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. - ## 4. Implement Token Transfer + ### 4. Implement Token Transfer Create a new component for handling the transfer: ```tsx title="TokenTransfer.tsx" - import { useOkto, tokenTransfer } from "@okto_web3/react-sdk"; + import { useOkto } from "@okto_web3/react-sdk"; + import { tokenTransfer } from "@okto_web3/react-sdk/abstracted"; import { useState } from "react"; export function TokenTransfer() { @@ -310,24 +307,12 @@ Now that we have our basic setup complete, let's implement a token transfer on S async function handleTransfer() { try { - setStatus("Creating transfer..."); - - // 1. Create the transfer operation - const userOp = await tokenTransfer(oktoClient, { + const txHash = await tokenTransfer(oktoClient, { amount: BigInt("1000000000"), // 1 SOL recipient: "YOUR_RECIPIENT_ADDRESS", token: "", // Empty string for native token chain: "SOLANA_CHAIN_ID" // caip2id of Solana devnet from step 3 }); - - setStatus("Signing operation..."); - // 2. Sign the operation - const signedOp = await oktoClient.signUserOp(userOp); - - setStatus("Executing transfer..."); - // 3. Execute the transfer - const txHash = await oktoClient.executeUserOp(signedOp); - setStatus(`Transfer complete! Hash: ${txHash}`); } catch (error) { console.error("Transfer failed:", error); @@ -349,7 +334,7 @@ Now that we have our basic setup complete, let's implement a token transfer on S - ## 5. 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 @@ -446,4 +431,14 @@ const rawTxParams = { }, }; const result = await evmRawTransaction(oktoClient, rawTxParams); -``` \ No newline at end of file +``` + +--- + +## Additional Resources + +- Troubleshooting Guide +- Technical Reference +- Advanced Usage Examples + +Need help? Join our Discord community or email us at `devrel@coindcx.com`. \ No newline at end of file