build(deps): DEP-10 — styled-components 6 (WALLET-1337)

package.json

@@ -53,12 +53,10 @@
       "npm run format:write"
     ]
   },
-  "resolutions": {
-    "styled-components": "^5"
-  },
   "//dependencyNotes": "@scure/bip32 and @scure/bip39 are intentionally held at v1 (1.6.2 / 1.2.1): casper-js-sdk@5.0.12 pins @scure/* ^1 and shares the top-level copy. Bumping to v2 would fork BIP32/39 into two impls and pull @noble/curves@2/@noble/hashes@2 (wrong-address risk, no upside). Bump in lockstep only when the SDK/core move off @scure ^1. See WALLET-1330.",
   "dependencies": {
     "@bringweb3/chrome-extension-kit": "1.7.0",
+    "@emotion/is-prop-valid": "^1.4.0",
     "@formatjs/intl": "^4.1.14",
     "@hookform/resolvers": "^5.4.0",
     "@lapo/asn1js": "^2.1.3",
@@ -106,7 +104,7 @@
     "redux": "^5.0.1",
     "redux-saga": "^1.5.0",
     "reselect": "^5.2.0",
-    "styled-components": "5.3.11",
+    "styled-components": "6.4.3",
     "typesafe-actions": "5.1.0",
     "yup": "^1.7.1"
   },
@@ -145,7 +143,6 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.3.0",
     "@types/react-virtualized": "^9.21.30",
-    "@types/styled-components": "^5.1.36",
     "@typescript-eslint/parser": "^5.62.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^10.0.0",

src/apps/connect-to-app/index.tsx

@@ -22,7 +22,12 @@ import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
 import '@libs/i18n/i18n';
 import { ErrorBoundary } from '@libs/layout';
 import { newQueryClient } from '@libs/services/query-client';
-import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
+import {
+  CspStyleSheetManager,
+  GlobalStyle,
+  darkTheme,
+  lightTheme
+} from '@libs/ui';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
@@ -58,16 +63,18 @@ const Tree = () => {
 
   return (
     <Suspense fallback={null}>
-      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
-        <GlobalStyle />
-        <ReduxProvider store={store}>
-          <QueryClientProvider client={newQueryClient}>
-            <ErrorBoundary>
-              <AppRouter />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </ReduxProvider>
-      </ThemeProvider>
+      <CspStyleSheetManager>
+        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+          <GlobalStyle />
+          <ReduxProvider store={store}>
+            <QueryClientProvider client={newQueryClient}>
+              <ErrorBoundary>
+                <AppRouter />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </ReduxProvider>
+        </ThemeProvider>
+      </CspStyleSheetManager>
     </Suspense>
   );
 };

src/apps/import-account-with-file/index.tsx

@@ -20,7 +20,12 @@ import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
 import '@libs/i18n/i18n';
 import { ErrorBoundary } from '@libs/layout';
 import { newQueryClient } from '@libs/services/query-client';
-import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
+import {
+  CspStyleSheetManager,
+  GlobalStyle,
+  darkTheme,
+  lightTheme
+} from '@libs/ui';
 
 import { AppRouter } from './app-router';
 
@@ -56,16 +61,18 @@ const Tree = () => {
 
   return (
     <Suspense fallback={null}>
-      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
-        <GlobalStyle />
-        <ReduxProvider store={store}>
-          <QueryClientProvider client={newQueryClient}>
-            <ErrorBoundary>
-              <AppRouter />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </ReduxProvider>
-      </ThemeProvider>
+      <CspStyleSheetManager>
+        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+          <GlobalStyle />
+          <ReduxProvider store={store}>
+            <QueryClientProvider client={newQueryClient}>
+              <ErrorBoundary>
+                <AppRouter />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </ReduxProvider>
+        </ThemeProvider>
+      </CspStyleSheetManager>
     </Suspense>
   );
 };

src/apps/onboarding/index.tsx

@@ -16,7 +16,7 @@ import { onboardingAppInit } from '@background/redux/windowManagement/actions';
 import '@libs/i18n/i18n';
 import { ErrorBoundary } from '@libs/layout';
 import { newQueryClient } from '@libs/services/query-client';
