Merge branch 'main' of github.com:relayprotocol/relay-kit

Author: pedromcunha

.changeset/fuzzy-olives-share.md

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

packages/ui/src/components/common/TransactionModal/TransactionModal.tsx

@@ -196,9 +196,8 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
   allTxHashes,
   setAllTxHashes,
   transaction,
-  executionTime,
-  executionTimeSeconds,
-  setStartTimestamp,
+  fillTime,
+  seconds,
   onAnalyticEvent,
   timeEstimate,
   isCanonical,
@@ -217,7 +216,6 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
       setCurrentStep(null)
       setCurrentStepItem(null)
       setAllTxHashes([])
-      setStartTimestamp(0)
       setSwapError(null)
       setSteps(null)
       setQuote(null)
@@ -295,8 +293,8 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
             toAmountFormatted={toAmountFormatted}
             allTxHashes={allTxHashes}
             transaction={transaction}
-            fillTime={executionTime ?? ''}
-            seconds={executionTimeSeconds ?? 0}
+            fillTime={fillTime ?? ''}
+            seconds={seconds ?? 0}
             onOpenChange={onOpenChange}
             timeEstimate={timeEstimate?.formattedTime}
             isCanonical={isCanonical}

packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx

@@ -15,7 +15,6 @@ import {
   type ExecuteStepItem
 } from '@relayprotocol/relay-sdk'
 import {
-  calculateExecutionTime,
   calculateFillTime,
   extractDepositRequestId
 } from '../../../utils/relayTransaction.js'
@@ -58,10 +57,6 @@ export type ChildrenProps = {
   transaction: ReturnType<typeof useRequests>['data']['0']
   seconds: number
   fillTime: string
-  executionTime?: string
-  executionTimeSeconds?: number
-  startTimestamp: number
-  setStartTimestamp: Dispatch<SetStateAction<number>>
   requestId: string | null
   isLoadingTransaction: boolean
   isAutoSlippage: boolean
@@ -109,7 +104,6 @@ export const TransactionModalRenderer: FC<Props> = ({
     null | NonNullable<NonNullable<Execute['steps']>['0']['items']>['0']
   >()
   const [allTxHashes, setAllTxHashes] = useState<TxHashes>([])
-  const [startTimestamp, setStartTimestamp] = useState(0)
   const [waitingForSteps, setWaitingForSteps] = useState(false)
   const [hasStartedValidation, setHasStartedValidation] = useState(false)
 
@@ -165,7 +159,6 @@ export const TransactionModalRenderer: FC<Props> = ({
       progressStep === TransactionProgressStep.Confirmation
     ) {
       onValidating?.(quote as Execute)
-      setStartTimestamp(new Date().getTime())
       setHasStartedValidation(true)
     }
 
@@ -220,8 +213,6 @@ export const TransactionModalRenderer: FC<Props> = ({
     )
   const transaction = transactions[0]
   const { fillTime, seconds } = calculateFillTime(transaction)
-  const { fillTime: executionTime, seconds: executionTimeSeconds } =
-    calculateExecutionTime(Math.floor(startTimestamp / 1000), transaction)
 
   const isAutoSlippage = slippageTolerance === undefined
   const timeEstimate = calculatePriceTimeEstimate(quote?.details)
@@ -247,10 +238,6 @@ export const TransactionModalRenderer: FC<Props> = ({
         transaction,
         fillTime,
         seconds,
-        executionTime,
-        executionTimeSeconds,
-        startTimestamp,
-        setStartTimestamp,
         requestId,
         isLoadingTransaction,
         isAutoSlippage,

packages/ui/src/utils/relayTransaction.ts

@@ -55,48 +55,6 @@ export const calculateFillTime = (transaction?: RelayTransaction | null) => {
   return { fillTime, seconds }
 }
 
-export const calculateExecutionTime = (
-  startTime: number,
-  transaction?: RelayTransaction | null
-) => {
-  let fillTime = '-'
-  let seconds = 0
-  if (
-    transaction?.status !== 'pending' &&
-    transaction?.status !== 'waiting' &&
-    transaction?.status !== 'delayed'
-  ) {
-    const inTxTimestamps =
-      transaction?.data?.inTxs?.map((tx) => tx.timestamp as number) ?? null
-    const outTxTimestamps =
-      transaction?.data?.outTxs
-        ?.filter((tx) => tx.timestamp)
-        ?.map((tx) => tx.timestamp as number) ?? null
-
-    const txEndTimestamp =
-      outTxTimestamps && outTxTimestamps.length > 0
-        ? Math.max(...outTxTimestamps)
-        : null
-
-    if (startTime && txEndTimestamp) {
-      seconds = txEndTimestamp - startTime
-      if (seconds > 60) {
-        fillTime = `${relativeTime(
-          txEndTimestamp * 1000,
-          startTime * 1000,
-          true
-        )}`
-      } else {
-        fillTime = `${seconds}s`
-      }
-    } else if (!txEndTimestamp && inTxTimestamps && inTxTimestamps.length > 0) {
-      fillTime = '-'
-      seconds = 0
-    }
-  }
-  return { fillTime, seconds }
-}
-
 export const extractDepositRequestId = (steps?: Execute['steps'] | null) => {
   if (!steps?.length) return null