add relative time to activity

src/components/organisms/ActivityTable/ActivityTable.tsx

@@ -11,7 +11,7 @@ import { Select } from 'components/atoms/Select';
 import { OwnerLine } from 'components/molecules/OwnerLine';
 import { ACTIVITY_SORT_OPTIONS, AO, ASSETS, REFORMATTED_ASSETS, URLS } from 'helpers/config';
 import { RegistryProfileType, SelectOptionType } from 'helpers/types';
-import { formatAddress, formatCount, formatDate, isFirefox } from 'helpers/utils';
+import { formatAddress, formatCount, formatDate, getRelativeDate, isFirefox } from 'helpers/utils';
 import { useArweaveProvider } from 'providers/ArweaveProvider';
 import { useLanguageProvider } from 'providers/LanguageProvider';
 
@@ -290,7 +290,7 @@ export default function ActivityTable(props: IProps) {
 						<p>{language.price}</p>
 					</S.PriceWrapper>
 					<S.DateValueWrapper>
-						<p>{language.date}</p>
+						<p>{language.time}</p>
 					</S.DateValueWrapper>
 				</S.TableHeader>
 				<S.TableBody>
@@ -347,9 +347,7 @@ export default function ActivityTable(props: IProps) {
 												<p>{row.receiver ? formatAddress(row.receiver, false) : '-'}</p>
 											</S.Entity>
 										) : (
-											<S.Entity type={'UCM'}>
-												<p>UCM</p>
-											</S.Entity>
+											<p>-</p>
 										)}
 									</>
 								)}
@@ -361,7 +359,7 @@ export default function ActivityTable(props: IProps) {
 								<CurrencyLine amount={row.price} currency={row.swapToken} callback={null} />
 							</S.PriceWrapper>
 							<S.DateValueWrapper>
-								<p>{formatDate(row.timestamp, 'iso')}</p>
+								<p>{getRelativeDate(row.timestamp)}</p>
 								<S.DateValueTooltip>
 									<ReactSVG src={ASSETS.info} />
 									<div className={'date-tooltip fade-in border-wrapper-alt1'}>

src/components/organisms/ActivityTable/styles.ts

@@ -96,9 +96,18 @@ export const TableHeader = styled.div`
 	padding: 0 15px;
 	> * {
 		flex: 1;
+		margin: 0 10px;
+	}
+	> :first-child {
+		justify-content: flex-start;
+		margin: 0 10px 0 0;
+		p {
+			text-align: left;
+		}
 	}
 	> :last-child {
 		justify-content: flex-end;
+		margin: 0 0 0 10px;
 		p {
 			text-align: right;
 		}
@@ -111,7 +120,7 @@ export const TableHeader = styled.div`
 		}
 	}
 	.center-value {
-		flex: 1;
+		flex: 0;
 		justify-content: center;
 		p {
 			text-align: center;
@@ -150,9 +159,18 @@ export const TableRow = styled.div`
 	background: ${(props) => props.theme.colors.container.primary.background};
 	> * {
 		flex: 1;
+		margin: 0 10px;
+	}
+	> :first-child {
+		justify-content: flex-start;
+		margin: 0 10px 0 0;
+		p {
+			text-align: left;
+		}
 	}
 	> :last-child {
 		justify-content: flex-end;
+		margin: 0 0 0 10px;
 		p {
 			text-align: right;
 		}
@@ -165,7 +183,7 @@ export const TableRow = styled.div`
 		}
 	}
 	.center-value {
-		flex: 1;
+		flex: 0;
 		justify-content: center;
 		p {
 			text-align: center;
@@ -202,7 +220,7 @@ export const TableRowValue = styled.div`
 		}
 	}
 	.center-value {
-		flex: 1;
+		flex: 0;
 		justify-content: center;
 		p {
 			text-align: center;
@@ -219,11 +237,12 @@ export const SenderWrapper = styled(OwnerWrapper)`
 `;
 
 export const ReceiverWrapper = styled(OwnerWrapper)`
-	min-width: 145px;
+	min-width: 185px;
 `;
 
 export const QuantityWrapper = styled(TableRowValue)`
 	min-width: 75px;
+	flex: 0;
 	p {
 		font-family: ${(props) => props.theme.typography.family.alt1};
 	}
@@ -238,7 +257,7 @@ export const PriceWrapper = styled(TableRowValue)`
 
 export const AssetWrapper = styled(TableRowValue)`
 	flex: 0;
-	min-width: 225px;
+	min-width: 200px;
 	gap: 10px;
 	margin: 0 20px 0 0;
 	a {
@@ -275,7 +294,7 @@ export const AssetDataWrapper = styled.div`
 export const EventWrapper = styled(TableRowValue)`
 	flex: none;
 	min-width: 0;
-	width: 120px;
+	width: 130px;
 `;
 
 export const Event = styled.div<{ type: 'Listing' | 'Sale' | 'Purchase' }>`

src/helpers/language.ts

@@ -118,6 +118,7 @@ export const language = {
 		streakTitle3: `Building the flame`,
 		streakTitle4: `Rising heat`,
 		streakTitle5: `You're on fire`,
+		time: `Time`,
 		title: `Title`,
 		trendingTokens: `Trending Tokens`,
 		topCreators: `Top Creators`,

src/helpers/utils.ts

@@ -121,11 +121,38 @@ export function formatDate(dateArg: string | number | null, dateType: DateType,
 		: `${date.toLocaleString('default', { month: 'long' })} ${date.getDate()}, ${date.getUTCFullYear()}`;
 }
 
+export function getRelativeDate(timestamp: number) {
+	const currentDate = new Date();
+	const inputDate = new Date(timestamp);
+
+	const timeDifference: number = currentDate.getTime() - inputDate.getTime();
+	const secondsDifference = Math.floor(timeDifference / 1000);
+	const minutesDifference = Math.floor(secondsDifference / 60);
+	const hoursDifference = Math.floor(minutesDifference / 60);
+	const daysDifference = Math.floor(hoursDifference / 24);
+	const monthsDifference = Math.floor(daysDifference / 30.44); // Average days in a month
+	const yearsDifference = Math.floor(monthsDifference / 12);
+
+	if (yearsDifference > 0) {
+		return `${yearsDifference} year${yearsDifference > 1 ? 's' : ''} ago`;
+	} else if (monthsDifference > 0) {
+		return `${monthsDifference} month${monthsDifference > 1 ? 's' : ''} ago`;
+	} else if (daysDifference > 0) {
+		return `${daysDifference} day${daysDifference > 1 ? 's' : ''} ago`;
+	} else if (hoursDifference > 0) {
+		return `${hoursDifference} hour${hoursDifference > 1 ? 's' : ''} ago`;
+	} else if (minutesDifference > 0) {
+		return `${minutesDifference} minute${minutesDifference > 1 ? 's' : ''} ago`;
+	} else {
+		return `${secondsDifference} second${secondsDifference !== 1 ? 's' : ''} ago`;
+	}
+}
+
 export function formatRequiredField(field: string) {
 	return `${field} *`;
 }
 
-export function splitTagValue(tag) {
+export function splitTagValue(tag: any) {
 	let parts = tag.split('-');
 
 	let lastPart = parts[parts.length - 1];