Nebula: Context selection updates (#6961)

<!--

## 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 wallet management system in the `Nebula` application. It enhances context handling, modifies wallet address management, and improves the integration of active accounts.

### Detailed summary
- Replaced `activeAccountAddress` with `selectedAddress` in multiple components.
- Updated context handling to use `setContext`.
- Enhanced `WalletSelector` to use the new `selectedAddress`.
- Refactored state management for context filters in `ChatPageContent`.
- Added memoization for context filters to optimize performance.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx

@@ -51,7 +51,6 @@ export function ChatBar(props: {
   showContextSelector: boolean;
   client: ThirdwebClient;
   connectedWallets: WalletMeta[];
-  activeAccountAddress: string | undefined;
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
 }) {
@@ -97,7 +96,7 @@ export function ChatBar(props: {
                   <WalletSelector
                     client={props.client}
                     wallets={props.connectedWallets}
-                    activeAccountAddress={props.activeAccountAddress}
+                    selectedAddress={props.context?.walletAddress || undefined}
                     onClick={(walletMeta) => {
                       props.setActiveWallet(walletMeta);
                       props.setContext({
@@ -242,11 +241,11 @@ function WalletSelector(props: {
   wallets: WalletMeta[];
   onClick: (wallet: WalletMeta) => void;
   client: ThirdwebClient;
-  activeAccountAddress: string | undefined;
+  selectedAddress: string | undefined;
 }) {
   const [open, setOpen] = useState(false);
 
-  if (!props.activeAccountAddress) {
+  if (!props.selectedAddress) {
     return null;
   }
 
@@ -266,7 +265,7 @@ function WalletSelector(props: {
           className="flex h-auto items-center gap-1 rounded-full px-2 py-1.5 text-xs"
         >
           <AccountProvider
-            address={props.activeAccountAddress}
+            address={props.selectedAddress}
             client={props.client}
           >
             <AccountAvatar
@@ -278,7 +277,7 @@ function WalletSelector(props: {
                 <AccountBlobbie className="size-3 rounded-full" />
               }
             />
-            {shortenAddress(props.activeAccountAddress)}
+            {shortenAddress(props.selectedAddress)}
             <ChevronDownIcon className="size-3 text-muted-foreground/70" />
           </AccountProvider>
         </Button>
@@ -301,7 +300,7 @@ function WalletSelector(props: {
               key={wallet.address}
               className={cn(
                 "flex cursor-pointer items-center justify-between px-3 py-4 hover:bg-accent/50",
-                props.activeAccountAddress === wallet.address && "bg-accent/50",
+                props.selectedAddress === wallet.address && "bg-accent/50",
               )}
               onClick={() => {
                 setOpen(false);
@@ -365,7 +364,7 @@ function WalletSelector(props: {
                 </AccountProvider>
               </div>
 
-              {props.activeAccountAddress === wallet.address && (
+              {props.selectedAddress === wallet.address && (
                 <CheckIcon className="size-4 text-foreground" />
               )}
             </div>

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -11,7 +11,7 @@ import {
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   useActiveAccount,
   useActiveWalletConnectionStatus,
@@ -40,6 +40,7 @@ export function ChatPageContent(props: {
     | undefined;
 }) {
   const address = useActiveAccount()?.address;
+  const connectionStatus = useActiveWalletConnectionStatus();
   const connectedWallets = useConnectedWallets();
   const setActiveWallet = useSetActiveWallet();
 
@@ -90,10 +91,7 @@ export function ChatPageContent(props: {
     return [];
   });
 
-  const [hasUserUpdatedContextFilters, setHasUserUpdatedContextFilters] =
-    useState(false);
-
-  const [contextFilters, _setContextFilters] = useState<
+  const [_contextFilters, _setContextFilters] = useState<
     NebulaContext | undefined
   >(() => {
     const contextRes = props.session?.context;
@@ -109,62 +107,49 @@ export function ChatPageContent(props: {
     return value;
   });
 
+  const contextFilters = useMemo(() => {
+    return {
+      chainIds: _contextFilters?.chainIds || [],
+      networks: _contextFilters?.networks || null,
+      walletAddress: address || _contextFilters?.walletAddress || null,
+    } satisfies NebulaContext;
+  }, [_contextFilters, address]);
+
   const setContextFilters = useCallback((v: NebulaContext | undefined) => {
     _setContextFilters(v);
-    setHasUserUpdatedContextFilters(true);
     saveLastUsedChainIds(v?.chainIds || undefined);
   }, []);
 
-  const isNewSession = !props.session;
-  const connectionStatus = useActiveWalletConnectionStatus();
-
-  // if this is a new session, user has not manually updated context
-  // update the context to the current user's wallet address and chain id
+  const shouldRunEffect = useRef(true);
+  // if this is a new session,
+  // update chains to the last used chains in context filter
+  // we have to do this in effect to avoid hydration errors
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (!isNewSession || hasUserUpdatedContextFilters) {
+    // if viewing a session or context is set via params - do not update context
+    if (props.session || props.initialParams?.q || !shouldRunEffect.current) {
       return;
     }
 
+    shouldRunEffect.current = false;
+
     _setContextFilters((_contextFilters) => {
-      const updatedContextFilters: NebulaContext = _contextFilters
-        ? {
-            ..._contextFilters,
-          }
-        : {
-            chainIds: [],
-            walletAddress: null,
-            networks: null,
+      try {
+        const lastUsedChainIds = getLastUsedChainIds();
+        if (lastUsedChainIds) {
+          return {
+            networks: _contextFilters?.networks || null,
+            walletAddress: _contextFilters?.walletAddress || null,
+            chainIds: lastUsedChainIds,
           };
-
-      if (!updatedContextFilters.walletAddress && address) {
-        updatedContextFilters.walletAddress = address;
-      }
-
-      if (
-        updatedContextFilters.chainIds?.length === 0 &&
-        !props.initialParams?.q
-      ) {
-        // if we have last used chains in storage, continue using them
-        try {
-          const lastUsedChainIds = getLastUsedChainIds();
-          if (lastUsedChainIds) {
-            updatedContextFilters.chainIds = lastUsedChainIds;
-            return updatedContextFilters;
-          }
-        } catch {
-          // ignore local storage errors
         }
+      } catch {
+        // ignore local storage errors
       }
 
-      return updatedContextFilters;
+      return _contextFilters;
     });
-  }, [
-    address,
-    isNewSession,
-    hasUserUpdatedContextFilters,
-    props.initialParams?.q,
-  ]);
+  }, [props.session, props.initialParams?.q]);
 
   const [sessionId, setSessionId] = useState<string | undefined>(
     props.session?.id,
@@ -342,7 +327,6 @@ export function ChatPageContent(props: {
                 context={contextFilters}
                 setContext={setContextFilters}
                 connectedWallets={connectedWalletsMeta}
-                activeAccountAddress={address}
                 setActiveWallet={handleSetActiveWallet}
               />
             </div>
@@ -365,7 +349,6 @@ export function ChatPageContent(props: {
                   isConnectingWallet={connectionStatus === "connecting"}
                   showContextSelector={true}
                   connectedWallets={connectedWalletsMeta}
-                  activeAccountAddress={address}
                   setActiveWallet={handleSetActiveWallet}
                   client={client}
                   prefillMessage={undefined}

apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx

@@ -153,10 +153,6 @@ function Variant(props: {
     props.context,
   );
 
-  const [activeAccountAddress, setActiveAccountAddress] = useState<
-    string | undefined
-  >(props.activeAccountAddress);
-
   return (
     <BadgeContainer label={props.label}>
       <ChatBar
@@ -170,9 +166,12 @@ function Variant(props: {
         setContext={setContext}
         showContextSelector={props.showContextSelector}
         connectedWallets={props.connectedWallets}
-        activeAccountAddress={activeAccountAddress}
         setActiveWallet={(wallet) => {
-          setActiveAccountAddress(wallet.address);
+          setContext({
+            chainIds: context?.chainIds || [],
+            networks: context?.networks || null,
+            walletAddress: wallet.address,
+          });
         }}
       />
     </BadgeContainer>

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx

@@ -41,7 +41,6 @@ function Story(props: {
           context={undefined}
           setContext={() => {}}
           connectedWallets={[]}
-          activeAccountAddress={undefined}
           setActiveWallet={() => {}}
         />
       </div>

apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx

@@ -15,7 +15,6 @@ export function EmptyStateChatPageContent(props: {
   context: NebulaContext | undefined;
   setContext: (context: NebulaContext | undefined) => void;
   connectedWallets: WalletMeta[];
-  activeAccountAddress: string | undefined;
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
   showAurora: boolean;
@@ -49,7 +48,6 @@ export function EmptyStateChatPageContent(props: {
             isChatStreaming={false}
             client={nebulaAppThirdwebClient}
             connectedWallets={props.connectedWallets}
-            activeAccountAddress={props.activeAccountAddress}
             setActiveWallet={props.setActiveWallet}
             abortChatStream={() => {
               // the page will switch so, no need to handle abort here

apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx

@@ -212,7 +212,6 @@ function FloatingChatContentLoggedIn(props: {
               ]
             : []
         }
-        activeAccountAddress={props.nebulaParams?.wallet}
         setActiveWallet={() => {}}
         abortChatStream={() => {
           chatAbortController?.abort();

apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx

@@ -102,7 +102,6 @@ export function NebulaLoggedOutStatePage(props: {
               }
             }}
             connectedWallets={[]}
-            activeAccountAddress={undefined}
             setActiveWallet={() => {}}
             sendMessage={(msg) => {
               setMessage(msg);