From c95c0dc5bd1a48dab2cfab02d967a1d5ad0f711c Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 6 Jun 2025 00:45:26 +0000
Subject: [PATCH] Nebula: Fix AutoConnect not using nebula client in root
 layout (#7291)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `TWAutoConnect` component to accept a `client` prop, allowing for better integration with different third-party clients in the application.

### Detailed summary
- Updated `TWAutoConnect` in `layout.tsx` to accept a `client` prop.
- Introduced `thirdwebClient` in `providers.tsx` to provide the client to `TWAutoConnect`.
- Modified `TWAutoConnect` component to require a `client` prop.
- Updated usage of `TWAutoConnect` in `nebula-app/providers.tsx` to pass in `nebulaAppThirdwebClient`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Improved integration of client context within the auto-connect wallet feature, enhancing authentication and connectivity for users.

- **Refactor**
  - Updated internal handling of client instances for wallet auto-connect components to streamline authentication processes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/app/(app)/account/layout.tsx         | 2 +-
 apps/dashboard/src/app/(app)/components/autoconnect.tsx | 7 +++----
 apps/dashboard/src/app/(app)/providers.tsx              | 3 ++-
 apps/dashboard/src/app/nebula-app/providers.tsx         | 6 +++++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/account/layout.tsx b/apps/dashboard/src/app/(app)/account/layout.tsx
index 9021b15631a..e499dda12a3 100644
--- a/apps/dashboard/src/app/(app)/account/layout.tsx
+++ b/apps/dashboard/src/app/(app)/account/layout.tsx
@@ -46,7 +46,7 @@ export default async function AccountLayout(props: {
         />
         {props.children}
       </div>
-      <TWAutoConnect />
+      <TWAutoConnect client={client} />
       <AppFooter />
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/components/autoconnect.tsx b/apps/dashboard/src/app/(app)/components/autoconnect.tsx
index c94e616321e..fa86400d5ed 100644
--- a/apps/dashboard/src/app/(app)/components/autoconnect.tsx
+++ b/apps/dashboard/src/app/(app)/components/autoconnect.tsx
@@ -1,16 +1,15 @@
 "use client";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import type { ThirdwebClient } from "thirdweb";
 import { AutoConnect } from "thirdweb/react";
 import type { SmartWalletOptions } from "thirdweb/wallets";
 
-const client = getClientThirdwebClient();
-
 export function TWAutoConnect(props: {
   accountAbstraction?: SmartWalletOptions;
+  client: ThirdwebClient;
 }) {
   return (
     <AutoConnect
-      client={client}
+      client={props.client}
       accountAbstraction={props.accountAbstraction}
     />
   );
diff --git a/apps/dashboard/src/app/(app)/providers.tsx b/apps/dashboard/src/app/(app)/providers.tsx
index 00879438746..e7b9cba9328 100644
--- a/apps/dashboard/src/app/(app)/providers.tsx
+++ b/apps/dashboard/src/app/(app)/providers.tsx
@@ -18,6 +18,7 @@ import {
 import { TWAutoConnect } from "./components/autoconnect";
 
 const queryClient = new QueryClient();
+const thirdwebClient = getClientThirdwebClient();
 
 export function AppRouterProviders(props: { children: React.ReactNode }) {
   return (
@@ -26,7 +27,7 @@ export function AppRouterProviders(props: { children: React.ReactNode }) {
         <SyncChainStores />
         <ThirdwebProvider>
           <SyncChainDefinitionsToConnectionManager />
-          <TWAutoConnect />
+          <TWAutoConnect client={thirdwebClient} />
           <ThemeProvider
             attribute="class"
             disableTransitionOnChange
diff --git a/apps/dashboard/src/app/nebula-app/providers.tsx b/apps/dashboard/src/app/nebula-app/providers.tsx
index ab0d03ce02c..ff53d0258b0 100644
--- a/apps/dashboard/src/app/nebula-app/providers.tsx
+++ b/apps/dashboard/src/app/nebula-app/providers.tsx
@@ -8,6 +8,7 @@ import { Toaster } from "sonner";
 import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
 import { TWAutoConnect } from "../(app)/components/autoconnect";
 import { NebulaConnectWallet } from "./(app)/components/NebulaConnectButton";
+import { nebulaAppThirdwebClient } from "./(app)/utils/nebulaThirdwebClient";
 import { nebulaAAOptions } from "./login/account-abstraction";
 
 const queryClient = new QueryClient();
@@ -16,7 +17,10 @@ export function NebulaProviders(props: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>
       <ThirdwebProvider>
-        <TWAutoConnect accountAbstraction={nebulaAAOptions} />
+        <TWAutoConnect
+          accountAbstraction={nebulaAAOptions}
+          client={nebulaAppThirdwebClient}
+        />
         <ThemeProvider
           attribute="class"
           disableTransitionOnChange