From aad46dcb58c8a6a0244ec545155a917c771538d9 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Sun, 15 Jan 2023 09:35:56 +0200
Subject: [PATCH] Adjust styled injection for signer (#8802)

---
 packages/react-components/src/Modal/Actions.tsx | 10 ++++++----
 packages/react-components/src/Modal/Base.tsx    | 10 ++++++----
 packages/react-components/src/Modal/Columns.tsx | 10 ++++++----
 packages/react-components/src/Modal/Content.tsx | 10 ++++++----
 packages/react-components/src/Modal/Header.tsx  | 10 ++++++----
 packages/react-signer/src/Address.tsx           | 14 +++++++-------
 packages/react-signer/src/Password.tsx          | 13 +++++++------
 packages/react-signer/src/Qr.tsx                | 11 ++++++-----
 packages/react-signer/src/Transaction.tsx       | 10 ++++++----
 packages/react-signer/src/TxSigned.tsx          | 12 +++++++-----
 packages/react-signer/src/index.tsx             | 10 ++++++----
 11 files changed, 69 insertions(+), 51 deletions(-)

diff --git a/packages/react-components/src/Modal/Actions.tsx b/packages/react-components/src/Modal/Actions.tsx
index 43f1e9e2bd..db43499a25 100644
--- a/packages/react-components/src/Modal/Actions.tsx
+++ b/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);
diff --git a/packages/react-components/src/Modal/Base.tsx b/packages/react-components/src/Modal/Base.tsx
index 027371c09e..251b1afcad 100644
--- a/packages/react-components/src/Modal/Base.tsx
+++ b/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);
diff --git a/packages/react-components/src/Modal/Columns.tsx b/packages/react-components/src/Modal/Columns.tsx
index 3894a518d7..73d3e1fbdc 100644
--- a/packages/react-components/src/Modal/Columns.tsx
+++ b/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);
diff --git a/packages/react-components/src/Modal/Content.tsx b/packages/react-components/src/Modal/Content.tsx
index ce508926f2..f74a511a63 100644
--- a/packages/react-components/src/Modal/Content.tsx
+++ b/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);
diff --git a/packages/react-components/src/Modal/Header.tsx b/packages/react-components/src/Modal/Header.tsx
index d10d4ffb18..82e30c8582 100644
--- a/packages/react-components/src/Modal/Header.tsx
+++ b/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);
diff --git a/packages/react-signer/src/Address.tsx b/packages/react-signer/src/Address.tsx
index b2b42db690..d9d6cfec51 100644
--- a/packages/react-signer/src/Address.tsx
+++ b/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;
diff --git a/packages/react-signer/src/Password.tsx b/packages/react-signer/src/Password.tsx
index 07fba7ea58..60bd7354d8 100644
--- a/packages/react-signer/src/Password.tsx
+++ b/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);
diff --git a/packages/react-signer/src/Qr.tsx b/packages/react-signer/src/Qr.tsx
index 03ad3915fe..5151fcbc86 100644
--- a/packages/react-signer/src/Qr.tsx
+++ b/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);
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index 777317b419..975be2a10f 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/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);
diff --git a/packages/react-signer/src/TxSigned.tsx b/packages/react-signer/src/TxSigned.tsx
index 050d53a286..77dc44bfb4 100644
--- a/packages/react-signer/src/TxSigned.tsx
+++ b/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);
diff --git a/packages/react-signer/src/index.tsx b/packages/react-signer/src/index.tsx
index db2aa47972..c791646439 100644
--- a/packages/react-signer/src/index.tsx
+++ b/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);