add logo, description, basic og image

docs/snippets/useCallsStatus.ts

@@ -1,19 +1,18 @@
 // [!region imports]
-import { useQuery } from "@tanstack/react-query"
-import { useEIP5792WalletClient } from "./useEIP5792WalletClient"
+import { useQuery } from "@tanstack/react-query";
+import { useEIP5792WalletClient } from "./useEIP5792WalletClient";
 // [!endregion imports]
 
 export function useCallsStatus({ id }: { id?: string }) {
-  const walletClient = useEIP5792WalletClient()
+  const walletClient = useEIP5792WalletClient();
 
   const { data, isLoading } = useQuery({
     queryKey: ["transaction", id],
     queryFn: async () => walletClient?.getCallsStatus({ id: id as string }),
     enabled: !!walletClient && !!id,
     // Poll every second until the calls are confirmed
-    refetchInterval: (data) =>
-      data.state.data?.status === "CONFIRMED" ? false : 1000,
-  })
+    refetchInterval: (data) => data.state.data?.status === "CONFIRMED" ? false : 1000,
+  });
 
-  return { data, isLoading }
+  return { data, isLoading };
 }

docs/snippets/useEIP5792WalletClient.ts

@@ -1,23 +1,23 @@
 // [!region imports]
-import { useEffect, useState } from "react"
-import { WalletClient } from "viem"
-import { useWalletClient } from "wagmi"
-import { WalletActionsEip5792, walletActionsEip5792 } from "viem/experimental"
+import { useEffect, useState } from "react";
+import { WalletClient } from "viem";
+import { WalletActionsEip5792, walletActionsEip5792 } from "viem/experimental";
+import { useWalletClient } from "wagmi";
 // [!endregion imports]
 
-type EIP5792WalletClient = WalletClient & WalletActionsEip5792
+type EIP5792WalletClient = WalletClient & WalletActionsEip5792;
 
 export function useEIP5792WalletClient(): EIP5792WalletClient | undefined {
-  const { data: originalWalletClient } = useWalletClient()
+  const { data: originalWalletClient } = useWalletClient();
   const [walletClient, setWalletClient] = useState<
     EIP5792WalletClient | undefined
-  >(undefined)
+  >(undefined);
 
   useEffect(() => {
     if (originalWalletClient) {
-      setWalletClient(originalWalletClient.extend(walletActionsEip5792()))
+      setWalletClient(originalWalletClient.extend(walletActionsEip5792()));
     }
-  }, [originalWalletClient])
+  }, [originalWalletClient]);
 
-  return walletClient
+  return walletClient;
 }

docs/snippets/useWalletCapabilities.ts

@@ -1,35 +1,34 @@
 // [!region imports]
-import { useEffect, useState } from "react"
-import { WalletCapabilities } from "viem"
-import { useEIP5792WalletClient } from "./useEIP5792WalletClient"
+import { useEffect, useState } from "react";
+import { WalletCapabilities } from "viem";
+import { useEIP5792WalletClient } from "./useEIP5792WalletClient";
 // [!endregion imports]
 
 export function useWalletCapabilities({ chainId }: { chainId?: number }) {
-  const walletClient = useEIP5792WalletClient()
+  const walletClient = useEIP5792WalletClient();
   const [capabilities, setCapabilities] = useState<{
-    [chainId: number]: WalletCapabilities
-  }>({})
-  const [loading, setLoading] = useState(true)
+    [chainId: number]: WalletCapabilities;
+  }>({});
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     if (walletClient) {
       void (async () => {
         try {
-          const capabilities = await walletClient.getCapabilities()
-          setCapabilities(capabilities)
-          setLoading(false)
+          const capabilities = await walletClient.getCapabilities();
+          setCapabilities(capabilities);
+          setLoading(false);
         } catch {
           // handle wallets that don't support this RPC
-          setLoading(false)
-          setCapabilities({})
+          setLoading(false);
+          setCapabilities({});
         }
-      })()
+      })();
     }
-  }, [walletClient])
+  }, [walletClient]);
 
   return {
-    capabilities:
-      capabilities && chainId ? capabilities[chainId] : capabilities,
+    capabilities: capabilities && chainId ? capabilities[chainId] : capabilities,
     loading,
-  }
+  };
 }

docs/snippets/useWriteContracts.ts

@@ -1,18 +1,18 @@
 // [!region imports]
