[NEB-206] Nebula: UI element position tweaks in chat textarea (#6886)

<!--

## 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 -->

Author: MananTank

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}

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 (
     <>