Revert "Replace TruncatedAddress with displayName (truncated by rainbowkit)"

This reverts commit 9e5efe8.

Author: lukaw3d

src/components/RainbowKitConnectButton/index.tsx

@@ -16,6 +16,15 @@ import { useNavigate } from 'react-router-dom'
 import { useRoflAppBackendAuthContext } from '../../contexts/RoflAppBackendAuth/hooks'
 import { ENABLED_CHAINS_IDS } from '../../constants/top-up-config.ts'
 
+const TruncatedAddress: FC<{ address: string; className?: string }> = ({ address, className = '' }) => {
+  return (
+    <div className={`flex overflow-hidden ${className}`}>
+      <span className="flex-1 truncate min-w-0">{address.slice(0, -4)}</span>
+      <span className="flex-shrink-0">{address.slice(-4)}</span>
+    </div>
+  )
+}
+
 interface Props {
   onMobileClose?: () => void
 }
@@ -124,9 +133,10 @@ export const RainbowKitConnectButton: FC<Props> = ({ onMobileClose }) => {
                         }}
                       />
                       <div className="flex flex-col items-start min-w-0 flex-1">
-                        <span className="mono text-foreground text-base font-medium leading-6 w-full">
-                          {account.displayName}
-                        </span>
+                        <TruncatedAddress
+                          address={address as `0x${string}`}
+                          className="mono text-foreground text-base font-medium leading-6 w-full"
+                        />
                         <p className="text-muted-foreground text-sm leading-5">{account.displayBalance}</p>
                       </div>
                     </button>