-import { WriteContractsParameters } from "viem/experimental"
-import { useEIP5792WalletClient } from "./useEIP5792WalletClient"
-import { useState } from "react"
+import { useState } from "react";
+import { WriteContractsParameters } from "viem/experimental";
+import { useEIP5792WalletClient } from "./useEIP5792WalletClient";
 // [!endregion imports]
 
 export function useWriteContracts() {
-  const walletClient = useEIP5792WalletClient()
-  const [id, setId] = useState<string | undefined>(undefined)
+  const walletClient = useEIP5792WalletClient();
+  const [id, setId] = useState<string | undefined>(undefined);
 
   const writeContracts = (
-    parameters: Omit<WriteContractsParameters, "account" | "chain">
+    parameters: Omit<WriteContractsParameters, "account" | "chain">,
   ) => {
     if (!walletClient || !walletClient.account || !walletClient.chain) {
-      throw new Error("Wallet client not available")
+      throw new Error("Wallet client not available");
     }
     walletClient
       .writeContracts({
@@ -21,9 +21,9 @@ export function useWriteContracts() {
         ...parameters,
       })
       .then((id) => {
-        setId(id)
-      })
-  }
+        setId(id);
+      });
+  };
 
-  return { id, writeContracts }
+  return { id, writeContracts };
 }

dprint.json

@@ -3,12 +3,15 @@
   },
   "markdown": {
   },
+  "typescript": {
+  },
   "excludes": [
     "**/*-lock.json",
     "/docs/dist/**"
   ],
   "plugins": [
     "https://plugins.dprint.dev/json-0.19.2.wasm",
-    "https://plugins.dprint.dev/markdown-0.16.4.wasm"
+    "https://plugins.dprint.dev/markdown-0.16.4.wasm",
+    "https://plugins.dprint.dev/typescript-0.90.4.wasm"
   ]
 }

vocs.config.ts

@@ -1,119 +1,117 @@
-import { defineConfig } from 'vocs'
+import { defineConfig } from "vocs";
 
 export default defineConfig({
   theme: {
-    colorScheme: 'system',
+    colorScheme: "system",
     variables: {
       color: {
-        textAccent: { light: '#2394ff', dark: '#e9e9ea' },
-        backgroundDark: {light: '#ebeaee', dark: 'black'},
-        background: {light: '#f6f5f8', dark: 'black'}, //f6f5f8 /ebf1f8
-        heading: { light: 'black', dark: '#e9e9ea' },
-        text3: { light: 'black', dark: '#e9e9ea' },
-        background5: { light: '#dee8ff', dark: '#3c393f' },
-      }
-    }
+        textAccent: { light: "#2394ff", dark: "#e9e9ea" },
+        backgroundDark: { light: "#ebeaee", dark: "black" },
+        background: { light: "#f6f5f8", dark: "black" }, // f6f5f8 /ebf1f8
+        heading: { light: "black", dark: "#e9e9ea" },
+        text3: { light: "black", dark: "#e9e9ea" },
+        background5: { light: "#dee8ff", dark: "#3c393f" },
+      },
+    },
   },
