update quickstart and examples

README.md

@@ -9,6 +9,9 @@ It's built with [Docusaurus](https://docusaurus.io/).
 #### With yarn
 
 ```sh
+# Installs dependencies
+yarn
+
 # Compiles
 yarn build
 

docs/getting-started/Examples.md

@@ -11,21 +11,21 @@ That said, we have built out several example services and applications to help i
 
 ## SDK code examples
 
-Clone the Turnkey sdk repo [here](https://github.com/tkhq/sdk) to explore a few “turnkey” examples:
+Clone the Turnkey SDK repo [here](https://github.com/tkhq/sdk) to explore a few “turnkey” examples:
 
 | Example                                                                                                | Description                                                                                                                 |
 | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
 | [`with-ethers`](https://github.com/tkhq/sdk/tree/main/examples/with-ethers/)                           | Create a new Ethereum address, then sign and broadcast a transaction using the Ethers signer with Infura                    |
 | [`with-viem`](https://github.com/tkhq/sdk/tree/main/examples/with-viem/)                               | Sign and broadcast a transaction using the Turnkey Custom Account and Infura                                                |
+| [`with-ethers-and-passkeys`](https://github.com/tkhq/sdk/tree/main/examples/with-ethers-and-passkeys/) | A NextJS app that demonstrates how to use `@turnkey/ethers` to build a passkey-powered application                          |
+| [`with-viem-and-passkeys`](https://github.com/tkhq/sdk/tree/main/examples/with-viem-and-passkeys/)     | A NextJS app that demonstrates how to use `@turnkey/viem` to build a passkey-powered application                            |
 | [`with-cosmjs`](https://github.com/tkhq/sdk/tree/main/examples/with-cosmjs/)                           | Create a new Cosmos address, then sign and broadcast a transaction on Celestia testnet using the CosmJS signer              |
 | [`with-solana`](https://github.com/tkhq/sdk/tree/main/examples/with-solana/)                           | Create a new Solana address, then sign and broadcast a transaction on Solana's devnet                                       |
 | [`with-gnosis`](https://github.com/tkhq/sdk/tree/main/examples/with-gnosis/)                           | Create new Ethereum addresses, configure a 3/3 Gnosis safe, and create + execute a transaction from it                      |
 | [`with-uniswap`](https://github.com/tkhq/sdk/tree/main/examples/with-uniswap/)                         | Sign and broadcast a Uniswap v3 trade using the Ethers signer with Infura                                                   |
 | [`with-nonce-manager`](https://github.com/tkhq/sdk/tree/main/examples/with-nonce-manager/)             | Create a new Ethereum address, then sign and broadcast multiple transactions in a sequential or optimistic manner           |
 | [`with-offline`](https://github.com/tkhq/sdk/tree/main/examples/with-offline/)                         | Sign a Turnkey request in offline context                                                                                   |
 | [`with-federated-passkeys`](https://github.com/tkhq/sdk/tree/main/examples/with-federated-passkeys/)   | A NextJS app that demonstrates how to use Turnkey to build a federated, webauthn powered authentication flow                |
-| [`with-ethers-and-passkeys`](https://github.com/tkhq/sdk/tree/main/examples/with-ethers-and-passkeys/) | A NextJS app that demonstrates how to use `@turnkey/ethers` to build a passkey-powered application                          |
-| [`with-viem-and-passkeys`](https://github.com/tkhq/sdk/tree/main/examples/with-viem-and-passkeys/)     | A NextJS app that demonstrates how to use `@turnkey/viem` to build a passkey-powered application                            |
 | [`sweeper`](https://github.com/tkhq/sdk/tree/main/examples/sweeper/)                                   | Sweep funds from one address to a different address                                                                         |
 | [`deployer`](https://github.com/tkhq/sdk/tree/main/examples/deployer/)                                 | Compile and deploy a smart contract                                                                                         |
 | [`rebalancer`](https://github.com/tkhq/sdk/tree/main/examples/rebalancer)                              | A demo application which showcases an example of how to use Turnkey for managing multiple types of keys & users             |

docs/getting-started/Quickstart.md

@@ -1,28 +1,37 @@
 ---
 id: quickstart
 sidebar_position: 2
-description: Get onboarded and sign your first ETH transaction 
+description: Get onboarded and sign your first Ethereum transaction 
 slug: /getting-started/quickstart 
 ---
 # Quickstart 
 
-This quickstart will guide you through Turnkey’s onboarding, API key generation, and ETH signing via Turnkey’s CLI.
+This quickstart guide will walk you through initial onboarding, API key generation, Ethereum private key creation, and transaction signing via Turnkey.
 
 ## Create your Turnkey Organization
 
-- Visit [app.turnkey.com/dashboard/auth/initial](https://app.turnkey.com/dashboard/auth/initial) and enter your email address.
-- Confirm your email by clicking on the link inside of the confirmation email
-- Click "Continue" and choose your first authenticator (laptop biometrics or security key)
-- Pick a name for your organization click "Continue"
-- Log in by clicking the "Log in" button
+<img src="/img/quickstart/sign-up-1.png" alt="signup screenshot 1" width="800px"/>
 
-Once your log in is successful, you will land on the dashboard screen. You'll initially be on the Activities tab, and can explore the Users, Private Keys, and Policies tabs.
+1. Visit [app.turnkey.com/dashboard/auth/initial](https://app.turnkey.com/dashboard/auth/initial) and enter your email address
+2. Confirm your email by clicking on the link inside of the confirmation email
+3. Click "Continue"
 
-## Find your Organization ID
+<img src="/img/quickstart/sign-up-2.png" alt="signup screenshot 2" width="800px"/>
 
-All public API endpoints need an organization ID. You can copy your organization ID by clicking on the user dropdown in the top right corner of the app as shown in the image below.
+4. Choose your first authenticator (laptop biometrics or security key)
+5. Pick a name for your authenticator and click "Continue"
+6. Pick a name for your organization and click "Continue"
+7. Log in by clicking "Get started"
 
-![](https://files.readme.io/d8ff903-Screen_Shot_2022-12-12_at_2.15.04_PM.png "Screen Shot 2022-12-12 at 2.15.04 PM.png")
+<img src="/img/quickstart/sign-up-3.png" alt="signup screenshot 3" width="800px"/>
+
+Once your log in is successful, you will land on the dashboard screen. You'll initially be on the Activities tab, and can explore the Users, Private Keys, Security, and Sub-Orgs tabs.
+
+#### Find your Organization ID
+
+**All public API endpoints need an organization ID**. You can copy your organization ID by clicking on the user dropdown in the top right corner of the app as shown in the image below.
+
+<img src="/img/quickstart/sign-up-4.png" alt="signup screenshot 4" width="800px"/>
 
 For convenience, it's worth setting this as a permanent shell variable:
 
@@ -32,15 +41,30 @@ export ORGANIZATION_ID="<Your Org ID>"
 
 ## Create a new API Key
 
-Turnkey API Keys are generic public / private key pairs. To generate a new key, use our CLI.
+Turnkey API Keys are generic public / private key pairs. You can generate a new key via either Dashboard or CLI.
+
+### Dashboard
+
+<img src="/img/quickstart/create-api-key-1.png" alt="create api key screenshot 1" width="1200px"/>
 
-#### Installing Turnkey's CLI, `turnkey`
+1. Navigate to your user
+2. Click on "Create API key"
+
+<img src="/img/quickstart/create-api-key-2.png" alt="create api key screenshot 2" width="1200px"/>
+
+3. Select "Generate API keys in-browser" and continue
+4. Enter API key name(s)
+5. Review, save/copy API key details, and approve
+
+### CLI
+
+#### Install `turnkey`
 
 ```sh
 brew install tkhq/tap/turnkey
 ```
 
-Note: We are employing  [Homebrew](https://brew.sh/) in this guide as a quick and easy install path. For an installation path that requires no trust in external parties, refer to our [tkcli repo](https://github.com/tkhq/tkcli).
+Note: We are employing  [Homebrew](https://brew.sh/) in this guide as a quick and easy install path. For an installation path that requires no trust in external parties, **refer to our [tkcli repo](https://github.com/tkhq/tkcli)**.
 
 #### Generate a new API key
 
@@ -49,35 +73,56 @@ Note: We are employing  [Homebrew](https://brew.sh/) in this guide as a quick an
 When you run this command, Turnkey’s CLI generates a standard API key pair and **stores the API private key locally**. If you've run this command once already, add `-k keyname` to the end of the command below, replacing "keyname" with any name you'd like. Otherwise, run the command as written to use our default naming.
 
 ```sh
