fix: reactive chain and token properties from config

[DNR500]

WIP

Jira: LF-9902

Some tooling has been developed to test this functionality in the playground.

To access it

• Open the Playground
• Go to the “Playground settings”
• Click the Dev view button
• A control for “Form values” will appear in the Design tools
• You can use this to dynamically change the values

Config overrides URL params Important point from this PR Config overrides URL parameters.

So you need to ensure that on first page load non of the form values that can be set in the URL are featured in the config that the Widget initialises

So fromAmount, fromChain, fromToken, toAddress, toChain, and toToken should not be set to allow the URL to perform the initial set up.

Updating form values via the config Once widget has initialised and has full rendered you can update the form values in the Widget by updating the config.

To perform an update you should only include the form values in the config that you want to change and ensure this is passed to the Widget.

So if you want to change the fromChain and fromToken and nothing else you should include only include those values

You also need to set the formUpdateKey. This should be a unique randomly generated key. Using this key ensures that the form values are updated in the widget - essentially forcing an update in the Widget even if the config is otherwise unchanged. This can avoid some edge case issue that might arise when setting values in the Widget via a mix of config and user actions via the Widgets UI.

So your new config might look like this

{
    fromChain: 10,
    fromToken: ‘0x94b008aA00579c1307B0EF2c499aD98a8ce58e58’,
    // use the date object to generate a unique value
    formUpdateKey: new Date().valueOf().toString()

    // might feature other config values but should not include other form values…
}

You can also reset the form values and their fields to an empty state using undefined

This example resets only the fromChain and fromToken fields

{
    fromChain: undefined,
    fromToken: undefined,
    // use the date object to generate a unique value
    formUpdateKey: new Date().valueOf().toString()

    // might feature other config values but should not include other form values…
}

Note that undefined as a value is used to make the Widget reset to an empty form field for that property. The absence property rom the config object means they will remain unchanged.

Updating form values via the form api ref

This solution popped into my head and basic idea is that to provide a nice way for developers to update widget form values without having to be concerned with updating the config. I added a button option in the playground form value controls so you can use the form api ref way of doing things - note this is all done in one commit and can easily be dropped if we don’t want to do it

This method provides developers using the Widget a way to set the form values directly in Widget using a API. By passing a ref object to the widget you can access a function to set values directly in the form.

For example

const formApiRef = useRef<FormApiRefType>();


<LiFiWidget
  config={config}
  integrator="li.fi-playground"
  formApiRef={formApiRef}
/>

Once initialised you can use the ref as follows

formApiRef.current?.setFieldValue( ‘fromChain’, 10, { isTouched: true});

I think this currently update the url and the widget fields as expected.

The only limitation I can see with this method currently is that setting the ‘toAddress’ is restricted to just an address string (and so it can’t show a name in the same way as a bookmark). With a little more work I think it’s possible to allow this to also accept a ToAddress object and to also present a name with the address.