-  title: 'Smart Wallet',
-  topNav: [ 
-    { text: 'Demo', link: 'https://smart-wallet.xyz/' }, 
-    { text: 'SDK Playground', link: 'https://coinbase.github.io/coinbase-wallet-sdk/'},
-    { text: 'Github', link: 'https://github.com/coinbase/coinbase-wallet-sdk'},
-    { text: 'Discord', link: 'https://discord.com/invite/cdp/'}
-  ], 
-  sidebar: [ 
-    { 
-      text: 'Why Smart Wallet?', 
-      link: '/why', 
-    }, 
-    { 
-      text: 'Quick Start', 
-      link: '/quick-start', 
-    }, 
-    { 
-      text: 'FAQ', 
-      link: '/FAQ', 
+  ogImageUrl: "https://vocs.dev/api/og?logo=%logo&title=%title&description=%description",
+  title: "Smart Wallet",
+  description: "Smart Wallet Documentation",
+  // logoUrl: '/logo.svg',
+  iconUrl: "/logo.svg",
+  topNav: [
+    { text: "Demo", link: "https://smart-wallet.xyz/" },
+    { text: "SDK Playground", link: "https://coinbase.github.io/coinbase-wallet-sdk/" },
+    { text: "Github", link: "https://github.com/coinbase/coinbase-wallet-sdk" },
+    { text: "Discord", link: "https://discord.com/invite/cdp/" },
+  ],
+  sidebar: [
+    {
+      text: "Why Smart Wallet?",
+      link: "/why",
+    },
+    {
+      text: "Quick Start",
+      link: "/quick-start",
+    },
+    {
+      text: "FAQ",
+      link: "/FAQ",
+    },
+    {
+      text: "Quick Start",
+      link: "/quick-start",
     },
-    { 
-      text: 'Launch Ready Checklist', 
-      link: '/checklist', 
+    {
+      text: "FAQ",
+      link: "/faq",
     },
-    { 
-      text: 'Wallet Library Support', 
-      link: '/wallet-library-support', 
+    {
+      text: "Launch Ready Checklist",
+      link: "/checklist",
     },
-    { 
-      text: 'Guides', 
-      collapsed: false, 
-      items: [ 
+    {
+      text: "Wallet Library Support",
+      link: "/wallet-library-support",
+    },
+    {
+      text: "Guides",
+      collapsed: false,
+      items: [
         {
           text: "Create a new app",
           items: [
-            {text: 'Using Build Onchain Template', link: '/guides/create-app/using-boat'},
-            {text: 'Using Wagmi Template', link: '/guides/create-app/using-wagmi'},
-          ]
+            { text: "Using Build Onchain Template", link: "/guides/create-app/using-boat" },
+            { text: "Using Wagmi Template", link: "/guides/create-app/using-wagmi" },
+          ],
         },
         {
-          text: 'Update an existing app',
-          link: '/guides/update-existing-app'
+          text: "Update an existing app",
+          link: "/guides/update-existing-app",
         },
         {
           text: "Signature Verification",
-          link: '/guides/signature-verification'
+          link: "/guides/signature-verification",
+        },
+        {
+          text: "Batch transactions",
+          link: "/guides/batch-transactions",
+        },
+        {
+          text: "Paymasters (sponsored transactions)",
+          link: "/guides/paymasters",
+        },
+        {
+          text: "Magic Spend support",
+          link: "/guides/magic-spend",
+        },
+      ],
+    },
+    {
+      text: "SDK",
+      collapsed: false,
+      items: [
+        {
+          text: "Install",
+          link: "/sdk/install",
         },
-        { 
-          text: 'Batch transactions', 
-          link: '/guides/batch-transactions', 
-        }, 
-        { 
-          text: 'Paymasters (sponsored transactions)', 
-          link: '/guides/paymasters', 
-        }, 
-        { 
-          text: 'Magic Spend support', 
-          link: '/guides/magic-spend', 
+        {
+          text: "Setup",
+          link: "/sdk/setup",
         },
-      ], 
-    } ,
-    { 
-      text: 'SDK', 
-      collapsed: false, 
-      items: [ 
-        { 
-          text: 'Install', 
-          link: '/sdk/install', 
-        }, 
-        { 
-          text: 'Setup', 
-          link: '/sdk/setup', 
-        }, 
         {
-          text: 'makeWeb3Provider',
-          link: '/sdk/makeWeb3Provider'
+          text: "makeWeb3Provider",
+          link: "/sdk/makeWeb3Provider",
         },
-        // {
-        //   text: 'CoinbaseWalletProvider',
-        //   items: [
-        //     {
-        //       text: 'request',
-        //       items: [
-        //         {text: 'Overview', link: '/sdk/coinbaseWalletProvider/request/overview'},
-        //         {text: 'wallet_getCapabilities'},
-        //         {text: 'wallet_sendCalls'},
-        //         {text: 'wallet_getCallsStatus'},
-        //         {text: 'wallet_showCallsStatus'},
-        //       ]
-        //     }
-        //   ]
-        // },
-      ], 
+      ],
+    },
+    {
+      text: "Smart Contracts",
+      collapsed: false,
+      items: [
+        { text: "Smart Wallet", link: "https://github.com/coinbase/smart-wallet" },
+        { text: "Magic Spend", link: "https://github.com/coinbase/magic-spend" },
+      ],
     },
-    // { 
-    //   text: 'Smart Contracts', 
-    //   collapsed: false, 
-    //   items: [ 
-
-    //   ], 
-    // } 
-  ], 
-})
+  ],
+});