From 9ece34e12af09e4ac4f9705f018ac7ddc250b5d4 Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Tue, 6 Aug 2024 18:07:27 -0400
Subject: [PATCH 1/3] Add Pin icon and Timestamp component to harmony and
 harmony-native

---
 packages/harmony/src/assets/icons/Pin.svg     |  3 ++
 .../components/comments/SendIcon/SendIcon.tsx |  1 +
 .../comments/Timestamp/Timestamp.stories.tsx  | 42 +++++++++++++++++
 .../comments/Timestamp/Timestamp.tsx          | 45 +++++++++++++++++++
 .../components/comments/Timestamp/index.ts    |  2 +
 .../components/comments/Timestamp/types.ts    | 13 ++++++
 packages/harmony/src/components/index.ts      |  1 +
 packages/harmony/src/icons/utilityIcons.ts    |  2 +
 .../Comments/Timestamp/Timestamp.stories.tsx  | 42 +++++++++++++++++
 .../Comments/Timestamp/Timestamp.tsx          | 44 ++++++++++++++++++
 .../components/Comments/Timestamp/index.ts    |  2 +
 .../components/Comments/Timestamp/types.ts    | 13 ++++++
 .../src/harmony-native/components/index.ts    |  1 +
 packages/mobile/src/harmony-native/icons.ts   |  1 +
 14 files changed, 212 insertions(+)
 create mode 100644 packages/harmony/src/assets/icons/Pin.svg
 create mode 100644 packages/harmony/src/components/comments/SendIcon/SendIcon.tsx
 create mode 100644 packages/harmony/src/components/comments/Timestamp/Timestamp.stories.tsx
 create mode 100644 packages/harmony/src/components/comments/Timestamp/Timestamp.tsx
 create mode 100644 packages/harmony/src/components/comments/Timestamp/index.ts
 create mode 100644 packages/harmony/src/components/comments/Timestamp/types.ts
 create mode 100644 packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx
 create mode 100644 packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
 create mode 100644 packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts
 create mode 100644 packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts

diff --git a/packages/harmony/src/assets/icons/Pin.svg b/packages/harmony/src/assets/icons/Pin.svg
new file mode 100644
index 00000000000..6b00af97cd7
--- /dev/null
+++ b/packages/harmony/src/assets/icons/Pin.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M6.71271 1.13249C6.5617 1.02408 6.37345 0.979566 6.18937 1.00874C6.00529 1.03792 5.84046 1.13839 5.73113 1.28806C5.62181 1.43774 5.57696 1.62434 5.60643 1.80684C5.63591 1.98933 5.73731 2.15276 5.88831 2.26117L6.281 2.65046C6.33522 2.70421 6.33522 2.79135 6.281 2.8451L4.51441 4.59639C4.46019 4.65014 4.37228 4.65014 4.31807 4.59639L3.43452 3.7205C2.99548 3.28526 2.32933 3.20385 1.80548 3.47632C1.60179 3.58227 1.6032 3.85097 1.76585 4.01222L4.41649 6.63989L2.52423 8.51576C1.83231 9.20168 1.31104 10.0379 1.0017 10.9582C0.993364 10.983 1.01715 11.0066 1.04216 10.9983C1.97049 10.6917 2.81403 10.1749 3.50594 9.48897L5.3982 7.6131L8.04884 10.2408C8.21149 10.402 8.48254 10.4034 8.58941 10.2015C8.86426 9.68218 8.78214 9.0218 8.3431 8.58656L7.45956 7.71067C7.40534 7.65692 7.40534 7.56978 7.45956 7.51603L9.22615 5.76474C9.28037 5.71099 9.36827 5.71099 9.42249 5.76474L9.81518 6.15402C9.94536 6.28308 10.1219 6.3556 10.306 6.35562C10.4901 6.35564 10.6666 6.28317 10.7968 6.15415C10.9269 6.02513 11 5.85012 11 5.66763C11 5.48514 10.9268 5.31012 10.7966 5.18106L6.86978 1.28821C6.84304 1.25644 6.81347 1.22712 6.78143 1.20062C6.76299 1.18 6.74332 1.1605 6.72252 1.14222L6.71271 1.13249Z" fill="#FF0000"/>
+</svg>
diff --git a/packages/harmony/src/components/comments/SendIcon/SendIcon.tsx b/packages/harmony/src/components/comments/SendIcon/SendIcon.tsx
new file mode 100644
index 00000000000..b33f0fa94d4
--- /dev/null
+++ b/packages/harmony/src/components/comments/SendIcon/SendIcon.tsx
@@ -0,0 +1 @@
+export const SendIcon = () => {}
diff --git a/packages/harmony/src/components/comments/Timestamp/Timestamp.stories.tsx b/packages/harmony/src/components/comments/Timestamp/Timestamp.stories.tsx
new file mode 100644
index 00000000000..d7bc11adca6
--- /dev/null
+++ b/packages/harmony/src/components/comments/Timestamp/Timestamp.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Flex } from 'components/layout'
+
+import { Timestamp } from './Timestamp'
+import {
+  DAY_IN_MONTH,
+  HR_IN_DAY,
+  MIN_IN_HR,
+  MONTH_IN_YEAR,
+  MS_IN_S,
+  S_IN_MIN
+} from './types'
+
+const meta: Meta<typeof Timestamp> = {
+  title: 'Components/Comments/Timestamp [beta]',
+  component: Timestamp
+}
+
+export default meta
+
+type Story = StoryObj<typeof Timestamp>
+
+const secondsAgo = MS_IN_S
+const minutesAgo = secondsAgo * S_IN_MIN
+const hoursAgo = minutesAgo * MIN_IN_HR
+const daysAgo = hoursAgo * HR_IN_DAY
+const monthsAgo = daysAgo * DAY_IN_MONTH
+const yearsAgo = monthsAgo * MONTH_IN_YEAR
+
+export const Default: Story = {
+  render: () => (
+    <Flex direction='column' gap='l' p='s'>
+      <Timestamp time={new Date(Date.now() - 5 * secondsAgo)} />
+      <Timestamp time={new Date(Date.now() - 49 * minutesAgo)} />
+      <Timestamp time={new Date(Date.now() - 1 * hoursAgo)} />
+      <Timestamp time={new Date(Date.now() - 1 * daysAgo)} />
+      <Timestamp time={new Date(Date.now() - 4 * monthsAgo)} />
+      <Timestamp time={new Date(Date.now() - 3 * yearsAgo)} />
+    </Flex>
+  )
+}
diff --git a/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx b/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx
new file mode 100644
index 00000000000..9bd8e46a0ed
--- /dev/null
+++ b/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx
@@ -0,0 +1,45 @@
+import { Text } from 'components/text'
+
+import {
+  DAY_IN_MONTH,
+  HR_IN_DAY,
+  MIN_IN_HR,
+  MONTH_IN_YEAR,
+  MS_IN_S,
+  S_IN_MIN,
+  TimeUnit,
+  TimestampProps
+} from './types'
+
+const timeUnitMsMap: Record<TimeUnit, number> = {
+  m: MS_IN_S * S_IN_MIN,
+  h: MS_IN_S * S_IN_MIN * MIN_IN_HR,
+  d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,
+  mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,
+  y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR
+} as const
+
+const getTextFromTime = (time: Date) => {
+  const then = new Date(time).getTime()
+  const now = Date.now()
+  const diff = now - then
+  let unit: TimeUnit | null = null
+
+  Object.entries(timeUnitMsMap).forEach(([u, ms]) => {
+    if (diff >= ms) {
+      unit = u as TimeUnit
+    }
+  })
+
+  return unit ? `${Math.floor(diff / timeUnitMsMap[unit])}${unit}` : 'just now'
+}
+
+export const Timestamp = ({ time }: TimestampProps) => {
+  const text = getTextFromTime(time)
+
+  return (
+    <Text variant='body' size='xs' color='subdued'>
+      {text}
+    </Text>
+  )
+}
diff --git a/packages/harmony/src/components/comments/Timestamp/index.ts b/packages/harmony/src/components/comments/Timestamp/index.ts
new file mode 100644
index 00000000000..0d0351c91f6
--- /dev/null
+++ b/packages/harmony/src/components/comments/Timestamp/index.ts
@@ -0,0 +1,2 @@
+export { Timestamp } from './Timestamp'
+export * from './types'
diff --git a/packages/harmony/src/components/comments/Timestamp/types.ts b/packages/harmony/src/components/comments/Timestamp/types.ts
new file mode 100644
index 00000000000..9659ceadaf7
--- /dev/null
+++ b/packages/harmony/src/components/comments/Timestamp/types.ts
@@ -0,0 +1,13 @@
+export type TimestampProps = {
+  time: Date
+}
+
+// TODO: Probably should move these to a general util file
+export const MS_IN_S = 1000
+export const S_IN_MIN = 60
+export const MIN_IN_HR = 60
+export const HR_IN_DAY = 24
+export const DAY_IN_MONTH = 30
+export const MONTH_IN_YEAR = 12
+
+export type TimeUnit = 'm' | 'h' | 'd' | 'mo' | 'y'
diff --git a/packages/harmony/src/components/index.ts b/packages/harmony/src/components/index.ts
index 7b24cf80b21..1c008c37908 100644
--- a/packages/harmony/src/components/index.ts
+++ b/packages/harmony/src/components/index.ts
@@ -25,3 +25,4 @@ export { default as LoadingSpinner } from './loading-spinner/LoadingSpinner'
 export * from './pill'
 export * from './common/HiddenInput'
 export * from './select'