-turnkey gen --organization $ORGANIZATION_ID --key-name quickstart
+turnkey gen --organization $ORGANIZATION_ID --key-name demo
 ```
 
 Copy the `publicKey` field in the output.
 
-## Add your public API Key
+#### Add your public API Key
+
+<img src="/img/quickstart/create-api-key-1.png" alt="create api key screenshot 1" width="1200px"/>
 
-Head to the "Users" tab and click on the Root User:
+1. Navigate to your user via Dashboard
+2. Click on "Create API key"
 
-![](https://files.readme.io/d8fbe2b-Screen_Shot_2022-12-12_at_12.32.58_PM_2.png "Screen Shot 2022-12-12 at 12.32.58 PM_2.png")
+<img src="/img/quickstart/import-api-key.png" alt="import api key screenshot" width="1200px"/>
+
+3. Select "Generate API keys via CLI" and continue
+4. Enter API key details
+5. Review and approve
 
 Click on "Add new API keys" and enter a label for the public key you want to add. After this succeeds, you should be all set to interact with our Public API.
 
 ## Create a new Ethereum Private Key
 
-Creating a new key is done with the `/private_keys` endpoint. We call this with the Turnkey CLI, which abstracts away API routes and signatures:
+You can also generate a new private key via either Dashboard or CLI.
+
+### Dashboard
+
+<img src="/img/quickstart/create-private-key.png" alt="create private key screenshot" width="1200px"/>
+
+1. Navigate to the `Private Keys` tab
+2. Enter private key details
+3. Review and approve
+
+🥳 you've created a private key! Find it in the Activity Details, or back in the `Private Keys` tab.
+
+### CLI
+
+Creating a new private key is done with the `/private_keys` endpoint. We can use the Turnkey CLI as follows — note that the flag `-k demo` is directing the CLI to use your local API key named `demo`.
 
 ```