-import { GlobalStyle, lightTheme } from '@libs/ui';
+import { CspStyleSheetManager, GlobalStyle, lightTheme } from '@libs/ui';
 
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
@@ -36,16 +36,18 @@ const Tree = () => {
 
   return (
     <Suspense fallback={null}>
-      <ThemeProvider theme={lightTheme}>
-        <GlobalStyle />
-        <ReduxProvider store={store}>
-          <QueryClientProvider client={newQueryClient}>
-            <ErrorBoundary>
-              <AppRouter />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </ReduxProvider>
-      </ThemeProvider>
+      <CspStyleSheetManager>
+        <ThemeProvider theme={lightTheme}>
+          <GlobalStyle />
+          <ReduxProvider store={store}>
+            <QueryClientProvider client={newQueryClient}>
+              <ErrorBoundary>
+                <AppRouter />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </ReduxProvider>
+        </ThemeProvider>
+      </CspStyleSheetManager>
     </Suspense>
   );
 };

src/apps/popup/index.tsx

@@ -21,7 +21,12 @@ import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
 
 import { ErrorBoundary } from '@libs/layout';
 import { newQueryClient } from '@libs/services/query-client';
-import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
+import {
+  CspStyleSheetManager,
+  GlobalStyle,
+  darkTheme,
+  lightTheme
+} from '@libs/ui';
 
 import { AppRouter } from './app-router';
 
@@ -59,16 +64,18 @@ const Tree = () => {
 
   return (
     <Suspense fallback={null}>
-      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
-        <GlobalStyle />
-        <ReduxProvider store={store}>
-          <QueryClientProvider client={newQueryClient}>
-            <ErrorBoundary>
-              <AppRouter />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </ReduxProvider>
-      </ThemeProvider>
+      <CspStyleSheetManager>
+        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+          <GlobalStyle />
+          <ReduxProvider store={store}>
+            <QueryClientProvider client={newQueryClient}>
+              <ErrorBoundary>
+                <AppRouter />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </ReduxProvider>
+        </ThemeProvider>
+      </CspStyleSheetManager>
     </Suspense>
   );
 };

src/apps/signature-request/index.tsx

@@ -22,7 +22,12 @@ import { useSystemThemeDetector } from '@hooks/use-system-theme-detector';
 import '@libs/i18n/i18n';
 import { ErrorBoundary } from '@libs/layout';
 import { newQueryClient } from '@libs/services/query-client';
-import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
+import {
+  CspStyleSheetManager,
+  GlobalStyle,
+  darkTheme,
+  lightTheme
+} from '@libs/ui';
 
 import { AppRouter } from './app-router';
 
@@ -60,16 +65,18 @@ const Tree = () => {
 
   return (
     <Suspense fallback={null}>
-      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
-        <GlobalStyle />
-        <ReduxProvider store={store}>
-          <QueryClientProvider client={newQueryClient}>
-            <ErrorBoundary>
-              <AppRouter />
-            </ErrorBoundary>
-          </QueryClientProvider>
-        </ReduxProvider>
-      </ThemeProvider>
+      <CspStyleSheetManager>
+        <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+          <GlobalStyle />
+          <ReduxProvider store={store}>
+            <QueryClientProvider client={newQueryClient}>
+              <ErrorBoundary>
+                <AppRouter />
+              </ErrorBoundary>
+            </QueryClientProvider>
+          </ReduxProvider>
+        </ThemeProvider>
+      </CspStyleSheetManager>
     </Suspense>
   );
 };

src/libs/layout/containers.ts

