Theme Customization
The set of custom colours and contents are linked to the configuration theme. In this scenario, you can see how the elements in the widget are linked to the colours palette.
To see how to edit the style of the Figma design file of this widget, please give a look at the related Platform interface customizations, in its documentation.
Swap screen
The first screen of the widget is the swap one. Here you can see, as the main elements, the two boxes containing the token selectors and the numeric value inputs, and a "speaking" button, which helps the user performing some actions like connect the wallet and swap the tokens.
Token selector
When you need to select the "from" and "to" tokens from the widget, you access
the token selector screen. Here, you can identify, as main elements, a
searchbar, and a list of tokens.
Transaction Status
Once you start a swap, you can track the status of the operations by clicking on the txs icon in the top right of the widget. Here, you can see the status of the swap, by looking at all the steps.
Recover Tokens
If something happens after the tokens are swapped and they cannot be shipped to your account, they are guarded by the Osmosis smart contract. You can recover them by through a tx done with the associated recovery account. Here, you can see which tokens you are able to recover, and there is a button to recover them.
Settings
You can set the slippage tolerance and the recovery address. You can perform this action through the settings screen. Here, you can see a list of buttons that allow you to select one of the default values available for the slippage tolerance, and a numeric input box that let you insert a custom value. In the bottom of the page, you have the ability to set a valid osmosis address as the recovery address. Please, read carefully this page before to change this value.
NOTE: If you are looking for the Platform interface customizations, please give a look at its documentation.