[Portal] Account Docs (#6442)

Author: saminacodes

apps/portal/src/app/account/account-info/page.mdx

@@ -1,8 +1,8 @@
 import { DocImage, Steps, Step } from "@doc";
-import chooseKeyImage from "../assets/choose-key.png";
 import allowedDomainsImage from "../assets/allowed-domains.png";
-import selectEditImage from "../assets/select-edit.png";
 import { createMetadata } from "@doc";
+import AccessRestrictions from "./assets/access-restrictions.png";
+import ProjectOverview from "../assets/project-overview.png";
 
 export const metadata = createMetadata({
 	title: "Access Restrictions",
@@ -24,32 +24,28 @@ To modify the allowed Domain Id or Bundle Ids:
 
 <Steps>
 
-<Step title="Go to Dashboard">
+<Steps>
 
-Go to **[thirdweb dashboard](https://thirdweb.com/team)**
+<Step title="Select Project">
 
-</Step>
+Select the project you want to set access restrictions on from the Overview section of your dashboard.
 
-<Step title="Choose API Key">
-Choose the API Key you want to modify restrictions on.
+<DocImage src={ProjectOverview} alt="Project Overview" />
 
-<DocImage src={chooseKeyImage} />
 </Step>
 
-<Step title="Edit">
-Select `Edit` to enter editor mode.
+<Step title="Project Settings">
 
-<DocImage src={selectEditImage} />
-</Step>
+Navigate to the project's settings and locate Domain Restrictions and Bundle ID restrictions. Add the domain or bundle id you want to restrict the project on.
 
-<Step title="Edit Domains">
-Enter the allowed domains the "Allowed Domains" field or switch to Bundle IDs to enter allowed Bundle IDs.
+<DocImage src={AccessRestrictions} alt="" />
 
-<DocImage src={allowedDomainsImage} />
 </Step>
 
 <Step title="Save Changes">
-
+Save your changes to apply the access restrictions.
 </Step>
 
 </Steps>
+
+</Steps>

apps/portal/src/app/account/api-keys/access/assets/access-restrictions.png

@@ -46,7 +46,7 @@ Input the domains you want to restrict your application to in Allowed Domains th
 
 Store your secret key in a secure location and confirm that you have stored it by checking the checkbox then select Complete.
 
-<Callout variant="warning">
+<Callout variant="danger" title="Secret Key">
 	Do not share secret keys. They grant access to all thirdweb services. Secret
 	keys should only be used in backend environments like CLI, scripts, and
 	servers. Never expose secret keys in client-side code due to the lack of

apps/portal/src/app/account/api-keys/access/page.mdx

@@ -1,6 +1,7 @@
 import { DocImage, Steps, Step } from "@doc";
-import chooseKeyImage from "../assets/choose-key.png";
 import confirmDeleteImage from "../assets/confirm-delete.png";
+import ProjectOverview from "../assets/project-overview.png";
+import DeleteProject from "./assets/delete-project.png";
 import { createMetadata } from "@doc";
 
 export const metadata = createMetadata({
@@ -13,27 +14,30 @@ export const metadata = createMetadata({
 	},
 });
 
-# Delete API Key
+# Delete Or Transfer Project
 
-Deleting an API key will invalidate it, making it no longer usable.
+Deleting a project also removes its associated API key, rendering it invalid and unusable. You may also choose to transfer projects to another team.
 
 <Steps>
 
-<Step title="Go to Dashboard">
-	Go to **[your team's projects page](https://thirdweb.com/team)** on the dashboard.
-</Step>
+<Step title="Select Project">
 
-<Step title='Choose API Key'>
-Choose the API Key you want to delete.
+Select the project you want to delete or transfer from the Overview section of your dashboard.
 
-<DocImage src={chooseKeyImage} />
+<DocImage src={ProjectOverview} alt="Project Overview" />
 
 </Step>
 
-<Step title='Delete Key'>
-To delete an API key, select `Delete key` and confirm your intention to delete the key. The key will then be deleted.
+<Step title="Project Settings">
+
+Navigate to the project's settings and locate "Transfer Project" or "Delete Project".
+
+<DocImage src={DeleteProject} alt="Delete Project" />
+
+</Step>
 
-<DocImage src={confirmDeleteImage} />
+<Step title="Confirm Transfer or Deletion">
+In the UI confirm the transfer or deletion of the project.
 </Step>
 
 </Steps>

apps/portal/src/app/account/api-keys/assets/all-services.png

@@ -1,8 +1,6 @@
 import { DocImage, Steps, Step } from "@doc";
-import chooseKeyImage from "../assets/choose-key.png";
-import selectEditImage from "../assets/select-edit.png";
-import allServicesImage from "../assets/all-services.png";
-import smartWalletAPIKeyImage from "../assets/smart-wallet-api-key.png";
+import ProjectOverview from '../assets/project-overview.png';
+import EnabledServices from './assets/enabled-services.png';
 import { createMetadata } from "@doc";
 
 export const metadata = createMetadata({
@@ -15,70 +13,33 @@ export const metadata = createMetadata({
 	},
 });
 
-# Edit enabled services on API Keys
+# Enabled Services
 
-All services on API keys are enabled by default. If you want to disable any services or edit settings for each service:
 
-<Steps>
-
-<Step title="Go to Dashboard">
 
-Go to **[your team's projects page](https://thirdweb.com/team)** on the dashboard.
+All services on API keys per project are enabled by default. If you want to disable any services or edit settings for each service:
 
-</Step>
+<Steps>
 
-<Step title="Choose API key">
+<Step title="Select Project">
 
-Choose the API Key from which you want to enable or disable a Service.
+Select the project you want to edit services for from the Overview section of your dashboard.
 
-<DocImage src={chooseKeyImage} />
+<DocImage src={ProjectOverview} alt="Project Overview" />
 
 </Step>
 
-<Step title="Edit">
-Select `Edit` to enter the editor view.
+<Step title="Project Settings">
 
-<DocImage src={selectEditImage} />
-</Step>
+Navigate to the project's settings and locate "Enabled Services".
 
-<Step title="Modify services">
-Navigate to the Services section and enable the service and modify any services as needed.
+<DocImage src={EnabledServices} alt="Enabled Services" />
 
-<DocImage src={allServicesImage} />
 </Step>
 
-<Step title="Save Changes">
+<Step title="Modify Services">
+Toggle the specified service you want on or off. Each service is on by default and toggling will turn off access to the service for the project.
 </Step>
-</Steps>
-
-### Services
-
-#### Storage
-
-By default, Storage services are enabled upon creation of the API Key.
-
-Storage provides two sub-settings enabled by default on API Key creation.
 
-- Upload - Enable uploading to Storage
-- Download - Enable downloading from Storage
-
-To disable Upload or Download:
-
-1. Navigate to Settings > API Keys
-2. Toggle the checkboxes in the Services > Storage settings
-
-#### RPC Edge
-
-By default, RPC Edge services are enabled upon creation of the API Key.
-
-To use RPC Edge in your application, see our [RPC Edge QuickStart](/infrastructure/rpc-edge/get-started) article.
-
-#### Account abstraction services
-
-By default, Account abstraction services services are enabled upon creation of the API Key.
-
-To set additional rules on which transactions you want to sponsor, go to your Team > Project > Account Abstraction > Configuration page.
-
-#### In-App Wallets
+</Steps>
 
-By default, In-App Wallet services are enabled upon creation of the API Key. You can view your in-app wallet's settings in your Team > Project > Connect > In App Wallets page.

apps/portal/src/app/account/api-keys/assets/choose-key.png

@@ -12,7 +12,9 @@ export const metadata = createMetadata({
 
 # API Keys
 
-API Keys are required to use thirdweb's infrastructure services including [Storage](/infrastructure/storage/overview), [RPC Edge](/infrastructure/rpc-edge/overview), [Account Abstraction infrastructure](/connect/account-abstraction), and [In-App Wallets](/connect/in-app-wallet/overview).
+Each thirdweb project is equipped with an API key to use thirdweb's infrastructure services including [Storage](/infrastructure/storage/overview), [RPC Edge](/infrastructure/rpc-edge/overview), [Account Abstraction infrastructure](/connect/account-abstraction), and [In-App Wallets](/connect/in-app-wallet/overview).
+
+## Services
 
 API Keys allow you to:
 
@@ -25,3 +27,9 @@ API Keys consists of two components:
 
 - **Client ID**- Used to access the enabled thirdweb infrastructure services and identify your application using an app bundle ID (identifier for native apps) or domain (identifier for websites). Client IDs can be restricted to allow only specified domains and app bundle IDs to access the enabled services.
 - **Secret Key**- Used to access the enabled thirdweb infrastructure services by identifying and authenticating your application from a backend. **Sharing or exposing this key to others is unsafe because it grants access to all services.**
+
+## Obtain API Key
+
+To obtain an API Key, follow the Create Project step in the [Create API Key](/account/api-keys/create) guide. 
+
+You can find your API Key in the project settings of your dashboard.

apps/portal/src/app/account/api-keys/assets/project-overview.png

@@ -1,9 +1,9 @@
-import { createMetadata, DocImage } from "@doc";
-import opScreen1 from "./opimg1.png";
-import opScreen2 from "./opimg2.png";
+import { createMetadata, DocImage, Steps, Step } from "@doc";
+import TeamSettings from './assets/team-settings.png';
+import Credits from './assets/credits-page.png';
 
 export const metadata = createMetadata({
-	title: "Credits",
+	title: "thirdweb - Credits",
 	description: "Learn about how credits will be applied to your bill",
 	image: {
 		title: "Credits",
@@ -13,33 +13,28 @@ export const metadata = createMetadata({
 
 # Credits
 
-Credits let you cover the costs of using thirdweb services. There are two types of credits that you can receive.
+Credits let you cover the costs of using thirdweb services. There are currently two types of credits available on thirdweb:
 
-#### Optimism Superchain Credits
+- **Optimism Superchain Credits**
+Optimism superchain credits are redeemed from a program which aims to enable developers to create seamless web3 user onboarding experiences powered by Smart Accounts. [Learn more about the OP Superchain program.](https://thirdweb.com/grant/superchain)
 
-These credits can be used to cover gas fees on Superchain networks, which are a collection of networks built on the OP stack and include the following chains:
+- **Service Credits**: These credits can be applied across any thirdweb service on any chain. This includes usage across In-App Wallets, RPC, and IPFS storage. To get thirdweb credits, apply to join the [startup program.](https://thirdweb.com/community/startup-program).
 
-- OP Mainnet
-- Base
-- Zora
-- Mode
-- Fraxtal
+## View Credits
 
-To get superchain credits, apply to join the [Superchain App Accelerator](https://thirdweb.com/grant/superchain?ref=blog.thirdweb.com).
+<Steps>
 
-This program aims to enable developers to create exceptional web3 user experiences powered by Smart Accounts. You can use your OP credits to start using Account Abstraction to sponsor your users' gas fees for free. Learn more about how you can easily integrate Account Abstraction into your apps [here](https://portal.thirdweb.com/connect/account-abstraction).
+<Step title="Navigate to Settings">
 
-#### thirdweb Credits
+While logged in, navigate to the **Settings** tab in your dashboard and select **Settings**.
 
-These credits can be applied across any thirdweb service on any chain. This includes usage across In-App Wallets, RPC, and IPFS storage.
+<DocImage src={TeamSettings} alt="Team Settings" />
+</Step>
+<Step title="View Credits">
+Select Credits to view your available credits and usage or apply to the OP Superchain program.
+<DocImage src={Credits} alt="Credits dashboard" />
+</Step>
 
-To get thirdweb credits, apply to join the [startup program.](https://thirdweb.com/community/startup-program).
+</Steps>
 
-### Using your credits
-
-You can view how many credits you have in [your team's billing page](https://thirdweb.com/team/~/~/settings/billing)
-
-<DocImage src={opScreen1} />
-<DocImage src={opScreen2} />
-
-If you have credits, you can use eligible thirdweb services normally without any extra setup. Credits will automatically be applied to your bill at the end of the month.
+If you have credits, you can use eligible thirdweb services normally without any extra setup. Credits will automatically be applied to your bill at the end of the month.