docs: group hooks

website/app/demos/[[...slug]]/page.tsx

@@ -49,7 +49,7 @@ export default async function DemoPage({ params }: DemoPageProps) {
   }
 
   return (
-    <DocContainer title={demo.title} section="Demos">
+    <DocContainer title={demo.title} sections={["Demos"]}>
       <Mdx code={demo.body.code} />
     </DocContainer>
   );

website/app/docs/[[...slug]]/page.tsx

@@ -49,7 +49,7 @@ export default async function DocPage({ params }: DocPageProps) {
   }
 
   return (
-    <DocContainer title={doc.title} section="Docs">
+    <DocContainer title={doc.title} sections={["Docs"]}>
       <Mdx code={doc.body.code} />
     </DocContainer>
   );

website/app/hooks/[[...slug]]/page.tsx

@@ -19,7 +19,6 @@ async function getDocFromParams({ params }: DocPageProps) {
     const redirectTo = allHooks[0]?.slugAsParams;
     return { doc: null, redirectTo };
   }
-
   const doc = allHooks.find((doc) => doc.slugAsParams === slug);
 
   if (!doc) {
@@ -48,8 +47,10 @@ export default async function DocPage({ params }: DocPageProps) {
     }
   }
 
+  const sections = ['Hooks', ...params.slug.slice(0, -1)];
+
   return (
-    <DocContainer title={doc.title} section="Hooks">
+    <DocContainer title={doc.title} sections={sections}>
       <Mdx code={doc.body.code} />
     </DocContainer>
   );

website/components/container.tsx