-turnkey private-keys create --name "ETH Key" --address-format ADDRESS_FORMAT_ETHEREUM --curve CURVE_SECP256K1 -k quickstart
+turnkey private-keys create --name "ETH Key" --address-format ADDRESS_FORMAT_ETHEREUM --curve CURVE_SECP256K1 -k demo
 ```
 
-Once the activity transitions to COMPLETE, visit the "Private Keys" tab in your dashboard and take note of the Key ID (e.g. `e624996e-11c4-48fb-ad56-874ff5a84615`), this is what we'll use to sign.
+Once the activity transitions to `COMPLETE`, visit the `Private Keys` tab in your dashboard and take note of the Key ID (e.g. `e624996e-11c4-48fb-ad56-874ff5a84615`), this is what we'll use to sign.
 
 ![](https://files.readme.io/2812d13-Screen_Shot_2022-12-15_at_6.34.55_PM.png "Screen Shot 2022-12-15 at 6.34.55 PM.png")
 
-Let's set it as a variable so we can use it to easily sign a transaction in the next step.
+Let's set it as a variable so we can use it to easily sign a transaction in the next step:
 
 ```sh
-export KEY_ID="<Your Key ID>"
+export PRIVATE_KEY_ID="<Your Private Key ID>"
 ```
 
 ## Sign a Transaction
@@ -90,19 +135,25 @@ turnkey request --host api.turnkey.com --path /public/v1/submit/sign_transaction
     "type": "ACTIVITY_TYPE_SIGN_TRANSACTION",
     "organizationId": "'"$ORGANIZATION_ID"'",
     "parameters": {
-      "privateKeyId": "'"$KEY_ID"'",
+      "privateKeyId": "'"$PRIVATE_KEY_ID"'",
       "type": "TRANSACTION_TYPE_ETHEREUM",
       "unsignedTransaction": "<Your Transaction>"
     }
-}' -k quickstart
+}' -k demo
 ```
 
-The activity immediately comes back as "COMPLETED" because Turnkey's signer works synchronously. We do not need to change any Organization data. You can find the signature in the output of the command, or by visiting the activity details page for the signature activity.
+Unlike the previous activity, `SIGN_TRANSACTION` *immediately* comes back as `COMPLETED` because Turnkey's signing-related activities are handled synchronously (we do not need to change any organization data). You can find the signature in the output of the command, or by visiting the activity details page for the `SIGN_TRANSACTION` activity.
 
 If you'd like to broadcast your transaction, you can easily do so via [Etherscan](https://etherscan.io/pushTx).
 
 ## Sign a Transaction with `Ethers.js`
 
-Turnkey provides an `Ethers` signer via the [`@turnkey/ethers`](https://www.npmjs.com/package/@turnkey/ethers) package on npm. You can use the signer to sign transactions, and bring your own provider to broadcast them.
+Turnkey provides a drop-in `Ethers` signer via the [`@turnkey/ethers`](https://www.npmjs.com/package/@turnkey/ethers) package on npm. You can use the signer to sign transactions, and bring your own provider to broadcast them.
 
 Check out the example on GitHub where we create a new Ethereum address, then sign and broadcast a transaction using the Turnkey signer: <https://github.com/tkhq/sdk/tree/main/examples/with-ethers/>
+
+## Sign a Transaction with `Viem`
+
+Turnkey also provides a drop-in `Viem` signer via the [`@turnkey/viem`](https://www.npmjs.com/package/@turnkey/viem) package on npm. You can similarly use this signer to sign transactions, and bring your own provider to broadcast them.
+
+Check out the example on GitHub where we create a new Ethereum address, then sign and broadcast a transaction using the Turnkey signer: <https://github.com/tkhq/sdk/tree/main/examples/with-viem/>

docs/passkeys/integration.md

@@ -58,7 +58,10 @@ Our SDK has integrated passkey functionality, and we've built examples to help y
     // (omitting the rest of this for brevity)
   })
   ```
+
+### Examples
 - [`@turnkey/viem`](https://www.npmjs.com/package/@turnkey/viem) is a package wrapping all of the above so that you work directly with Viem without worrying about passkeys. See [this demo](https://github.com/tkhq/sdk/tree/main/examples/with-viem-and-passkeys).
+- [`@turnkey/ethers`](https://www.npmjs.com/package/@turnkey/ethers) is a similar package that works with Ethers. See [this demo](https://github.com/tkhq/sdk/tree/main/examples/with-ethers-and-passkeys).
 
 Regardless of whether you use our helpers and abstractions, take a look at [our registration and authentication options guide](/passkeys/options). This will help you choose the right options for your passkey flow.