diff --git a/packages/extension-ui/src/Popup/Accounts/Account.test.tsx b/packages/extension-ui/src/Popup/Accounts/Account.test.tsx
index 1a3d06e7e4..e1fe94e6e5 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.test.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.test.tsx
@@ -21,7 +21,8 @@ describe('Account component', () => {
     <MemoryRouter>
       <ThemeProvider theme={theme}>
         <Account
-          {...{ address: VALID_ADDRESS, ...additionalAccountProperties }}>
+          {...{ address: VALID_ADDRESS, ...additionalAccountProperties }}
+        >
         </Account>
       </ThemeProvider>
     </MemoryRouter>);
diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index f2c833ae18..dd15d0c636 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -33,32 +33,34 @@ function Account ({ address, className, isExternal }: Props): React.ReactElement
     _toggleEdit();
   };
 
-  return <div className={className}>
-    <Address
-      address={address}
-      name={editedName}
-      actions={
-        <>
-          <MenuGroup>
-            <MenuItem onClick={_toggleEdit}>Rename</MenuItem>
-          </MenuGroup>
-          {!isExternal && <MenuItem isDanger to={`/account/export/${address}`}>Export Account</MenuItem>}
-          <MenuItem isDanger to={`/account/forget/${address}`}>Forget Account</MenuItem>
-        </>
-      }
-    >
-      {isEditing && (
-        <Name
-          address={address}
-          className='edit-name'
-          isFocussed
-          label={' '}
-          onBlur={_saveChanges}
-          onChange={setName}
-        />
-      )}
-    </Address>
-  </div>;
+  return (
+    <div className={className}>
+      <Address
+        address={address}
+        name={editedName}
+        actions={(
+          <>
+            <MenuGroup>
+              <MenuItem onClick={_toggleEdit}>Rename</MenuItem>
+            </MenuGroup>
+            {!isExternal && <MenuItem isDanger to={`/account/export/${address}`}>Export Account</MenuItem>}
+            <MenuItem isDanger to={`/account/forget/${address}`}>Forget Account</MenuItem>
+          </>
+        )}
+      >
+        {isEditing && (
+          <Name
+            address={address}
+            className='edit-name'
+            isFocussed
+            label={' '}
+            onBlur={_saveChanges}
+            onChange={setName}
+          />
+        )}
+      </Address>
+    </div>
+  );
 }
 
 const MenuGroup = styled.div`
diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx
index f1d7bffb5d..836bdf0363 100644
--- a/packages/extension-ui/src/Popup/Accounts/index.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/index.tsx
@@ -26,10 +26,10 @@ export default function Accounts (): React.ReactElement<Props> {
   const mediaAllowed = useContext(MediaContext);
   return (
     <>
-      <Header showSettings/>
+      <Header showSettings />
       {
         (accounts.length === 0)
-          ? <AddAccount/>
+          ? <AddAccount />
           : (
             <AccountsArea>
               <>
@@ -39,18 +39,27 @@ export default function Accounts (): React.ReactElement<Props> {
                     <Account
                       {...json}
                       key={`${index}:${json.address}`}
-                    />))
+                    />
+                  ))
                 }
               </>
             </AccountsArea>
           )
       }
       <ButtonArea>
-        <ButtonWithSubtitle to='/account/create' title='Create New Account' subTitle='With new seed'/>
-        <ButtonWithSubtitle to='/account/import-seed' title='Import an Account' subTitle='I have a pre-existing seed'/>
+        <ButtonWithSubtitle
+          to='/account/create'
+          title='Create New Account'
+          subTitle='With new seed'
+        />
+        <ButtonWithSubtitle
+          to='/account/import-seed'
+          title='Import an Account'
+          subTitle='I have a pre-existing seed'
+        />
         {mediaAllowed && (
           <QrButton to='/account/import-qr'>
-            <Svg src={QrImage}/>
+            <Svg src={QrImage} />
           </QrButton>
         )}
       </ButtonArea>
diff --git a/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx b/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx
index 81f306a679..9c98d7b1ad 100644
--- a/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx
@@ -18,7 +18,7 @@ describe('Authorize', () => {
   const mountAuthorize = (authorizeRequests: AuthorizeRequest[] = []): ReactWrapper => mount(
     <AuthorizeContext.Provider value={authorizeRequests}>
       <ThemeProvider theme={defaultTheme}>
-        <Authorize/>
+        <Authorize />
       </ThemeProvider>
     </AuthorizeContext.Provider>);
 
diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 79988cd6e6..ca1032ef8f 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -34,7 +34,16 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
       <RequestInfo>
         <Info>
           <Icon icon='X' onClick={_onReject} />
-          <div className='tab-info'>An application, self-identifying as <span className='tab-name'>{origin}</span> is requesting access from <a href={url} target="_blank" rel="noopener noreferrer"><span className='tab-url'>{url}</span></a>.</div>
+          <div className='tab-info'>
+            An application, self-identifying as <span className='tab-name'>{origin}</span> is requesting access from{' '}
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className='tab-url'>{url}</span>
+            </a>.
+          </div>
         </Info>
         {isFirst && (
           <>
diff --git a/packages/extension-ui/src/Popup/Authorize/index.tsx b/packages/extension-ui/src/Popup/Authorize/index.tsx
index 922accb7de..3c80cc8b82 100644
--- a/packages/extension-ui/src/Popup/Authorize/index.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/index.tsx
@@ -22,7 +22,7 @@ export default function Authorize (): React.ReactElement<{}> {
           url={url}
         />
       ))}
-      <VerticalSpace/>
+      <VerticalSpace />
     </div>
   );
 }
diff --git a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
index 6f372f12f7..0a5594ff0b 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
@@ -15,29 +15,31 @@ function AccountName ({ onCreate, address }: Props): React.ReactElement<Props> {
   const [name, setName] = useState<string | null>(null);
   const [password, setPassword] = useState<string | null>(null);
 
-  return <>
-    <Name
-      isFocussed
-      onChange={setName}
-    />
-    {name && <Password onChange={setPassword} />}
-    {name && password && (
-      <>
-        <Address
-          address={address}
-          name={name}
-        />
-        <VerticalSpace/>
-        <ButtonArea>
-          <Button
-            onClick={(): void | Promise<void | boolean> => onCreate(name, password)}
-          >
+  return (
+    <>
+      <Name
+        isFocussed
+        onChange={setName}
+      />
+      {name && <Password onChange={setPassword} />}
+      {name && password && (
+        <>
+          <Address
+            address={address}
+            name={name}
+          />
+          <VerticalSpace />
+          <ButtonArea>
+            <Button
+              onClick={(): void | Promise<void | boolean> => onCreate(name, password)}
+            >
             Add the account with the generated seed
-          </Button>
-        </ButtonArea>
-      </>
-    )}
-  </>;
+            </Button>
+          </ButtonArea>
+        </>
+      )}
+    </>
+  );
 }
 
 export default AccountName;
diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx
index 4efeed0ed6..3dff16baf7 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx
@@ -33,7 +33,7 @@ describe('Create Account', () => {
   const mountComponent = (): ReactWrapper => mount(
     <ActionContext.Provider value={onActionStub}>
       <ThemeProvider theme={defaultTheme}>
-        <CreateAccount/>
+        <CreateAccount />
       </ThemeProvider>
     </ActionContext.Provider>
   );
diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
index 201ee2846d..b4bc524baa 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
@@ -13,14 +13,16 @@ interface Props {
 }
 
 function CreationStep ({ step, onClick, className }: Props): React.ReactElement<Props> {
-  return <div className={className}>
-    <div>
-      <CreateAnAccount/>
-      <CurrentStep>{step}</CurrentStep>
-      <TotalSteps>/2</TotalSteps>
+  return (
+    <div className={className}>
+      <div>
+        <CreateAnAccount />
+        <CurrentStep>{step}</CurrentStep>
+        <TotalSteps>/2</TotalSteps>
+      </div>
+      <ActionText text='Cancel' onClick={onClick} />
     </div>
-    <ActionText text='Cancel' onClick={onClick}/>
-  </div>;
+  );
 }
 
 const CreateAnAccount = styled(Title).attrs(() => ({
diff --git a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
index 1701ea8c1c..b47dccfd0d 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
@@ -31,18 +31,28 @@ const onPrint = (seed: string) => (): void => {
 
 function Mnemonic ({ seed, onNextStep }: Props): React.ReactElement<Props> {
   const [isMnemonicSaved, setIsMnemonicSaved] = useState(false);
-  return <>
-    <Warning>
-      Please write down your wallet’s mnemonic seed and keep it in a safe place. <br/>
+  return (
+    <>
+      <Warning>
+      Please write down your wallet’s mnemonic seed and keep it in a safe place. <br />
       Mnemonic seed is used to restore your wallet. Keep it carefully in case you lose your assets.
-    </Warning>
-    <MnemonicSeed seed={seed} onCopy={onCopy} onPrint={onPrint(seed)}/>
-    <VerticalSpace/>
-    <Checkbox checked={isMnemonicSaved} onChange={setIsMnemonicSaved} label='I have saved my mnemonic seed safely.'/>
-    <ButtonArea>
-      <Button isDisabled={!isMnemonicSaved} onClick={onNextStep}>Next step</Button>
-    </ButtonArea>
-  </>;
+      </Warning>
+      <MnemonicSeed
+        seed={seed}
+        onCopy={onCopy}
+        onPrint={onPrint(seed)}
+      />
+      <VerticalSpace />
+      <Checkbox
+        checked={isMnemonicSaved}
+        onChange={setIsMnemonicSaved}
+        label='I have saved my mnemonic seed safely.'
+      />
+      <ButtonArea>
+        <Button isDisabled={!isMnemonicSaved} onClick={onNextStep}>Next step</Button>
+      </ButtonArea>
+    </>
+  );
 }
 
 export default Mnemonic;
diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
index bfd100722d..d3f43bf961 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
@@ -43,12 +43,12 @@ export default function CreateAccount (): React.ReactElement {
 
   return (
     <>
-      <Header/>
-      <CreationStep step={step} onClick={_onCancel}/>
+      <Header />
+      <CreationStep step={step} onClick={_onCancel} />
       <Loading>{account && (step === 1 ? (
-        <Mnemonic seed={account.seed} onNextStep={_onNextStep}/>
+        <Mnemonic seed={account.seed} onNextStep={_onNextStep} />
       ) : (
-        <AccountName address={account.address} onCreate={_onCreate}/>
+        <AccountName address={account.address} onCreate={_onCreate} />
       ))}</Loading>
     </>
   );
diff --git a/packages/extension-ui/src/Popup/Export.test.tsx b/packages/extension-ui/src/Popup/Export.test.tsx
index 5b70a680a5..fb46adea6b 100644
--- a/packages/extension-ui/src/Popup/Export.test.tsx
+++ b/packages/extension-ui/src/Popup/Export.test.tsx
@@ -28,12 +28,13 @@ describe('Export component', () => {
   beforeEach(() => {
     jest.spyOn(messaging, 'exportAccount').mockResolvedValue({ exportedJson: '{ "meta": { "name": "account_name" } }' });
 
-    wrapper = mount(<MemoryRouter
-      initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
-      <ThemeProvider theme={defaultTheme}>
-        <Route path='/account/export/:address' component={ Export }/>
-      </ThemeProvider>
-    </MemoryRouter>);
+    wrapper = mount(
+      <MemoryRouter initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
+        <ThemeProvider theme={defaultTheme}>
+          <Route path='/account/export/:address' component={ Export } />
+        </ThemeProvider>
+      </MemoryRouter>
+    );
   });
 
   it('creates export message on button press', async () => {
diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx
index 20b4fd4315..c33f2a2dd8 100644
--- a/packages/extension-ui/src/Popup/ImportQr.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.tsx
@@ -27,9 +27,9 @@ export default function ImportQr (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header/>
+      <Header />
       <TitleWithAction title='Import account from QR code'>
-        <ActionText text='Cancel' onClick={(): void => onAction('/')}/>
+        <ActionText text='Cancel' onClick={(): void => onAction('/')} />
       </TitleWithAction>
       {!account && (
         <div>
@@ -46,7 +46,7 @@ export default function ImportQr (): React.ReactElement<Props> {
             {...account}
             name={name}
           />
-          <VerticalSpace/>
+          <VerticalSpace />
           {name && (
             <ButtonArea>
               <Button onClick={_onCreate}>
diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx
index fa687eb43e..a1866e9ae0 100644
--- a/packages/extension-ui/src/Popup/ImportSeed.tsx
+++ b/packages/extension-ui/src/Popup/ImportSeed.tsx
@@ -43,9 +43,9 @@ export default function Import (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header/>
+      <Header />
       <TitleWithAction title='Import account'>
-        <ActionText text='Cancel' onClick={(): void => onAction('/')}/>
+        <ActionText text='Cancel' onClick={(): void => onAction('/')} />
       </TitleWithAction>
       <SeedInput
         rowsCount={2}
@@ -62,7 +62,7 @@ export default function Import (): React.ReactElement<Props> {
             address={account.address}
             name={name}
           />
-          <VerticalSpace/>
+          <VerticalSpace />
           <ButtonArea>
             <Button onClick={_onCreate}>Add the account with the supplied seed</Button>
           </ButtonArea>
diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx
index c270ebf815..6638f51825 100644
--- a/packages/extension-ui/src/Popup/Signing/Qr.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx
@@ -33,11 +33,13 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
     <div className={className}>
       {isScanning
         ? <QrScanSignature onScan={onSignature} />
-        : <QrDisplayPayload
-          address={request.address}
-          cmd={CMD_MORTAL}
-          payload={payloadU8a}
-        />
+        : (
+          <QrDisplayPayload
+            address={request.address}
+            cmd={CMD_MORTAL}
+            payload={payloadU8a}
+          />
+        )
       }
       {!isScanning && (
         <Button onClick={_onShowQr}>Scan signature via camera</Button>
diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx
index bdaad2477f..eb989fbec2 100644
--- a/packages/extension-ui/src/Popup/Signing/Request.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Request.tsx
@@ -54,17 +54,21 @@ export default function Request ({ account: { isExternal }, request, signId, url
         genesisHash={request.genesisHash}
       />
       {isExternal
-        ? <Qr
-          payload={payload}
-          request={request}
-          onSignature={_onSignature}
-        />
-        : <Details
-          isDecoded={true}
-          payload={payload}
-          request={request}
-          url={url}
-        />
+        ? (
+          <Qr
+            payload={payload}
+            request={request}
+            onSignature={_onSignature}
+          />
+        )
+        : (
+          <Details
+            isDecoded={true}
+            payload={payload}
+            request={request}
+            url={url}
+          />
+        )
       }
       <SignArea>
         {!isExternal && <Unlock onSign={_onSign} />}
diff --git a/packages/extension-ui/src/Popup/Signing/Signing.test.tsx b/packages/extension-ui/src/Popup/Signing/Signing.test.tsx
index c504c0cae1..18f86a86cd 100644
--- a/packages/extension-ui/src/Popup/Signing/Signing.test.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Signing.test.tsx
@@ -53,7 +53,7 @@ describe('Signing requests', () => {
 
     return (
       <SigningContext.Provider value={requests}>
-        <Signing/>
+        <Signing />
       </SigningContext.Provider>
     );
   }
@@ -62,7 +62,7 @@ describe('Signing requests', () => {
       <ActionContext.Provider value={onActionStub}>
         <AccountContext.Provider value={accounts}>
           <ThemeProvider theme={defaultTheme}>
-            <MockRequestsProvider/>
+            <MockRequestsProvider />
           </ThemeProvider>
         </AccountContext.Provider>
       </ActionContext.Provider>
diff --git a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
index e2e2fd2071..06131d58eb 100644
--- a/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
+++ b/packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx
@@ -19,17 +19,19 @@ function TransactionIndex ({ index, totalItems, onNextClick, onPreviousClick, cl
   const previousClickActive = index !== 0;
   const nextClickActive = index < totalItems - 1;
 
-  return <div className={className}>
-    <div>
-      <Transaction/>
-      <CurrentIndex>{index + 1}</CurrentIndex>
-      <TotalItems>/{totalItems}</TotalItems>
+  return (
+    <div className={className}>
+      <div>
+        <Transaction />
+        <CurrentIndex>{index + 1}</CurrentIndex>
+        <TotalItems>/{totalItems}</TotalItems>
+      </div>
+      <div>
+        <ArrowLeft onClick={(): unknown => previousClickActive && onPreviousClick()} isActive={previousClickActive} />
+        <ArrowRight onClick={(): unknown => nextClickActive && onNextClick()} isActive={nextClickActive} />
+      </div>
     </div>
-    <div>
-      <ArrowLeft onClick={(): unknown => previousClickActive && onPreviousClick()} isActive={previousClickActive}/>
-      <ArrowRight onClick={(): unknown => nextClickActive && onNextClick()} isActive={nextClickActive}/>
-    </div>
-  </div>;
+  );
 }
 
 const Transaction = styled(Title).attrs(() => ({
diff --git a/packages/extension-ui/src/Popup/Signing/index.tsx b/packages/extension-ui/src/Popup/Signing/index.tsx
index bcd6380453..2140a52386 100644
--- a/packages/extension-ui/src/Popup/Signing/index.tsx
+++ b/packages/extension-ui/src/Popup/Signing/index.tsx
@@ -19,7 +19,7 @@ export default function Signing (): React.ReactElement<{}> {
 
   return requests[requestIndex] ? (
     <>
-      <Header/>
+      <Header />
       <TransactionIndex
         index={requestIndex}
         totalItems={requests.length}
@@ -33,5 +33,5 @@ export default function Signing (): React.ReactElement<{}> {
         url={requests[requestIndex].url}
       />
     </>
-  ) : <Loading/>;
+  ) : <Loading />;
 }
diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
index 3fbacf5bab..947e5da8b3 100644
--- a/packages/extension-ui/src/Popup/Welcome.tsx
+++ b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -19,8 +19,8 @@ export default function Welcome (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header/>
-      <WelcomeLabel/>
+      <Header />
+      <WelcomeLabel />
       <Note>Before we start, just a couple of notes regarding use:</Note>
       <TextBox>
         <List>
@@ -30,7 +30,7 @@ export default function Welcome (): React.ReactElement<Props> {
         </List>
       </TextBox>
       <Note>... we are not in the information collection business (even anonymized).</Note>
-      <VerticalSpace/>
+      <VerticalSpace />
       <ButtonArea>
         <Button onClick={_onClick}>Understood, let me continue</Button>
       </ButtonArea>
diff --git a/packages/extension-ui/src/assets/images.d.ts b/packages/extension-ui/src/assets/images.d.ts
index 67d9d58c7b..e4004a5cc0 100644
--- a/packages/extension-ui/src/assets/images.d.ts
+++ b/packages/extension-ui/src/assets/images.d.ts
@@ -1,4 +1,6 @@
-/* eslint-disable import/export,import/no-default-export */
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
 
 declare module '*.svg' {
   const url: string;
diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx
index 826fe0eb58..3c51a0542d 100644
--- a/packages/extension-ui/src/components/ActionText.tsx
+++ b/packages/extension-ui/src/components/ActionText.tsx
@@ -16,7 +16,7 @@ interface Props {
 function ActionText ({ icon, className, text, onClick }: Props): React.ReactElement<Props> {
   return (
     <div className={className} onClick={onClick}>
-      {icon && <Svg src={icon}/>}
+      {icon && <Svg src={icon} />}
       <span>{text}</span>
     </div>
   );
diff --git a/packages/extension-ui/src/components/AddAccount.tsx b/packages/extension-ui/src/components/AddAccount.tsx
index 18df081c74..ffc5807a2a 100644
--- a/packages/extension-ui/src/components/AddAccount.tsx
+++ b/packages/extension-ui/src/components/AddAccount.tsx
@@ -16,7 +16,11 @@ function AddAccount ({ className }: Props): React.ReactElement<Props> {
 
   return (
     <div className={className}>
-      <Image src={addAccountImage} alt="add account" onClick={(): void => onAction('/account/create')}/>
+      <Image
+        src={addAccountImage}
+        alt="add account"
+        onClick={(): void => onAction('/account/create')}
+      />
       <div>
         <h3>Add Account</h3>
         <TipText>You currently don&apos;t have any accounts. Either create a new account or if you have an existing account you wish to use, import it with the seed phrase.</TipText>
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index df47252517..0f6d553eec 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -75,28 +75,31 @@ function Address ({ address, className, children, genesisHash, name, actions }:
 
   const theme = ((chain && chain.icon) || 'polkadot') as 'polkadot';
 
-  return <div className={className}>
-    <div>
-      <AccountInfoRow>
-        <Identicon
-          iconTheme={theme}
-          value={address}
-        />
-        <Info>
-          <Name>{name || (account && account.name) || '<unknown>'}</Name>
-          <FullAddress>{formatted || '<unknown>'}</FullAddress>
-        </Info>
-        {actions &&
-      <>
-        <Settings onClick={(): void => setShowActionsMenu(!showActionsMenu)} ref={actionsRef}>
-          {showActionsMenu ? <ActiveActionsIcon/> : <ActionsIcon/>}
-        </Settings>
-        {showActionsMenu && <Menu>{actions}</Menu>}
-      </>}
-      </AccountInfoRow>
-      {children}
+  return (
+    <div className={className}>
+      <div>
+        <AccountInfoRow>
+          <Identicon
+            iconTheme={theme}
+            value={address}
+          />
+          <Info>
+            <Name>{name || (account && account.name) || '<unknown>'}</Name>
+            <FullAddress>{formatted || '<unknown>'}</FullAddress>
+          </Info>
+          {actions && (
+            <>
+              <Settings onClick={(): void => setShowActionsMenu(!showActionsMenu)} ref={actionsRef}>
+                {showActionsMenu ? <ActiveActionsIcon /> : <ActionsIcon />}
+              </Settings>
+              {showActionsMenu && <Menu>{actions}</Menu>}
+            </>
+          )}
+        </AccountInfoRow>
+        {children}
+      </div>
     </div>
-  </div>;
+  );
 }
 
 export const AccountInfoRow = styled.div`
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index ac827b81ef..ed5e786b1b 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -28,7 +28,11 @@ function Button ({ children, className, isDisabled, onClick, to }: Props): React
   };
 
   return (
-    <button className={className} onClick={_onClick} disabled={isDisabled}>
+    <button
+      className={className}
+      onClick={_onClick}
+      disabled={isDisabled}
+    >
       {children}
     </button>
   );
