Merge pull request #836 from relayprotocol/joseph/fe-8003-capital-s-shown-when-transaction-that-take-2-minutes

Improved fill time display on success screen

Author: 0xTxbi

.changeset/forty-bushes-fix.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Improved fill time display on success screen

packages/ui/src/utils/relayTransaction.ts

@@ -1,6 +1,6 @@
 import { type Execute, RelayClient } from '@relayprotocol/relay-sdk'
 import { type RelayTransaction } from '../types/index.js'
-import { relativeTime } from './time.js'
+import { formatSeconds } from './time.js'
 
 export const extractFromChain = (
   transaction?: RelayTransaction | null,
@@ -42,11 +42,7 @@ export const calculateFillTime = (transaction?: RelayTransaction | null) => {
         fillTime = '-'
         seconds = 0
       } else if (seconds > 60) {
-        fillTime = `${relativeTime(
-          txEndTimestamp * 1000,
-          txStartTimestamp * 1000,
-          true
-        )}`
+        fillTime = formatSeconds(seconds)
       } else {
         fillTime = `${seconds}s`
       }

packages/ui/src/utils/time.ts

@@ -20,11 +20,13 @@ export const formatSeconds = (seconds: number): string => {
   const m = Math.floor((seconds % 3600) / 60)
   const s = Math.floor(seconds % 60)
 
-  const dDisplay = d > 0 ? d + (d == 1 ? ' d' : 'd ') : ''
-  const hDisplay = h > 0 ? h + (h == 1 ? ' h' : 'h ') : ''
-  const mDisplay = m > 0 ? m + (m == 1 ? ' m' : 'm ') : ''
-  const sDisplay = s > 0 ? s + (s == 1 ? ' s' : 's ') : ''
-  return `${dDisplay} ${hDisplay} ${mDisplay} ${sDisplay}`.trim()
+  const parts: string[] = []
+  if (d > 0) parts.push(`${d}d`)
+  if (h > 0) parts.push(`${h}h`)
+  if (m > 0) parts.push(`${m}m`)
+  if (s > 0) parts.push(`${s}s`)
+
+  return parts.join(' ')
 }
 
 export const get15MinuteInterval = () => {