+export * from './comments/Timestamp'
diff --git a/packages/harmony/src/icons/utilityIcons.ts b/packages/harmony/src/icons/utilityIcons.ts
index 97cece1e932..b96c9fa7c2b 100644
--- a/packages/harmony/src/icons/utilityIcons.ts
+++ b/packages/harmony/src/icons/utilityIcons.ts
@@ -75,6 +75,7 @@ import IconNotificationOffSVG from '../assets/icons/NotificationOff.svg'
 import IconNotificationOnSVG from '../assets/icons/NotificationOn.svg'
 import IconPauseSVG from '../assets/icons/Pause.svg'
 import IconPencilSVG from '../assets/icons/Pencil.svg'
+import IconPinSVG from '../assets/icons/Pin.svg'
 import IconPlaySVG from '../assets/icons/Play.svg'
 import IconPlaybackPauseSVG from '../assets/icons/PlaybackPause.svg'
 import IconPlaybackPlaySVG from '../assets/icons/PlaybackPlay.svg'
@@ -237,6 +238,7 @@ export const IconPause = IconPauseSVG as IconComponent
 export const IconTurntable = IconTurntableSVG as IconComponent
 export const IconCloudUpload = IconCloudUploadSVG as IconComponent
 export const IconPencil = IconPencilSVG as IconComponent
