Move CSS reset, font loading and theme switch outside React to prevent flicker #494
Conversation
| @@ -26,10 +26,9 @@ export const Wrapper = styled(motion.div)<{ | |||
| expanded?: boolean; | |||
| }>` | |||
| position: relative; | |||
| width: ${(props) => (props.responsive ? "100%" : "377.5px")}; | |||
There was a problem hiding this comment.
This .5 seem to fix some rendering issues (underflow) in some cases but cause another issue (overflow) in some other cases. I'd just leave it as 377px which is the actual value this should have everywhere and fix it later by laying out the components differently.
| min-height: ${(props) => (props.expanded ? "100vh" : "600px")}; | ||
| max-height: max-content; | ||
| background-color: rgb(${(props) => props.theme.background}); |
There was a problem hiding this comment.
The background is set on the body by the ThemeProvider in the components library, so no need to set it again here.
src/popup.tsx
Outdated
| </ExpandedViewWrapper> | ||
| </HardwareWalletTheme> | ||
| </Provider> | ||
| <ArConnectThemeProvider> |
There was a problem hiding this comment.
ArConnectThemeProvider replaces Provider + HardwareWalletTheme and used the useTheme hook internally.
| @@ -356,7 +372,50 @@ export default function Transaction({ id: rawId, gw, message }: Props) { | |||
| {browser.i18n.getMessage("transaction_from")} | |||
| </PropertyName> | |||
| <PropertyValue> | |||
| {formatAddress(transaction.owner.address, 6)} | |||
| <div> | |||
There was a problem hiding this comment.
Eventually, it would be better to turn this into a bunch of individual components.
In any case, the reason for this change is that before the UI would only prompt users to add the "to" address as contact. After this change, it would prompt for both "to" and "from", and it would also take into account if an address is yours and display "(you)" next to it.
- Stop using Route for the Unlock view. - Make initial fade-in faster.
localStorageto remove theme flicker.