Adjust styled-component injection (#707)

* Adjust styled-component injection

* Adjust

package.json

@@ -36,7 +36,7 @@
     "@babel/runtime": "^7.20.13",
     "@polkadot/dev": "^0.67.187",
     "@polkadot/x-bundle": "^10.2.6",
-    "@types/jest": "^29.2.6",
+    "@types/jest": "^29.4.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",

packages/react-identicon/src/Identicon.tsx

@@ -31,32 +31,6 @@ const Components: Record<string, React.ComponentType<ComponentProps>> = {
   substrate: Jdenticon
 };
 
-const Wrapper = styled.div`
-  cursor: copy;
-  display: inline-block;
-  line-height: 0;
-
-  > .container {
-    position: relative;
-
-    > div,
-    > svg {
-      position: relative;
-    }
-
-    &.highlight:before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: 50%;
-      box-shadow: 0 0 5px 2px #aaa;
-      content: '';
-    }
-  }
-`;
-
 class BaseIcon extends React.PureComponent<Props, State> {
   public override state: State = {
     address: '',
@@ -121,7 +95,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
       : Custom || Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;
 
     return (
-      <Wrapper
+      <StyledDiv
         className={`ui--IdentityIcon  ${className}`}
         key={address}
         style={style}
@@ -133,7 +107,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
           publicKey={publicKey}
           size={size}
         />
-      </Wrapper>
+      </StyledDiv>
     );
   }
 
@@ -151,4 +125,30 @@ function Icon (props: Props): React.ReactElement<Props> {
   return <BaseIcon {...props} />;
 }
 
+const StyledDiv = styled.div`
+  cursor: copy;
+  display: inline-block;
+  line-height: 0;
+
+  > .container {
+    position: relative;
+
+    > div,
+    > svg {
+      position: relative;
+    }
+
+    &.highlight:before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 50%;
+      box-shadow: 0 0 5px 2px #aaa;
+      content: '';
+    }
+  }
+`;
+
 export const Identicon = React.memo(Icon);

packages/react-identicon/src/icons/Ethereum.tsx

@@ -7,23 +7,30 @@ import makeBlockie from 'ethereum-blockies-base64';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
-function Identicon ({ address, className = '', style }: Props): React.ReactElement<Props> {
+interface ImgProps {
+  size: number;
+}
+
+function Identicon ({ address, className = '', size, style }: Props): React.ReactElement<Props> {
   const imgSrc = useMemo(
     () => makeBlockie(address),
     [address]
   );
 
   return (
-    <img
+    <StyledImg
       className={className}
+      size={size}
       src={imgSrc}
       style={style}
     />
   );
 }
 
-export const Ethereum = React.memo(styled(Identicon)(({ size }: Props) => `
+const StyledImg = styled.img(({ size }: ImgProps) => `
   display: block;
   height: ${size}px;
   width: ${size}px;
-`));
+`);
+
+export const Ethereum = React.memo(Identicon);

packages/react-qr/src/Display.tsx

@@ -120,7 +120,7 @@ function Display ({ className, size, skipEncoding, style, timerDelay = DEFAULT_F
   }
 
   return (
-    <div
+    <StyledDiv
       className={className}
       style={containerStyle}
     >
@@ -130,11 +130,11 @@ function Display ({ className, size, skipEncoding, style, timerDelay = DEFAULT_F
       >
         <img src={image} />
       </div>
-    </div>
+    </StyledDiv>
   );
 }
 
-export const QrDisplay = React.memo(styled(Display)`
+const StyledDiv = styled.div`
   .ui--qr-Display {
     height: 100%;
     width: 100%;
@@ -148,4 +148,6 @@ export const QrDisplay = React.memo(styled(Display)`
       width: auto !important;
     }
   }
-`);
+`;
+
+export const QrDisplay = React.memo(Display);

packages/react-qr/src/Scan.tsx

@@ -39,7 +39,7 @@ function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onSc
   );
 
   return (
-    <div
+    <StyledDiv
       className={className}
       style={containerStyle}
     >
@@ -50,11 +50,11 @@ function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onSc
         onScan={_onScan}
         style={style}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export const QrScan = React.memo(styled(Scan)`
+const StyledDiv = styled.div`
   .ui--qr-Scan {
     display: inline-block;
     height: 100%;
@@ -65,4 +65,6 @@ export const QrScan = React.memo(styled(Scan)`
       margin: 0;
     }
   }
-`);
+`;
+
+export const QrScan = React.memo(Scan);

yarn.lock

@@ -3254,13 +3254,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jest@npm:^29.2.6":
-  version: 29.2.6
-  resolution: "@types/jest@npm:29.2.6"
+"@types/jest@npm:^29.4.0":
+  version: 29.4.0
+  resolution: "@types/jest@npm:29.4.0"
   dependencies:
     expect: ^29.0.0
     pretty-format: ^29.0.0
-  checksum: 90190ac830334af1470d255853f9621fe657e5030b4d96773fc1f884833cd303c76580b00c1b86dc38a8db94f1c7141d462190437a10af31852b8845a57c48ba
+  checksum: 23760282362a252e6690314584d83a47512d4cd61663e957ed3398ecf98195fe931c45606ee2f9def12f8ed7d8aa102d492ec42d26facdaf8b78094a31e6568e
   languageName: node
   linkType: hard
 
@@ -12993,7 +12993,7 @@ __metadata:
     "@babel/runtime": ^7.20.13
     "@polkadot/dev": ^0.67.187
     "@polkadot/x-bundle": ^10.2.6
-    "@types/jest": ^29.2.6
+    "@types/jest": ^29.4.0
     babel-loader: ^8.3.0
     babel-plugin-transform-vue-template: ^0.4.2
     empty: ^0.10.1