Appearance
useExchangePayCompletedTransactionSummary
Live display-ready summary of the last completed Exchange Pay payment.
When to use
Success screen after the order completes. Updates when exchangePay:orderCompleted fires (and from session transaction data when applicable).
Example
tsx
import {
useExchangePayCompletedTransactionSummary,
useSwappedConnectClient,
} from '@swapped/connect-sdk/react'
function Success() {
const summary = useExchangePayCompletedTransactionSummary()
const client = useSwappedConnectClient()
if (!summary) return null
const network = summary.amount.network ?? summary.receive?.network
return (
<div>
<p>Provider: {summary.provider}</p>
<p>
Paid {summary.amount.amount} {summary.amount.currency}
</p>
{summary.isSwap && summary.send && (
<p>
Send {summary.send.amount} {summary.send.currency}
</p>
)}
{summary.isSwap && summary.receive && (
<p>
Receive {summary.receive.amount} {summary.receive.currency}
</p>
)}
{network && <p>Network: {network}</p>}
{summary.fee && (
<p>
Fee {summary.fee.amount} {summary.fee.currency}
</p>
)}
{summary.merchantFee && (
<p>
Merchant fee {summary.merchantFee.amount}{' '}
{summary.merchantFee.currency}
</p>
)}
{summary.destinationAddress && (
<p>Deposit address: {summary.destinationAddress}</p>
)}
{summary.transactionHash && <p>Tx: {summary.transactionHash}</p>}
{summary.status && <p>Status: {summary.status}</p>}
{summary.sessionId && <p>Session: {summary.sessionId}</p>}
{summary.from && <p>From: {summary.from}</p>}
{summary.to && <p>To: {summary.to}</p>}
<button type="button" onClick={() => void client.restartSession()}>
New payment
</button>
</div>
)
}May be null after reload or restartSession() even if payment completed on the server.
Errors
This hook does not throw. null means no summary is available yet.
The next createOrder can hit SESSION_NOT_ACTIVE if you did not call restartSession() — see Errors.