@@ -4,22 +4,27 @@ import { cn } from "@/lib/utils";
 import { ChevronRightIcon } from "lucide-react";
 
 export function DocContainer({
-  section,
+  sections,
   title,
   children,
 }: {
-  section: string;
+  sections: string[];
   title: string;
   children?: React.ReactNode;
 }) {
   return (
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_200px]">
       <div className="mx-auto w-full min-w-0">
-        <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            {section}
-          </div>
-          <ChevronRightIcon className="h-4 w-4" />
+        <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground w-fit">
+
+          {sections?.map((section, i) =>
+            <div key={i} className="flex flex-row items-center w-fit">
+              <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+                {section}
+              </div>
+              <ChevronRightIcon className="h-4 w-4" />
+            </div>
+          )}
           <div className="font-medium text-foreground">{title}</div>
         </div>
         <div className="space-y-2">

website/components/sidebar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -11,6 +11,7 @@ export type NavItem = {
   external?: boolean;
   disabled?: boolean;
   label?: string;
+  items?: NavItemWithChildren[];
 };
 
 export type NavItemWithChildren = NavItem & {
@@ -19,7 +20,8 @@ export type NavItemWithChildren = NavItem & {
 
 export function Sidebar({ items }: { items: NavItemWithChildren[] }) {
   const pathname = usePathname();
-  return items.length ? (
+
+  return (items.length ?
     <div className="w-full">
       {items.map((item, index) => (
         <div key={index} className={cn("pb-4")}>
@@ -31,8 +33,8 @@ export function Sidebar({ items }: { items: NavItemWithChildren[] }) {
           )}
         </div>
       ))}
-    </div>
-  ) : null;
+    </div> : <></>
+  )
 }
 
 interface DocsSidebarNavItemsProps {
@@ -44,36 +46,41 @@ export function DocsSidebarNavItems({
   items,
   pathname,
 }: DocsSidebarNavItemsProps) {
-  return items?.length ? (
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient && items?.length ? (
     <div className="grid grid-flow-row auto-rows-max text-sm">
       {items.map((item, index) =>
         item.href && !item.disabled ? (
           <Link
             key={index}
             href={item.href}
             className={cn(
-              "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60",
-              pathname === item.href
-                ? "font-medium text-foreground"
-                : "text-muted-foreground",
+              "group flex flex-col items-start w-full rounded-lg border border-transparent px-2 py-1",
+              pathname === item.href ? "text-foreground" : "text-muted-foreground",
             )}
             target={item.external ? "_blank" : ""}
             rel={item.external ? "noreferrer" : ""}
           >
-            {item.title}
+            <span className={cn("hover:underline", pathname === item.href ? "font-medium" : "")} >{item.title}</span>
             {item.label && (
               <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
                 {item.label}
               </span>
             )}
+            {item.items && item.items.length > 0 && (
+              <DocsSidebarNavItems items={item.items} pathname={pathname} />
+            )}
           </Link>
         ) : (
           <span
             key={index}
             className={cn(
-              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline",
-              item.disabled && "cursor-not-allowed opacity-60",
+              "flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground opacity-60",
             )}
           >
             {item.title}
@@ -82,9 +89,12 @@ export function DocsSidebarNavItems({
                 {item.label}
               </span>
             )}
+            {item.items && item.items.length > 0 && (
+              <DocsSidebarNavItems items={item.items} pathname={pathname} />
+            )}
           </span>
         ),
       )}
     </div>
-  ) : null;
+  ) : <></>;
 }

website/components/ui/dialog.tsx

@@ -13,8 +13,8 @@ const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = ({
   className,
   ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
+}: DialogPrimitive.DialogPortalProps & { className?: string }) => (
+  <DialogPrimitive.Portal {...props} />
 );
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 

website/content/hooks/account.mdx

@@ -0,0 +1,7 @@
+---
+title: Account
+priority: 1
+hookType: doc
+---
+
+An Account hook is a function that allows you to set up the connection with wallets. 

website/content/hooks/account/useAccount.mdx

@@ -0,0 +1,51 @@
+---
+title: useAccount
+priority: 42
+hookType: account
+---
+
+Hook for accessing the account and its connection status.
+
+
+## Usage
+
+```ts
+import { useAccount } from "@starknet-react/core";
+
+export default function Component() {
+  const { account, address, status } = useAccount();
+
+  if (status === "disconnected") return <p>Disconnected</p>;
+  return <p>Account: {address}</p>;
+}
+```
+
+## Options
+    * __onConnect?__`: (args: { address?: string; connector?: Connector}) => void`
+        - Function to invoke when connected.
+        - Connector from starknet.js
+
+    * __onDisconnect?__ `: () => void`
+        - Function to invoke when disconnected.
+
+## Returns
+    * __account?__`: AccountInterface`
+        - The connected account object.
+        - AccountInterface from Starknet.js
+    * __address?__`: string`
+        - The address of the connected account.
+    * __connector?__`: Connector`
+        - The connected connector.
+        - Connector from starknet.js
+    * __status__`: AccountStatus`
+        - The connection status.
+        - AccountStatus from starknet.js
+    * __isConnecting?__`: boolean`
+        - True if connecting.
+    * __isReconnecting?__`: boolean`
+        - True if reconnecting.
+    * __isConnected?__`: boolean`
+        - True if connected.
+    * __isDisconnected?__`: boolean`
+        - True if disconnected.
+

website/content/hooks/account/useConnect.mdx

@@ -0,0 +1,46 @@
+---
+title: useConnect
+priority: 41
+hookType: account
+---
+
+Hook to connect the currently connected wallet.
+
+## Usage
+
+```ts
+import { useConnect } from "@starknet-react/core";
+
+export default function Component() {
+  const { connect, connectors } = useConnect();
+  return (
+    <ul>
+      {connectors.map((connector) => (
+        <li key={connector.id}>
+          <button onClick={() => connect({ connector })}>
+            {connector.name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## Returns
+    * __connect?__`:(variables: void, options?: InvocationDetails | undefined) => void`
+        - Connect wallet.
+    * __connectAsync?__`: (variables: void, options?: InvocationDetails) => Promise<void>`
+        - Connect wallet.
+    * __connector?__`: Connector`
+        - Current connector.
+        - Connector from Starknet.js.
+    * __connectors__`: Connector[]`
+        - Connectors available for the current chain.
+        - Connector from Starknet.js.
+    * __pendingConnector?__`: Connector`
+        - Connector waiting approval for connection.
+        - Connector from Starknet.js.
+
+
+

website/content/hooks/account/useDisconnect.mdx

@@ -0,0 +1,28 @@
+---
+title: useDisconnect
+priority: 40
+hookType: account
+
+---
+
+Hook to disconnect the currently connected wallet.
+
+## Usage
+
+
+```ts
+import { useDisconnect} from "@starknet-react/core"
+
+export default function Component() {
+    const { disconnect } = useDisconnect();
+
+  return <button onClick={() => disconnect()}>Disconnect</button>
+}
+
+```
+
+## Returns
+    * __disconnect?__`:(variables: void, options?: InvocationDetails | undefined) => void`
+        - Disconnect wallet
+    * __disconnectAsync?__`: (variables: void, options?: InvocationDetails) => Promise<void>`
+        - Disconnect wallet

website/content/hooks/mutation.mdx

@@ -0,0 +1,40 @@
+---
+title: Mutation
+priority: 2
+hookType: doc
+---
+
+A mutation hook is a function that allows you to perform state-changing operations on the Network. 
+
+The mutation hook type provides a set of return values and options that can be used to control and monitor the status of the mutation.
+In addition to common options and returns, each mutation hook introduces its own unique set of options and returns.
+
+## Options
+
+    * __options?__`: InvocationsDetails`
+        - Additional invocation options.
+        - From starknet.js
+
+## Returns
+
+- **error?**`: Error`
+  - The error if the call was not successful.
+- **variables**`: { calls: Call[], abis: Abi[], options: InvocationDetails }`
+  - Variables passed to the function invocation.
+- **reset**`: () => void`
+  - Clean the mutation internal state.
+- **status**`: "idle" | "loading" | "success" |" error"`
+  - idle before sending the transaction.
+  - loading while sending the transaction.
+  - success if the last invocation was successful.
+  - error if there was an error.
+- **isSuccess?**`: boolean`
+  - Derived from status.
+- **isError?**`: boolean`
+  - Derived from status.
+- **isIdle?**`: boolean`
+  - Derived from status.
+- **isLoading?**`: boolean`
+  - Derived from status.
+- **isPaused?**`: boolean`
+  - If true, the invocation has been paused.

website/content/hooks/mutation/useContractWrite.mdx

@@ -0,0 +1,18 @@
+---
+title: useContractWrite
+priority: 41
+hookType: mutation
+
+---
+
+Hook to send one or more transaction to Starknet.
+
+## Usage
+
+```ts
+import { useContractWrite } from "@starknet-react/core";
+
+export function App() {
+  // TODO
+}
+```