shapeshift
Trade component errors not translatable and breaking the UI when too long
Overview
The error message "[Sell/Buy] asset not supported by wallet" displayed inside the Trade component as a button, is not fully translatable.
This Button/Error also does not adapt to longer strings, which means it gets truncated and looks broken in certain languages as you can see in the screenshot.
This error is also briefly displayed each time the page is refreshed (tested with MetaMask and ShapeShift wallet). It shows up while the component/page is loading before any asset is displayed. That's why it caught my attention, and I would guess other users will notice/be alarmed by it too. I think it shouldn't be displayed until assets displayed (and only if needed of course).
References and additional details
'Sell asset' and 'Buy asset' in the next portion of code should be made translatable like the rest of the underlying string used trade.errors.assetNotSupportedByWallet :
https://github.com/shapeshift/web/blob/b99fb8e1ca44c42d3a4620d04d3624bf2ac06e29/src/components/Trade/TradeInputV2.tsx#L296-L305
If possible adapt the button so it can accept longer strings, so translations won't cause it to break as seen in the screenshot. It currently has a CSS rule for white-space: nowrap; which could be changed to allow wrapping... obviously this requires more UI testing.
Acceptance Criteria
- Both error messages are fully translatable and present only in the English
main.jsonfile. Translations in other languages will be provided by the Globalization WS in one of the weekly PR for translations, after this issue is resolved in the base language. - The button/error can be displayed within the bounds of the button box even for longer strings.
- Avoid showing the error while until the assets are loaded and it is actually an error that should be communicated to the user.
Need By Date
No response
Screenshots/Mockups
No response
Estimated effort
No response
