nebula doc restructure

Author: saminacodes

apps/portal/src/app/nebula/assets/keys.png

@@ -0,0 +1,174 @@
+import { Step, Steps, DocImage, Callout } from "@doc";
+import NewProject from "../assets/new-project.png";
+import KeysSetup from "../assets/keys.png";
+
+# Get Started
+
+Learn how to get set up and started with the Nebula API to successfully prepare and enable a connected user to sign a transfer .
+
+## Prerequisites
+
+Before you begin, ensure you have the following:
+
+- A thirdweb account 
+- A blockchain wallet for executing transactions
+- Node.js and npm or yarn installed on your system
+
+## Obtain Client ID & Secret Key
+
+<Steps>
+
+<Step title="Create project">
+
+Navigate to the [projects dashboard](https://thirdweb.com/) and create a new project.
+
+<DocImage src={NewProject} alt="Create a new project"/>
+  
+</Step>
+
+<Step title="Obtain keys">
+
+Setup your project and obtain your client ID and secret key. Please note your secret key somewhere safe as it is not recoverable.
+
+<Callout variant="warning" title="Client Id vs Secret Key">
+Client Id is used for client side usage and is restricted by the domain restrictions you set on your API key, it is a public identifier which can be used on the frontend safely.
+
+Secret key is used for server side or script usage and is not restricted by the domain restrictions. Never expose your secret key in client side code.
+</Callout>
+
+<DocImage  src={KeysSetup} alt="Obtain keys"/>
+
+</Step>
+
+</Steps>
+
+## Setup API (TypeScript SDK)
+
+<Steps>
+
+<Step title="Install SDK">
+
+Install the TypeScript SDK
+
+```bash
+npm install thirdweb
+```
+</Step>
+
+<Step title="Environment Variables">
+
+Setup environmental variables. 
+
+<Callout variant="warning" title="Storing Secret Keys">
+  Ensure you keep your secret key and private key safe and do not expose it in your codebase. We recommend using a 
+  secret key manager such as [AWS Secret Manager](https://aws.amazon.com/secrets-manager/) or [Google Secret Manager](https://cloud.google.com/secret-manager).
+</Callout>
+
+```jsx
+THIRDWEB_SECRET_KEY=your_thirdweb_secret_key
+EOA_PRIVATE_KEY=your_wallet_private_key
+```
+</Step>
+
+<Step title="Import Libraries">
+
+Import required libraries from thirdweb.
+
+```jsx
+import {
+    createThirdwebClient,
+  prepareTransaction,
+  sendTransaction,
+  privateKeyToAccount,
+} from "thirdweb";
+```
+</Step>
+
+<Step title="Create Function to Handle Response">
+This function processes the API's response and executes blockchain transactions.
+
+```jsx
+async function handleNebulaResponse(response) {
+  const client = createThirdwebClient({
+    secretKey: process.env.THIRDWEB_SECRET_KEY,
+  });
+
+  const account = privateKeyToAccount({
+    client,
+    privateKey: process.env.EOA_PRIVATE_KEY,
+  });
+
+  if (response.actions && response.actions.length > 0) {
+    const action = response.actions[0];
+    const txData = JSON.parse(action.data);
+
+    try {
+      const transaction = prepareTransaction({
+        to: txData.to,
+        data: txData.data,
+        value: BigInt(txData.value),
+        chain: txData.chainId,
+        client,
+      });
+
+      const result = await sendTransaction({
+        transaction,
+        account,
+      });
+
+      console.log("Transaction Successful:", result);
+      return result;
+    } catch (error) {
+      console.error("Error executing transaction:", error);
+      throw error;
+    }
+  }
+}
+```
+</Step>
+
+<Step title="Call Nebula API">
+
+Send a request to the Nebula API to interpret your natural language command and retrieve the transaction details.
+
+```jsx
+const response = await fetch("https://nebula-api.thirdweb.com/chat", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+    "x-secret-key": process.env.THIRDWEB_SECRET_KEY,
+  },
+  body: JSON.stringify({
+    message: "send 0.001 ETH on Sepolia to vitalik.eth",
+    execute_config: {
+      mode: "client",
+      signer_wallet_address: "0xYourWalletAddress",
+    },
+  }),
+});
+
+const data = await response.json();
+await handleNebulaResponse(data);
+```
+</Step>
+
+<Step title="Example Response">
+
+The response from the API will contain the transaction details.
+
+```jsx
+Transaction Successful: {
+  transactionHash: "0x123abc...",
+  blockNumber: 1234567,
+  ...
+}
+```
+</Step>
+
+Congratulations! You have successfully set up the Nebula API and executed a transaction using the thirdweb SDK.
+</Steps>
+
+### Additional Resources
+
+- [Nebula API Documentation](https://portal.thirdweb.com/nebula/api-reference)
+- [thirdweb SDK Documentation](https://portal.thirdweb.com/typescript/v5)

apps/portal/src/app/nebula/assets/nebula-diagram.png

@@ -1,21 +1,24 @@
 import { PencilRulerIcon, HandCoinsIcon, BlocksIcon, WorkflowIcon, ShieldCheckIcon, CirclePlusIcon } from "lucide-react";
 import { DocImage, createMetadata, FeatureCard } from "@doc";
+import NebulaDiagram from "./assets/nebula-diagram.png";
 
 
 # What is Nebula?
 
-Natural language model with blockchain reasoning, autonomous transaction capabilities and real-time access to the blockchain.
+Natural language model with improved blockchain reasoning, autonomous transaction capabilities, and real-time access to the blockchain.
 
 Nebula is currently available in Alpha. [Join the waitlist.](https://thirdweb.com/nebula)
 
+<DocImage src={NebulaDiagram} />
+
 ## Features
 
 <div
 	className="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-2 "
 >
 	<FeatureCard
 		title="Proprietary Blockchain Model"
-		description="Trained on over 2,400+ EVM networks and 1M+ contracts"
+		description="Trained on over 2,500+ EVM networks and 1M+ contracts"
 		iconUrl={<PencilRulerIcon />}
 	/>
 

apps/portal/src/app/nebula/assets/new-project.png

@@ -1,11 +1,11 @@
 import type { SideBar } from "@/components/Layouts/DocLayout";
 import {
-  BrickIcon,
   CodeIcon,
   EditIcon,
   NebulaSideIcon,
   PluginIcon,
   QuestionIcon,
+  RocketIcon,
   TroubleshootIcon,
 } from "@/icons";
 
@@ -17,26 +17,15 @@ export const sidebar: SideBar = {
       href: "/nebula",
       icon: <NebulaSideIcon />,
     },
-    {
-      name: "Use Cases",
-      href: "/nebula/use-cases",
-      icon: <BrickIcon />,
-    },
     {
       name: "Prompt Guide",
       href: "/nebula/prompt-guide",
       icon: <EditIcon />,
     },
     {
-      name: "Plugins",
-      href: "/nebula/plugins",
-      icon: <PluginIcon />,
-      links: [
-        {
-          name: "Eliza",
-          href: "/nebula/plugins/eliza",
-        },
-      ],
+      name: "Get Started",
+      href: "/nebula/get-started",
+      icon: <RocketIcon />,
     },
     {
       name: "API Reference",
@@ -101,6 +90,17 @@ export const sidebar: SideBar = {
         },
       ],
     },
+    {
+      name: "Plugins",
+      href: "/nebula/plugins",
+      icon: <PluginIcon />,
+      links: [
+        {
+          name: "Eliza",
+          href: "/nebula/plugins/eliza",
+        },
+      ],
+    },
     {
       name: "Troubleshoot",
       href: "/nebula/troubleshoot",

apps/portal/src/app/nebula/get-started/page.mdx

@@ -42,6 +42,7 @@ export { QuestionIcon } from "./sidebar/QuestionIcon";
 export { NebulaSideIcon } from "./sidebar/NebulaSideIcon";
 export { PluginIcon } from "./sidebar/PluginIcon";
 export { TroubleshootIcon } from "./sidebar/TroubleshootIcon";
+export { RocketIcon } from "./sidebar/RocketIcon";
 
 //api icons
 export { GetIcon } from "./API/GetIcon";

apps/portal/src/app/nebula/page.mdx

@@ -0,0 +1,15 @@
+export function RocketIcon(props: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 -960 960 960"
+      width="24px"
+      fill="#6e6e6e"
+      className={props.className}
+    >
+      <title>Rocket Icon</title>
+      <path d="m226-559 78 33q14-28 29-54t33-52l-56-11-84 84Zm142 83 114 113q42-16 90-49t90-75q70-70 109.5-155.5T806-800q-72-5-158 34.5T492-656q-42 42-75 90t-49 90Zm178-65q-23-23-23-56.5t23-56.5q23-23 57-23t57 23q23 23 23 56.5T660-541q-23 23-57 23t-57-23Zm19 321 84-84-11-56q-26 18-52 32.5T532-299l33 79Zm313-653q19 121-23.5 235.5T708-419l20 99q4 20-2 39t-20 33L538-80l-84-197-171-171-197-84 167-168q14-14 33.5-20t39.5-2l99 20q104-104 218-147t235-24ZM157-321q35-35 85.5-35.5T328-322q35 35 34.5 85.5T327-151q-25 25-83.5 43T82-76q14-103 32-161.5t43-83.5Zm57 56q-10 10-20 36.5T180-175q27-4 53.5-13.5T270-208q12-12 13-29t-11-29q-12-12-29-11.5T214-265Z" />
+    </svg>
+  );
+}