From 0809b62a61884fee39eaf261c54267d349990cad Mon Sep 17 00:00:00 2001
From: Antonio Morrone <antonio@iovlabs.org>
Date: Mon, 25 Nov 2024 10:31:31 +0000
Subject: [PATCH] fix: fix builder name and rewards leaderboard name alignment
 (#400)

---
 .../shared/components/Table/TableCells.tsx    | 40 ++++++++--------
 .../user/hooks/useGetBuilders.ts              |  4 +-
 src/app/collective-rewards/utils/index.ts     |  1 +
 .../utils/removeBrackets.test.ts              | 46 +++++++++++++++++++
 .../utils/removeBrackets.ts                   | 10 ++++
 5 files changed, 80 insertions(+), 21 deletions(-)
 create mode 100644 src/app/collective-rewards/utils/removeBrackets.test.ts
 create mode 100644 src/app/collective-rewards/utils/removeBrackets.ts

diff --git a/src/app/collective-rewards/shared/components/Table/TableCells.tsx b/src/app/collective-rewards/shared/components/Table/TableCells.tsx
index 261ddc3a..ed97a828 100644
--- a/src/app/collective-rewards/shared/components/Table/TableCells.tsx
+++ b/src/app/collective-rewards/shared/components/Table/TableCells.tsx
@@ -93,25 +93,27 @@ export const BuilderNameCell: FC<BuilderCellProps> = ({
       <div className="flex flex-row gap-x-1">
         <BuilderStatusFlag stateFlags={stateFlags} />
         <Jdenticon className="rounded-md bg-white min-w-6" value={builderName} size="24" />
-        <Popover
-          content={
-            <div className="text-[12px] font-bold mb-1">
-              <p data-testid="builderAddressTooltip">{shortenAddress}</p>
-            </div>
-          }
-          size="small"
-          trigger="hover"
-          disabled={!builderName || isAddress(builderName)}
-        >
-          <Typography tagVariant="label" className="font-semibold line-clamp-1 text-wrap min-w-28">
-            <AddressOrAliasWithCopy
-              addressOrAlias={builderName || address}
-              clipboard={address}
-              clipboardAnimationText={shortenAddress}
-              className="text-sm"
-            />
-          </Typography>
-        </Popover>
+        <div className="w-32">
+          <Popover
+            content={
+              <div className="text-[12px] font-bold mb-1">
+                <p data-testid="builderAddressTooltip">{shortenAddress}</p>
+              </div>
+            }
+            size="small"
+            trigger="hover"
+            disabled={!builderName || isAddress(builderName)}
+          >
+            <Typography tagVariant="label" className="font-semibold line-clamp-1 text-wrap min-w-28">
+              <AddressOrAliasWithCopy
+                addressOrAlias={builderName || address}
+                clipboard={address}
+                clipboardAnimationText={shortenAddress}
+                className="text-sm"
+              />
+            </Typography>
+          </Popover>
+        </div>
       </div>
     </TableCell>
   )
diff --git a/src/app/collective-rewards/user/hooks/useGetBuilders.ts b/src/app/collective-rewards/user/hooks/useGetBuilders.ts
index 1b08934f..9179bba8 100644
--- a/src/app/collective-rewards/user/hooks/useGetBuilders.ts
+++ b/src/app/collective-rewards/user/hooks/useGetBuilders.ts
@@ -1,6 +1,6 @@
 import { Builder, BuilderStateFlags } from '@/app/collective-rewards/types'
 import { useGetGaugesArray } from '@/app/collective-rewards/user/hooks/useGetGaugesArray'
-import { getMostAdvancedProposal } from '@/app/collective-rewards/utils'
+import { getMostAdvancedProposal, removeBrackets } from '@/app/collective-rewards/utils'
 import { RawBuilderState } from '@/app/collective-rewards/utils/getBuilderGauge'
 import { useGetProposalsState } from '@/app/collective-rewards/user'
 import { useFetchCreateBuilderProposals } from '@/app/proposals/hooks/useFetchLatestProposals'
@@ -135,7 +135,7 @@ export const useGetBuilders: UseGetBuilders = () => {
             stateFlags: statusByBuilder[address],
             gauge: builderToGauge && builderToGauge[address],
             address,
-            builderName,
+            builderName: removeBrackets(builderName),
           }
         }
 
diff --git a/src/app/collective-rewards/utils/index.ts b/src/app/collective-rewards/utils/index.ts
index 4dbdee48..cee01f11 100644
--- a/src/app/collective-rewards/utils/index.ts
+++ b/src/app/collective-rewards/utils/index.ts
@@ -4,3 +4,4 @@ export * from './getBuilderState'
 export * from './getCoinbaseAddress'
 export * from './getMostAdvancedProposal'
 export * from './handleErrors'
+export * from './removeBrackets'
diff --git a/src/app/collective-rewards/utils/removeBrackets.test.ts b/src/app/collective-rewards/utils/removeBrackets.test.ts
new file mode 100644
index 00000000..37a6d33a
--- /dev/null
+++ b/src/app/collective-rewards/utils/removeBrackets.test.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { removeBrackets } from './removeBrackets'
+
+describe('formatBuilderName', () => {
+  it('should remove the initial text enclosed with []', () => {
+    const input = '[Initial Text] Remaining Text'
+    const expectedOutput = 'Remaining Text'
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+
+  it('should return the same string if no text is enclosed with []', () => {
+    const input = 'No brackets here'
+    const expectedOutput = 'No brackets here'
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+
+  it('should handle strings with multiple brackets correctly', () => {
+    const input = '[Initial] [Text] Remaining Text'
+    const expectedOutput = '[Text] Remaining Text'
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+
+  it('should not remove the chars after the bracket if it is not an empty space', () => {
+    const input = '[Initial][Text] Remaining Text'
+    const expectedOutput = '[Text] Remaining Text'
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+
+  it('should handle empty strings correctly', () => {
+    const input = ''
+    const expectedOutput = ''
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+
+  it('should handle strings with only brackets correctly', () => {
+    const input = '[]'
+    const expectedOutput = ''
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+
+  it('should handle undefined also', () => {
+    const input = undefined
+    const expectedOutput = ''
+    expect(removeBrackets(input)).toBe(expectedOutput)
+  })
+})
diff --git a/src/app/collective-rewards/utils/removeBrackets.ts b/src/app/collective-rewards/utils/removeBrackets.ts
new file mode 100644
index 00000000..98c1310d
--- /dev/null
+++ b/src/app/collective-rewards/utils/removeBrackets.ts
@@ -0,0 +1,10 @@
+export const removeBrackets = (name?: string) => {
+  if (!name) {
+    return ''
+  }
+  const bracketIndex = name.indexOf(']')
+  if (bracketIndex !== -1) {
+    return name.slice(bracketIndex + 1).trimStart()
+  }
+  return name
+}