diff --git a/packages/extension-ui/src/components/ButtonWithSubtitle.tsx b/packages/extension-ui/src/components/ButtonWithSubtitle.tsx
index c2073f3f74..d461decf3a 100644
--- a/packages/extension-ui/src/components/ButtonWithSubtitle.tsx
+++ b/packages/extension-ui/src/components/ButtonWithSubtitle.tsx
@@ -1,3 +1,7 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import React from 'react';
 import { Button } from '.';
 import styled from 'styled-components';
diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx
index aed6ce45f5..0a8eaae317 100644
--- a/packages/extension-ui/src/components/Checkbox.tsx
+++ b/packages/extension-ui/src/components/Checkbox.tsx
@@ -14,13 +14,19 @@ interface Props {
 }
 
 function Checkbox ({ onChange, label, className, checked }: Props): React.ReactElement<Props> {
-  return <div className={className}>
-    <label>
-      {label}
-      <input type="checkbox" checked={checked} onChange={((event): void => onChange(event.target.checked))}/>
-      <span/>
-    </label>
-  </div>;
+  return (
+    <div className={className}>
+      <label>
+        {label}
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={((event): void => onChange(event.target.checked))}
+        />
+        <span />
+      </label>
+    </div>
+  );
 }
 
 export default styled(Checkbox)`
diff --git a/packages/extension-ui/src/components/Fonts.ts b/packages/extension-ui/src/components/Fonts.ts
index 8c2534c4ce..e876aebf87 100644
--- a/packages/extension-ui/src/components/Fonts.ts
+++ b/packages/extension-ui/src/components/Fonts.ts
@@ -1,3 +1,7 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import { createGlobalStyle } from 'styled-components';
 import NunitoregularWoff2 from '../assets/fonts/Nunitoregular.woff2';
 import NunitoregularWoff from '../assets/fonts/Nunitoregular.woff';
diff --git a/packages/extension-ui/src/components/Header.tsx b/packages/extension-ui/src/components/Header.tsx
index 72fb9cbf19..eb8585e788 100644
--- a/packages/extension-ui/src/components/Header.tsx
+++ b/packages/extension-ui/src/components/Header.tsx
@@ -30,15 +30,16 @@ function Header ({ children, className, showSettings }: Props): React.ReactEleme
           <Logo src={logo} />
           <LogoText>polkadot</LogoText>
         </Branding>
-        {showSettings &&
+        {showSettings && (
           <SettingsToggle onClick={(): void => setShowActionsMenu(!showActionsMenu)}>
-            <Gear isSelected={showActionsMenu}/>
+            <Gear isSelected={showActionsMenu} />
           </SettingsToggle>
-        }
-        {showActionsMenu &&
-        <div ref={actionsRef}>
-          <Settings/>
-        </div>}
+        )}
+        {showActionsMenu && (
+          <div ref={actionsRef}>
+            <Settings />
+          </div>
+        )}
         {children}
       </Container>
     </div>
diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx
index cbf4c52065..36d91d64bd 100644
--- a/packages/extension-ui/src/components/Identicon.tsx
+++ b/packages/extension-ui/src/components/Identicon.tsx
@@ -13,14 +13,16 @@ interface Props {
 }
 
 function Identicon ({ iconTheme, className, value }: Props): React.ReactElement<Props> {
-  return <div className={className}>
-    <Icon
-      className='icon'
-      size={64}
-      theme={iconTheme}
-      value={value}
-    />
-  </div>;
+  return (
+    <div className={className}>
+      <Icon
+        className='icon'
+        size={64}
+        theme={iconTheme}
+        value={value}
+      />
+    </div>
+  );
 }
 
 export default styled(Identicon)`
