fix: sideshift button not rendering

[chedieck]

Description

Fixes issue where an editable amount paybutton wouldn't allow for the user to finish the process of paying with another currency.

Test plan

After selecting an altcoin, the button "Send with XYZ" wouldn't appear in master. In this branch, it should appear normally.

Remarks

• The change that makes it work is the empty <div></div> . I have no idea why is that so. Tried to figure out but decided not to spend too much time on that. My guess is something related to the new CSS, since this worked fine before.
• It seems that the "Don't have any XEC?" text doesn't appear if a button is of fixed amount (i.e; not editable). I will check this out in a next PR.

[chedieck]

this and the similar line below were put here to fixe console errors that would appear in the browser

[Klakurka]

Let's pop a code comment on that empty div as that's really weird...

[Klakurka]

@johnkuney any idea what's going on there?

[chedieck]

Let's pop a code comment on that empty div as that's really weird...

I had tried to do:
<div></div> {/* This is necessary for the button rendering */}

That made the sideshift logo and the input field HUGE. Some weird stuff happening indeed.

[johnkuney]

Thats so weird. How did you even figure that out?
I do not know what would be causing this. It doesnt appear to be CSS related afaict though, as the element is not even in the html without that blank div in there.

I did try moving the button up, above the {altpaymentEditable ? ( part just to see what it would do, and it rendered without a blank div, but then the editable field did not render ha

[chedieck]

I found the change that broke it and reverted to its previous state.

[johnkuney]

Cool, any idea why that broke it? just curious, why does it need to be a grid? and why would that effect a button outside the grid?

[chedieck]

Cool, any idea why that broke it? just curious, why does it need to be a grid? and why would that effect a button outside the grid?

I don't know it, really. Maybe it has to do with CSS in the widget, since the AltpaymentWidget is a child of it. Maybe it has to do with the way react renders stuff and hydrates the DOM in the client side. But truly, those are just guesses from my side.