[Docs] Add Ecosystem Wallet to sidebar and update documentation (#7643)

Author: joaquim-verges

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/EngineCloudBarChartCardUI.tsx

@@ -68,7 +68,7 @@ export function EngineCloudBarChartCardUI({
   if (data.length === 0 || isAllEmpty) {
     return (
       <EmptyStateCard
-        link="https://portal.thirdweb.com/engine/v3"
+        link="https://portal.thirdweb.com/transactions"
         metric="Transactions"
       />
     );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/layout.tsx

@@ -104,7 +104,7 @@ function EngineLegacyBannerUI(props: {
           <Button asChild size="sm" variant="outline">
             <Link
               className="gap-2 bg-background"
-              href="https://portal.thirdweb.com/engine/v3"
+              href="https://portal.thirdweb.com/transactions"
               rel="noopener noreferrer"
               target="_blank"
             >

apps/portal/src/app/Header.tsx

@@ -40,7 +40,7 @@ const links = [
     name: "Payments",
   },
   {
-    href: "/engine",
+    href: "/transactions",
     name: "Transactions",
   },
   {

apps/portal/src/app/connect/sidebar.tsx

@@ -19,7 +19,15 @@ export const sidebar: SideBar = {
     },
     {
       href: `${walletSlug}/sign-in-methods/configure`,
-      name: "Create Wallets",
+      name: "User Wallets",
+    },
+    {
+      href: `${walletSlug}/server`,
+      name: "Server Wallets",
+    },
+    {
+      href: `${connectSlug}/external-wallets`,
+      name: "External Wallets",
     },
     {
       href: `${aAslug}/get-started`,
@@ -49,10 +57,6 @@ export const sidebar: SideBar = {
       href: `${walletSlug}/user-management/export-private-key`,
       name: "Export Private Keys",
     },
-    {
-      href: `${connectSlug}/external-wallets`,
-      name: "External Wallets",
-    },
     { separator: true },
     {
       isCollapsible: false,
@@ -105,6 +109,10 @@ export const sidebar: SideBar = {
           icon: <ExternalLinkIcon />,
           name: "Templates",
         },
+        {
+          href: `${walletSlug}/ecosystem/set-up`,
+          name: "Ecosystem Wallets",
+        },
         {
           href: `${walletSlug}/security`,
           name: "Security",

apps/portal/src/app/connect/wallet/ecosystem/set-up/page.mdx

@@ -2,24 +2,27 @@ import { Callout, DocImage, createMetadata, Steps, Step } from "@doc";
 import CreateEcosystemWallet from "./assets/ecosystem-info.png";
 import EcosystemWalletPermissions from "./assets/ecosystem-wallet-permissions.png";
 import AddAPartner from "./assets/add-partner.png";
+import WalletconnectCreate from "../assets/walletconnect-create.png";
+import WalletconnectUrl from "../assets/walletconnect-url.png";
+import WalletconnectWallet from "../assets/walletconnect-wallet.png";
+import WalletconnectGuide from "../assets/walletconnect-guide.png";
 
 export const metadata = createMetadata({
 	image: {
 		title: "thirdweb Ecosystem Wallet",
 		icon: "wallets",
 	},
-	title: "Get Started - Ecosystem Wallet | thirdweb",
+	title: "Ecosystem Wallet",
 	description: "Ecosystem Wallet - Own your own web3 identity stack",
 });
 
-# Get Started
+# Ecosystem Wallet
 
-Learn how to spin up your first ecosystem wallet, brand your wallet, and integrate your first ecosystem partner.
+Ecosystem wallets can span accross multiple apps and games. You can register partners, setup access controls and sponsor gas for your entire ecossytem.
+
+ Learn how to spin up your first ecosystem wallet, brand your wallet, and integrate your first ecosystem partner.
 
 <Steps>
-<Step title='Get your Client ID'>
-On the thirdweb dashboard, navigate to settings to create an API Key to obtain a Client ID.
-</Step>
 <Step title='Deploy Your Instance'>
 
 Visit the [Ecosystem Wallets dashboard](https://thirdweb.com/team/~/~/ecosystem/create) and enter the name of your ecosystem and choose your logo.
@@ -97,3 +100,46 @@ You and your partners can integrate your ecosystem wallet either as a full login
 </Step>
 
 </Steps>
+
+# How to Register Your thirdweb Ecosystem Wallet with WalletConnect (now Reown)
+
+**Note:** WalletConnect Inc. is now Reown. [Read more here](https://reown.com/blog/walletconnect-is-now-reown).  
+
+Registering your Ecosystem Wallet with Reown allows it to appear in the WalletConnect Explorer for seamless integration with platforms like OpenSea and other third-party applications.
+
+<Steps>
+<Step title="Create a New Project in Reown">
+Visit the [Reown Dashboard](https://reown.com/) and select **"Create Project"**  
+- Enter your [Ecosystem Wallet's Explorer](https://thirdweb.com/team/~/~/ecosystem/) page URL as the **Homepage URL** and proceed.  
+- Choose **Wallet** as the project type and select **"Create"**
+</Step>
+
+<DocImage src={WalletconnectCreate} />
+<DocImage src={WalletconnectUrl} />
+<DocImage src={WalletconnectWallet} />
+
+<Step title="Complete Your Project Details">
+Navigate to the **WalletGuide** tab and fill out the following form:
+- **Wallet Name:** Provide your wallet's name.  
+- **Wallet Category:** Select **"Web App Wallets"**  
+- **Web App URL:** Use your Ecosystem Wallet's Explorer page URL.  
+- **Supported Chains:** Choose Ethereum and any other chains your wallet supports.  
+- **Logo:** Upload your wallet’s logo (this will appear on the WalletConnect Explorer).  
+- **Testing Instructions:** Provide clear testing instructions for the Reown team. For example: *"Log in via the specified URL and select an authentication method."*  
+</Step>
+
+<DocImage src={WalletconnectGuide} />
+
+<Step title="Submit for Review">
+Once you've completed the form, click **"Submit Review"**  
+- After approval, your wallet will appear live on the WalletConnect Explorer.
+</Step>
+
+<Step title="Verify Your Integration">
+Visit a platform like OpenSea and use WalletConnect to log in.  
+- Select your registered wallet from the list and authenticate.  
+- Your wallet should now seamlessly connect, allowing you to interact with the platform.
+</Step>
+</Steps>
+
+By following these steps, your branded Ecosystem Wallet will be accessible across all WalletConnect-enabled (Reown) applications.

apps/portal/src/app/connect/wallet/server/page.mdx

@@ -0,0 +1,111 @@
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { TypeScriptIcon, EngineIcon } from "@/icons";
+import { createMetadata } from "@doc";
+
+export const metadata = createMetadata({
+	image: {
+		title: "Server Wallets",
+		icon: "wallets",
+	},
+	title: "Server Wallets",
+	description:
+		"Server wallets are wallets that are managed by your own application, like a treasury wallet or admin wallet. They are used to send transactions from the server.",
+});
+
+# Server Wallets
+
+Server wallets are wallets that are managed by your own application, like a treasury wallet or admin wallet. They are used to send transactions from the server.
+
+ ### Create a new Server Wallet
+
+You can create a new server wallet from your project dashboard.
+
+---
+
+<Tabs defaultValue="http">
+  <TabsList>
+    <TabsTrigger value="http" className="flex items-center gap-2 [&>p]:mb-0">
+      <EngineIcon className="w-4 h-4 mr-2" />
+      HTTP API
+    </TabsTrigger>
+    <TabsTrigger value="typescript" className="flex items-center gap-2 [&>p]:mb-0">
+      <TypeScriptIcon className="w-4 h-4 mr-2" />
+      TypeScript
+    </TabsTrigger>
+  </TabsList>
+
+  <TabsContent value="http">
+
+### Use an existing Server Wallet
+
+Once created, you can use your server wallet by passing it as the `from` field of the `executionOptions` of the [transactions API](https://engine.thirdweb.com/reference).
+
+### Create a new Server Wallet Programmatically
+
+```http
+POST /v1/accounts
+Content-Type: application/json
+x-secret-key: <your-project-secret-key>
+
+{
+    "label": "My Server Wallet"
+}
+```
+
+### List all Server Wallets
+
+```http
+GET /v1/accounts
+Content-Type: application/json
+x-secret-key: <your-project-secret-key>
+```
+
+  </TabsContent>
+
+  <TabsContent value="typescript">
+
+    ### Use an existing Server Wallet
+
+    For existing server wallets, you can get a wallet object with the `serverWallet` function.
+
+    ```typescript
+        import { Engine, createThirdwebClient } from "thirdweb";
+
+        const client = createThirdwebClient({
+            secretKey: "...", // your project secret key
+        });
+
+        const wallet = Engine.serverWallet({
+            client,
+            address: "0x...", // your server wallet address
+        });
+    ```
+
+    You can then use this wallet to send transactions just like user wallets with the thirdweb SDK.
+
+    ### Create a new Server Wallet Programmatically
+
+    You can also create new server wallets programmatically with a label.
+
+    ```typescript
+        import { Engine } from "thirdweb";
+
+        const wallet = Engine.createServerWallet({
+            client,
+            label: "My Server Wallet",
+        });
+    ```
+
+    ### List all Server Wallets
+
+    You can list all server wallets for your project.
+
+    ```typescript
+        import { Engine } from "thirdweb";
+
+        const wallets = await Engine.getServerWallets({
+            client,
+        });
+    ```
+  </TabsContent>
+</Tabs>

apps/portal/src/app/connect/wallet/sign-in-methods/configure/page.mdx

@@ -13,15 +13,12 @@ import {
 import EcosystemSocialConfig from '../assets/social-config.png'
 import { AuthMethodsTabs } from "@/components/Document/AuthMethodsTabs"
 
-# Create wallets
+# User Wallets
 
 thirdweb supports creating wallets with various authentication methods: social logins, email, SMS, passkeys, and more. For every user, thirdweb generates a [non-custodial wallet](/connect/wallet/security) behind the scenes. 
 
 ---
 
-## Interactive Guide
-
-Choose your authentication method and see the code for your platform:
 
 <AuthMethodsTabs/>
 

apps/portal/src/app/engine/v3/get-started/page.mdx

@@ -55,7 +55,7 @@ Learn how to get started with thirdweb Transactions. This guide will walk you th
 
 			<TabsContent value="curl">
 				```bash
-				curl -X POST "https://engine-cloud-dev-l8wt.chainsaw-dev.zeet.app/v1/write/contract" \
+				curl -X POST "https://engine.thirdweb.com/v1/write/contract" \
 					-H "Content-Type: application/json" \
 					-H "x-secret-key: <your-project-secret-key>" \
 					-H "x-vault-access-token: <your-vault-access-token>" \
@@ -79,7 +79,7 @@ Learn how to get started with thirdweb Transactions. This guide will walk you th
 			<TabsContent value="javascript">
 				```typescript
 				const response = await fetch(
-					"https://engine-cloud-dev-l8wt.chainsaw-dev.zeet.app/v1/write/contract",
+					"https://engine.thirdweb.com/v1/write/contract",
 					{
 						method: "POST",
 						headers: {
@@ -110,7 +110,7 @@ Learn how to get started with thirdweb Transactions. This guide will walk you th
 				import requests
 				import json
 
-				url = "https://engine-cloud-dev-l8wt.chainsaw-dev.zeet.app/v1/write/contract"
+				url = "https://engine.thirdweb.com/v1/write/contract"
 				headers = {
 					"Content-Type": "application/json",
 					"x-secret-key": "<your-project-secret-key>",
@@ -147,7 +147,7 @@ Learn how to get started with thirdweb Transactions. This guide will walk you th
 				)
 
 				func main() {
-					url := "https://engine-cloud-dev-l8wt.chainsaw-dev.zeet.app/v1/write/contract"
+					url := "https://engine.thirdweb.com/v1/write/contract"
 
 					// Create the request payload
 					type Param struct {
@@ -213,7 +213,7 @@ Learn how to get started with thirdweb Transactions. This guide will walk you th
                 {
                     static async Task Main()
                     {
-                        var url = "https://engine-cloud-dev-l8wt.chainsaw-dev.zeet.app/v1/write/contract";
+                        var url = "https://engine.thirdweb.com/v1/write/contract";
                         
                         var requestData = new
                         {

apps/portal/src/app/page.tsx

@@ -89,13 +89,17 @@ function ReferenceSection() {
       />
       <Grid>
         <SDKCard
-          href="/typescript/v5"
+          href="/references/typescript/v5"
           icon={TypeScriptIcon}
           title="TypeScript"
         />
-        <SDKCard href="/react/v5" icon={ReactIcon} title="React" />
         <SDKCard
-          href="/react-native/v5"
+          href="/references/typescript/v5"
+          icon={ReactIcon}
+          title="React"
+        />
+        <SDKCard
+          href="/references/typescript/v5"
           icon={ReactIcon}
           title="React Native"
         />
@@ -177,7 +181,7 @@ function LearningResourcesSection() {
         />
         <ArticleCardIndex
           description="Reliable transactions and monitoring"
-          href="/engine"
+          href="/transactions"
           icon={EngineIcon}
           title="Transactions"
         />