diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx index a66fea1bbe0..9ba26c5606c 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx +++ b/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: { { 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" > } /> - {shortenAddress(props.activeAccountAddress)} + {shortenAddress(props.selectedAddress)} @@ -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: { - {props.activeAccountAddress === wallet.address && ( + {props.selectedAddress === wallet.address && ( )} diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx index 9d154254531..26c031a2664 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx +++ b/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( props.session?.id, @@ -342,7 +327,6 @@ export function ChatPageContent(props: { context={contextFilters} setContext={setContextFilters} connectedWallets={connectedWalletsMeta} - activeAccountAddress={address} setActiveWallet={handleSetActiveWallet} /> @@ -365,7 +349,6 @@ export function ChatPageContent(props: { isConnectingWallet={connectionStatus === "connecting"} showContextSelector={true} connectedWallets={connectedWalletsMeta} - activeAccountAddress={address} setActiveWallet={handleSetActiveWallet} client={client} prefillMessage={undefined} diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx index 78b0acd75bc..eed53ac15c0 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx +++ b/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 ( { - setActiveAccountAddress(wallet.address); + setContext({ + chainIds: context?.chainIds || [], + networks: context?.networks || null, + walletAddress: wallet.address, + }); }} /> diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx index 5e20d923e56..f5564070739 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx +++ b/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={() => {}} /> diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx index 9a0bf150b80..1e351715d0a 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx +++ b/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 diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx index b3ee4cb7418..fbfecb7fbb1 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx +++ b/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(); diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx index f1b6b754fce..f73a1a86294 100644 --- a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx +++ b/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);