From 3b9a412458c89030b178a8e5bbc22c11458580c1 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 29 Apr 2025 10:51:16 +0000
Subject: [PATCH] [NEB-206] Nebula: UI element position tweaks in chat textarea
(#6886)
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 enhancing the `MismatchButton` and `ChatBar` components in the dashboard by adding new props and improving wallet connection handling, including a spinner for pending connections and sorting wallets.
### Detailed summary
- Added `isPending` prop to `MismatchButton`.
- Updated `showSpinner` logic in `MismatchButton`.
- Removed redundant wallet selection logic from `ChatBar`.
- Introduced conditional rendering for `WalletSelector` and `Badge` in `ChatBar`.
- Added sorting for wallets in `WalletSelector` to prioritize the "smart" account.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
---
.../nebula-app/(app)/components/ChatBar.tsx | 63 ++++++++++---------
.../src/components/buttons/MismatchButton.tsx | 4 +-
2 files changed, 37 insertions(+), 30 deletions(-)
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 6f0a751c59c..9d6eb98f700 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -93,6 +93,33 @@ export function ChatBar(props: {
<div className="grow">
{props.showContextSelector && (
<div className="flex flex-wrap gap-2 [&>*]:w-auto">
+ {props.connectedWallets.length > 1 &&
+ !props.isConnectingWallet && (
+ <WalletSelector
+ client={props.client}
+ wallets={props.connectedWallets}
+ activeAccountAddress={props.activeAccountAddress}
+ onClick={(walletMeta) => {
+ props.setActiveWallet(walletMeta);
+ props.setContext({
+ walletAddress: walletMeta.address,
+ chainIds: props.context?.chainIds || [],
+ networks: props.context?.networks || null,
+ });
+ }}
+ />
+ )}
+
+ {props.isConnectingWallet && (
+ <Badge
+ variant="outline"
+ className="h-auto w-auto shrink-0 gap-1.5 px-2 py-1.5"
+ >
+ <Spinner className="size-3" />
+ <span>Connecting Wallet</span>
+ </Badge>
+ )}
+
<MultiNetworkSelector
client={props.client}
hideTestnets
@@ -145,33 +172,6 @@ export function ChatBar(props: {
10, // optimism
]}
/>
-
- {props.connectedWallets.length > 1 &&
- !props.isConnectingWallet && (
- <WalletSelector
- client={props.client}
- wallets={props.connectedWallets}
- activeAccountAddress={props.activeAccountAddress}
- onClick={(walletMeta) => {
- props.setActiveWallet(walletMeta);
- props.setContext({
- walletAddress: walletMeta.address,
- chainIds: props.context?.chainIds || [],
- networks: props.context?.networks || null,
- });
- }}
- />
- )}
-
- {props.isConnectingWallet && (
- <Badge
- variant="outline"
- className="h-auto w-auto shrink-0 gap-1.5 px-2 py-1.5"
- >
- <Spinner className="size-3" />
- <span>Connecting Wallet</span>
- </Badge>
- )}
</div>
)}
</div>
@@ -251,6 +251,13 @@ function WalletSelector(props: {
return null;
}
+ // show smart account first
+ const sortedWallets = props.wallets.sort((a, b) => {
+ if (a.walletId === "smart") return -1;
+ if (b.walletId === "smart") return 1;
+ return 0;
+ });
+
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
@@ -289,7 +296,7 @@ function WalletSelector(props: {
</div>
<div className="[&>*:not(:last-child)]:border-b">
- {props.wallets.map((wallet) => (
+ {sortedWallets.map((wallet) => (
// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
<div
key={wallet.address}
diff --git a/apps/dashboard/src/components/buttons/MismatchButton.tsx b/apps/dashboard/src/components/buttons/MismatchButton.tsx
index 28a7a7ef24a..92e3ad70d29 100644
--- a/apps/dashboard/src/components/buttons/MismatchButton.tsx
+++ b/apps/dashboard/src/components/buttons/MismatchButton.tsx
@@ -86,7 +86,7 @@ export const MismatchButton = forwardRef<
HTMLButtonElement,
MistmatchButtonProps
>((props, ref) => {
- const { txChainId, isLoggedIn, ...buttonProps } = props;
+ const { txChainId, isLoggedIn, isPending, ...buttonProps } = props;
const account = useActiveAccount();
const wallet = useActiveWallet();
const activeWalletChain = useActiveWalletChain();
@@ -161,7 +161,7 @@ export const MismatchButton = forwardRef<
// if user is about to trigger a transaction on txChain, but txChainBalance is not yet loaded and is required before proceeding
(!showSwitchChainPopover && txChainBalance.isPending && isBalanceRequired);
- const showSpinner = props.isPending || switchNetworkMutation.isPending;
+ const showSpinner = isPending || switchNetworkMutation.isPending;
return (
<>