@@ -271,7 +271,7 @@ export const activityBottomPseudoElementRules = css<BorderBottomPseudoElementPro
   background: ${({ theme }) => theme.color.backgroundSecondary};
 `;
 
-export const BorderContainer = styled.div`
+export const BorderContainer = styled.div<BorderBottomPseudoElementProps>`
   & > *:last-child {
     ${borderBottomPseudoElementRules};
   }

src/libs/ui/components/avatar/avatar.tsx

@@ -1,6 +1,6 @@
 import { Maybe } from 'casper-wallet-core/src/typings/common';
 import React from 'react';
-import styled, { DefaultTheme, useTheme } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { isValidAccountHash, isValidPublicKey } from '@src/utils';
 
@@ -24,8 +24,8 @@ const ConnectionStatusBadgeContainer = styled(AlignedFlexRow)`
   z-index: 1;
 `;
 
-export const BackgroundWrapper = styled.div(
-  ({ size, theme }: { size: number; theme: DefaultTheme }) => ({
+export const BackgroundWrapper = styled.div<{ size: number }>(
+  ({ size, theme }) => ({
     borderRadius: theme.borderRadius.eight,
     height: `${size}px`,
     width: `${size}px`,

src/libs/ui/components/button/button.tsx

@@ -45,11 +45,11 @@ const BaseButton = styled.button<BaseButtonProps>(
       padding: '12px'
     }),
 
-    ':focus': {
+    '&:focus': {
       outline: 'none'
     },
 
-    ':hover': {
+    '&:hover': {
       cursor: 'pointer'
     },
 
@@ -64,10 +64,10 @@ const PrimaryBlueButton = styled(BaseButton)<BaseButtonProps>(
     color: theme.color.contentOnFill,
     background: theme.color.fillPrimary,
 
-    ': hover': {
+    '&:hover': {
       background: theme.color.fillPrimaryHover
     },
-    ': active': {
+    '&:active': {
       background: theme.color.fillPrimaryClick
     },
 
@@ -83,10 +83,10 @@ const PrimaryRedButton = styled(BaseButton)<BaseButtonProps>(
     color: theme.color.contentOnFill,
     background: theme.color.fillCritical,
 
-    ': hover': {
+    '&:hover': {
       background: theme.color.fillCriticalHover
     },
-    ': active': {
+    '&:active': {
       background: theme.color.fillCriticalClick
     },
 
@@ -102,10 +102,10 @@ const SecondaryBlueButton = styled(BaseButton)<BaseButtonProps>(
     color: theme.color.contentAction,
     background: getLinearGradientColor(theme.color.fillSecondary),
 
-    ': hover': {
+    '&:hover': {
       background: getLinearGradientColor(theme.color.fillSecondaryHover)
     },
-    ': active': {
+    '&:active': {
       background: theme.color.fillNeutral
     },
 
@@ -121,10 +121,10 @@ const SecondaryRedButton = styled(BaseButton)<BaseButtonProps>(
     color: theme.color.fillCritical,
     background: getLinearGradientColor(theme.color.fillSecondary),
 
-    ': hover': {
+    '&:hover': {
       background: getLinearGradientColor(theme.color.fillSecondaryHover)
     },
-    ': active': {
+    '&:active': {
       background: theme.color.fillNeutral
     },
 
@@ -140,10 +140,10 @@ const UtilityButton = styled(BaseButton)<BaseButtonProps>(
     color: theme.color.contentOnFill,
     background: theme.color.fillPrimary,
 
-    ': hover': {
+    '&:hover': {
       background: theme.color.fillPrimaryHover
     },
-    ': active': {
+    '&:active': {
       background: theme.color.fillPrimaryClick
     },
 

src/libs/ui/components/list/list.tsx

@@ -1,10 +1,6 @@
 import { MacScrollbar } from 'mac-scrollbar';
 import React from 'react';
-import styled, {
-  DefaultTheme,
-  FlattenInterpolation,
-  ThemeProps
-} from 'styled-components';
+import styled, { Interpolation } from 'styled-components';
 
 import {
   BorderBottomPseudoElementProps,
@@ -14,9 +10,8 @@ import {
 } from '@libs/layout';
 import { Tile, Typography } from '@libs/ui/components';
 
-type BorderBottomPseudoElementRulesType = FlattenInterpolation<
-  ThemeProps<DefaultTheme> & BorderBottomPseudoElementProps
->;
+type BorderBottomPseudoElementRulesType =
+  Interpolation<BorderBottomPseudoElementProps>;
 
 interface ListHeaderContainerProps extends BorderBottomPseudoElementProps {
   borderBottomPseudoElementRules: BorderBottomPseudoElementRulesType;

src/libs/ui/components/svg-icon/svg-icon.tsx

@@ -1,3 +1,4 @@
+import isPropValid from '@emotion/is-prop-valid';
 import React, { HTMLAttributes, forwardRef } from 'react';
 import ReactSVG from 'react-inlinesvg';
 import styled from 'styled-components';
@@ -36,8 +37,7 @@ const getMargin = (size?: 'small' | 'medium') => {
 };
 
 const Container = styled('div').withConfig({
-  shouldForwardProp: (prop, defaultValidatorFn) =>
-    !['flipByAxis'].includes(prop) && defaultValidatorFn(prop)
+  shouldForwardProp: prop => !['flipByAxis'].includes(prop) && isPropValid(prop)
 })<{
   size: number;
   width?: string | number;