Merge branch 'main' into ted/standardize-commit-messages

Author: ted-palmer

.changeset/late-rpc-error-after-success.md

@@ -0,0 +1,6 @@
+---
+'@relayprotocol/relay-sdk': patch
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Fix swap showing an error after already succeeding. When the websocket confirmed a request as successful, step execution stayed blocked on the RPC receipt lookup; if that RPC call then failed, executeSteps rejected with a TransactionConfirmationError and the swap widget flipped from Success to Error. Websocket success now resolves the step directly, late receipt errors are ignored once the backend has confirmed success, and the transaction modal no longer downgrades a Success state to Error.

packages/sdk/src/utils/executeSteps/executeSteps.test.ts

@@ -1485,6 +1485,105 @@ describe('Should test WebSocket functionality', () => {
     expect(mockWebSocket.close).toHaveBeenCalled()
   })
 
+  it('Should resolve execution on WebSocket success without waiting for the RPC receipt', async () => {
+    // handleConfirmTransactionStep never resolves (see beforeEach), so the only
+    // way execution can finish is via the websocket success message
+    const execution = executeSteps(
+      1,
+      {},
+      wallet,
+      () => {},
+      bridgeData,
+      undefined
+    )
+
+    await vi.waitFor(() => {
+      expect(wsConstructorSpy).toHaveBeenCalled()
+    })
+    mockWebSocket.onopen?.()
+
+    mockWebSocket.onmessage?.({
+      data: JSON.stringify({
+        event: 'request.status.updated',
+        data: {
+          status: 'success',
+          txHashes: ['0x123'],
+          inTxHashes: ['0xabc'],
+          destinationChainId: 8453,
+          originChainId: 1
+        }
+      })
+    })
+
+    const result = await execution
+    expect(result.error).toBeUndefined()
+    expect(
+      result.steps.every((step) =>
+        step.items?.every((item) => item.status === 'complete')
+      )
+    ).toBe(true)
+  })
+
+  it('Should not fail when the RPC receipt errors after WebSocket success', async () => {
+    // Make the receipt lookup controllable so we can fail it after the backend
+    // has already confirmed success over the websocket
+    let rejectReceipt: ((error: Error) => void) | undefined
+    wallet.handleConfirmTransactionStep = vi.fn().mockImplementation(
+      () =>
+        new Promise((_, reject) => {
+          rejectReceipt = reject
+        })
+    )
+
+    const progressSpy = vi.fn()
+    const execution = executeSteps(
+      1,
+      {},
+      wallet,
+      (data) => progressSpy(data),
+      bridgeData,
+      undefined
+    )
+
+    await vi.waitFor(() => {
+      expect(wsConstructorSpy).toHaveBeenCalled()
+      expect(rejectReceipt).toBeDefined()
+    })
+    mockWebSocket.onopen?.()
+
+    mockWebSocket.onmessage?.({
+      data: JSON.stringify({
+        event: 'request.status.updated',
+        data: {
+          status: 'success',
+          txHashes: ['0x123'],
+          inTxHashes: ['0xabc'],
+          destinationChainId: 8453,
+          originChainId: 1
+        }
+      })
+    })
+
+    // Now the RPC "fails" (e.g. node error / receipt not found) after success
+    rejectReceipt?.(new Error('HTTP request failed: 502 Bad Gateway'))
+
+    const result = await execution
+    expect(result.error).toBeUndefined()
+    expect(result.steps[0].items?.[0].status).toBe('complete')
+    expect(result.steps[0].items?.[0].error).toBeUndefined()
+
+    // No progress update should ever have carried an error
+    const erroredUpdates = progressSpy.mock.calls.filter(
+      ([data]) =>
+        data?.error ||
+        data?.steps?.some(
+          (step: Execute['steps'][0]) =>
+            step.error || step.items?.some((item) => item.error)
+        )
+    )
+    expect(erroredUpdates).toHaveLength(0)
+  })
+
   it('Should fall back to polling on WebSocket error', async () => {
     const stateUpdates: any[] = []
 

packages/sdk/src/utils/executeSteps/index.ts

@@ -101,6 +101,11 @@ export async function executeSteps(
   let terminalStatusPromise: Promise<never> | null = null
   let rejectTerminalStatus: ((error: Error) => void) | null = null
 
+  // Resolves when the websocket reports a terminal success, so step execution
+  // doesn't stay blocked on (or fail because of) the RPC receipt lookup
+  let successStatusPromise: Promise<void> | null = null
+  let resolveSuccessStatus: (() => void) | null = null
+
   // Promise-based approach for WebSocket failure handling
   let websocketFailedPromise: Promise<void> | null = null
   let resolveWebsocketFailed: (() => void) | null = null
@@ -228,6 +233,10 @@ export async function executeSteps(
         rejectTerminalStatus = reject
       })
 
+      successStatusPromise = new Promise<void>((resolve) => {
+        resolveSuccessStatus = resolve
+      })
+
       statusControl.closeWebSocket = trackRequestStatus({
         event: 'request.status.updated',
         requestId: requestId,
@@ -249,6 +258,10 @@ export async function executeSteps(
             onTerminalError: (error: Error) => {
               // Immediately reject when terminal status received
               rejectTerminalStatus?.(error)
+            },
+            onTerminalSuccess: () => {
+              // Immediately resolve when the backend confirms success
+              resolveSuccessStatus?.()
             }
           })
         },
@@ -360,9 +373,14 @@ export async function executeSteps(
               }
             })()
 
