T3322
A new Swap component that acts as a portal for all supported swap widgets. This diff integrates SideShift and ChangeNow to give a sense of how this component may evolve as we get more listings with supporting widgets.
Design considerations for further discussion:
- The way this sideshift button is embedded is via setting the FROM and TO sides of the swap in the React app’s index.html header, which makes it somewhat challenging to be changing on the fly (is this even possible?).
- Edit: No longer a material issue after discussions, since the user can just adjust the From and To currencies when the overlay widget appears.
- Do we need to add event listeners for when a shift (swap) has been settled with at least one deposit, an order is made or upon other deposit events?
- Do we need to increase implementation complexity even further by trying to automatically transfer a completed USDT -> XEC swap into the active Cashtab wallet? Similar to the swap direction, the settlement address is also defined in index.html’s header tag, which presents a similar challenge in changing on the fly.
- The sideshift widget currently hovers above Cashtab, which is probably ok since Cashtab’s UI real estate is very limited. It is closed via the X button on the top right.
- The sideshift widget’s theme is at odds with Cashtab’s.
Dev notes
- The generated custom widget code from the ChangeNow website can't be copied as is, need to override the inline style with an object of style properties for it to work in React apps utilizing jsx
- SideShift library instantiation needs to be made inside of the Component to work in React.
- SideShift head script goes in a React app's /public/index.html.