+export const IconPin = IconPinSVG as IconComponent
 export const IconUser = IconUserSVG as IconComponent
 export const IconUserArrowRotate = IconUserArrowRotateSVG as IconComponent
 export const IconCollectible = IconCollectibleSVG as IconComponent
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx
new file mode 100644
index 00000000000..8f2e7b7593b
--- /dev/null
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Flex } from '../..'
+
+import { Timestamp } from './Timestamp'
+import {
+  DAY_IN_MONTH,
+  HR_IN_DAY,
+  MIN_IN_HR,
+  MONTH_IN_YEAR,
+  MS_IN_S,
+  S_IN_MIN
+} from './types'
+
+const meta: Meta<typeof Timestamp> = {
+  title: 'Components/Comments/Timestamp [beta]',
+  component: Timestamp
+}
+
+export default meta
+
+type Story = StoryObj<typeof Timestamp>
+
+const secondsAgo = MS_IN_S
+const minutesAgo = secondsAgo * S_IN_MIN
+const hoursAgo = minutesAgo * MIN_IN_HR
+const daysAgo = hoursAgo * HR_IN_DAY
+const monthsAgo = daysAgo * DAY_IN_MONTH
+const yearsAgo = monthsAgo * MONTH_IN_YEAR
+
+export const Default: Story = {
+  render: () => (
+    <Flex direction='column' gap='l' p='s'>
+      <Timestamp time={new Date(Date.now() - 5 * secondsAgo)} />
+      <Timestamp time={new Date(Date.now() - 49 * minutesAgo)} />
+      <Timestamp time={new Date(Date.now() - 1 * hoursAgo)} />
+      <Timestamp time={new Date(Date.now() - 1 * daysAgo)} />
+      <Timestamp time={new Date(Date.now() - 4 * monthsAgo)} />
+      <Timestamp time={new Date(Date.now() - 3 * yearsAgo)} />
+    </Flex>
+  )
+}
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
new file mode 100644
index 00000000000..f3f968d8e2d
--- /dev/null
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
@@ -0,0 +1,44 @@
+import { Text } from '../..'
+
+import type { TimeUnit, TimestampProps } from './types'
+import {
+  DAY_IN_MONTH,
+  HR_IN_DAY,
+  MIN_IN_HR,
+  MONTH_IN_YEAR,
+  MS_IN_S,
+  S_IN_MIN
+} from './types'
+
+const timeUnitMsMap: Record<TimeUnit, number> = {
+  m: MS_IN_S * S_IN_MIN,
+  h: MS_IN_S * S_IN_MIN * MIN_IN_HR,
+  d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,
+  mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,
+  y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR
+} as const
+
+const getTextFromTime = (time: Date) => {
+  const then = new Date(time).getTime()
+  const now = Date.now()
+  const diff = now - then
+  let unit: TimeUnit | null = null
+
+  Object.entries(timeUnitMsMap).forEach(([u, ms]) => {
+    if (diff >= ms) {
+      unit = u as TimeUnit
+    }
+  })
+
+  return unit ? `${Math.floor(diff / timeUnitMsMap[unit])}${unit}` : 'just now'
+}
+
+export const Timestamp = ({ time }: TimestampProps) => {
+  const text = getTextFromTime(time)
+
+  return (
+    <Text variant='body' size='xs' color='subdued'>
+      {text}
+    </Text>
+  )
+}
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts b/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts
new file mode 100644
index 00000000000..0d0351c91f6
--- /dev/null
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts
@@ -0,0 +1,2 @@
+export { Timestamp } from './Timestamp'
+export * from './types'
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts b/packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts
new file mode 100644
index 00000000000..9659ceadaf7
--- /dev/null
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts
@@ -0,0 +1,13 @@
+export type TimestampProps = {
+  time: Date
+}
+
+// TODO: Probably should move these to a general util file
+export const MS_IN_S = 1000
+export const S_IN_MIN = 60
+export const MIN_IN_HR = 60
+export const HR_IN_DAY = 24
+export const DAY_IN_MONTH = 30
+export const MONTH_IN_YEAR = 12
+
+export type TimeUnit = 'm' | 'h' | 'd' | 'mo' | 'y'
diff --git a/packages/mobile/src/harmony-native/components/index.ts b/packages/mobile/src/harmony-native/components/index.ts
index 6aa47b579ac..8ff39cf8f40 100644
--- a/packages/mobile/src/harmony-native/components/index.ts
+++ b/packages/mobile/src/harmony-native/components/index.ts
@@ -26,3 +26,4 @@ export * from './CompletionCheck/CompletionCheck'
 export * from './RadialGradient/RadialGradient'
 export * from './FastImage/FastImage'
 export * from './Radio'
+export * from './Comments/Timestamp'
diff --git a/packages/mobile/src/harmony-native/icons.ts b/packages/mobile/src/harmony-native/icons.ts
index ebea5544ad8..004b7f62f42 100644
--- a/packages/mobile/src/harmony-native/icons.ts
+++ b/packages/mobile/src/harmony-native/icons.ts
@@ -147,6 +147,7 @@ export { default as IconSoundwave } from '@audius/harmony/src/assets/icons/Sound
 export { default as IconCreditCard } from '@audius/harmony/src/assets/icons/CreditCard.svg'
 export { default as IconWaveform } from '@audius/harmony/src/assets/icons/Waveform.svg'
 export { default as IconMoneyBracket } from '@audius/harmony/src/assets/icons/MoneyBracket.svg'
+export { default as IconPin } from '@audius/harmony/src/assets/icons/Pin.svg'
 
 // Two Tone / Special Styling
 

From cf12bfef474b1fc347869859a5d493745f9b1f5d Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Wed, 7 Aug 2024 10:53:58 -0400
Subject: [PATCH 2/3] small refactors

