How to execute a post-transaction contract call with the LI.FI widget while preserving free token selection?

[bensaru]

Description:
I’m using the LI.FI widget (see screenshot). After the LI.FI contract transaction completes, I need to call my own contract to track transaction data.

I see that ContractCall is currently only available in custom mode (checkout/deposit). However, custom mode restricts users from freely selecting the token they want to swap and also changes the page layout.

How can I achieve both:

• Allow users to freely choose any token to swap (like in the normal widget mode), and
• Execute my contract call automatically after the LI.FI transaction finishes?

Is there a recommended way to add a post-transaction hook without forcing custom mode?

[DuskaT021]

You don't need custom mode to execute logic after a LI.FI transaction completes. The widget exposes a widget events system that you can use to listen for route execution completion in the default (swap/bridge) mode - meaning users keep full token selection freedom.

Use the useWidgetEvents hook and listen for the WidgetEvent.RouteExecutionCompleted event. The callback receives the completed Route object, which contains all the transaction details you need to then call your own contract.

Here's an example (consistent with the pattern used in the examples/nextjs/ and examples/nextjs14/ directories):

import type { Route } from '@lifi/sdk'
import { useWidgetEvents, WidgetEvent } from '@lifi/widget'
import { useEffect } from 'react'

export const PostTransactionHook = () => {
  const widgetEvents = useWidgetEvents()

  useEffect(() => {
    const onRouteExecutionCompleted = (route: Route) => {
      // Call your contract here with the transaction data from `route`
      console.log('Transaction completed:', route)
      // e.g. myContract.trackTransaction(route.id, route.toAmount, ...)
    }

    widgetEvents.on(
      WidgetEvent.RouteExecutionCompleted,
      onRouteExecutionCompleted
    )

    return () => widgetEvents.all.clear()
  }, [widgetEvents])

  return null
}

Mount this component alongside your — no subvariant: 'custom' needed.

The Route object passed to the callback includes chain IDs, token addresses, amounts, transaction hashes, and step execution details, so you'll have everything needed to track the transaction in your own contract.

You can also listen to WidgetEvent.RouteExecutionFailed and WidgetEvent.RouteExecutionUpdated for error handling and progress tracking respectively.