Adjust styled injection for signer (#8802)

packages/react-components/src/Modal/Actions.tsx

@@ -10,19 +10,21 @@ import Button from '../Button';
 
 function Actions ({ children, className = '' }: ActionsProps) {
   return (
-    <div className={className}>
+    <StyledDiv className={className}>
       <Button.Group>
         {children}
       </Button.Group>
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Actions)`
+const StyledDiv = styled.div`
   background-color: var(--bg-input);
   border-radius: 0 0 4px 4px;
 
   .ui--Button-Group {
     margin: 1rem 1rem;
   }
-`);
+`;
+
+export default React.memo(Actions);

packages/react-components/src/Modal/Base.tsx

@@ -31,7 +31,7 @@ function Base (props: ModalProps): React.ReactElement<ModalProps> {
   }, [listenKeyboard]);
 
   return createPortal(
-    <div
+    <StyledDiv
       className={`${themeClassName} ui--Modal ${className} ${size}Size`}
       data-testid={testId}
     >
@@ -47,7 +47,7 @@ function Base (props: ModalProps): React.ReactElement<ModalProps> {
         />
         {children}
       </div>
-    </div>,
+    </StyledDiv>,
     document.body
   );
 }
@@ -58,7 +58,7 @@ const DisableGlobalScroll = createGlobalStyle`
   }
 `;
 
-export default React.memo(styled(Base)`
+const StyledDiv = styled.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -104,4 +104,6 @@ export default React.memo(styled(Base)`
   &.largeSize .ui--Modal__body {
     max-width: 1080px;
   }
-`);
+`;
+
+export default React.memo(Base);

packages/react-components/src/Modal/Columns.tsx

@@ -8,16 +8,16 @@ import styled from 'styled-components';
 
 function Columns ({ children, className = '', hint }: ColumnsProps): React.ReactElement<ColumnsProps> {
   return (
-    <div className={`ui--Modal-Columns ${className}`}>
+    <StyledDiv className={`ui--Modal-Columns ${className}`}>
       <div>{children}</div>
       {hint && (
         <div>{hint}</div>
       )}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Columns)`
+const StyledDiv = styled.div`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -56,4 +56,6 @@ export default React.memo(styled(Columns)`
       }
     }
   }
-`);
+`;
+
+export default React.memo(Columns);

packages/react-components/src/Modal/Content.tsx

@@ -8,12 +8,14 @@ import styled from 'styled-components';
 
 function Content ({ children, className = '' }: ContentProps) {
   return (
-    <div className={`${className} ui--Modal__Content`}>
+    <StyledDiv className={`${className} ui--Modal__Content`}>
       {children}
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Content)`
+const StyledDiv = styled.div`
   padding: 1.5rem;
-`);
+`;
+
+export default React.memo(Content);

packages/react-components/src/Modal/Header.tsx

@@ -10,7 +10,7 @@ import Button from '../Button';
 
 function Header ({ className = '', header, onClose }: HeaderProps) {
   return (
-    <div className={`${className} ui--Modal__Header`}>
+    <StyledDiv className={`${className} ui--Modal__Header`}>
       {header && (
         <h1>{header}</h1>
       )}
@@ -19,12 +19,14 @@ function Header ({ className = '', header, onClose }: HeaderProps) {
         icon='times'
         onClick={onClose}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
-export default React.memo(styled(Header)`
+const StyledDiv = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 0.75rem 1.5rem 0;
-`);
+`;
+
+export default React.memo(Header);

packages/react-signer/src/Address.tsx

@@ -27,11 +27,11 @@ interface Props {
   onChange: (address: AddressProxy) => void;
   onEnter?: () => void;
   passwordError: string | null;
-  requestAddress: string;
+  requestAddress: string | null;
 }
 
 interface MultiState {
-  address: string;
+  address: string | null;
   isMultiCall: boolean;
   who: string[];
   whoFilter: string[];
@@ -43,7 +43,7 @@ interface PasswordState {
 }
 
 interface ProxyState {
-  address: string;
+  address: string | null;
   isProxied: boolean;
   proxies: [string, BN, KitchensinkRuntimeProxyType][];
   proxiesFilter: string[];
@@ -136,13 +136,13 @@ function filterProxies (allAccounts: string[], tx: Call | SubmittableExtrinsic<'
     .map(([address]) => address);
 }
 
-async function queryForMultisig (api: ApiPromise, requestAddress: string, proxyAddress: string | null, tx: SubmittableExtrinsic<'promise'>): Promise<MultiState | null> {
+async function queryForMultisig (api: ApiPromise, requestAddress: string | null, proxyAddress: string | null, tx: SubmittableExtrinsic<'promise'>): Promise<MultiState | null> {
   const multiModule = api.tx.multisig ? 'multisig' : 'utility';
 
   if (isFunction(api.query[multiModule]?.multisigs)) {
     const address = proxyAddress || requestAddress;
     const { threshold, who } = extractExternal(address);
-    const hash = (proxyAddress ? api.tx.proxy.proxy(requestAddress, null, tx) : tx).method.hash;
+    const hash = (proxyAddress ? api.tx.proxy.proxy(requestAddress || '', null, tx) : tx).method.hash;
     const optMulti = await api.query[multiModule].multisigs<Option<Multisig>>(address, hash);
     const multi = optMulti.unwrapOr(null);
 
@@ -164,7 +164,7 @@ async function queryForMultisig (api: ApiPromise, requestAddress: string, proxyA
   return null;
 }
 
-async function queryForProxy (api: ApiPromise, allAccounts: string[], address: string, tx: SubmittableExtrinsic<'promise'>): Promise<ProxyState | null> {
+async function queryForProxy (api: ApiPromise, allAccounts: string[], address: string | null, tx: SubmittableExtrinsic<'promise'>): Promise<ProxyState | null> {
   if (isFunction(api.query.proxy?.proxies)) {
     const { isProxied } = extractExternal(address);
     const [_proxies] = await api.query.proxy.proxies<ITuple<[Vec<ITuple<[AccountId, KitchensinkRuntimeProxyType]> | PalletProxyProxyDefinition>, BalanceOf]>>(address);
@@ -195,7 +195,7 @@ function Address ({ currentItem, onChange, onEnter, passwordError, requestAddres
   const [{ isUnlockCached, signPassword }, setSignPassword] = useState<PasswordState>(() => ({ isUnlockCached: false, signPassword: '' }));
 
   const [signAddress, flags] = useMemo(
-    (): [string, AddressFlags] => {
+    (): [string | null, AddressFlags] => {
       const signAddress = (multiInfo && multiAddress) ||
         (isProxyActive && proxyInfo && proxyAddress) ||
         requestAddress;

packages/react-signer/src/Password.tsx

@@ -15,10 +15,9 @@ import { UNLOCK_MINS } from './util';
 interface Props {
   address: string;
   className?: string;
-  error?: string;
+  error?: string | null;
   onChange: (password: string, isUnlockCached: boolean) => void;
   onEnter?: () => void;
-  password: string;
   tabIndex?: number;
 }
 
@@ -49,7 +48,7 @@ function Unlock ({ address, className, error, onChange, onEnter, tabIndex }: Pro
   }
 
   return (
-    <Modal.Columns
+    <StyledModalColumns
       className={className}
       hint={t('Unlock the sending account to allow signing of this transaction.')}
     >
@@ -69,11 +68,11 @@ function Unlock ({ address, className, error, onChange, onEnter, tabIndex }: Pro
           value={isUnlockCached}
         />
       </Password>
-    </Modal.Columns>
+    </StyledModalColumns>
   );
 }
 
-export default React.memo(styled(Unlock)`
+const StyledModalColumns = styled(Modal.Columns)`
   .errorLabel {
     margin-right: 1rem;
     color: #9f3a38 !important;
@@ -82,4 +81,6 @@ export default React.memo(styled(Unlock)`
   .ui--Toggle {
     bottom: 1.1rem;
   }
-`);
+`;
+
+export default React.memo(Unlock);

packages/react-signer/src/Qr.tsx

@@ -18,7 +18,6 @@ interface Props {
   className?: string;
   genesisHash: Uint8Array;
   isHashed: boolean;
-  isScanning: boolean;
   onSignature: (data: SigData) => void;
   payload: Uint8Array;
 }
@@ -57,7 +56,7 @@ function Qr ({ address, className, genesisHash, isHashed, onSignature, payload }
 
   return (
     <>
-      <Columar className={className}>
+      <StyledColumar className={className}>
         <Columar.Column>
           <div className='qrDisplay'>
             <QrDisplayPayload
@@ -77,7 +76,7 @@ function Qr ({ address, className, genesisHash, isHashed, onSignature, payload }
             <QrScanSignature onScan={_onSignature} />
           </div>
         </Columar.Column>
-      </Columar>
+      </StyledColumar>
       {sigError && (
         <MarkError
           className='nomargin'
@@ -88,7 +87,7 @@ function Qr ({ address, className, genesisHash, isHashed, onSignature, payload }
   );
 }
 
-export default React.memo(styled(Qr)`
+const StyledColumar = styled(Columar)`
   .qrDisplay {
     margin: 0 auto;
     max-width: 30rem;
@@ -97,4 +96,6 @@ export default React.memo(styled(Qr)`
       border: 1px solid white;
     }
   }
-`);
+`;
+
+export default React.memo(Qr);

packages/react-signer/src/Transaction.tsx

@@ -28,7 +28,7 @@ function Transaction ({ accountId, className, currentItem: { extrinsic, isUnsign
   }
 
   return (
-    <Modal.Columns
+    <StyledModalColumns
       className={className}
       hint={t<string>('The details of the transaction including the type, the description (as available from the chain metadata) as well as any parameters and fee estimations (as available) for the specific type of call.')}
     >
@@ -46,12 +46,14 @@ function Transaction ({ accountId, className, currentItem: { extrinsic, isUnsign
           tip={tip}
         />
       )}
-    </Modal.Columns>
+    </StyledModalColumns>
   );
 }
 
-export default React.memo(styled(Transaction)`
+const StyledModalColumns = styled(Modal.Columns)`
   .paymentInfo {
     margin-top: 0.5rem;
   }
-`);
+`;
+
+export default React.memo(Transaction);

packages/react-signer/src/TxSigned.tsx

@@ -35,7 +35,7 @@ import { cacheUnlock, extractExternal, handleTxResults } from './util';
 interface Props {
   className?: string;
   currentItem: QueueTx;
-  requestAddress: string;
+  requestAddress: string | null;
 }
 
 interface InnerTx {
@@ -346,7 +346,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
 
   return (
     <>
-      <Modal.Content className={className}>
+      <StyledModalContent className={className}>
         <ErrorBoundary
           error={error}
           onError={toggleRenderError}
@@ -411,7 +411,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
             )
           }
         </ErrorBoundary>
-      </Modal.Content>
+      </StyledModalContent>
       <Modal.Actions>
         <Button
           icon={
@@ -449,7 +449,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
   );
 }
 
-export default React.memo(styled(TxSigned)`
+const StyledModalContent = styled(Modal.Content)`
   .tipToggle {
     width: 100%;
     text-align: right;
@@ -458,4 +458,6 @@ export default React.memo(styled(TxSigned)`
   .ui--Checks {
     margin-top: 0.75rem;
   }
-`);
+`;
+
+export default React.memo(TxSigned);

packages/react-signer/src/index.tsx

@@ -119,7 +119,7 @@ function Signer ({ children, className = '' }: Props): React.ReactElement<Props>
     <>
       {children}
       {currentItem && isVisible && (
-        <Modal
+        <StyledModal
           className={className}
           header={<>{t('Authorize transaction')}{(count === 1) ? undefined : <>&nbsp;1/{count}</>}</>}
           key={currentItem.id}
@@ -135,16 +135,18 @@ function Signer ({ children, className = '' }: Props): React.ReactElement<Props>
               />
             )
           }
-        </Modal>
+        </StyledModal>
       )}
     </>
   );
 }
 
-export default React.memo(styled(Signer)`
+const StyledModal = styled(Modal)`
   .signToggle {
     bottom: 1.5rem;
     left: 1.5rem;
     position: absolute;
   }
-`);
+`;
+
+export default React.memo(Signer);