Adjust styled-component injection (#707)

* Adjust styled-component injection

* Adjust

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);