Velora Widget events and callbacks

<Widget
  events={{
    onSwap: ({ event, state }) => {
      if (event.name === "Swap:confirmed") {
        analytics.track("swap_confirmed", { txHash: event.params.txHash });
      }
    },
  }}
/>

​

Callback summary

​

onConnectWallet

• ConnectWallet:click — Connect Wallet button clicked. Params: {}.
• ConnectWallet:connect — A wallet actually connected (explicit click, eager auto-reconnect, or embedded provider).

<Widget
  events={{
    onConnectWallet: ({ event }) => {
      if (event.name === "ConnectWallet:connect") {
        analytics.track("wallet_connected", {
          connector: event.params.connectorType,
          action: event.params.connectorAction,
          account: event.params.account,
        });
      }
    },
  }}
/>

​

onConnectWalletClick

<Widget
  config={{ widgetMode: "dapp" }}
  events={{
    onConnectWalletClick: () => {
      openHostAppWalletModal();
    },
  }}
/>

​

onAllowToken

• AllowToken:request — Approval or permit initiated.
• AllowToken:sent — Transaction signed and broadcast.
• AllowToken:confirmed — Transaction confirmed on-chain, or permit signed.
• AllowToken:failed — Transaction failed or permit rejected.

<Widget
  events={{
    onAllowToken: ({ event }) => {
      if (event.name === "AllowToken:confirmed") {
        console.log("Approved", event.params.token.symbol);
      } else if (event.name === "AllowToken:failed") {
        console.error("Approval failed", event.params.error);
      }
    },
  }}
/>

​

onWrapETH

<Widget
  events={{
    onWrapETH: ({ event }) => {
      if (event.name === "WrapETH:confirmed") {
        console.log("ETH wrapped", event.params.txHash);
      }
    },
  }}
/>

​

onSwap

• Swap:click — Confirmation drawer opened.
• Swap:request — Swap initiated.
• Swap:sent — Tx signed and broadcast (market), or Delta order submitted.
• Swap:confirmed — Tx confirmed (market), or Delta order filled.
• Swap:failed — Tx failed or Delta order failed.
• Swap:cancelled — User replaced / cancelled the pending tx, or the Delta order was cancelled.

<Widget
  events={{
    onSwap: ({ event }) => {
      if (event.name === "Swap:confirmed") {
        if (event.params.swapMode === "market") {
          console.log("Market Swap confirmed", event.params.txHash);
        } else {
          console.log("Delta order filled", event.params.order);
        }
      } else if (event.name === "Swap:failed") {
        console.error("Swap failed", event.params.error);
      }
    },
  }}
/>

​

onTwapOrder

<Widget
  events={{
    onTwapOrder: ({ event }) => {
      if (event.name === "TwapOrder:sent") {
        toast.success("TWAP order placed");
      }
    },
  }}
/>

​

onLimitOrder

<Widget
  events={{
    onLimitOrder: ({ event }) => {
      if (event.name === "LimitOrder:sent") {
        toast.success("Limit order placed");
      }
    },
  }}
/>

​

onOTCOrder

<Widget
  events={{
    onOTCOrder: ({ event }) => {
      if (event.name === "OTCOrder:sent") {
        console.log("OTC order submitted", event.params.order);
      }
    },
  }}
/>

​

onCancelTx

​

onCancelOrder

• CancelOrder:request — Cancel initiated (tx or typed-data signing).
• CancelOrder:sentTx — Cancel tx signed and broadcast. Fires for OTC orders and for ETH Delta orders cancelled via withdrawAndCancel. Non-ETH Delta orders skip this stage (they cancel via signed typed-data).
• CancelOrder:confirmed — Cancel tx mined, or typed-data posted.
• CancelOrder:failed — Cancel failed.

<Widget
  events={{
    onCancelOrder: ({ event }) => {
      if (event.name === "CancelOrder:confirmed") {
        if (event.params.orderType === "DELTA") {
          console.log("Delta orders cancelled", event.params.orderIds);
        } else {
          console.log("OTC order cancelled", event.params.orderHash);
        }
      }
    },
  }}
/>

​

onFillOTCOrder

​

onSettingsChange

• Settings:switchSwapMode — Switched between Market and Delta. Params: { swapMode: "market" | "delta" }.
• Settings:saveSettings — User saved settings. Payload is the full SettingsState: slippageTolerance, transactionSpeed ("slow" | "standard" | "fast" | "custom"), swapMode, eip1559Enabled, degenMode, disabledDexes, bridgePreference ("auto" | "fastest" | "bestReturn"), disabledBridges.
• Settings:changeBridgePreferences — Bridge preferences changed independently (e.g. from Compare Quotes). Params: bridgePreference, disabledBridges.

<Widget
  events={{
    onSettingsChange: ({ event }) => {
      if (event.name === "Settings:saveSettings") {
        console.log("New slippage", event.params.slippageTolerance);
      }
    },
  }}
/>

​

onFormInputChange

• form: "swap" — adds side: "SELL" | "BUY". When side === "SELL", payload carries sendAmount (not receiveAmount); when side === "BUY", receiveAmount (not sendAmount).
• form: "twap" — adds side, orderSplit (slice count), orderInterval (seconds), orderDeadline (Unix seconds), slippage.
• form: "limit" — adds limitPrice, orderDeadline. Both sendAmount and receiveAmount present.
• form: "otc" — adds otcPrice, orderDeadline. Both sendAmount and receiveAmount present.

<Widget
  events={{
    onFormInputChange: ({ event }) => {
      console.log("Form changed", {
        form: event.params.form,
        from: event.params.tokenFrom?.symbol,
        to: event.params.tokenTo?.symbol,
      });
    },
  }}
/>

​

onPriceChange

• PriceUpdate — Price was successfully (re)fetched.
• PriceQueryUpdate — Price-query state changed (data, isLoading, error).

<Widget
  events={{
    onPriceChange: ({ event }) => {
      if (event.name === "PriceUpdate") {
        console.log("New price", event.params.priceMode, event.params.price);
      }
    },
  }}
/>

​

Lifecycle of a successful market swap

1. onConnectWallet — ConnectWallet:click (user clicks), then ConnectWallet:connect once a wallet attaches.
2. onFormInputChange — FormInput:change for every field edit.
3. onPriceChange — PriceQueryUpdate (loading / refetching) and PriceUpdate (successful fetch) as quotes refresh.
4. onAllowToken — AllowToken:request → AllowToken:sent → AllowToken:confirmed. Skipped if allowance already covers the trade or the flow uses a permit signature only.
5. onWrapETH — for Delta Swaps with ETH as tokenFrom, the user is asked to wrap first: WrapETH:click → WrapETH:request → WrapETH:sent → WrapETH:confirmed.
6. onSwap — Swap:click → Swap:request → Swap:sent → Swap:confirmed. Replace with Swap:failed or Swap:cancelled on the unhappy path.
7. onCancelTx — only if the user explicitly cancels a pending market swap tx: CancelTx:request → CancelTx:sent → CancelTx:confirmed.

​

Related pages

• Wallet management — onConnectWallet and onConnectWalletClick patterns.
• Widget API reference — full callback type signatures.