Merge pull request #86 from coinbase/jake/sdk-update

Update docs for sdk config

.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/components/create-wallet-button.mdx

@@ -289,7 +289,7 @@ To implement the Create Wallet button using only the SDK, all you need to do is
 
 ```tsx twoslash [BlueCreateWalletButton.tsx] filename="BlueCreateWalletButton.tsx"
 import React, { useCallback } from 'react';
-import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
 import { CoinbaseWalletLogo } from './CoinbaseWalletLogo';
 
 const buttonStyles = {
@@ -309,13 +309,13 @@ const buttonStyles = {
   borderRadius: 10,
 };
 
-const sdk = new CoinbaseWalletSDK({
+const sdk = new createCoinbaseWalletSDK({
   appName: 'My Dapp',
   appLogoUrl: 'https://example.com/logo.png',
   appChainIds: [84532],
 });
 
-const provider = sdk.makeWeb3Provider();
+const provider = sdk.getProvider();
 
 export function BlueCreateWalletButton({ handleSuccess, handleError }) {
   const createWallet = useCallback(async () => {
@@ -340,7 +340,7 @@ export function BlueCreateWalletButton({ handleSuccess, handleError }) {
 
 ```tsx twoslash [BlackCreateWalletButton.tsx] filename="BlackCreateWalletButton.tsx"
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';
 import { CoinbaseWalletLogo } from './CoinbaseWalletLogo';
 
 const GRADIENT_BORDER_WIDTH = 2;
@@ -391,13 +391,13 @@ function Gradient({ children, style, isAnimationDisabled = false }) {
   );
 }
 
-const sdk = new CoinbaseWalletSDK({
+const sdk = new createCoinbaseWalletSDK({
   appName: 'My Dapp With Vanilla SDK',
   appLogoUrl: 'https://example.com/logo.png',
   appChainIds: [84532],
 });
 
-const provider = sdk.makeWeb3Provider();
+const provider = sdk.getProvider();
 
 export function BlackCreateWalletButton({ height = 66, width = 200 }) {
   const minButtonHeight = 48;

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,36 @@
+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"
+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,74 @@
+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 filename="setup.ts" [setup.ts]
+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 filename="provider.ts" [provider.ts]
+import { sdk } from './setup'
+
+// Create provider
+export const provider = sdk.getProvider();
+// Use provider
+const addresses = provider.request({ method: 'eth_requestAccounts' });
+```
+```ts twoslash filename="setup.ts" [setup.ts]
+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,75 @@
+
+### preference (optional)
+
+- Type `Preference`
+
+```ts twoslash
+type Attribution = {
+    auto: boolean;
+    dataSuffix?: never;
+} | {
+    auto?: never;
+    dataSuffix: `0x${string}`;
+}
+
+type Preference = {
+    keysUrl?: string;
+    options?: 'all' | 'smartWalletOnly' | 'eoaOnly';
+    attribution?: Attribution;
+}
+```
+:::note
+##### `preference.keysUrl` (optional)
+- Type: `string`
+
+__Supported Values:__
+- `https://keys.coinbase.com/connect`
+- `https://keys-dev.coinbase.com/connect`
+:::
+
+:::note
+##### `preference.options` (optional)
+- Type: `all` | `smartWalletOnly` | `eoaOnly`
+
+Determines what connection options users will see. Defaults to `all`.
+
+__`all`__
+Users see Smart Wallet and mobile app connection options.
+
+
+> 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`__
+Users only see an option to create a Smart Wallet or sign into their Smart Wallet.
+
+__`eoaOnly`__
+Users only see an option to connect with their EOA.
+:::
+
+:::note
+##### `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. 
+:::