fix animation related to privacy warning message

[TalDerei]

fix the height for the gas calculation, so only one jump happens

Screen.Recording.2024-06-12.at.11.47.22.PM.mov

[vacekj]

I see three simple ways to resolve this.
A) Set a fixed height on the Fee tier section - this looks odd to me with the empty space
B) Move the fee value next to the fee tier switch, and remove the gas icon, as we're not calling it gas anyway (at least for now).
C) Always display the value, but default to zero when we don't know the fee yet.

I included screenshots for all cases. My personal preference is B, C, A in this order.

Curious to hear your thoughts @penumbra-zone/web-reviewers

[vacekj]

after more info from Tal, the right way to proceed is to make both of the dialogs appear at the same time, instead of changing the height of the fee part directly.

[TalDerei]

@VanishMax can you sanity-check the issue accurately captures the original intention for the suggestion you made?

[VanishMax]

@vacekj thanks for the ideas with detailed screenshots. I believe the C options suits our needs – displaying the empty value for a fraction of a second is, in my opinion, better than having multiple jumps and worsening the cumulative layout shift (CLS). The option B looks goon on the screenshot but in many cases would not fit into the view

[vacekj]

Going for option C here, debugging why Fee doesn't also contain the asssetId.

[TalDerei]

debugging why Fee doesn't also contain the asssetId.

can you elaborate?

[vacekj]

@TalDerei I'm going with option C, which displays a zero value before the actual fee is loaded, avoiding any CLS in the fee dialog. While implementing this, I realized that the fee param in GasFee (gas-fee.tsx:29) doesn't contain the assetId, just the amount. This leads to the fee display always defaulting to the stakingToken, in our case UM, and not the token that the fee is paid in (afaik after diggind deep into this with @grod220 ).

[TalDerei]

thanks for taking this on!