diff --git a/docs/public/logo.svg b/docs/public/logo.svg new file mode 100644 index 0000000..aa2c382 --- /dev/null +++ b/docs/public/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/snippets/useCallsStatus.ts b/docs/snippets/useCallsStatus.ts index 9561c50..e019781 100644 --- a/docs/snippets/useCallsStatus.ts +++ b/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 }; } diff --git a/docs/snippets/useEIP5792WalletClient.ts b/docs/snippets/useEIP5792WalletClient.ts index ad6b309..7a6f487 100644 --- a/docs/snippets/useEIP5792WalletClient.ts +++ b/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; } diff --git a/docs/snippets/useWalletCapabilities.ts b/docs/snippets/useWalletCapabilities.ts index 9d1ca50..fdc6a7a 100644 --- a/docs/snippets/useWalletCapabilities.ts +++ b/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, - } + }; } diff --git a/docs/snippets/useWriteContracts.ts b/docs/snippets/useWriteContracts.ts index 0a01224..dceb485 100644 --- a/docs/snippets/useWriteContracts.ts +++ b/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(undefined) + const walletClient = useEIP5792WalletClient(); + const [id, setId] = useState(undefined); const writeContracts = ( - parameters: Omit + parameters: Omit, ) => { 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 }; } diff --git a/dprint.json b/dprint.json index b4fc523..4220195 100644 --- a/dprint.json +++ b/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" ] } diff --git a/vocs.config.ts b/vocs.config.ts index a20fc6d..53fd5e7 100644 --- a/vocs.config.ts +++ b/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: [ - - // ], - // } - ], -}) + ], +});