---
 .../comments/Timestamp/Timestamp.tsx          | 37 ++-----------------
 .../components/comments/Timestamp/index.ts    |  1 +
 .../src/components/comments/Timestamp/util.ts | 33 +++++++++++++++++
 .../Comments/Timestamp/Timestamp.tsx          | 37 ++-----------------
 4 files changed, 41 insertions(+), 67 deletions(-)
 create mode 100644 packages/harmony/src/components/comments/Timestamp/util.ts

diff --git a/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx b/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx
index 9bd8e46a0ed..44bf4902e7a 100644
--- a/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx
+++ b/packages/harmony/src/components/comments/Timestamp/Timestamp.tsx
@@ -1,41 +1,10 @@
 import { Text } from 'components/text'
 
-import {
-  DAY_IN_MONTH,
-  HR_IN_DAY,
-  MIN_IN_HR,
-  MONTH_IN_YEAR,
-  MS_IN_S,
-  S_IN_MIN,
-  TimeUnit,
-  TimestampProps
-} from './types'
-
-const timeUnitMsMap: Record<TimeUnit, number> = {
-  m: MS_IN_S * S_IN_MIN,
-  h: MS_IN_S * S_IN_MIN * MIN_IN_HR,
-  d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,
-  mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,
-  y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR
-} as const
-
-const getTextFromTime = (time: Date) => {
-  const then = new Date(time).getTime()
-  const now = Date.now()
-  const diff = now - then
-  let unit: TimeUnit | null = null
-
-  Object.entries(timeUnitMsMap).forEach(([u, ms]) => {
-    if (diff >= ms) {
-      unit = u as TimeUnit
-    }
-  })
-
-  return unit ? `${Math.floor(diff / timeUnitMsMap[unit])}${unit}` : 'just now'
-}
+import { TimestampProps } from './types'
+import { getLargestTimeUnitText } from './util'
 
 export const Timestamp = ({ time }: TimestampProps) => {
-  const text = getTextFromTime(time)
+  const text = getLargestTimeUnitText(time)
 
   return (
     <Text variant='body' size='xs' color='subdued'>
diff --git a/packages/harmony/src/components/comments/Timestamp/index.ts b/packages/harmony/src/components/comments/Timestamp/index.ts
index 0d0351c91f6..188db063a81 100644
--- a/packages/harmony/src/components/comments/Timestamp/index.ts
+++ b/packages/harmony/src/components/comments/Timestamp/index.ts
@@ -1,2 +1,3 @@
 export { Timestamp } from './Timestamp'
+export { getLargestTimeUnitText } from './util'
 export * from './types'
diff --git a/packages/harmony/src/components/comments/Timestamp/util.ts b/packages/harmony/src/components/comments/Timestamp/util.ts
new file mode 100644
index 00000000000..031c816210b
--- /dev/null
+++ b/packages/harmony/src/components/comments/Timestamp/util.ts
@@ -0,0 +1,33 @@
+import type { TimeUnit } from './types'
+import {
+  DAY_IN_MONTH,
+  HR_IN_DAY,
+  MIN_IN_HR,
+  MONTH_IN_YEAR,
+  MS_IN_S,
+  S_IN_MIN
+} from './types'
+
+const timeUnitMsMap: Record<TimeUnit, number> = {
+  m: MS_IN_S * S_IN_MIN,
+  h: MS_IN_S * S_IN_MIN * MIN_IN_HR,
+  d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,
+  mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,
+  y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR
+} as const
+
+export const getLargestTimeUnitText = (time: Date) => {
+  const then = new Date(time).getTime()
+  const now = Date.now()
+  const diff = now - then
+  let unit: TimeUnit | null = null
+
+  // Iterate through all time units to determine the largest one
+  Object.entries(timeUnitMsMap).forEach(([u, ms]) => {
+    if (diff >= ms) {
+      unit = u as TimeUnit
+    }
+  })
+
+  return unit ? `${Math.floor(diff / timeUnitMsMap[unit])}${unit}` : 'just now'
+}
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
index f3f968d8e2d..cf57d313ede 100644
--- a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
@@ -1,40 +1,11 @@
-import { Text } from '../..'
-
-import type { TimeUnit, TimestampProps } from './types'
-import {
-  DAY_IN_MONTH,
-  HR_IN_DAY,
-  MIN_IN_HR,
-  MONTH_IN_YEAR,
-  MS_IN_S,
-  S_IN_MIN
-} from './types'
-
-const timeUnitMsMap: Record<TimeUnit, number> = {
-  m: MS_IN_S * S_IN_MIN,
-  h: MS_IN_S * S_IN_MIN * MIN_IN_HR,
-  d: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY,
-  mo: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH,
-  y: MS_IN_S * S_IN_MIN * MIN_IN_HR * HR_IN_DAY * DAY_IN_MONTH * MONTH_IN_YEAR
-} as const
+import { getLargestTimeUnitText } from '@audius/harmony/src/components/comments/Timestamp'
 
-const getTextFromTime = (time: Date) => {
-  const then = new Date(time).getTime()
-  const now = Date.now()
-  const diff = now - then
-  let unit: TimeUnit | null = null
-
-  Object.entries(timeUnitMsMap).forEach(([u, ms]) => {
-    if (diff >= ms) {
-      unit = u as TimeUnit
-    }
-  })
+import { Text } from '../..'
 
-  return unit ? `${Math.floor(diff / timeUnitMsMap[unit])}${unit}` : 'just now'
-}
+import type { TimestampProps } from './types'
 
 export const Timestamp = ({ time }: TimestampProps) => {
-  const text = getTextFromTime(time)
+  const text = getLargestTimeUnitText(time)
 
   return (
     <Text variant='body' size='xs' color='subdued'>

From aee397feec13fce1c0cb2f8ef3d9b5cb686669ec Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Wed, 7 Aug 2024 13:06:05 -0400
Subject: [PATCH 3/3] more refactors

---
 .../Comments/Timestamp/Timestamp.stories.tsx        | 12 ++++++------
 .../components/Comments/Timestamp/Timestamp.tsx     |  5 ++---
 .../components/Comments/Timestamp/index.ts          |  1 -
 .../components/Comments/Timestamp/types.ts          | 13 -------------
 4 files changed, 8 insertions(+), 23 deletions(-)
 delete mode 100644 packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts

diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx
index 8f2e7b7593b..d242224366f 100644
--- a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.stories.tsx
@@ -1,8 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Flex } from '../..'
-
-import { Timestamp } from './Timestamp'
 import {
   DAY_IN_MONTH,
   HR_IN_DAY,
@@ -10,7 +5,12 @@ import {
   MONTH_IN_YEAR,
   MS_IN_S,
   S_IN_MIN
-} from './types'
+} from '@audius/harmony/src/components/comments/Timestamp/types'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Flex } from '../..'
+
+import { Timestamp } from './Timestamp'
 
 const meta: Meta<typeof Timestamp> = {
   title: 'Components/Comments/Timestamp [beta]',
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
index cf57d313ede..579676498ab 100644
--- a/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/Timestamp.tsx
@@ -1,9 +1,8 @@
-import { getLargestTimeUnitText } from '@audius/harmony/src/components/comments/Timestamp'
+import type { TimestampProps } from '@audius/harmony/src/components/comments/Timestamp/types'
+import { getLargestTimeUnitText } from '@audius/harmony/src/components/comments/Timestamp/util'
 
 import { Text } from '../..'
 
-import type { TimestampProps } from './types'
-
 export const Timestamp = ({ time }: TimestampProps) => {
   const text = getLargestTimeUnitText(time)
 
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts b/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts
index 0d0351c91f6..811f95df774 100644
--- a/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts
+++ b/packages/mobile/src/harmony-native/components/Comments/Timestamp/index.ts
@@ -1,2 +1 @@
 export { Timestamp } from './Timestamp'
-export * from './types'
diff --git a/packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts b/packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts
deleted file mode 100644
index 9659ceadaf7..00000000000
--- a/packages/mobile/src/harmony-native/components/Comments/Timestamp/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type TimestampProps = {
-  time: Date
-}
-
-// TODO: Probably should move these to a general util file
-export const MS_IN_S = 1000
-export const S_IN_MIN = 60
-export const MIN_IN_HR = 60
-export const HR_IN_DAY = 24
-export const DAY_IN_MONTH = 30
-export const MONTH_IN_YEAR = 12
-
-export type TimeUnit = 'm' | 'h' | 'd' | 'mo' | 'y'