From 83161e584d569651ffae04ff0f11b7635ea08544 Mon Sep 17 00:00:00 2001
From: franciscotobar <100875069+franciscotobar@users.noreply.github.com>
Date: Thu, 5 Dec 2024 00:59:06 -0600
Subject: [PATCH] refactor: proposal joined date (#443)

---
 .../active-builders/ActiveBuildersGridItem.tsx     |  7 +------
 .../components/BuilderAllocationHeader.tsx         | 14 ++++----------
 .../shared/components/Table/TableCells.tsx         | 13 +++++++------
 .../utils/isBuilderOperational.ts                  | 10 ++++++++++
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/app/collective-rewards/active-builders/ActiveBuildersGridItem.tsx b/src/app/collective-rewards/active-builders/ActiveBuildersGridItem.tsx
index 9cc29c27..8ad21263 100644
--- a/src/app/collective-rewards/active-builders/ActiveBuildersGridItem.tsx
+++ b/src/app/collective-rewards/active-builders/ActiveBuildersGridItem.tsx
@@ -45,9 +45,6 @@ export const ActiveBuildersGridItem: FC<ActiveBuildersGridItemProps> = ({
     <div className="flex flex-row w-full items-center gap-x-3 min-h-11">
       <Jdenticon className="rounded-md bg-white" value={address} size="32" />
       <div className="flex-1 min-w-0">
-        {/* TODO: To be reviewed, it's weird that we show the address in the tooltip
-            and then we copy the builder name, since the builder name it's generally easier to remember
-         */}
         <Popover
           content={
             <div className="text-[12px] font-bold mb-1">
@@ -67,9 +64,6 @@ export const ActiveBuildersGridItem: FC<ActiveBuildersGridItemProps> = ({
             />
           </Typography>
         </Popover>
-        {builderState === 'active' && (
-          <Paragraph className="text-sm font-light"> Joined {joiningDate}</Paragraph>
-        )}
       </div>
       <div className="flex justify-center items-center">
         <Badge
@@ -83,6 +77,7 @@ export const ActiveBuildersGridItem: FC<ActiveBuildersGridItemProps> = ({
     <div onClick={() => router.push(`/proposals/${proposalId}`)} className="cursor-pointer">
       <Span className="text-base font-semibold">Proposal</Span>
       <Span className="text-sm line-clamp-1 text-wrap">{proposalName}</Span>
+      <Span className="text-sm"> Created on {joiningDate}</Span>
     </div>
   )
   return <Card header={Header} body={Body} />
diff --git a/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx b/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx
index cda6f274..8128aa98 100644
--- a/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx
+++ b/src/app/collective-rewards/allocations/components/BuilderAllocationHeader.tsx
@@ -1,18 +1,14 @@
 import { AddressOrAlias } from '@/components/Address'
 import { Badge } from '@/components/Badge'
 import { Jdenticon } from '@/components/Header/Jdenticon'
-import { Paragraph, Typography } from '@/components/Typography'
+import { Typography } from '@/components/Typography'
 import { FC } from 'react'
 import { Builder, BuilderProposal, BuilderStateFlags } from '@/app/collective-rewards/types'
-import { getBuilderInactiveState } from '@/app/collective-rewards/utils'
+import { getBuilderInactiveState, isBuilderActive } from '@/app/collective-rewards/utils'
 
 export type BuilderAllocationHeaderProps = Pick<Builder, 'builderName' | 'address' | 'stateFlags' | 'gauge'> &
   Pick<BuilderProposal, 'date'>
 
-const isBuilderActive = ({ communityApproved, kycApproved, paused, revoked }: BuilderStateFlags) => {
-  return communityApproved && kycApproved && !paused && !revoked
-}
-
 const haltedClass = 'bg-[#932309] color-text-primary py-1 px-1 text-[12px]'
 const haltedStateBadges = {
   Paused: <Badge content="Paused" className="bg-[#F9E1FF] text-secondary py-1 px-1 text-[12px]" />,
@@ -25,8 +21,6 @@ export const BuilderAllocationHeader: FC<BuilderAllocationHeaderProps> = ({
   address,
   builderName,
   stateFlags,
-  date,
-  gauge,
 }) => {
   const state = stateFlags as BuilderStateFlags
 
@@ -37,8 +31,8 @@ export const BuilderAllocationHeader: FC<BuilderAllocationHeaderProps> = ({
         <Typography tagVariant="label" className="font-semibold line-clamp-1 text-wrap text-base leading-4">
           <AddressOrAlias addressOrAlias={builderName || address} className="text-base font-bold leading-4" />
         </Typography>
-        {gauge && isBuilderActive(state) ? (
-          <Paragraph className="text-sm font-light"> Joined {date}</Paragraph>
+        {isBuilderActive(state) ? (
+          <Badge content="Active" className="bg-[#DBFEE5] text-secondary py-1 px-1 text-[12px]" />
         ) : (
           haltedStateBadges[getBuilderInactiveState(state)]
         )}
diff --git a/src/app/collective-rewards/shared/components/Table/TableCells.tsx b/src/app/collective-rewards/shared/components/Table/TableCells.tsx
index d51c6cd2..b93c78c7 100644
--- a/src/app/collective-rewards/shared/components/Table/TableCells.tsx
+++ b/src/app/collective-rewards/shared/components/Table/TableCells.tsx
@@ -13,7 +13,7 @@ import { ProgressBar } from '@/components/ProgressBar'
 import { Button } from '@/components/Button'
 import { BuilderStateFlags } from '@/app/collective-rewards/types'
 import { AllocationsContext } from '@/app/collective-rewards/allocations/context'
-import { getBuilderInactiveState, isBuilderOperational } from '@/app/collective-rewards/utils'
+import { getBuilderInactiveState, isBuilderActive } from '@/app/collective-rewards/utils'
 
 export function getFormattedCurrency(value: number, symbol: string) {
   const formattedCurrency = formatCurrency(value, symbol)
@@ -55,21 +55,22 @@ export const LazyRewardCell = memo(RewardCell, ({ rewards: prevReward }, { rewar
 type BuilderStatusFlagProps = {
   stateFlags: BuilderStateFlags
 }
-const getStatusColor = (isOperational: boolean, builderInactiveState: string) => {
-  if (isOperational) return 'transparent'
+const getStatusColor = (isActive: boolean, builderInactiveState: string) => {
+  if (isActive) return 'transparent'
   if (builderInactiveState === 'Paused') return '#F9E1FF'
   return '#932309'
 }
+
 const BuilderStatusFlag: FC<BuilderStatusFlagProps> = ({ stateFlags }) => {
-  const isOperational = isBuilderOperational(stateFlags)
   const builderInactiveState = getBuilderInactiveState(stateFlags)
+  const isActive = isBuilderActive(stateFlags)
 
-  const color = getStatusColor(isOperational, builderInactiveState)
+  const color = getStatusColor(isActive, builderInactiveState)
   const content = builderInactiveState
 
   return (
     <Popover
-      disabled={isOperational}
+      disabled={isActive}
       content={content}
       className="font-normal text-sm flex items-center"
       size="small"
diff --git a/src/app/collective-rewards/utils/isBuilderOperational.ts b/src/app/collective-rewards/utils/isBuilderOperational.ts
index 7291256a..5d029d5f 100644
--- a/src/app/collective-rewards/utils/isBuilderOperational.ts
+++ b/src/app/collective-rewards/utils/isBuilderOperational.ts
@@ -4,6 +4,16 @@ export const isBuilderOperational = (stateFlags?: BuilderStateFlags) => {
   return !!(stateFlags && stateFlags.communityApproved && stateFlags.kycApproved && !stateFlags.paused)
 }
 
+export const isBuilderActive = (stateFlags?: BuilderStateFlags) => {
+  return !!(
+    stateFlags &&
+    stateFlags.communityApproved &&
+    stateFlags.kycApproved &&
+    !stateFlags.paused &&
+    !stateFlags.revoked
+  )
+}
+
 const inactiveStates = ['Deactivated', 'KYCRevoked', 'Revoked', 'Paused'] as const
 type InactiveState = (typeof inactiveStates)[number]
 export const getBuilderInactiveState = (state: BuilderStateFlags): InactiveState => {