diff --git a/packages/extension-ui/src/components/Link.tsx b/packages/extension-ui/src/components/Link.tsx
index 217dce058d..adb9a25a19 100644
--- a/packages/extension-ui/src/components/Link.tsx
+++ b/packages/extension-ui/src/components/Link.tsx
@@ -16,9 +16,23 @@ interface Props {
 
 function Link ({ children, className, onClick, to }: Props): React.ReactElement<Props> {
   return (
-    to
-      ? <RouterLink className={className} onClick={onClick} to={to}>{children}</RouterLink>
-      : <a href='#' className={className} onClick={onClick}>{children}</a>
+    to ? (
+      <RouterLink
+        className={className}
+        onClick={onClick}
+        to={to}
+      >
+        {children}
+      </RouterLink>
+    ) : (
+      <a
+        href='#'
+        className={className}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    )
   );
 }
 
diff --git a/packages/extension-ui/src/components/List.tsx b/packages/extension-ui/src/components/List.tsx
index 50bb85c586..ae66dceb5b 100644
--- a/packages/extension-ui/src/components/List.tsx
+++ b/packages/extension-ui/src/components/List.tsx
@@ -1,3 +1,7 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import styled from 'styled-components';
 
 export default styled.ul`
diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx
index e7dfce2be1..662e793112 100644
--- a/packages/extension-ui/src/components/Menu.tsx
+++ b/packages/extension-ui/src/components/Menu.tsx
@@ -11,9 +11,11 @@ interface Props {
 }
 
 function Menu ({ children, className }: Props): React.ReactElement<Props> {
-  return <div className={className}>
-    {children}
-  </div>;
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
 }
 
 export default styled(Menu)`
diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx
index 2ecc74bf49..2c35db2ef5 100644
--- a/packages/extension-ui/src/components/MnemonicSeed.tsx
+++ b/packages/extension-ui/src/components/MnemonicSeed.tsx
@@ -9,6 +9,35 @@ import ActionText from '@polkadot/extension-ui/components/ActionText';
 import copy from '../assets/copy.svg';
 import print from '../assets/print.svg';
 
+interface Props {
+  seed: string;
+  onCopy: MouseEventHandler<HTMLDivElement>;
+  onPrint: MouseEventHandler<HTMLDivElement>;
+  className?: string;
+}
+
+function MnemonicSeed ({ seed, onCopy, onPrint, className }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      <MnemonicText value={seed} />
+      <ButtonsRow>
+        <ActionText
+          data-seed-action='copy'
+          icon={copy}
+          text='Copy to clipboard'
+          onClick={onCopy}
+        />
+        <ActionText
+          data-seed-action='print'
+          icon={print}
+          text='Print seed phrase'
+          onClick={onPrint}
+        />
+      </ButtonsRow>
+    </div>
+  );
+}
+
 const MnemonicText = styled(TextAreaWithLabel).attrs(() => ({
   label: 'Generated 12-word mnemonic seed:',
   isReadOnly: true
@@ -23,13 +52,6 @@ const MnemonicText = styled(TextAreaWithLabel).attrs(() => ({
   }
 `;
 
-interface Props {
-  seed: string;
-  onCopy: MouseEventHandler<HTMLDivElement>;
-  onPrint: MouseEventHandler<HTMLDivElement>;
-  className?: string;
-}
-
 const ButtonsRow = styled.div`
   display: flex;
   flex-direction: row;
@@ -39,16 +61,6 @@ const ButtonsRow = styled.div`
   }
 `;
 
-function MnemonicSeed ({ seed, onCopy, onPrint, className }: Props): React.ReactElement<Props> {
-  return <div className={className}>
-    <MnemonicText value={seed}/>
-    <ButtonsRow>
-      <ActionText data-seed-action='copy' icon={copy} text='Copy to clipboard' onClick={onCopy}/>
-      <ActionText data-seed-action='print' icon={print} text='Print seed phrase' onClick={onPrint}/>
-    </ButtonsRow>
-  </div>;
-}
-
 export default styled(MnemonicSeed)`
   margin-top: 21px;
 `;
diff --git a/packages/extension-ui/src/components/Settings.tsx b/packages/extension-ui/src/components/Settings.tsx
index 4dee2df712..c61a0524de 100644
--- a/packages/extension-ui/src/components/Settings.tsx
+++ b/packages/extension-ui/src/components/Settings.tsx
@@ -55,7 +55,11 @@ export default function Settings (): React.ReactElement {
     <SettingsMenu>
       <Setting>
         <SettingTitle>External QR accounts and Access</SettingTitle>
-        <CheckboxSetting checked={camera} onChange={setCamera} label='Allow Camera Access' />
+        <CheckboxSetting
+          checked={camera}
+          onChange={setCamera}
+          label='Allow Camera Access'
+        />
       </Setting>
       <Setting>
         <SettingTitle>Display address format For:</SettingTitle>
diff --git a/packages/extension-ui/src/components/TextInputs.ts b/packages/extension-ui/src/components/TextInputs.ts
index ea8be90314..820861f802 100644
--- a/packages/extension-ui/src/components/TextInputs.ts
+++ b/packages/extension-ui/src/components/TextInputs.ts
@@ -1,3 +1,7 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import styled, { css } from 'styled-components';
 
 interface Props {
diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx
index e6c35ac90c..c751c28fbe 100644
--- a/packages/extension-ui/src/components/Warning.tsx
+++ b/packages/extension-ui/src/components/Warning.tsx
@@ -14,14 +14,16 @@ interface Props {
 }
 
 function Warning ({ children, className, danger }: Props): React.ReactElement<Props> {
-  return <div className={className}>
-    <div>
-      <WarningImage danger={danger} src={WarningImageSrc}/>
+  return (
+    <div className={className}>
+      <div>
+        <WarningImage danger={danger} src={WarningImageSrc} />
+      </div>
+      <div>
+        {children}
+      </div>
     </div>
-    <div>
-      {children}
-    </div>
-  </div>;
+  );
 }
 
 const WarningImage = styled(Svg)<Pick<Props, 'danger'>>`
diff --git a/packages/extension-ui/src/createView.tsx b/packages/extension-ui/src/createView.tsx
index e507c9a444..8e25ef5238 100644
--- a/packages/extension-ui/src/createView.tsx
+++ b/packages/extension-ui/src/createView.tsx
@@ -1,4 +1,4 @@
-// Copyright 2019 @polkadot/extension authors & contributors
+// Copyright 2019 @polkadot/extension-ui authors & contributors
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
@@ -17,11 +17,11 @@ export default function createView (Entry: React.ComponentType, rootId = 'root')
 
   ReactDOM.render(
     <Suspense fallback='...'>
-      <Fonts/>
+      <Fonts />
       <ThemeProvider theme={defaultTheme}>
         <View>
           <HashRouter>
-            <Entry/>
+            <Entry />
           </HashRouter>
         </View>
       </ThemeProvider>
diff --git a/packages/extension-ui/src/partials/Back.tsx b/packages/extension-ui/src/partials/Back.tsx
index e4f4ddf9fd..4853945994 100644
--- a/packages/extension-ui/src/partials/Back.tsx
+++ b/packages/extension-ui/src/partials/Back.tsx
@@ -16,7 +16,7 @@ function Back ({ className, to = '/' }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <BackLink to={to}>
-        <ArrowLeft/>
+        <ArrowLeft />
         Back
       </BackLink>
     </div>