Bump dev, adjust JSX props (#303)

package.json

@@ -7,9 +7,9 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.9.0-beta.26",
+    "@polkadot/api": "^1.9.1",
     "@polkadot/keyring": "^2.7.1",
-    "@polkadot/types": "^1.9.0-beta.26",
+    "@polkadot/types": "^1.9.1",
     "@polkadot/util": "^2.7.1",
     "@polkadot/util-crypto": "^2.7.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -28,8 +28,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@polkadot/dev": "^0.51.9",
+    "@polkadot/dev": "^0.52.1",
-    "@polkadot/typegen": "^1.9.0-beta.26",
+    "@polkadot/typegen": "^1.9.1",
     "@types/jest": "^25.1.4",
     "copy-webpack-plugin": "^5.1.1",
     "sinon-chrome": "^3.0.1"

packages/extension-base/package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api": "^1.9.0-beta.26",
+    "@polkadot/api": "^1.9.1",
     "@polkadot/keyring": "^2.7.1",
     "@polkadot/ui-keyring": "^0.52.0-beta.21",
     "extensionizer": "^1.0.1"

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -35,18 +35,32 @@ function Account ({ address, className, isExternal }: Props): React.ReactElement
   return (
     <div className={className}>
       <Address
-        address={address}
-        name={editedName}
         actions={(
           <>
             <MenuGroup>
               <MenuItem onClick={_toggleEdit}>Rename</MenuItem>
-              {!isExternal && <MenuItem to={`/account/derive/${address}`}>Derive New Account</MenuItem>}
+              {!isExternal && (
+                <MenuItem to={`/account/derive/${address}`}>Derive New Account</MenuItem>
+              )}
             </MenuGroup>
-            {!isExternal && <MenuItem isDanger to={`/account/export/${address}`}>Export Account</MenuItem>}
+            {!isExternal && (
-            <MenuItem isDanger to={`/account/forget/${address}`}>Forget Account</MenuItem>
+              <MenuItem
+                isDanger
+                to={`/account/export/${address}`}
+              >
+                Export Account
+              </MenuItem>
+            )}
+            <MenuItem
+              isDanger
+              to={`/account/forget/${address}`}
+            >
+              Forget Account
+            </MenuItem>
           </>
         )}
+        address={address}
+        name={editedName}
       >
         {isEditing && (
           <Name

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -30,7 +30,10 @@ export default function Accounts (): React.ReactElement<Props> {
         ? <AddAccount />
         : (
           <>
-            <Header showSettings text={'Accounts'} />
+            <Header
+              showSettings
+              text={'Accounts'}
+            />
             <AccountsArea>
               {accounts.map((json, index): React.ReactNode => (
                 <Account
@@ -44,14 +47,14 @@ export default function Accounts (): React.ReactElement<Props> {
       }
       <ButtonArea>
         <ButtonWithSubtitle
-          to='/account/create'
-          title='Create New Account'
           subTitle='With new seed'
+          title='Create New Account'
+          to='/account/create'
         />
         <ButtonWithSubtitle
-          to='/account/import-seed'
-          title='Import an Account'
           subTitle='I have a pre-existing seed'
+          title='Import an Account'
+          to='/account/import-seed'
         />
         {mediaAllowed && (
           <QrButton to='/account/import-qr'>

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -33,13 +33,16 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
     <div className={className}>
       <RequestInfo>
         <Info>
-          <Icon icon='X' onClick={_onReject} />
+          <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'
+              target='_blank'
             >
               <span className='tab-url'>{url}</span>
             </a>.
@@ -52,7 +55,12 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
           </>
         )}
         <RejectButton>
-          <Link isDanger onClick={_onReject}>Reject</Link>
+          <Link
+            isDanger
+            onClick={_onReject}
+          >
+            Reject
+          </Link>
         </RejectButton>
       </RequestInfo>
     </div>

packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx

@@ -12,7 +12,7 @@ interface Props {
   className?: string;
 }
 
-function CreationStep ({ step, onClick, className }: Props): React.ReactElement<Props> {
+function CreationStep ({ className, onClick, step }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <div>
@@ -20,7 +20,10 @@ function CreationStep ({ step, onClick, className }: Props): React.ReactElement<
         <CurrentStep>{step}</CurrentStep>
         <TotalSteps>/2</TotalSteps>
       </div>
-      <ActionText text={step === 1 ? 'Cancel' : 'Back'} onClick={onClick} />
+      <ActionText
+        onClick={onClick}
+        text={step === 1 ? 'Cancel' : 'Back'}
+      />
     </div>
   );
 }

packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx

@@ -6,8 +6,8 @@ import React, { useState } from 'react';
 import { Button, ButtonArea, Checkbox, MnemonicSeed, VerticalSpace, Warning } from '../../components';
 
 interface Props {
-  seed: string;
   onNextStep: () => void;
+  seed: string;
 }
 
 const onCopy = (): void => {
@@ -19,26 +19,29 @@ const onCopy = (): void => {
   document.execCommand('copy');
 };
 
-function Mnemonic ({ seed, onNextStep }: Props): React.ReactElement<Props> {
+function Mnemonic ({ onNextStep, seed }: Props): React.ReactElement<Props> {
   const [isMnemonicSaved, setIsMnemonicSaved] = useState(false);
   return (
     <>
-      <Warning>
+      <Warning>Please write down your wallet’s mnemonic seed and keep it in a safe place. <br />
-      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>
-      Mnemonic seed is used to restore your wallet. Keep it carefully in case you lose your assets.
-      </Warning>
       <MnemonicSeed
-        seed={seed}
         onCopy={onCopy}
+        seed={seed}
       />
       <VerticalSpace />
       <Checkbox
         checked={isMnemonicSaved}
-        onChange={setIsMnemonicSaved}
         label='I have saved my mnemonic seed safely.'
+        onChange={setIsMnemonicSaved}
       />
       <ButtonArea>
-        <Button isDisabled={!isMnemonicSaved} onClick={onNextStep}>Next step</Button>
+        <Button
+          isDisabled={!isMnemonicSaved}
+          onClick={onNextStep}
+        >
+          Next step
+        </Button>
       </ButtonArea>
     </>
   );

packages/extension-ui/src/Popup/CreateAccount/index.tsx

@@ -48,14 +48,26 @@ export default function CreateAccount (): React.ReactElement {
             <CurrentStep>{step}</CurrentStep>
             <TotalSteps>/2</TotalSteps>
           </div>
-          <ActionText text={step === 1 ? 'Cancel' : 'Back'} onClick={_onCancel} />
+          <ActionText
+            onClick={_onCancel}
+            text={step === 1 ? 'Cancel' : 'Back'}
+          />
         </CreationSteps>
       </Header>
-      <Loading>{account && (step === 1 ? (
+      <Loading>{account && (step === 1
-        <Mnemonic seed={account.seed} onNextStep={_onNextStep} />
+        ? (
-      ) : (
+          <Mnemonic
-        <AccountName address={account.address} onCreate={_onCreate} />
+            onNextStep={_onNextStep}
-      ))}</Loading>
+            seed={account.seed}
+          />
+        )
+        : (
+          <AccountName
+            address={account.address}
+            onCreate={_onCreate}
+          />
+        )
+      )}</Loading>
     </>
   );
 }

packages/extension-ui/src/Popup/Derive/Step.tsx

@@ -13,13 +13,17 @@ interface Props {
 
 function Step ({ step, className }: Props): React.ReactElement<Props> {
   return (
-    <Header text={
+    <Header
-      <>
+      className={className}
-        <span>Derive new account</span>
+      showBackArrow
-        <CurrentStep>{step}</CurrentStep>
+      text={
-        <TotalSteps>/2</TotalSteps>
+        <>
-      </>
+          <span>Derive new account</span>
-    } showBackArrow className={className} />
+          <CurrentStep>{step}</CurrentStep>
+          <TotalSteps>/2</TotalSteps>
+        </>
+      }
+    />
   );
 }
 

packages/extension-ui/src/Popup/Derive/index.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useCallback, useContext, useState } from 'react';
-import { RouteComponentProps } from 'react-router';
+import { RouteComponentProps, withRouter } from 'react-router';
 import styled from 'styled-components';
 
 import { ActionContext, Address, Button, ButtonArea, InputWithLabel, VerticalSpace } from '../../components';
@@ -13,7 +13,13 @@ import Step from './Step';
 
 type Props = RouteComponentProps<{ address: string }>;
 
-export default function Derive ({ match: { params: { address: parentAddress } } }: Props): React.ReactElement<Props> {
+const DeriveButton = styled(Button)`
+  margin-left: 24px;
+  margin-right: 24px;
+  width: auto;
+`;
+
+function Derive ({ match: { params: { address: parentAddress } } }: Props): React.ReactElement<Props> {
   const onAction = useContext(ActionContext);
   const [account, setAccount] = useState<null | { address: string; suri: string }>(null);
   const [name, setName] = useState<string | null>(null);
@@ -38,21 +44,30 @@ export default function Derive ({ match: { params: { address: parentAddress } }
   return (
     <>
       <Step step={derivationConfirmed ? 2 : 1} />
-      {!derivationConfirmed && <InputWithLabel
+      {!derivationConfirmed && (
-        isFocused
+        <InputWithLabel
-        isError={!isProperParentPassword}
+          data-export-password
-        label='enter the password for the account you want to derive from'
+          isError={!isProperParentPassword}
-        onChange={_onParentPasswordEnter}
+          isFocused
-        type='password'
+          label='enter the password for the account you want to derive from'
-        data-export-password
+          onChange={_onParentPasswordEnter}
-      />}
+          type='password'
-      {!derivationConfirmed && <DeriveButton
+        />
-        isDisabled={!isProperParentPassword}
+      )}
-        onClick={(): void => setDerivationConfirmed(true)}
+      {!derivationConfirmed && (
-      >
+        <DeriveButton
-        I want to derive from this account
+          isDisabled={!isProperParentPassword}
-      </DeriveButton>}
+          onClick={(): void => setDerivationConfirmed(true)}
-      {isProperParentPassword && derivationConfirmed && <Name onChange={setName} isFocused />}
+        >
+          I want to derive from this account
+        </DeriveButton>
+      )}
+      {isProperParentPassword && derivationConfirmed && (
+        <Name
+          isFocused
+          onChange={setName}
+        />
+      )}
       {isProperParentPassword && derivationConfirmed && parentPassword && name && <DerivationPath
         onChange={setAccount}
         parentAddress={parentAddress}
@@ -75,8 +90,4 @@ export default function Derive ({ match: { params: { address: parentAddress } }
   );
 }
 
-const DeriveButton = styled(Button)`
+export default withRouter(Derive);
-  margin-left: 24px;
-  margin-right: 24px;
-  width: auto;
-`;

packages/extension-ui/src/Popup/Export.test.tsx

@@ -31,7 +31,7 @@ describe('Export component', () => {
     wrapper = mount(
       <MemoryRouter initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
         <ThemeProvider theme={themes.dark}>
-          <Route path='/account/export/:address' component={ Export } />
+          <Route path='/account/export/:address'><Export /></Route>
         </ThemeProvider>
       </MemoryRouter>
     );

packages/extension-ui/src/Popup/Export.tsx

@@ -45,29 +45,35 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
 
   return (
     <>
-      <Header text='Export account' showBackArrow/>
+      <Header
+        showBackArrow
+        text='Export account'
+      />
       <div>
         <Address address={address}>
           <MovedWarning danger>You are exporting your account. Keep it safe and don&apos;t share it with anyone.</MovedWarning>
           <ActionArea>
             <InputWithLabel
+              data-export-password
               isError={pass.length < MIN_LENGTH || wrongPasswordHighlight}
               label='password for this account'
               onChange={setPass}
               type='password'
-              data-export-password
             />
             <Button
-              isDisabled={pass.length === 0}
-              isDanger
-              onClick={_onExportButtonClick}
               className='export-button'
               data-export-button
+              isDanger
+              isDisabled={pass.length === 0}
+              onClick={_onExportButtonClick}
             >
               I want to export this account
             </Button>
             <CancelButton>
-              <ActionText text='Cancel' onClick={(): void => onAction('/')} />
+              <ActionText
+                onClick={(): void => onAction('/')}
+                text='Cancel'
+              />
             </CancelButton>
           </ActionArea>
         </Address>

packages/extension-ui/src/Popup/Forget.tsx

@@ -21,7 +21,10 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
 
   return (
     <>
-      <Header text='Forget account' showBackArrow/>
+      <Header
+        showBackArrow
+        text='Forget account'
+      />
       <div>
         <Address address={address}>
           <MovedWarning danger>
@@ -35,7 +38,10 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
               I want to forget this account
             </Button>
             <CancelButton>
-              <ActionText text='Cancel' onClick={(): void => onAction('/')} />
+              <ActionText
+                onClick={(): void => onAction('/')}
+                text='Cancel'
+              />
             </CancelButton>
           </ActionArea>
         </Address>

packages/extension-ui/src/Popup/ImportQr.tsx

@@ -27,7 +27,10 @@ export default function ImportQr (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header showBackArrow text='Scan Address Qr' />
+      <Header
+        showBackArrow
+        text='Scan Address Qr'
+      />
       {!account && (
         <div>
           <QrScanAddress onScan={setAccount} />

packages/extension-ui/src/Popup/ImportSeed.tsx

@@ -42,13 +42,16 @@ export default function Import (): React.ReactElement<Props> {
 
   return (
     <>
-      <HeaderWithSmallerMargin text='Import account' showBackArrow />
+      <HeaderWithSmallerMargin
+        showBackArrow
+        text='Import account'
+      />
       <SeedInput
-        rowsCount={2}
         isError={!account}
         isFocused
         label='existing 12 or 24-word mnemonic seed'
         onChange={_onChangeSeed}
+        rowsCount={2}
       />
       {account && <Name onChange={setName} />}
       {account && name && <Password onChange={setPassword} />}

packages/extension-ui/src/Popup/Metadata/Request.tsx

@@ -61,7 +61,12 @@ function Request ({ className, metaId, request, url }: Props): React.ReactElemen
         <RequestWarning>This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata.</RequestWarning>
         <AcceptButton onClick={_onApprove}>Yes, do this metadata update</AcceptButton>
         <RejectButton>
-          <Link isDanger onClick={_onReject}>Reject</Link>
+          <Link
+            isDanger
+            onClick={_onReject}
+          >
+            Reject
+          </Link>
         </RejectButton>
       </RequestInfo>
     </div>

packages/extension-ui/src/Popup/Signing/Extrinsic.tsx

@@ -104,7 +104,10 @@ function Extrinsic ({ className, isDecoded, payload: { era, nonce, tip }, reques
   }, [method, isDecoded, chain, specVersion]);
 
   return (
-    <Table className={className} isFull>
+    <Table
+      className={className}
+      isFull
+    >
       <tr>
         <td className='label'>from</td>
         <td className='data'>{url}</td>

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -71,9 +71,9 @@ export default function Request ({ account: { isExternal }, request, signId, url
         {isExternal
           ? (
             <Qr
+              onSignature={_onSignature}
               payload={extrinsic}
               request={payload}
-              onSignature={_onSignature}
             />
           ) : (
             <Extrinsic
@@ -85,9 +85,19 @@ export default function Request ({ account: { isExternal }, request, signId, url
           )
         }
         <SignArea>
-          {isFirst && !isExternal && <Unlock onSign={_onSign} buttonText={buttonText} />}
+          {isFirst && !isExternal && (
+            <Unlock
+              buttonText={buttonText}
+              onSign={_onSign}
+            />
+          )}
           <CancelButton>
-            <Link isDanger onClick={_onCancel}>Cancel</Link>
+            <Link
+              isDanger
+              onClick={_onCancel}
+            >
+              Cancel
+            </Link>
           </CancelButton>
         </SignArea>
       </>
@@ -98,12 +108,25 @@ export default function Request ({ account: { isExternal }, request, signId, url
     return (
       <>
         <Address address={payload.address} />
-        <Bytes bytes={payload.data} url={url} />
+        <Bytes
+          bytes={payload.data}
+          url={url}
+        />
         <VerticalSpace />
         <SignArea>
-          {!isExternal && <Unlock onSign={_onSign} buttonText={buttonText} />}
+          {!isExternal && (
+            <Unlock
+              buttonText={buttonText}
+              onSign={_onSign}
+            />
+          )}
           <CancelButton>
-            <Link isDanger onClick={_onCancel}>Reject</Link>
+            <Link
+              isDanger
+              onClick={_onCancel}
+            >
+              Reject
+            </Link>
           </CancelButton>
         </SignArea>
       </>

packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx

@@ -26,8 +26,14 @@ function TransactionIndex ({ index, totalItems, onNextClick, onPreviousClick }:
         <TotalSteps>/{totalItems}</TotalSteps>
       </div>
       <div>
-        <ArrowLeft onClick={(): unknown => previousClickActive && onPreviousClick()} isActive={previousClickActive} />
+        <ArrowLeft
-        <ArrowRight onClick={(): unknown => nextClickActive && onNextClick()} isActive={nextClickActive} />
+          isActive={previousClickActive}
+          onClick={(): unknown => previousClickActive && onPreviousClick()}
+        />
+        <ArrowRight
+          isActive={nextClickActive}
+          onClick={(): unknown => nextClickActive && onNextClick()}
+        />
       </div>
     </CreationSteps>
   );

packages/extension-ui/src/Popup/Signing/index.tsx

@@ -35,19 +35,19 @@ export default function Signing (): React.ReactElement<{}> {
         {requests.length > 1 && (
           <TransactionIndex
             index={requestIndex}
-            totalItems={requests.length}
             onNextClick={(): void => setRequestIndex(requestIndex + 1)}
             onPreviousClick={(): void => setRequestIndex(requestIndex - 1)}
+            totalItems={requests.length}
           />
         )}
       </Header>
       <Request
-        isFirst={requestIndex === 0}
         account={requests[requestIndex].account}
+        buttonText={isTransaction ? 'Sign the transaction' : 'Sign the message'}
+        isFirst={requestIndex === 0}
         request={requests[requestIndex].request}
         signId={requests[requestIndex].id}
         url={requests[requestIndex].url}
-        buttonText={isTransaction ? 'Sign the transaction' : 'Sign the message'}
       />
     </>
   ) : <Loading />;

packages/extension-ui/src/Popup/index.tsx

@@ -101,13 +101,18 @@ export default function Popup (): React.ReactElement<{}> {
               <MetadataReqContext.Provider value={metaRequests}>
                 <SigningReqContext.Provider value={signRequests}>
                   <Switch>
-                    <Route path='/account/create' component={CreateAccount} />
+                    <Route path='/account/create'><CreateAccount /></Route>
-                    <Route path='/account/forget/:address' component={Forget} />
+                    <Route path='/account/forget/:address'><Forget /></Route>
-                    <Route path='/account/export/:address' component={Export} />
+                    <Route path='/account/export/:address'><Export /></Route>
-                    <Route path='/account/import-qr' component={ImportQr} />
+                    <Route path='/account/import-qr'><ImportQr /></Route>
-                    <Route path='/account/import-seed' component={ImportSeed} />
+                    <Route path='/account/import-seed'><ImportSeed /></Route>
-                    <Route path='/account/derive/:address' component={Derive} />
+                    <Route path='/account/derive/:address'><Derive /></Route>
-                    <Route exact path='/' component={Root} />
+                    <Route
+                      exact
+                      path='/'
+                    >
+                      <Root />
+                    </Route>
                   </Switch>
                 </SigningReqContext.Provider>
               </MetadataReqContext.Provider>

packages/extension-ui/src/components/ActionText.tsx

@@ -15,7 +15,10 @@ interface Props {
 
 function ActionText ({ icon, className, text, onClick }: Props): React.ReactElement<Props> {
   return (
-    <div className={className} onClick={onClick}>
+    <div
+      className={className}
+      onClick={onClick}
+    >
       {icon && <Svg src={icon} />}
       <span>{text}</span>
     </div>

packages/extension-ui/src/components/AddAccount.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import styled from 'styled-components';
 import { ActionContext } from './contexts';
 import AddAccountImage from './AddAccountImage';
@@ -14,13 +14,20 @@ interface Props {
 
 function AddAccount ({ className }: Props): React.ReactElement<Props> {
   const onAction = useContext(ActionContext);
+  const _onClick = useCallback(
+    (): void => onAction('/account/create'),
+    [onAction]
+  );
 
   return (
     <>
-      <Header showSettings text={'Add Account'}/>
+      <Header
+        showSettings
+        text={'Add Account'}
+      />
       <div className={className}>
         <Image>
-          <AddAccountImage onClick={(): void => onAction('/account/create')}/>
+          <AddAccountImage onClick={_onClick}/>
         </Image>
         <div>
           <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>

packages/extension-ui/src/components/AddAccountImage.tsx

@@ -2,6 +2,12 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+// We _could_ reformat, but just keep it as-is, since this is actually
+// externally generated and not really user-editable
+
+/* eslint-disable react/jsx-sort-props */
+/* eslint-disable react/jsx-max-props-per-line */
+
 import React from 'react';
 import styled from 'styled-components';
 

packages/extension-ui/src/components/Button.tsx

@@ -30,8 +30,8 @@ function Button ({ children, className, isDisabled, onClick, to }: Props): React
   return (
     <button
       className={className}
-      onClick={_onClick}
       disabled={isDisabled}
+      onClick={_onClick}
     >
       {children}
     </button>

packages/extension-ui/src/components/Checkbox.tsx

@@ -19,9 +19,9 @@ function Checkbox ({ onChange, label, className, checked }: Props): React.ReactE
       <label>
         {label}
         <input
-          type='checkbox'
           checked={checked}
           onChange={((event): void => onChange(event.target.checked))}
+          type='checkbox'
         />
         <span />
       </label>

packages/extension-ui/src/components/Identicon.tsx

@@ -18,9 +18,9 @@ function Identicon ({ iconTheme, className, prefix, value }: Props): React.React
     <div className={className}>
       <Icon
         className='icon'
+        prefix={prefix}
         size={64}
         theme={iconTheme}
-        prefix={prefix}
         value={value}
       />
     </div>

packages/extension-ui/src/components/InputWithLabel.tsx

@@ -39,12 +39,12 @@ function InputWithLabel ({ className, defaultValue, label, isError, isFocused, i
         defaultValue={defaultValue || undefined}
         onBlur={onBlur}
         onChange={_onChange}
+        placeholder={placeholder}
         readOnly={isReadOnly}
         spellCheck={false}
         type={type}
         value={value}
         withError={isError}
-        placeholder={placeholder}
       />
     </Label>
   );

packages/extension-ui/src/components/Link.tsx

@@ -26,8 +26,8 @@ function Link ({ children, className, onClick, to }: Props): React.ReactElement<
       </RouterLink>
     ) : (
       <a
-        href='#'
         className={className}
+        href='#'
         onClick={onClick}
       >
         {children}

packages/extension-ui/src/components/MnemonicSeed.tsx

@@ -22,8 +22,8 @@ function MnemonicSeed ({ seed, onCopy, className }: Props): React.ReactElement<P
         <ActionText
           data-seed-action='copy'
           icon={copy}
-          text='Copy to clipboard'
           onClick={onCopy}
+          text='Copy to clipboard'
         />
       </ButtonsRow>
     </div>

packages/extension-ui/src/partials/DerivationPath.tsx

@@ -30,11 +30,11 @@ function DerivationPath ({ onChange, parentAddress, parentPassword }: Props): Re
   return (
     <div>
       <InputWithLabel
-        label='Derivation path'
-        placeholder='//hard/soft'
-        onChange={_onChange}
-        value={path}
         isError={!isValid}
+        label='Derivation path'
+        onChange={_onChange}
+        placeholder='//hard/soft'
+        value={path}
       />
     </div>
   );

packages/extension-ui/src/partials/Name.tsx

@@ -37,8 +37,8 @@ export default function Name ({ address, className, defaultValue, isFocused, lab
 
   return (
     <InputWithLabel
-      data-input-name
       className={className}
+      data-input-name
       defaultValue={startValue}
       isError={isError}
       isFocused={isFocused}

packages/extension/package.json

@@ -10,7 +10,7 @@
     "@polkadot/extension-ui": "0.24.0-beta.3"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.51.9",
+    "@polkadot/dev": "^0.52.1",
     "@types/chrome": "^0.0.103",
     "@types/firefox-webext-browser": "^70.0.1",
     "babel-loader": "^8.1.0",