LI.FI Documentation
LI.FI WebsiteAPI ReferenceHelp / FAQ / Create support ticketRequest API Key
  • 🏡Getting Started
    • ❓What is LI.FI
    • 🌟Why LI.FI?
    • 🆚LI.FI vs Aggregators/DEXs/Bridges
    • 📖LI.FI Terminology
    • ❓FAQ
    • 💡Use Cases
      • Mobile/Gaming Wallets
    • 🏹LI.FI vs. Other Aggregators
    • 🤝Partnership
    • 🌐Powered by LI.FI
  • 🔐Security First
  • ✅List: Chains, Bridges, DEX Aggregators, Solvers
  • 💲Monetization / Take Fees
  • 🔎Transaction Explorer
  • 🔏Rate Limits & API Key
  • How to get integrated by LI.FI?
    • For Bridges
    • For DEXs/Aggregators/Solvers
  • 🆘Technical FAQ
  • LI.FI PRODUCTS
    • Glacis
    • LI.FI Solver
    • LI.FI Intents System
  • LI.FI API
    • ⚙️LI.FI API
      • Transferring Tokens (Example)
      • Requesting supported Chains
      • Requesting all supported Tools
      • Requesting all known Tokens
      • Getting Token Information
      • Getting all possible Connections
      • Requesting a Quote
        • Token Transfer
        • Optimizing quote response timing
        • Cross-Chain Contract Calls
        • Possible Tool Errors
        • Testing your integration
      • Status of a Transaction
      • Requesting Analytics Data
    • ⚔️TX-Batching aka "Zaps"
    • 🏄Solana
      • Request examples
    • 🪙Bitcoin
      • Request examples
    • ⛽LI.Fuel
  • Integrate LI.FI SDK
    • 🚀LI.FI SDK Overview
    • 📦Install LI.FI SDK
    • ⚙️Configure SDK
    • 🪐Configure SDK Providers
    • 📜Request Routes/Quotes
    • 🎯Execute Routes/Quotes
    • ⛓️Chains and Tools
    • 💰Token Management
    • 🕵️Testing Integration
    • 🚗Migrate from v2 to v3
  • INTEGRATE LI.FI WIDGET
    • 🧩LI.FI Widget Overview
    • 📦Install Widget
    • 🎮Select Widget Variants
    • ⚙️Configure Widget
    • 🎨Customize Widget
    • ⚡Widget Events
    • 👛Wallet Management
    • 🌍Internationalization
    • ⚛️Compatibility with Next.js, Remix, Nuxt, etc.
    • 🛣️React Router Compatibility
    • 📖Widget API Reference
    • 🚗Migrate from v2 to v3
  • Smart Contracts
    • Overview
    • Deployments/Contract Addresses
    • Audits
  • Support & Misc.
    • API Status
    • Technical Help Desk & FAQ
    • Create a Partner Ticket
    • Discord Support
    • Telegram Support
    • Twitter
    • Github
    • Licenses
Powered by GitBook
LogoLogo

Connect with us

  • Github
  • Twitter
  • Discord
  • LinkedIn

More Information

  • Help Desk / FAQ
  • API Reference
  • Website
On this page

Was this helpful?

Export as PDF
  1. INTEGRATE LI.FI WIDGET

Widget API Reference

API documentation for the widget components and hooks.

Widget Component

Properties and types of the LiFiWidget component configuration.

Please also see LI.FI Terminology for more information about specific types.

Name
Description
Type
Default
Example

apiKey

API authentication key

string

integrator

Identifier of the integrator (dApp/company name)

string

OpenSea

fee

A float between 0 and 1, 0.1 refers to 10% of the transaction volume

number

0.05

referrer

Identifier of the referrer

string

fromChain

Source chain ID

number

The user's current wallet chain

42161

fromToken

Token Contract Address

string

0x539bde0d7dbd336b79148aa742883198bbf60342

fromAmount

Token amount to swap

number

0

69.42

toChain

Destination chain ID

number

1

137

toToken

Destination token contract address

string

0xd6df932a45c0f255f85145f286ea0b292b21c90b

toAddress

Destination wallet address

ToAddress

0x2b563420722cBcFC84857129Bef775e0dC5F1401

slippage

Sets default slippage (saved to user settings in localStorage on the first load)

number

0.005

routePriority

Sets default route priority order (saved to user settings in localStorage on the first load) CHEAPEST is shown as Best Return on the UI.

'CHEAPEST' | 'FASTEST'

'CHEAPEST'

variant

Variant of the widget

'compact' | 'wide' | 'drawer'

'compact'

subvariant

Subvariant of the widget

'default' | 'split' | 'refuel' | 'custom'

'default'

appearance

Default appearance of the widget

'light' | 'dark' | 'auto'

'auto'

'dark'

disabledUI

Allow disabling parts of the UI

DisabledUIType[]

['fromToken', 'toToken', 'fromAmount', 'toAddress']

hiddenUI

Allow hiding parts of the UI

HiddenUIType[]

['appearance', 'language', 'toAddress', 'poweredBy']

requiredUI

Makes parts of the UI required

RequiredUIType[]

['toAddress']

theme

Sets palette, shape, and typography

ThemeConfig

useRecommendedRoute

Allow showing only recommended route

boolean

false

true

walletConfig

Set of options that helps manage widget wallet state

WidgetWalletConfig

sdkConfig

Provides custom configuration to the SDK

WidgetSDKConfig

chains

Allow or deny chains

{ allow?: number[]; deny?: number[]; }

tokens

Allow and deny tokens or add a featured tokens array, which will be shown above any other tokens in a special section

{ featured?: StaticToken[]; include?: Token[]; popular?: StaticToken[]; allow?: Token[]; deny?: Token[]; }

bridges

Allow or deny bridges

{ allow?: string[]; deny?: string[]; }

exchanges

Allow or deny exchanges

{ allow?: string[]; deny?: string[]; }

languages

Allow or deny languages or set a default one

{ default?: LanguageKey; allow?: LanguageKey[]; deny?: LanguageKey[]; }

languageResources

Allow overriding translation strings (titles/labels/messages)

LanguageResources

buildUrl

Adds main configuration to the URL search params in the URL of the page the widget is featured on.

boolean

false

formRef

Provides access to function for updating form values

MutabelRefObject<FormState | null>

explorerUrls

Provides overrides for explorers used by the widget

Record<number, string[]> & Partial<Record<'internal', string[]>>

Last updated 2 months ago

Was this helpful?

📖
🚗Migrate from v2 to v3
Select Widget Variants
Select Widget Variants
Customize Widget
Wallet Management
Configure SDK
Initialize form values
Updating by form ref
Explorer URLs