From d99a985ab4d198b5df501b4230bf1a88914f6517 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 12 May 2025 20:54:35 +0000
Subject: [PATCH] [NEB-238] Show ENS name in selected account badge (#7024)
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 updating the rendering of the `AccountName` component in the `ChatBar.tsx` file to improve the styling and structure of the address display.

### Detailed summary
- Replaced `span` with `AccountName` component for displaying the selected address.
- Added `className="text-xs"` to the `AccountName` component.
- Updated `loadingComponent` and `fallbackComponent` to use a consistent `span` with `className="text-xs"`.
- Changed `className` of `span` in `WalletSelector` from `font-mono text-sm` to `text-sm` for a consistent style.

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

<!-- end pr-codex -->
---
 .../nebula-app/(app)/components/ChatBar.tsx    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 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 d2137775e82..4d7949350f0 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -484,7 +484,19 @@ function WalletSelector(props: {
                 <AccountBlobbie className="size-3 rounded-full" />
               }
             />
-            {shortenAddress(props.selectedAddress)}
+            <AccountName
+              className="text-xs"
+              loadingComponent={
+                <span className="text-xs">
+                  {shortenAddress(props.selectedAddress)}
+                </span>
+              }
+              fallbackComponent={
+                <span className="text-xs">
+                  {shortenAddress(props.selectedAddress)}
+                </span>
+              }
+            />
             <ChevronDownIcon className="size-3 text-muted-foreground/70" />
           </AccountProvider>
         </Button>
@@ -533,12 +545,12 @@ function WalletSelector(props: {
                           <AccountName
                             className="text-sm"
                             loadingComponent={
-                              <span className="font-mono text-sm">
+                              <span className="text-sm">
                                 {shortenAddress(wallet.address)}
                               </span>
                             }
                             fallbackComponent={
-                              <span className="font-mono text-sm">
+                              <span className="text-sm">
                                 {shortenAddress(wallet.address)}
                               </span>
                             }