From 563559286aca6d55b9f19f7ec4fbd509e326a064 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 6 Jan 2020 12:45:35 +0100
Subject: [PATCH] Disable spellcheck on inputs (#215)

* Disable spellcheck on inputs

* Cleanup alphabetical attributes
---
 .../src/components/AddAccount.tsx             |  3 +-
 .../src/components/AddAccountImage.tsx        | 74 +++++++++----------
 .../extension-ui/src/components/Address.tsx   | 40 +++++-----
 .../extension-ui/src/components/Checkbox.tsx  |  4 +-
 .../extension-ui/src/components/Header.tsx    | 17 +++--
 .../src/components/InputWithLabel.tsx         |  9 ++-
 packages/extension-ui/src/components/Menu.tsx |  5 +-
 .../extension-ui/src/components/Settings.tsx  | 15 ++--
 packages/extension-ui/src/components/Svg.tsx  |  8 +-
 .../src/components/TextAreaWithLabel.tsx      | 13 ++--
 packages/extension-ui/src/components/View.tsx |  5 +-
 .../extension-ui/src/components/Warning.tsx   |  7 +-
 12 files changed, 109 insertions(+), 91 deletions(-)

diff --git a/packages/extension-ui/src/components/AddAccount.tsx b/packages/extension-ui/src/components/AddAccount.tsx
index 1c16b6c7..67645a70 100644
--- a/packages/extension-ui/src/components/AddAccount.tsx
+++ b/packages/extension-ui/src/components/AddAccount.tsx
@@ -23,8 +23,7 @@ function AddAccount ({ className }: Props): React.ReactElement<Props> {
           <AddAccountImage onClick={(): void => onAction('/account/create')}/>
         </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>
+          <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>
         </div>
       </div>
     </>
diff --git a/packages/extension-ui/src/components/AddAccountImage.tsx b/packages/extension-ui/src/components/AddAccountImage.tsx
index b80a4b93..f6837090 100644
--- a/packages/extension-ui/src/components/AddAccountImage.tsx
+++ b/packages/extension-ui/src/components/AddAccountImage.tsx
@@ -12,49 +12,49 @@ interface Props {
 
 function AddAccountImage ({ onClick, className }: Props): React.ReactElement<Props> {
   return (
-    <svg className={className} width="265" height="265" viewBox="0 0 265 265" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="40" y="40" width="185" height="185">
-        <circle cx="132.5" cy="132.5" r="92" fill="white" fillOpacity="0.9" stroke="#E3E7ED" />
+    <svg className={className} width='265' height='265' viewBox='0 0 265 265' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <mask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='40' y='40' width='185' height='185'>
+        <circle cx='132.5' cy='132.5' r='92' fill='white' fillOpacity='0.9' stroke='#E3E7ED' />
       </mask>
-      <g mask="url(#mask0)">
-        <circle cx="132.5" cy="132.5" r="92" strokeWidth="1px" fill="#1A1B20" stroke="#E3E7ED"
+      <g mask='url(#mask0)'>
+        <circle cx='132.5' cy='132.5' r='92' strokeWidth='1px' fill='#1A1B20' stroke='#E3E7ED'
           onClick={onClick} />
-        <g filter="url(#filter0_f)">
-          <circle cx="132.5" cy="73.1154" r="12.1154" fill="#FEE05F" />
-          <circle cx="132.5" cy="104.269" r="12.1154" fill="#F5836B" />
-          <circle cx="132.5" cy="135.423" r="12.1154" fill="#EE6C89" />
-          <circle cx="132.5" cy="166.577" r="12.1154" fill="#397893" />
-          <circle cx="132.5" cy="166.577" r="12.1154" fill="#E2327D" />
-          <circle cx="77.1154" cy="104.269" r="12.1154" fill="#F0512A" />
-          <circle cx="77.1154" cy="135.423" r="12.1154" fill="#966EAC" />
-          <circle cx="77.1154" cy="166.577" r="12.1154" fill="#397893" />
-          <circle cx="77.1154" cy="166.577" r="12.1154" fill="#9195C9" />
-          <circle cx="187.884" cy="104.269" r="12.1154" fill="#FFFACA" />
-          <circle cx="187.884" cy="135.423" r="12.1154" fill="#ECCCDB" />
-          <circle cx="187.884" cy="166.577" r="12.1154" fill="#397893" />
-          <circle cx="187.884" cy="166.577" r="12.1154" fill="#ED3432" />
-          <circle cx="132.5" cy="197.731" r="12.1154" fill="#B24594" />
-          <circle cx="160.193" cy="86.9615" r="12.1154" fill="#FFBB50" />
-          <circle cx="160.193" cy="118.115" r="12.1154" fill="#F6E768" />
-          <circle cx="160.193" cy="149.269" r="12.1154" fill="#FF5A5A" />
-          <circle cx="160.193" cy="180.423" r="12.1154" fill="#397893" />
-          <circle cx="160.193" cy="180.423" r="12.1154" fill="#D6234A" />
-          <circle cx="104.808" cy="86.9615" r="12.1154" fill="#FFA800" />
-          <circle cx="104.808" cy="118.115" r="12.1154" fill="#F78D53" />
-          <circle cx="104.808" cy="149.269" r="12.1154" fill="#BD87BB" />
-          <circle cx="104.808" cy="180.423" r="12.1154" fill="#397893" />
-          <circle cx="104.808" cy="180.423" r="12.1154" fill="#AF71AF" />
+        <g filter='url(#filter0_f)'>
+          <circle cx='132.5' cy='73.1154' r='12.1154' fill='#FEE05F' />
+          <circle cx='132.5' cy='104.269' r='12.1154' fill='#F5836B' />
+          <circle cx='132.5' cy='135.423' r='12.1154' fill='#EE6C89' />
+          <circle cx='132.5' cy='166.577' r='12.1154' fill='#397893' />
+          <circle cx='132.5' cy='166.577' r='12.1154' fill='#E2327D' />
+          <circle cx='77.1154' cy='104.269' r='12.1154' fill='#F0512A' />
+          <circle cx='77.1154' cy='135.423' r='12.1154' fill='#966EAC' />
+          <circle cx='77.1154' cy='166.577' r='12.1154' fill='#397893' />
+          <circle cx='77.1154' cy='166.577' r='12.1154' fill='#9195C9' />
+          <circle cx='187.884' cy='104.269' r='12.1154' fill='#FFFACA' />
+          <circle cx='187.884' cy='135.423' r='12.1154' fill='#ECCCDB' />
+          <circle cx='187.884' cy='166.577' r='12.1154' fill='#397893' />
+          <circle cx='187.884' cy='166.577' r='12.1154' fill='#ED3432' />
+          <circle cx='132.5' cy='197.731' r='12.1154' fill='#B24594' />
+          <circle cx='160.193' cy='86.9615' r='12.1154' fill='#FFBB50' />
+          <circle cx='160.193' cy='118.115' r='12.1154' fill='#F6E768' />
+          <circle cx='160.193' cy='149.269' r='12.1154' fill='#FF5A5A' />
+          <circle cx='160.193' cy='180.423' r='12.1154' fill='#397893' />
+          <circle cx='160.193' cy='180.423' r='12.1154' fill='#D6234A' />
+          <circle cx='104.808' cy='86.9615' r='12.1154' fill='#FFA800' />
+          <circle cx='104.808' cy='118.115' r='12.1154' fill='#F78D53' />
+          <circle cx='104.808' cy='149.269' r='12.1154' fill='#BD87BB' />
+          <circle cx='104.808' cy='180.423' r='12.1154' fill='#397893' />
+          <circle cx='104.808' cy='180.423' r='12.1154' fill='#AF71AF' />
         </g>
         <path
-          d="M145.768 133.776C146.323 133.776 146.792 133.968 147.176 134.352C147.603 134.736 147.816 135.205 147.816 135.76C147.816 136.315 147.624 136.805 147.24 137.232C146.856 137.616 146.365 137.808 145.768 137.808H134.184V149.328C134.184 149.925 133.992 150.416 133.608 150.8C133.224 151.184 132.755 151.376 132.2 151.376C131.645 151.376 131.176 151.184 130.792 150.8C130.408 150.373 130.216 149.883 130.216 149.328V137.808H118.632C118.077 137.808 117.587 137.616 117.16 137.232C116.776 136.805 116.584 136.315 116.584 135.76C116.584 135.205 116.776 134.736 117.16 134.352C117.587 133.968 118.077 133.776 118.632 133.776H130.216V122.256C130.216 121.659 130.408 121.168 130.792 120.784C131.176 120.357 131.645 120.144 132.2 120.144C132.755 120.144 133.224 120.357 133.608 120.784C133.992 121.168 134.184 121.659 134.184 122.256V133.776H145.768Z"
-          fill="#242529" onClick={onClick} />
+          d='M145.768 133.776C146.323 133.776 146.792 133.968 147.176 134.352C147.603 134.736 147.816 135.205 147.816 135.76C147.816 136.315 147.624 136.805 147.24 137.232C146.856 137.616 146.365 137.808 145.768 137.808H134.184V149.328C134.184 149.925 133.992 150.416 133.608 150.8C133.224 151.184 132.755 151.376 132.2 151.376C131.645 151.376 131.176 151.184 130.792 150.8C130.408 150.373 130.216 149.883 130.216 149.328V137.808H118.632C118.077 137.808 117.587 137.616 117.16 137.232C116.776 136.805 116.584 136.315 116.584 135.76C116.584 135.205 116.776 134.736 117.16 134.352C117.587 133.968 118.077 133.776 118.632 133.776H130.216V122.256C130.216 121.659 130.408 121.168 130.792 120.784C131.176 120.357 131.645 120.144 132.2 120.144C132.755 120.144 133.224 120.357 133.608 120.784C133.992 121.168 134.184 121.659 134.184 122.256V133.776H145.768Z'
+          fill='#242529' onClick={onClick} />
       </g>
       <defs>
-        <filter id="filter0_f" x="-3" y="-7" width="271" height="284.846" filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB">
-          <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-          <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur"/>
+        <filter id='filter0_f' x='-3' y='-7' width='271' height='284.846' filterUnits='userSpaceOnUse'
+          colorInterpolationFilters='sRGB'>
+          <feFlood floodOpacity='0' result='BackgroundImageFix'/>
+          <feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/>
+          <feGaussianBlur stdDeviation='10' result='effect1_foregroundBlur'/>
         </filter>
       </defs>
     </svg>
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 24582f16..29fdbed8 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -63,34 +63,33 @@ function Address ({ address, className, children, genesisHash, name, actions }:
   const [showActionsMenu, setShowActionsMenu] = useState(false);
   const [moveMenuUp, setIsMovedMenu] = useState(false);
   const actionsRef = useRef<HTMLDivElement>(null);
+
   useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));
 
   useEffect((): void => {
-    if (!address) {
-      return;
-    }
-    const [formatted, account, chain] = recodeAddress(address, accounts, genesisHash);
+    if (address) {
+      const [formatted, account, chain] = recodeAddress(address, accounts, genesisHash);
 
-    setFormatted(formatted);
-    setChain(chain);
-    setAccount(account);
+      setFormatted(formatted);
+      setChain(chain);
+      setAccount(account);
+    }
   }, [address]);
 
   useEffect(() => {
     if (!showActionsMenu) {
       setIsMovedMenu(false);
-      return;
-    }
-    if (!actionsRef.current) {
-      return;
-    }
-    const { bottom } = actionsRef.current.getBoundingClientRect();
-    if (bottom > ACCOUNTS_SCREEN_HEIGHT) {
-      setIsMovedMenu(true);
+    } else if (actionsRef.current) {
+      const { bottom } = actionsRef.current.getBoundingClientRect();
+
+      if (bottom > ACCOUNTS_SCREEN_HEIGHT) {
+        setIsMovedMenu(true);
+      }
     }
   }, [showActionsMenu]);
 
   const theme = ((chain && chain.icon) || 'polkadot') as 'polkadot';
+  const _onClick = (): void => setShowActionsMenu(!showActionsMenu);
 
   return (
     <div className={className}>
@@ -107,10 +106,17 @@ function Address ({ address, className, children, genesisHash, name, actions }:
           </Info>
           {actions && (
             <>
-              <Settings onClick={(): void => setShowActionsMenu(!showActionsMenu)}>
+              <Settings onClick={_onClick}>
                 {showActionsMenu ? <ActiveActionsIcon /> : <ActionsIcon />}
               </Settings>
-              {showActionsMenu && <MovableMenu reference={actionsRef} isMoved={moveMenuUp}>{actions}</MovableMenu>}
+              {showActionsMenu && (
+                <MovableMenu
+                  isMoved={moveMenuUp}
+                  reference={actionsRef}
+                >
+                  {actions}
+                </MovableMenu>
+              )}
             </>
           )}
         </AccountInfoRow>
diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx
index 451faf3f..bef6d661 100644
--- a/packages/extension-ui/src/components/Checkbox.tsx
+++ b/packages/extension-ui/src/components/Checkbox.tsx
@@ -19,7 +19,7 @@ function Checkbox ({ onChange, label, className, checked }: Props): React.ReactE
       <label>
         {label}
         <input
-          type="checkbox"
+          type='checkbox'
           checked={checked}
           onChange={((event): void => onChange(event.target.checked))}
         />
@@ -60,7 +60,7 @@ export default styled(Checkbox)`
       border: 1px solid ${({ theme }): string => theme.inputBorderColor};
       border: 1px solid ${({ theme }): string => theme.inputBorderColor};
       &:after {
-        content: "";
+        content: '';
         display: none;
         width: 13px;
         height: 10px;
diff --git a/packages/extension-ui/src/components/Header.tsx b/packages/extension-ui/src/components/Header.tsx
index 2984161f..5220e3e8 100644
--- a/packages/extension-ui/src/components/Header.tsx
+++ b/packages/extension-ui/src/components/Header.tsx
@@ -24,22 +24,27 @@ interface Props {
 function Header ({ children, className, showSettings, text, showBackArrow }: Props): React.ReactElement<Props> {
   const [showActionsMenu, setShowActionsMenu] = useState(false);
   const actionsRef = useRef(null);
+
   useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));
 
+  const _toggleSettings = (): void => setShowActionsMenu(!showActionsMenu);
+
   return (
     <div className={className}>
       <Container>
         <Branding>
-          {showBackArrow ? (
-            <BackLink to={'/'}>
-              <ArrowLeft/>
-            </BackLink>
-          ) : <Logo src={logo}/>
+          {showBackArrow
+            ? (
+              <BackLink to={'/'}>
+                <ArrowLeft/>
+              </BackLink>
+            )
+            : <Logo src={logo}/>
           }
           <LogoText>{text || 'polkadot{.js}'}</LogoText>
         </Branding>
         {showSettings && (
-          <SettingsToggle onClick={(): void => setShowActionsMenu(!showActionsMenu)}>
+          <SettingsToggle onClick={_toggleSettings}>
             <Gear isSelected={showActionsMenu} />
           </SettingsToggle>
         )}
diff --git a/packages/extension-ui/src/components/InputWithLabel.tsx b/packages/extension-ui/src/components/InputWithLabel.tsx
index 1a703b4e..1a5a21a5 100644
--- a/packages/extension-ui/src/components/InputWithLabel.tsx
+++ b/packages/extension-ui/src/components/InputWithLabel.tsx
@@ -3,9 +3,9 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
+import styled from 'styled-components';
 
 import Label from './Label';
-import styled from 'styled-components';
 import { Input } from './TextInputs';
 
 interface Props {
@@ -32,14 +32,17 @@ function InputWithLabel ({ className, defaultValue, label, isFocused, isReadOnly
       label={label}
     >
       <Input
-        withError={isError}
+        autoCapitalize='off'
+        autoCorrect='off'
         autoFocus={isFocused}
         defaultValue={defaultValue || undefined}
-        readOnly={isReadOnly}
         onBlur={onBlur}
         onChange={_onChange}
+        readOnly={isReadOnly}
+        spellCheck={false}
         type={type}
         value={value}
+        withError={isError}
       />
     </Label>
   );
diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx
index 723a60d1..4f48ebe9 100644
--- a/packages/extension-ui/src/components/Menu.tsx
+++ b/packages/extension-ui/src/components/Menu.tsx
@@ -13,7 +13,10 @@ interface Props {
 
 function Menu ({ children, className, reference }: Props): React.ReactElement<Props> {
   return (
-    <div className={className} ref={reference}>
+    <div
+      className={className}
+      ref={reference}
+    >
       {children}
     </div>
   );
diff --git a/packages/extension-ui/src/components/Settings.tsx b/packages/extension-ui/src/components/Settings.tsx
index d7aedf65..6e070962 100644
--- a/packages/extension-ui/src/components/Settings.tsx
+++ b/packages/extension-ui/src/components/Settings.tsx
@@ -38,11 +38,7 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
   const setTheme = useContext(ThemeSwitchContext);
 
   useEffect(() => {
-    if (camera) {
-      settings.set({ camera: 'on' });
-    } else {
-      settings.set({ camera: 'off' });
-    }
+    settings.set({ camera: camera ? 'on' : 'off' });
   }, [camera]);
 
   // FIXME check against index, we need a better solution
@@ -55,6 +51,7 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
     settings.set({ prefix });
     location.reload();
   };
+  const _onChangeTheme = (checked: boolean): void => setTheme(checked ? 'dark' : 'light');
 
   return (
     <SettingsMenu reference={reference}>
@@ -62,17 +59,17 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
         <SettingTitle>Theme</SettingTitle>
         <Switch
           checked={themeContext.id === themes.dark.id}
-          uncheckedLabel='Light'
           checkedLabel='Dark'
-          onChange={(checked): void => setTheme(checked ? 'dark' : 'light')}
+          onChange={_onChangeTheme}
+          uncheckedLabel='Light'
         />
       </Setting>
       <Setting>
         <SettingTitle>External QR accounts and Access</SettingTitle>
         <CheckboxSetting
           checked={camera}
-          onChange={setCamera}
           label='Allow Camera Access'
+          onChange={setCamera}
         />
       </Setting>
       <Setting>
@@ -87,9 +84,9 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
       {isPopup && (
         <Setting>
           <OpenInNewWindowButton
+            icon={FullScreenIcon}
             onClick={windowOpen}
             text='Open extension in new window'
-            icon={FullScreenIcon}
           />
         </Setting>
       )}
diff --git a/packages/extension-ui/src/components/Svg.tsx b/packages/extension-ui/src/components/Svg.tsx
index aab9378c..170a0a9c 100644
--- a/packages/extension-ui/src/components/Svg.tsx
+++ b/packages/extension-ui/src/components/Svg.tsx
@@ -9,8 +9,8 @@ interface Props {
 }
 
 export default styled.span<Props>`
-    display: block;
-    mask: ${({ src }): string => `url(${src})`};
-    mask-size: cover;
-    background: ${({ theme }): string => theme.textColor}; 
+  display: block;
+  mask: ${({ src }): string => `url(${src})`};
+  mask-size: cover;
+  background: ${({ theme }): string => theme.textColor};
 `;
diff --git a/packages/extension-ui/src/components/TextAreaWithLabel.tsx b/packages/extension-ui/src/components/TextAreaWithLabel.tsx
index 9e25ac38..4affffdd 100644
--- a/packages/extension-ui/src/components/TextAreaWithLabel.tsx
+++ b/packages/extension-ui/src/components/TextAreaWithLabel.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 
 import Label from './Label';
-import { TextArea } from '@polkadot/extension-ui/components/TextInputs';
+import { TextArea } from './TextInputs';
 
 interface Props {
   className?: string;
@@ -18,7 +18,7 @@ interface Props {
   value?: string;
 }
 
-function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange, value, rowsCount, isError }: Props): React.ReactElement<Props> {
+export default function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange, value, rowsCount, isError }: Props): React.ReactElement<Props> {
   const _onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>): void => {
     onChange && onChange(value.trim());
   };
@@ -29,15 +29,16 @@ function TextAreaWithLabel ({ className, isFocused, isReadOnly, label, onChange,
       label={label}
     >
       <TextArea
-        withError={isError}
+        autoCapitalize='off'
+        autoCorrect='off'
         autoFocus={isFocused}
         onChange={_onChange}
         readOnly={isReadOnly}
-        value={value}
         rows={rowsCount || 2}
+        spellCheck={false}
+        value={value}
+        withError={isError}
       />
     </Label>
   );
 }
-
-export default TextAreaWithLabel;
diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
index 20e1289c..7c513674 100644
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@@ -13,6 +13,7 @@ interface Props {
 
 function View ({ children, className }: Props): React.ReactElement<Props> {
   const [theme, setTheme] = useState(chooseTheme());
+  const _theme = themes[theme];
 
   const switchTheme = (theme: AvailableThemes): void => {
     localStorage.setItem('theme', theme);
@@ -21,8 +22,8 @@ function View ({ children, className }: Props): React.ReactElement<Props> {
 
   return (
     <ThemeSwitchContext.Provider value={switchTheme}>
-      <ThemeProvider theme={themes[theme]}>
-        <BodyTheme theme={themes[theme]} />
+      <ThemeProvider theme={_theme}>
+        <BodyTheme theme={_theme} />
         <Main className={className}>
           {children}
         </Main>
diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx
index 6b078dfe..5a830469 100644
--- a/packages/extension-ui/src/components/Warning.tsx
+++ b/packages/extension-ui/src/components/Warning.tsx
@@ -17,7 +17,10 @@ function Warning ({ children, className, danger }: Props): React.ReactElement<Pr
   return (
     <div className={className}>
       <div>
-        <WarningImage danger={danger} src={WarningImageSrc} />
+        <WarningImage
+          danger={danger}
+          src={WarningImageSrc}
+        />
       </div>
       <div>
         {children}
@@ -30,7 +33,7 @@ const WarningImage = styled(Svg)<Pick<Props, 'danger'>>`
   width: 16px;
   height: 14px;
   margin: 5px 10px 5px 0;
-  background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};  
+  background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};
 `;
 
 export default styled(Warning)`