Skip to content

Commit 669a95f

Browse files
committed
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 -->
1 parent 928113b commit 669a95f

File tree

7 files changed

+42
-66
lines changed

7 files changed

+42
-66
lines changed

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ export function ChatBar(props: {
5151
showContextSelector: boolean;
5252
client: ThirdwebClient;
5353
connectedWallets: WalletMeta[];
54-
activeAccountAddress: string | undefined;
5554
setActiveWallet: (wallet: WalletMeta) => void;
5655
isConnectingWallet: boolean;
5756
}) {
@@ -97,7 +96,7 @@ export function ChatBar(props: {
9796
<WalletSelector
9897
client={props.client}
9998
wallets={props.connectedWallets}
100-
activeAccountAddress={props.activeAccountAddress}
99+
selectedAddress={props.context?.walletAddress || undefined}
101100
onClick={(walletMeta) => {
102101
props.setActiveWallet(walletMeta);
103102
props.setContext({
@@ -242,11 +241,11 @@ function WalletSelector(props: {
242241
wallets: WalletMeta[];
243242
onClick: (wallet: WalletMeta) => void;
244243
client: ThirdwebClient;
245-
activeAccountAddress: string | undefined;
244+
selectedAddress: string | undefined;
246245
}) {
247246
const [open, setOpen] = useState(false);
248247

249-
if (!props.activeAccountAddress) {
248+
if (!props.selectedAddress) {
250249
return null;
251250
}
252251

@@ -266,7 +265,7 @@ function WalletSelector(props: {
266265
className="flex h-auto items-center gap-1 rounded-full px-2 py-1.5 text-xs"
267266
>
268267
<AccountProvider
269-
address={props.activeAccountAddress}
268+
address={props.selectedAddress}
270269
client={props.client}
271270
>
272271
<AccountAvatar
@@ -278,7 +277,7 @@ function WalletSelector(props: {
278277
<AccountBlobbie className="size-3 rounded-full" />
279278
}
280279
/>
281-
{shortenAddress(props.activeAccountAddress)}
280+
{shortenAddress(props.selectedAddress)}
282281
<ChevronDownIcon className="size-3 text-muted-foreground/70" />
283282
</AccountProvider>
284283
</Button>
@@ -301,7 +300,7 @@ function WalletSelector(props: {
301300
key={wallet.address}
302301
className={cn(
303302
"flex cursor-pointer items-center justify-between px-3 py-4 hover:bg-accent/50",
304-
props.activeAccountAddress === wallet.address && "bg-accent/50",
303+
props.selectedAddress === wallet.address && "bg-accent/50",
305304
)}
306305
onClick={() => {
307306
setOpen(false);
@@ -365,7 +364,7 @@ function WalletSelector(props: {
365364
</AccountProvider>
366365
</div>
367366

368-
{props.activeAccountAddress === wallet.address && (
367+
{props.selectedAddress === wallet.address && (
369368
<CheckIcon className="size-4 text-foreground" />
370369
)}
371370
</div>

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

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { useThirdwebClient } from "@/constants/thirdweb.client";
1212
import { ArrowRightIcon } from "lucide-react";
1313
import Link from "next/link";
14-
import { useCallback, useEffect, useRef, useState } from "react";
14+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
1515
import {
1616
useActiveAccount,
1717
useActiveWalletConnectionStatus,
@@ -40,6 +40,7 @@ export function ChatPageContent(props: {
4040
| undefined;
4141
}) {
4242
const address = useActiveAccount()?.address;
43+
const connectionStatus = useActiveWalletConnectionStatus();
4344
const connectedWallets = useConnectedWallets();
4445
const setActiveWallet = useSetActiveWallet();
4546

@@ -90,10 +91,7 @@ export function ChatPageContent(props: {
9091
return [];
9192
});
9293

93-
const [hasUserUpdatedContextFilters, setHasUserUpdatedContextFilters] =
94-
useState(false);
95-
96-
const [contextFilters, _setContextFilters] = useState<
94+
const [_contextFilters, _setContextFilters] = useState<
9795
NebulaContext | undefined
9896
>(() => {
9997
const contextRes = props.session?.context;
@@ -109,62 +107,49 @@ export function ChatPageContent(props: {
109107
return value;
110108
});
111109

110+
const contextFilters = useMemo(() => {
111+
return {
112+
chainIds: _contextFilters?.chainIds || [],
113+
networks: _contextFilters?.networks || null,
114+
walletAddress: address || _contextFilters?.walletAddress || null,
115+
} satisfies NebulaContext;
116+
}, [_contextFilters, address]);
117+
112118
const setContextFilters = useCallback((v: NebulaContext | undefined) => {
113119
_setContextFilters(v);
114-
setHasUserUpdatedContextFilters(true);
115120
saveLastUsedChainIds(v?.chainIds || undefined);
116121
}, []);
117122

118-
const isNewSession = !props.session;
119-
const connectionStatus = useActiveWalletConnectionStatus();
120-
121-
// if this is a new session, user has not manually updated context
122-
// update the context to the current user's wallet address and chain id
123+
const shouldRunEffect = useRef(true);
124+
// if this is a new session,
125+
// update chains to the last used chains in context filter
126+
// we have to do this in effect to avoid hydration errors
123127
// eslint-disable-next-line no-restricted-syntax
124128
useEffect(() => {
125-
if (!isNewSession || hasUserUpdatedContextFilters) {
129+
// if viewing a session or context is set via params - do not update context
130+
if (props.session || props.initialParams?.q || !shouldRunEffect.current) {
126131
return;
127132
}
128133

134+
shouldRunEffect.current = false;
135+
129136
_setContextFilters((_contextFilters) => {
130-
const updatedContextFilters: NebulaContext = _contextFilters
131-
? {
132-
..._contextFilters,
133-
}
134-
: {
135-
chainIds: [],
136-
walletAddress: null,
137-
networks: null,
137+
try {
138+
const lastUsedChainIds = getLastUsedChainIds();
139+
if (lastUsedChainIds) {
140+
return {
141+
networks: _contextFilters?.networks || null,
142+
walletAddress: _contextFilters?.walletAddress || null,
143+
chainIds: lastUsedChainIds,
138144
};
139-
140-
if (!updatedContextFilters.walletAddress && address) {
141-
updatedContextFilters.walletAddress = address;
142-
}
143-
144-
if (
145-
updatedContextFilters.chainIds?.length === 0 &&
146-
!props.initialParams?.q
147-
) {
148-
// if we have last used chains in storage, continue using them
149-
try {
150-
const lastUsedChainIds = getLastUsedChainIds();
151-
if (lastUsedChainIds) {
152-
updatedContextFilters.chainIds = lastUsedChainIds;
153-
return updatedContextFilters;
154-
}
155-
} catch {
156-
// ignore local storage errors
157145
}
146+
} catch {
147+
// ignore local storage errors
158148
}
159149

160-
return updatedContextFilters;
150+
return _contextFilters;
161151
});
162-
}, [
163-
address,
164-
isNewSession,
165-
hasUserUpdatedContextFilters,
166-
props.initialParams?.q,
167-
]);
152+
}, [props.session, props.initialParams?.q]);
168153

169154
const [sessionId, setSessionId] = useState<string | undefined>(
170155
props.session?.id,
@@ -342,7 +327,6 @@ export function ChatPageContent(props: {
342327
context={contextFilters}
343328
setContext={setContextFilters}
344329
connectedWallets={connectedWalletsMeta}
345-
activeAccountAddress={address}
346330
setActiveWallet={handleSetActiveWallet}
347331
/>
348332
</div>
@@ -365,7 +349,6 @@ export function ChatPageContent(props: {
365349
isConnectingWallet={connectionStatus === "connecting"}
366350
showContextSelector={true}
367351
connectedWallets={connectedWalletsMeta}
368-
activeAccountAddress={address}
369352
setActiveWallet={handleSetActiveWallet}
370353
client={client}
371354
prefillMessage={undefined}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,6 @@ function Variant(props: {
153153
props.context,
154154
);
155155

156-
const [activeAccountAddress, setActiveAccountAddress] = useState<
157-
string | undefined
158-
>(props.activeAccountAddress);
159-
160156
return (
161157
<BadgeContainer label={props.label}>
162158
<ChatBar
@@ -170,9 +166,12 @@ function Variant(props: {
170166
setContext={setContext}
171167
showContextSelector={props.showContextSelector}
172168
connectedWallets={props.connectedWallets}
173-
activeAccountAddress={activeAccountAddress}
174169
setActiveWallet={(wallet) => {
175-
setActiveAccountAddress(wallet.address);
170+
setContext({
171+
chainIds: context?.chainIds || [],
172+
networks: context?.networks || null,
173+
walletAddress: wallet.address,
174+
});
176175
}}
177176
/>
178177
</BadgeContainer>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ function Story(props: {
4141
context={undefined}
4242
setContext={() => {}}
4343
connectedWallets={[]}
44-
activeAccountAddress={undefined}
4544
setActiveWallet={() => {}}
4645
/>
4746
</div>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export function EmptyStateChatPageContent(props: {
1515
context: NebulaContext | undefined;
1616
setContext: (context: NebulaContext | undefined) => void;
1717
connectedWallets: WalletMeta[];
18-
activeAccountAddress: string | undefined;
1918
setActiveWallet: (wallet: WalletMeta) => void;
2019
isConnectingWallet: boolean;
2120
showAurora: boolean;
@@ -49,7 +48,6 @@ export function EmptyStateChatPageContent(props: {
4948
isChatStreaming={false}
5049
client={nebulaAppThirdwebClient}
5150
connectedWallets={props.connectedWallets}
52-
activeAccountAddress={props.activeAccountAddress}
5351
setActiveWallet={props.setActiveWallet}
5452
abortChatStream={() => {
5553
// the page will switch so, no need to handle abort here

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,6 @@ function FloatingChatContentLoggedIn(props: {
212212
]
213213
: []
214214
}
215-
activeAccountAddress={props.nebulaParams?.wallet}
216215
setActiveWallet={() => {}}
217216
abortChatStream={() => {
218217
chatAbortController?.abort();

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ export function NebulaLoggedOutStatePage(props: {
102102
}
103103
}}
104104
connectedWallets={[]}
105-
activeAccountAddress={undefined}
106105
setActiveWallet={() => {}}
107106
sendMessage={(msg) => {
108107
setMessage(msg);

0 commit comments

Comments
 (0)