Flexibility at your fingertips
sdkConfig
configuration.
fromAmount
, fromChain
, fromToken
, toChain
, toToken
and toAddress
.
They are most often set by using the Widget UI but they can also be initialized and updated programmatically.
By configuring these options, you can streamline the user experience, ensuring that the widget is preloaded with the desired chains, tokens, amount and address for a swap or bridge. This reduces the need for manual input and helps guide users through the intended flow.
You can initialize these values by either:
fromAmount
, fromChain
, fromToken
, toChain
, toToken
or toAddress
values to the widget config.
buildUrl
in the widget config is set to true
, by adding them to the URL search params in the url of the page the widget is featured on.
buildUrl
is set to true
in the widget config.
buildUrl
is set to true
in the widget config both methods should also update the URL search params as well as the value displayed in the widget itself.undefined
. This example resets only the fromChain and fromToken form values.
undefined
used to reset a the widgets form value to an empty state. The absence of a property from the widget config object means that property will remain unchanged.
State management with widget config
When using config to update widgets form values it is often a good choice to consider using an application state management library to store your widget config. There are many options to choose from such as Zustand, MobX, Redux or even React context.
For example, if you were to use Zustand as your state management tool you could use Zustand’s API to access and set values on your config from any part of your application. In addition you would also be able to use Zustand’s equality functionality, such as the built-in shallow
function, to ensure that your widget config is only used to update the instance of the LiFi Widget when necessary. This should be beneficial for optimizing re-renders.
You can find an example that uses Zustand to manage widget config in the widget repository.
setFieldValue
function.
setFieldValue
function can be called to set the form value, note that setUrlSearchParam
will ensure the url is updated if you have buildUrl
set to true
in your widget config.
Here are some examples of usage.
allow
and deny
configuration options to control which chains, tokens, bridges, and exchanges can be used within your application. Here’s how you can set up and use these options:
allow
and deny
options:
tokens
object, they apply to both lists.from
or to
objects, they apply only to that specific list.allow
list is defined, only tokens included in it are allowed. If no allow
list is defined, all tokens are allowed unless they are explicitly included in deny
. If a token appears in both allow
and deny
, the allow
list takes precedence.allow
/deny
check and the check for the current list (from
or to
) to be considered allowed.allow
and deny
options, the tokens
option can be configured to include other tokens or featured tokens that will appear at the top of the corresponding list of tokens.
toAddress
option to configure a single destination address. The address
and chainType
properties are required, while the name
and logoURI
properties are optional.
toAddresses
option to configure a curated list of wallet addresses.
Send to wallet
button, they will open a pre-configured list of addresses from which to choose, skipping the step where they can manually enter the address.
Together with configuring the wallet list, developers can make the destination address required to be filled out. Please see Required destination address for more details.
internal
as a key and the base url of the explorer as the value.
/address/:address
and for transactions at /tx/:hash
and will attempt to navigate the user to those pages when the users clicks the related buttons.
A link to a wallet address would look like:
routeLabels: RouteLabelRule[]
array in your WidgetConfig
.
text
and sx
styling of the badge in the MUI-style CSS-in-JS way.
The rest of the fields determine when and where a label should be applied based on route conditions.
You can combine multiple criteria such as fromChainId
, exchanges
, tokens
, and more.
For bridges and exchanges, use the allow
and deny
fields for fine-grained control, similarly to how it is described in Configure allow and deny options.
Example configuration:
Route labels example