fix: fix builder name and rewards leaderboard name alignment (#400)

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>
   )

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),
           }
         }
 

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'

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)
+  })
+})

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
+}