-            // Allow WebSocket terminal status (failure/refund) to immediately interrupt and stop step execution
+            // Allow WebSocket terminal status to immediately settle step execution:
+            // failure/refund rejects, success resolves without waiting on the RPC receipt
             if (statusControl.websocketActive && terminalStatusPromise) {
-              await Promise.race([stepExecutionPromise, terminalStatusPromise])
+              await Promise.race([
+                stepExecutionPromise,
+                terminalStatusPromise,
+                ...(successStatusPromise ? [successStatusPromise] : [])
+              ])
             } else {
               await stepExecutionPromise
             }
@@ -379,6 +397,32 @@ export async function executeSteps(
             })
             resolve(stepItem)
           } catch (e) {
+            // If the backend already marked this item complete (e.g. via websocket),
+            // a late error from the execution promise must not flip it to a failure
+            if (
+              stepItem.status === 'complete' ||
+              statusControl.lastKnownStatus === 'success'
+            ) {
+              client.log(
+                [
+                  'Execute Steps: Ignoring error for step item already confirmed complete',
+                  e
+                ],
+                LogLevel.Warn
+              )
+              stepItem.status = 'complete'
+              stepItem.progressState = 'complete'
+              stepItem.isValidatingSignature = false
+              setState({
+                steps: [...json?.steps],
+                fees: { ...json?.fees },
+                breakdown: json?.breakdown,
+                details: json?.details
+              })
+              resolve(stepItem)
+              return
+            }
+
             const error = e as Error
             const errorMessage = error
               ? error.message

packages/sdk/src/utils/executeSteps/websocketHandlers.ts

@@ -17,6 +17,7 @@ interface WebSocketUpdateHandlerParams {
     websocketFailureTimeoutId?: ReturnType<typeof setTimeout> | null
   }
   onTerminalError?: (error: Error) => void
+  onTerminalSuccess?: () => void
 }
 
 export function handleWebSocketUpdate({
@@ -27,7 +28,8 @@ export function handleWebSocketUpdate({
   json,
   client,
   statusControl,
-  onTerminalError
+  onTerminalError,
+  onTerminalSuccess
 }: WebSocketUpdateHandlerParams): void {
   statusControl.lastKnownStatus = data.status
 
@@ -52,6 +54,7 @@ export function handleWebSocketUpdate({
     switch (data.status) {
       case 'success':
         handleSuccessStatus(data, stepItems, chainId, setState, json, client)
+        onTerminalSuccess?.()
         break
       case 'refund':
         handleRefundStatus(client, stepItems, onTerminalError)

packages/sdk/src/utils/transaction.ts

@@ -452,6 +452,21 @@ export async function sendTransactionSafely(
             return
           }
 
+          // The backend (via websocket) has already confirmed the request succeeded.
+          // A late RPC receipt error at this point is a node/RPC issue, not a failed
+          // transaction, so don't surface it as a TransactionConfirmationError.
+          if (statusControl?.lastKnownStatus === 'success') {
+            waitingForConfirmation = false
+            getClient()?.log(
+              [
+                'Ignoring receipt error, request already confirmed successful by backend',
+                error
+              ],
+              LogLevel.Warn
+            )
+            return
+          }
+
           let tenderlyError: TenderlyErrorInfo | null = null
 
           if (receipt && (receipt as TransactionReceipt).transactionHash) {

packages/ui/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @reservoir0x/relay-kit-ui
 
+## 11.0.5
+
+### Patch Changes
+
+- e6ca48c: Align swap widget fee display with the Dashboard and transaction page:
+  "Swap Impact" is now "Swap Cost", "Relay Fee" is "Platform Fee" (with a green
+  "(Reward)" note when Relay pays the user), "Execution Fee" is "Execution
+  Cost", and "Network cost" is "Deposit gas". Credits render green with a
+  leading "+", zero fees display as "$0.00" instead of "-", and sub-cent
+  values as signed "+< $0.01" / "-< $0.01".
+
 ## 11.0.4
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@relayprotocol/relay-kit-ui",
-  "version": "11.0.4",
+  "version": "11.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/relayprotocol/relay-kit.git",

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

@@ -118,7 +118,11 @@ export const TransactionModalRenderer: FC<Props> = ({
 
   useEffect(() => {
     if (swapError) {
-      setProgressStep(TransactionProgressStep.Error)
+      // Once the swap has been confirmed successful, a late error (e.g. an RPC
+      // failure while fetching the receipt) must not flip the modal to an error state
+      if (progressStep !== TransactionProgressStep.Success) {
+        setProgressStep(TransactionProgressStep.Error)
+      }
       return
     }
     if (!steps) {

packages/ui/src/components/widgets/FeeBreakdown.tsx

@@ -118,7 +118,7 @@ const FeeBreakdown: FC<Props> = ({
       )
     },
     {
-      title: 'Network cost',
+      title: 'Deposit gas',
       value: (
         <Flex align="center" className="relay:gap-1">
           <FontAwesomeIcon
@@ -174,7 +174,10 @@ const FeeBreakdown: FC<Props> = ({
           className="relay:rounded-[var(--relay-radii-widget-card-border-radius)] relay:bg-[var(--relay-colors-widget-background)] relay:border-widget-card relay:overflow-hidden relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
         >
           <div className="relay:mt-0 relay:mb-0 relay:px-3 relay:py-[12px] relay:w-full relay:flex relay:justify-center">
-            <FetchingQuoteLoader isLoading={isFetchingQuote} containerClassName="relay:!my-0 relay:!py-0" />
+            <FetchingQuoteLoader
+              isLoading={isFetchingQuote}
+              containerClassName="relay:!my-0 relay:!py-0"
+            />
           </div>
         </Box>
       )

packages/ui/src/components/widgets/PriceImpactTooltip.tsx

@@ -46,7 +46,7 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
           />
           <Flex align="center" className="relay:w-full">
             <Text style="subtitle3" color="subtle" className="relay:mr-auto">
-              Swap Impact
+              Swap Cost
             </Text>
             <Text
               style="subtitle3"
@@ -59,11 +59,20 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
             if (fee.id === 'origin-gas') {
               return null
             }
+            // Positive platform fee = rebalancing reward paid to the user.
+            const isReward = fee.id === 'relayer-fee' && fee.usd.value > 0
             return (
               <Flex key={fee.id} align="center" className="relay:w-full">
-                <Text style="subtitle3" color="subtle" className="relay:mr-auto">
-                  {fee.name}
-                </Text>
+                <Flex align="center" className="relay:mr-auto relay:gap-1">
+                  <Text style="subtitle3" color="subtle">
+                    {fee.name}
+                  </Text>
+                  {isReward && (
+                    <Text style="subtitle3" color="success">
+                      (Reward)
+                    </Text>
+                  )}
+                </Flex>
                 {feeBreakdown.isGasSponsored && fee.usd.value === 0 ? (
                   <Text style="subtitle3" color="success">
                     Free