A0: Improve styled components debugging

.eslintrc.json

@@ -76,7 +76,19 @@
         "singleReturnOnly": false
       }
     ],
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [{
+          "name": "styled-components",
+          "message": "Please import from styled-components/macro to enable dev tooling."
+        }],
+        "patterns": [
+          "!styled-components/macro"
+        ]
+      }
+    ]
   },
   "settings": {
     "import/resolver": {

babel-plugin-macros.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  styledComponents: {
+    displayName: process.env.NODE_ENV !== 'production'
+  }
+}

src/Providers.tsx

@@ -30,7 +30,7 @@ import { UIProvider } from 'contexts/UI';
 import { ValidatorsProvider } from 'contexts/Validators';
 import { withProviders } from 'library/Hooks';
 import Router from 'Router';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components/macro';
 import { EntryWrapper as Wrapper } from 'Wrappers';
 
 // `polkadot-dashboard-ui` theme classes are inserted here.

src/Wrappers.tsx

@@ -9,7 +9,7 @@ import {
   SideMenuStickyThreshold,
 } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundGradient,
   backgroundPrimary,

src/library/Account/Wrapper.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, borderSecondary, textSecondary } from 'theme';
 
 export const Wrapper = styled(motion.button)<any>`

src/library/ErrorBoundary/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div`

src/library/EstimatedTxFee/Wrapper.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div`

src/library/Filter/Wrappers.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   buttonPrimaryBackground,

src/library/Form/AccountDropdown/Wrappers.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundDropdown,
   borderPrimary,

src/library/Form/AccountSelect/Wrappers.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundToggle, borderPrimary, textPrimary } from 'theme';
 
 export const StyledDownshift = styled.div<any>`

src/library/Form/CreatePoolStatusBar/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`

src/library/Form/NominateStatusBar/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`

src/library/Form/Warning/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel } from 'theme';
 
 export const Wrapper = styled.div`

src/library/Form/Wrappers.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textSecondary } from 'theme';
 
 export const Spacer = styled.div`

src/library/GenerateNominations/Wrappers.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SectionFullWidthThreshold } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const GenerateOptionsWrapper = styled.div`
   width: 100%;

src/library/Graphs/Wrappers.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SideMenuStickyThreshold } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundSecondary,
   borderPrimary,

src/library/Headers/Spinner.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundPrimary } from 'theme';
 
 const StyledSpinner = styled.div`

src/library/Headers/Wrappers.ts

@@ -6,7 +6,7 @@ import {
   SideMenuStickyThreshold,
 } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   buttonSecondaryBackground,

src/library/Help/Wrappers.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   helpButton,
   modalOverlayBackground,

src/library/Identicon/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Identicon as IdenticonDefault } from '@polkadot/react-identicon';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundIdenticon } from 'theme';
 import { IdenticonProps } from './types';
 

src/library/List/index.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, networkColor, textPrimary, textSecondary } from 'theme';
 import { ListProps, PaginationWrapperProps } from './types';
 

src/library/ListItem/Labels/Select.tsx

@@ -5,7 +5,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faCheck, faCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SelectSingleWrapper, SelectWrapper } from 'library/ListItem/Wrappers';
-import { useTheme } from 'styled-components';
+import { useTheme } from 'styled-components/macro';
 import { defaultThemes } from 'theme/default';
 import { useList } from '../../List/context';
 import { SelectProps } from '../types';

src/library/ListItem/Wrappers.ts

@@ -3,7 +3,7 @@
 
 import { SmallFontSizeMaxWidth } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundDropdown,
   backgroundModalItem,

src/library/Menu/Wrappers.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FloatingMenuWidth } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, modalBackground, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`

src/library/Modal/Wrappers.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderPrimary, textPrimary, textSecondary } from 'theme';
 
 export const TitleWrapper = styled.div<{ fixed: boolean }>`

src/library/NetworkBar/Wrappers.ts

@@ -3,7 +3,7 @@
 
 import { SideMenuStickyThreshold } from 'consts';
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundNetworkBar, networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled(motion.div)`

src/library/Notifications/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundError,
   backgroundSuccess,

src/library/OpenHelpIcon/Wrapper.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   buttonHelpBackground,
   buttonPrimaryBackground,

src/library/Overlay/Wrappers.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   buttonPrimaryBackground,
   cardShadow,

src/library/PoolAccount/Wrapper.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { borderSecondary, textSecondary } from 'theme';
 import { WrapperProps } from './types';
 

src/library/SetupSteps/Footer/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Wrapper = styled.div`
   width: 100%;

src/library/SetupSteps/Header/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { networkColor, textSecondary } from 'theme';
 
 export const Wrapper = styled.div`

src/library/SideMenu/Heading/Wrapper.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textSecondary } from 'theme';
 
 export const Wrapper = styled.div<{ minimised: number }>`

src/library/SideMenu/Primary/Wrappers.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   highlightPrimary,
   highlightSecondary,

src/library/SideMenu/Secondary/Wrappers.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   borderPrimary,
   highlightPrimary,

src/library/SideMenu/Wrapper.ts

@@ -6,7 +6,7 @@ import {
   SideMenuMinimisedWidth,
   SideMenuStickyThreshold,
 } from 'consts';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import {
   backgroundOverlay,
   borderPrimary,

src/library/Stat/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Wrapper = styled.div`
   padding: 0.15rem 0.25rem;

src/library/StatBoxList/Wrapper.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 import {
   backgroundSecondary,

src/library/StatusButton/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { buttonPrimaryBackground, textPrimary, textSecondary } from 'theme';
 
 export const Wrapper = styled.button`

src/library/StatusLabel/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { backgroundLabel, textSecondary } from 'theme';
 import { WrapperProps } from './types';
 

src/library/SubscanButton/index.tsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useApi } from 'contexts/Api';
 import { useTheme } from 'contexts/Themes';
 import { useUi } from 'contexts/UI';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { defaultThemes, networkColors } from 'theme/default';
 import { WrapperProps } from './types';
 

src/library/Tips/Wrappers.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { motion } from 'framer-motion';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { helpButton, textPrimary, textSecondary } from 'theme';
 
 export const TipWrapper = styled(motion.div)`

src/library/Tooltip/Wrapper.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { textInvert, tooltipBackground } from 'theme';
 
 export const Wrapper = styled.div`