From 45ae9bacfe871891719619c9b9fb4599b21db9b7 Mon Sep 17 00:00:00 2001
From: Hans Larsen <hans@larsen.online>
Date: Wed, 5 Feb 2025 06:42:02 -0800
Subject: [PATCH] fix: replace the ledger username with ledger hsm (#230)

---
 components/react/views/Connected.tsx |  3 +-
 components/username.test.tsx         | 58 ++++++++++++++++++++++++++++
 components/username.tsx              | 35 +++++++++++++++++
 components/wallet.tsx                | 13 ++++---
 4 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 components/username.test.tsx
 create mode 100644 components/username.tsx

diff --git a/components/react/views/Connected.tsx b/components/react/views/Connected.tsx
index cd112079..4ea8f2e4 100644
--- a/components/react/views/Connected.tsx
+++ b/components/react/views/Connected.tsx
@@ -4,6 +4,7 @@ import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import { useState } from 'react';
 import ProfileAvatar from '@/utils/identicon';
 import { useBalance } from '@/hooks/useQueries';
+import { Username } from '@/components/username';
 import { CopyIcon } from '@/components/icons';
 import { getRealLogo, shiftDigits, truncateAddress } from '@/utils';
 import Image from 'next/image';
@@ -80,7 +81,7 @@ export const Connected = ({
         <div className="flex items-center ">
           <ProfileAvatar walletAddress={address ?? ''} size={60} />
           <div className="ml-4">
-            <p className="text-lg font-semibold">{username || 'Anonymous'}</p>
+            <Username className="text-lg font-semibold" walletName={name} username={username} />
             <div className="flex items-center">
               <p className="text-sm text-gray-500 dark:text-gray-400">
                 {truncateAddress(address || '')}
diff --git a/components/username.test.tsx b/components/username.test.tsx
new file mode 100644
index 00000000..bcfd8792
--- /dev/null
+++ b/components/username.test.tsx
@@ -0,0 +1,58 @@
+import { afterEach, test, expect, describe } from 'bun:test';
+import { cleanup, render, screen } from '@testing-library/react';
+import matchers from '@testing-library/jest-dom/matchers';
+import React from 'react';
+import { Username } from './username';
+
+expect.extend(matchers);
+
+// Test the happy path of the username component
+describe('Username', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  test('renders Ledger correctly', () => {
+    render(<Username walletName="Ledger" username="NOT LEDGER" />);
+    expect(screen.getByText('Ledger HSM')).toBeInTheDocument();
+    // This will be a title attribute.
+    expect(screen.queryByText('NOT LEDGER')).not.toBeInTheDocument();
+    expect(screen.queryByTitle('NOT LEDGER')).toBeInTheDocument();
+  });
+
+  test('renders correctly', () => {
+    render(<Username walletName="AnyOther" username="Some Username" />);
+    expect(screen.getByText('Some Username')).toBeInTheDocument();
+    expect(screen.getByTitle('Some Username')).toBeInTheDocument();
+  });
+
+  test('renders correctly with truncated', () => {
+    render(<Username walletName="AnyOther" username="Some Username" truncated />);
+    expect(screen.getByText('Some U...ername')).toBeInTheDocument();
+    expect(screen.getByTitle('Some Username')).toBeInTheDocument();
+  });
+
+  test('renders correctly with no username', () => {
+    render(<Username />);
+    expect(screen.getByText('Anonymous')).toBeInTheDocument();
+    expect(screen.getByTitle('Anonymous')).toBeInTheDocument();
+  });
+
+  test('renders correctly with no walletName', () => {
+    render(<Username username="Some Username" />);
+    expect(screen.getByText('Some Username')).toBeInTheDocument();
+    expect(screen.getByTitle('Some Username')).toBeInTheDocument();
+  });
+
+  test('renders correctly with no username and truncated', () => {
+    render(<Username truncated />);
+    expect(screen.getByText('Anonymous')).toBeInTheDocument();
+    expect(screen.getByTitle('Anonymous')).toBeInTheDocument();
+  });
+
+  test('renders correctly with no walletName and truncated', () => {
+    render(<Username username="Some Very Very Long Username" truncated />);
+    expect(screen.getByText('Some V...ername')).toBeInTheDocument();
+    expect(screen.queryByText('Some Very Very Long Username')).not.toBeInTheDocument();
+    expect(screen.getByTitle('Some Very Very Long Username')).toBeInTheDocument();
+  });
+});
diff --git a/components/username.tsx b/components/username.tsx
new file mode 100644
index 00000000..9cd83d2a
--- /dev/null
+++ b/components/username.tsx
@@ -0,0 +1,35 @@
+import { truncateString } from '@/utils';
+
+/**
+ * Special list of names for accounts based on the name of the service.
+ */
+enum WalletDisplayNames {
+  LEDGER = 'Ledger HSM',
+}
+
+export const Username = ({
+  className,
+  truncated,
+  username,
+  walletName,
+}: {
+  className?: string;
+  truncated?: boolean;
+  username?: string;
+  walletName?: string;
+}) => {
+  let name = username || 'Anonymous';
+  if (walletName !== undefined) {
+    const walletDisplayName = walletName.toUpperCase() as keyof typeof WalletDisplayNames;
+    name = WalletDisplayNames[walletDisplayName] ?? (username || 'Anonymous');
+  }
+  if (truncated) {
+    name = truncateString(name);
+  }
+
+  return (
+    <p className={className} title={username || 'Anonymous'}>
+      {name}
+    </p>
+  );
+};
diff --git a/components/wallet.tsx b/components/wallet.tsx
index cdd18dca..54db3e10 100644
--- a/components/wallet.tsx
+++ b/components/wallet.tsx
@@ -6,6 +6,7 @@ import { useChain } from '@cosmos-kit/react';
 import { WalletStatus } from 'cosmos-kit';
 import { MdWallet } from 'react-icons/md';
 import env from '@/config/env';
+import { Username } from './username';
 import { truncateAddress, truncateString } from '@/utils';
 
 const buttons = {
@@ -36,7 +37,7 @@ interface WalletSectionProps {
 }
 
 export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
-  const { connect, openView, status, username, address } = useChain(chainName);
+  const { connect, openView, status, username, address, wallet } = useChain(chainName);
 
   const [localStatus, setLocalStatus] = useState(status);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
@@ -127,12 +128,12 @@ export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
           }}
         >
           <div className="relative z-10 h-full flex flex-col  justify-between">
-            <p
+            <Username
               className="font-medium text-xl text-center mb-2 truncate"
-              title={username || 'Connected user'}
-            >
-              {username ? truncateString(username, 20) : 'Connected User'}
-            </p>
+              username={username}
+              walletName={wallet?.prettyName}
+              truncated
+            />
             <div className="bg-base-100 dark:bg-base-200 rounded-full py-2 px-4 text-center mb-4 flex items-center flex-row justify-between w-full ">
               <p className="text-xs  truncate flex-grow">
                 {address ? truncateAddress(address) : 'Address not available'}