update sdk docs

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
 /docs/dist
+
+gitconfig

docs/pages/FAQ.mdx

@@ -16,7 +16,7 @@
 For now, Smart Wallet is separate from wallet mobile and extension. Users sign on [keys.coinbase.com](https://keys.coinbase.com/)
 and can view and manage assets at [wallet.coinbase.com](https://wallet.coinbase.com/). 
 
-See [makeWeb3Provider](/sdk/makeWeb3Provider#parameters) documentation for nuances based on different configurations. 
+See [Getting Started](/sdk/getting-started#parameters) documentation for nuances based on different configurations.
 
 ## Do users have the same address across chains? 
 Yes, a user's Smart Wallet address will be the same across all the chains we support. 

docs/pages/guides/update-existing-app.mdx

@@ -1,7 +1,7 @@
 # Update an Existing Project
 
 ## Direct dependency 
-Follow the [installation instructions](/sdk/install).
+Follow the [installation instructions](/sdk/getting-started).
 
 ## Wagmi 
 1. Upgrade Wagmi to version `2.9.5` or higher. 

docs/pages/sdk/create-coinbase-wallet-sdk.mdx

@@ -0,0 +1,37 @@
+import SdkParameters from './snippets/sdk-paramaters.mdx'
+
+# createCoinbaseWalletSDK 
+Creates a new `sdk` object for getting a `CoinbaseWalletProvider` instance. 
+
+## Usage
+:::code-group
+```ts twoslash [provider.ts]
+import { sdk } from './setup'
+
+// Create provider
+export const provider = sdk.getProvider();
+// Use provider
+const addresses = provider.request({method: 'eth_requestAccounts'});
+```
+```ts twoslash [setup.ts] filename="setup.ts"
+// @ts-expect-error - TODO: update when the SDK is released
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+
+export const sdk = createCoinbaseWalletSDK({
+    appName: "My App",
+    appLogoUrl: "https://example.com/logo.png",
+    appChainIds: [8453],
+    preference: {
+        options: "smartWalletOnly",
+        attribution: {
+            auto: true,
+        }
+    },
+});
+```
+:::
+
+## Returns 
+An object with related SDK methods
+
+<SdkParameters />

docs/pages/sdk/getting-started.mdx

@@ -0,0 +1,76 @@
+import SdkParameters from './snippets/sdk-paramaters.mdx'
+
+# Getting Started
+
+*Note: If your app is still using the `CoinbaseWalletSDK` class. You can follow the Legacy Setup guide [here](/sdk/legacy-setup).*
+
+::::steps
+
+## Install `@coinbase/wallet-sdk`
+
+:::code-group
+```bash [npm]
+npm i @coinbase/wallet-sdk
+```
+```bash [pnpm]
+pnpm i @coinbase/wallet-sdk
+```
+```bash [yarn]
+yarn add @coinbase/wallet-sdk
+```
+```bash [bun]
+bun i @coinbase/wallet-sdk
+```
+:::
+
+## Create a new sdk object
+
+```ts twoslash [setup.ts]
+// @ts-expect-error - TODO: update when the SDK is released
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+
+export const sdk = createCoinbaseWalletSDK({
+    appName: "My App",
+    appLogoUrl: "https://example.com/logo.png",
+    appChainIds: [8453],
+    preference: {
+        options: "smartWalletOnly",
+        attribution: {
+            auto: true,
+        }
+    },
+});
+```
+
+## Create a new provider object
+
+:::code-group
+```ts twoslash [provider.ts]
+import { sdk } from './setup'
+
+// Create provider
+export const provider = sdk.getProvider();
+// Use provider
+const addresses = provider.request({method: 'eth_requestAccounts'});
+```
+```ts twoslash [setup.ts] filename="setup.ts"
+// @ts-expect-error - TODO: update when the SDK is released
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+
+export const sdk = createCoinbaseWalletSDK({
+    appName: "My App",
+    appLogoUrl: "https://example.com/logo.png",
+    appChainIds: [8453],
+    preference: {
+        options: "smartWalletOnly",
+        attribution: {
+            auto: true,
+        }
+    },
+});
+```
+:::
+
+::::
+
+<SdkParameters />

docs/pages/sdk/legacy-setup.mdx

@@ -0,0 +1,70 @@
+import SdkParameters from './snippets/sdk-paramaters.mdx'
+
+# Getting Started (V4.0.0+)
+
+::::steps
+
+## Install `@coinbase/wallet-sdk`
+
+:::code-group
+```bash [npm]
+npm i @coinbase/wallet-sdk
+```
+
+```bash [pnpm]
+pnpm i @coinbase/wallet-sdk
+```
+
+```bash [yarn]
+yarn add @coinbase/wallet-sdk
+```
+
+```bash [bun]
+bun i @coinbase/wallet-sdk
+```
+:::
+
+## Create an SDK Instance
+
+```ts twoslash [setup.ts]
+import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+
+export const sdk = new CoinbaseWalletSDK({
+    appName: "My App",
+    appLogoUrl: "https://example.com/logo.png",
+    appChainIds: [8453],
+});
+```
+
+## Create a Provider
+:::code-group
+```ts twoslash [provider.ts]
+import { sdk } from './setup'
+
+// see the makeWeb3Provider page for more information
+const preference = {
+    options: "smartWalletOnly",
+    attribution: {
+        auto: true,
+    }
+};
+// @errors: 2307
+// Create provider
+export const provider = sdk.makeWeb3Provider(preference);
+// Use provider
+const addresses = provider.request({method: 'eth_requestAccounts'});
+```
+```ts twoslash [setup.ts] filename="setup.ts"
+import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+
+export const sdk = new CoinbaseWalletSDK({
+    appName: "My App",
+    appLogoUrl: "https://example.com/logo.png",
+    appChainIds: [8453],
+});
+```
+:::
+
+::::
+
+<SdkParameters />

docs/pages/sdk/makeWeb3Provider.mdx → docs/pages/sdk/make-web3-provider.mdx

@@ -46,4 +46,29 @@ With this option, users will only see an option to create a Smart Wallet or sign
 #### `eoaOnly`
 Users will only see the mobile app connection option. If the user is on mobile, they will be taken directly 
 to the Coinbase Wallet app. If the user is using a browser with Coinbase Wallet Extension, they will be taken 
-directly to the Extension.
+directly to the Extension.
+
+### attribution (optional)
+- Type: `Attribution`
+
+This option only applies to Coinbase Smart Wallet. When a valid data suffix is supplied, it is appended to the initCode and executeBatch calldata.
+
+```ts twoslash
+type Attribution = {
+    auto: boolean;
+    dataSuffix?: never;
+} | {
+    auto?: never;
+    dataSuffix: `0x${string}`;
+}
+```
+
+##### `auto` (optional)
+- Type: `boolean`
+
+If auto is true, the Smart Wallet will generate a 16 byte hex string from the apps origin.
+
+##### `dataSuffix` (optional)
+- Type: `0x${string}`
+
+Smart Wallet expects a 16 byte hex string. If the data suffix is not a 16 byte hex string, the Smart Wallet will ignore the property. 

docs/pages/sdk/snippets/preference-parameters.mdx

@@ -0,0 +1,63 @@
+
+### preference (optional)
+
+- Type `Preference`
+
+```ts twoslash
+type Attribution = {
+    auto: boolean;
+    dataSuffix?: never;
+} | {
+    auto?: never;
+    dataSuffix: `0x${string}`;
+}
+
+type Preference = {
+    options?: 'all' | 'smartWalletOnly' | 'eoaOnly';
+    attribution?: Attribution;
+}
+```
+
+#### `preference.options` (optional)
+- Type: `'all' | 'smartWalletOnly' | 'eoaOnly'`
+
+Determines which connection options users will see. Defaults to `all`.
+
+##### `all`
+Users will see Smart Wallet and mobile app connection options.
+
+:::info
+If a user is using a browser with Coinbase Wallet Extension installed, they will be taken straight to the
+Coinbase Wallet Extension and not see any choice.
+:::
+
+##### `smartWalletOnly`
+With this option, users will only see an option to create a Smart Wallet or sign into their Smart Wallet.
+
+##### `eoaOnly`
+With this option, users will only see an option to connect with their EOA.
+
+#### `preference.attribution` (optional)
+- Type: `Attribution`
+
+This option only applies to Coinbase Smart Wallet. When a valid data suffix is supplied, it is appended to the initCode and executeBatch calldata.
+
+```ts twoslash
+type Attribution = {
+    auto: boolean;
+    dataSuffix?: never;
+} | {
+    auto?: never;
+    dataSuffix: `0x${string}`;
+}
+```
+
+##### `auto` (optional)
+- Type: `boolean`
+
+If auto is true, the Smart Wallet will generate a 16 byte hex string from the apps origin.
+
+##### `dataSuffix` (optional)
+- Type: `0x${string}`
+
+Smart Wallet expects a 16 byte hex string. If the data suffix is not a 16 byte hex string, the Smart Wallet will ignore the property. 

docs/pages/sdk/setup.mdx → docs/pages/sdk/snippets/sdk-paramaters.mdx

@@ -1,16 +1,7 @@
-# Setup 
-Create a new `CoinbaseWalletSDK` instance. 
+import PreferenceParameters from './preference-parameters.mdx'
 
-```ts twoslash
-import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk'
+## Parameters
 
-const sdk = new CoinbaseWalletSDK({
-  appName: 'My App Name',
-  appChainIds: [8453]
-});
-```
-
-## Parameters 
 ### appName (optional)
 - Type: `string`
 
@@ -32,3 +23,4 @@ App logo image URL. Favicon is used if unspecified.
 Local paths are not supported for `appLogoUrl` as the logo is presented on another window as popup. Please provide a non-local URL.
 :::
 
+<PreferenceParameters />

vocs.config.tsx

@@ -169,16 +169,24 @@ export default defineConfig({
       collapsed: false,
       items: [
         {
-          text: "Install",
-          link: "/sdk/install",
-        },
-        {
-          text: "Setup",
-          link: "/sdk/setup",
+          text: "Getting Started (v4.2.0+)",
+          link: "/sdk/getting-started",
+          items: [
+            {
+              text: "createCoinbaseWalletSDK",
+              link: "/sdk/create-coinbase-wallet-sdk",
+            },
+          ],
         },
         {
-          text: "makeWeb3Provider",
-          link: "/sdk/makeWeb3Provider",
+          text: "Legacy Setup",
+          link: "/sdk/legacy-setup",
+          items: [
+            {
+              text: "makeWeb3Provider",
+              link: "/sdk/make-web3-provider",
+            },
+          ],
         },
         {
           text: "Upgrading from 3.x",