feat: truncate ENS names (#250)

* feat: truncate ENS names

* chore: adds changeset

* Update packages/rainbowkit/src/components/ConnectButton/formatENS.test.ts

Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>

* WIP

* fix: adds subdomain functionality

Co-authored-by: Mark Dalgleish <mark.john.dalgleish@gmail.com>

.changeset/silver-otters-fly.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Truncates long ENS names

packages/rainbowkit/src/components/ConnectButton/ConnectButtonRenderer.tsx

@@ -23,6 +23,7 @@ import {
 } from '../RainbowKitProvider/RainbowKitChainContext';
 import { ShowRecentTransactionsContext } from '../RainbowKitProvider/ShowRecentTransactionsContext';
 import { formatAddress } from './formatAddress';
+import { formatENS } from './formatENS';
 
 const useBooleanState = (initialValue: boolean) => {
   const [value, setValue] = useState(initialValue);
@@ -153,8 +154,9 @@ export function ConnectButtonRenderer({
               balanceFormatted: balanceData?.formatted,
               balanceSymbol: balanceData?.symbol,
               displayBalance,
-              displayName:
-                accountData.ens?.name ?? formatAddress(accountData.address),
+              displayName: accountData.ens?.name
+                ? formatENS(accountData.ens?.name)
+                : formatAddress(accountData.address),
               ensAvatar: accountData.ens?.avatar ?? undefined,
               ensName: accountData.ens?.name,
               hasPendingTransactions,

packages/rainbowkit/src/components/ConnectButton/formatENS.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { formatENS } from './formatENS';
+
+describe('formatENS', () => {
+  it('trucates ENS name over 24 characters', () => {
+    expect(formatENS('reallylongensnameheretotestlongnames.eth')).toEqual(
+      'reallylongensnameheretot...'
+    );
+  });
+
+  it(`doesn't do anything to ENS names 24 characters or less`, () => {
+    expect(formatENS('rainbow.eth')).toEqual('rainbow.eth');
+  });
+
+  it(`if 24 characters, do not truncate .eth`, () => {
+    expect(formatENS('qwertyuiopasdfghjklzxcvb.eth')).toEqual(
+      'qwertyuiopasdfghjklzxcvb.eth'
+    );
+  });
+
+  it(`Subdomains are taken into account`, () => {
+    expect(formatENS('rainbowrainbowrainbow.rainbowrainbow.eth')).toEqual(
+      'rainbowrainbowrainbow.ra...'
+    );
+  });
+
+  it(`Non .eth names work`, () => {
+    expect(formatENS('qwertyuiopasdfghjklzxcvb.xyz')).toEqual(
+      'qwertyuiopasdfghjklzxcvb.xyz'
+    );
+  });
+});

packages/rainbowkit/src/components/ConnectButton/formatENS.ts

@@ -0,0 +1,8 @@
+export function formatENS(name: string): string {
+  const parts = name.split('.');
+  const last = parts.pop();
+  if (parts.join('.').length > 24) {
+    return `${parts.join('.').substring(0, 24)}...`;
+  }
+  return `${parts.join('.')}.${last}`;
+}

packages/rainbowkit/src/components/ProfileDetails/ProfileDetails.tsx

@@ -5,6 +5,7 @@ import { Avatar } from '../Avatar/Avatar';
 import { Box } from '../Box/Box';
 import { CloseButton } from '../CloseButton/CloseButton';
 import { formatAddress } from '../ConnectButton/formatAddress';
+import { formatENS } from '../ConnectButton/formatENS';
 import { CopiedIcon } from '../Icons/Copied';
 import { CopyIcon } from '../Icons/Copy';
 import { DisconnectIcon } from '../Icons/Disconnect';
@@ -49,8 +50,9 @@ export function ProfileDetails({
     return null;
   }
 
-  const accountName =
-    accountData.ens?.name ?? formatAddress(accountData.address);
+  const accountName = accountData.ens?.name
+    ? formatENS(accountData.ens?.name)
+    : formatAddress(accountData.address);
   const ethBalance = balanceData?.formatted;
   const balance = Number(ethBalance).toPrecision(3);
   const titleId = 'rk_profile_title';