api key modifications (#847)

* modify API Key flow

* move api keys lower in sidebar

* icon

docs/go/index.md

@@ -32,7 +32,7 @@ go get github.com/thirdweb-dev/go-sdk/v2/thirdweb
 
 ## Getting Started
 
-To start using this SDK, you just need to pass in a provider configuration. It's also strongly recommended that you use your thirdweb API keys with the SDK in order to get the best infrastructure performance (across RPCs, IPFS, etc.) - you can learn more about creating and using API keys [here](https://portal.thirdweb.com/api-keys).
+To start using this SDK, you just need to pass in a provider configuration. It's also recommended that you use your thirdweb API keys with the SDK in order to get the best infrastructure performance (across RPCs, IPFS, etc.) - you can learn more about creating and using API keys [here](https://portal.thirdweb.com/api-keys).
 
 ### Instantiating the SDK
 

docs/onboarding/0 1 Platform Overview.mdx

@@ -10,23 +10,6 @@ import ThemedImage from "@theme/ThemedImage";
 thirdweb is a comprehensive development framework that empowers you to seamlessly
 build, launch, and manage web3 applications and games across any EVM-compatible blockchain.
 
-:::info API Keys
-  The following thirdweb products and services now require an API key:
-  - [**Smart Wallet**](/glossary/smart-wallet)
-  - [**Storage**](/storage)
-  - The following [**CLI**](/cli) commands (these commands require you to login using the [login](/cli/commands/login) command):
-    - [**Generate**](/cli/commands/generate)
-    - [**Deploy**](/cli/commands/deploy)
-    - [**Publish**](/cli/commands/publish)
-      - [**Upload**](/cli/commands/upload)
-  - **RPCs**
-
-Visit the thirdweb [**Dashboard**](https://thirdweb.com/create-api-key) to create an API key.
-
-To learn more about API keys, please visit the [**API Keys**](/api-keys) **page**.
-:::
-
-
 ## Architecture
 
 Whether you're developing decentralized applications from scratch or enhancing existing ones,

docs/onboarding/11 Storage/0 Overview.mdx

@@ -17,10 +17,6 @@ ideal for storing files in a permanent, decentralized, censorship-resistant mann
 Storage powers functionality in a number of our other products, such as uploading smart contract ABIs in [deploy](/deploy),
 our [IPFS Renderer](/react/react.mediarenderer) UI component & [NFT metadata fetching](/react/react.usenft) capabilities in the SDK, and uploading of NFT metadata in the dashboard.
 
-:::caution
-You will require an API key to use thirdweb’s storage services. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
-:::
-
 <OpenSourceInfo
   repoName="storage"
   repoUrl="https://github.com/thirdweb-dev/js/tree/main/packages/storage"

docs/python/getting-started.mdx

@@ -12,7 +12,7 @@ To get started, install the thirdweb package into your Python project:
 pip install thirdweb-sdk
 ```
 
-:::info
+:::info API Key
 You will require an API key to use thirdweb’s infrastructure services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 :::
 

docs/react-native/getting-started.md

@@ -6,14 +6,14 @@ displayed_sidebar: react-native
 
 # Getting Started
 
-:::info
-You will require an API key to use thirdweb’s infrastructure services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
-:::
-
 Our SDK uses a [Provider Pattern](https://flexiple.com/react/provider-pattern-with-react-context-api/); meaning any component within the `ThirdwebProvider` will have access to the SDK.
 
 Let's take a look at a typical setup:
 
+## API Key
+
+You will require an API key to use thirdweb’s infrastructure services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
+
 ## Configure the `ThirdwebProvider`
 
 Specify the network your smart contracts are deployed to in the `activeChain` prop and wrap your application like so:

docs/react-native/storage.md

@@ -10,7 +10,8 @@ Get the instance of the `ThirdwebStorage` class being used by the [`ThirdwebProv
 
 Allows you to use the TypeScript SDK functionality of [Storage](/storage) in your React native app.
 
-:::caution API Key
+## API Key
+
 You will require an API key to use thirdweb’s storage services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 
 You can then obtain a `clientId` from the API key which you will need to pass to the [`ThirdwebProvider`](/react/react.thirdwebprovider) component:
@@ -29,8 +30,6 @@ const App = () => {
 
 Please note that you will also need to get your app's `bundleId` and pass it in the `Allowed Bundle IDs` section when creating your API key. Check [how you can get your app's `bundleId`](https://portal.thirdweb.com/api-keys#react-native).
 
-:::
-
 ## useStorage hook
 
 Configurable in the [`storageInterface`](/react/react.thirdwebprovider#storageinterface-optional) prop of the [`ThirdwebProvider`](/react/react.thirdwebprovider).

docs/react/ThirdwebProvider.mdx

@@ -16,8 +16,8 @@ Wrap your app in the `ThirdwebProvider` to access the SDK’s functionality
 
 ## Usage
 
-:::caution API Keys
-To use the React SDK, you need to first obtain an API key from the [Dashboard](https://thirdweb.com/dashboard) and then copy the `clientId` to pass as a prop to the `ThirdwebPovider`.
+:::info API Keys
+You will require an API key to use thirdweb's infrastructure services with the SDK, you need to first obtain an API key from the [dashboard](https://thirdweb.com/dashboard) and then copy the `clientId` to pass as a prop to the `ThirdwebPovider`.
 :::
 
 If you are using one of our <a href="#default-chains">default chains</a>, provide the name of the chain as a `string` to the `activeChain` prop.

docs/react/getting-started.mdx

@@ -172,7 +172,7 @@ export default function Home() {
 
 <br />
 
-:::caution API KEYS
+:::info API Key
 You will require an API key to use thirdweb's infrastructure services with the SDK. If you haven't created a key yet you can do so for **free** from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 :::
 

docs/react/storage/usestorage.mdx

@@ -8,7 +8,8 @@ Get the instance of the `ThirdwebStorage` class being used by the [`ThirdwebProv
 
 Allows you to use the TypeScript SDK functionality of [Storage](/storage) in your React app.
 
-:::caution API Key
+## API Key
+
 You will require an API key to use thirdweb’s storage services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 
 You can then obtain a `clientId` from the API key which you will need to pass to the [`ThirdwebProvider`](/react/react.thirdwebprovider) component:
@@ -25,8 +26,6 @@ const App = () => {
 };
 ```
 
-:::
-
 Configurable in the [`storageInterface`](/react/react.thirdwebprovider#storageinterface-optional) prop of the [`ThirdwebProvider`](/react/react.thirdwebprovider).
 
 The hook returns a [`ThirdwebStorage`](/typescript/storage) instance. View the [TypeScript Storage](/typescript/storage) documentation for more information.

docs/react/storage/usestorageupload.mdx

@@ -10,7 +10,8 @@ Hook for uploading files to IPFS and retrieving the IPFS URI.
 import { useStorage } from "@thirdweb-dev/react";
 ```
 
-:::caution API Key
+## API key
+
 You will require an API key to use thirdweb’s storage services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 
 You can then obtain a `clientId` from the API key which you will need to pass to the [`ThirdwebProvider`](/react/react.thirdwebprovider) component:
@@ -27,8 +28,6 @@ const App = () => {
 };
 ```
 
-:::
-
 ## Usage
 
 ```jsx

docs/typescript/getting-started.mdx

@@ -31,7 +31,7 @@ npx thirdweb create app
 
 <br />
 
-:::info
+:::info API Key
 You will require an API key to use thirdweb’s infrastructure services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 :::
 

docs/unity/getting-started.mdx

@@ -10,7 +10,7 @@ import GettingStartedLiveEditor from "@components/live-code/snippets/GettingStar
 Before getting started, you'll need to
 [download and install the Unity Hub and Unity Editor](https://learn.unity.com/tutorial/install-the-unity-hub-and-editor).
 
-:::info
+:::info API Key
 You will require an API key to use thirdweb’s infrastructure services with the SDK. If you haven’t created a key yet you can do so for free from the [**thirdweb dashboard**](https://thirdweb.com/create-api-key).
 :::
 

src/theme/DocSidebarItem/Link/index.js

@@ -40,7 +40,7 @@ export const iconMapping = {
   "UI Components": "/assets/product/ui.png",
   Home: "/assets/icons/home.png",
   "Overview ": "/assets/icons/wrench.png",
-  "API Keys": "/assets/icons/rocket.png",
+  "API Keys": "/assets/resources/key.png",
   Templates: "/assets/resources/sdk-reference.svg",
   Guides: "/assets/resources/guides.svg",
   CLI: "/assets/product/CLI.png",
@@ -110,9 +110,7 @@ export default function DocSidebarItemLink({
             }
 
             ${
-              (label === "Home" ||
-                label === "Overview " ||
-                label === "API Keys") &&
+              (label === "Home" || label === "Overview ") &&
               styles.invertLightIcon
             }
               

src/theme/DocSidebarItems/index.js

@@ -27,7 +27,7 @@ function DocSidebarItems({ items, ...props }) {
   const sidebarItems = [
     {
       title: null, // No title for the first section
-      items: ["Home", "Overview ", "API Keys"],
+      items: ["Home", "Overview "],
     },
     {
       title: "Wallets",
@@ -77,7 +77,7 @@ function DocSidebarItems({ items, ...props }) {
     },
     {
       title: "Resources",
-      items: ["Templates", "Guides", "Glossary"],
+      items: ["API Keys", "Templates", "Guides", "Glossary"],
     },
   ];