Cleanup some UI import locations (#308)

* Cleanup som UI import locations

* Remove content.inject (from elsewhere)

* Update index.tsx

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

@@ -6,8 +6,9 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import QrImage from '../../assets/qr.svg';
+import { AccountContext, Button, ButtonArea, ButtonWithSubtitle, MediaContext, Svg } from '../../components';
+import { AddAccount, Header } from '../../partials';
 import AccountsTree from './AccountsTree';
-import { AccountContext, Button, Header, MediaContext, AddAccount, ButtonArea, Svg, ButtonWithSubtitle } from '../../components';
 
 type Props = {};
 

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

@@ -2,14 +2,16 @@
 // 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 Adapter from 'enzyme-adapter-react-16';
-
-import { ThemeProvider } from 'styled-components';
-import { AuthorizeReqContext, themes, Header, Icon } from '@polkadot/extension-ui/components';
-import Authorize from '.';
-import { configure, mount, ReactWrapper } from 'enzyme';
 import { AuthorizeRequest } from '@polkadot/extension-base/background/types';
+
+import { configure, mount, ReactWrapper } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import { AuthorizeReqContext, themes, Icon } from '../../components';
+import { Header } from '../../partials';
+import Authorize from '.';
 import Request from './Request';
 
 configure({ adapter: new Adapter() });

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

@@ -3,11 +3,12 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useContext } from 'react';
-
-import { AuthorizeReqContext, Header } from '../../components';
-import Request from './Request';
 import styled from 'styled-components';
 
+import { AuthorizeReqContext } from '../../components';
+import { Header } from '../../partials';
+import Request from './Request';
+
 export default function Authorize (): React.ReactElement<{}> {
   const requests = useContext(AuthorizeReqContext);
 

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

@@ -2,17 +2,18 @@
 // 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 Adapter from 'enzyme-adapter-react-16';
-
-import CreateAccount from '.';
 import { configure, mount, ReactWrapper } from 'enzyme';
-import * as messaging from '@polkadot/extension-ui/messaging';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { flushAllPromises } from '@polkadot/extension-ui/testHelpers';
-import { ActionContext, ActionText, Button, themes, Input, InputWithLabel, Header } from '@polkadot/extension-ui/components';
 import { ThemeProvider } from 'styled-components';
 
+import { ActionContext, ActionText, Button, themes, Input, InputWithLabel } from '../../components';
+import * as messaging from '../../messaging';
+import { Header } from '../../partials';
+import { flushAllPromises } from '../../testHelpers';
+import CreateAccount from '.';
+
 configure({ adapter: new Adapter() });
 
 describe('Create Account', () => {

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

@@ -4,10 +4,12 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { ActionContext, Header, Loading, ActionText } from '../../components';
+
+import { ActionContext, Loading, ActionText } from '../../components';
 import { createAccountSuri, createSeed } from '../../messaging';
-import Mnemonic from '@polkadot/extension-ui/Popup/CreateAccount/Mnemonic';
-import AccountName from '@polkadot/extension-ui/Popup/CreateAccount/AccountName';
+import { Header } from '../../partials';
+import AccountName from './AccountName';
+import Mnemonic from './Mnemonic';
 
 export default function CreateAccount (): React.ReactElement {
   const onAction = useContext(ActionContext);

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

@@ -4,7 +4,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Header } from '@polkadot/extension-ui/components';
+
+import { Header } from '../../partials';
 
 interface Props {
   className?: string;

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

@@ -5,8 +5,9 @@
 import React, { useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { ActionContext, Address, Button, InputWithLabel, Warning, Header, ActionText, ActionBar } from '../components';
+import { ActionContext, Address, Button, InputWithLabel, Warning, ActionText, ActionBar } from '../components';
 import { exportAccount } from '../messaging';
+import { Header } from '../partials';
 import styled from 'styled-components';
 
 const MIN_LENGTH = 6;

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

@@ -4,11 +4,12 @@
 
 import React, { useContext } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { ActionContext, Address, Button, Warning, Header, ActionBar, ActionText } from '../components';
-
-import { forgetAccount } from '../messaging';
 import styled from 'styled-components';
 
+import { ActionContext, Address, Button, Warning, ActionBar, ActionText } from '../components';
+import { forgetAccount } from '../messaging';
+import { Header } from '../partials';
+
 type Props = RouteComponentProps<{ address: string }>;
 
 function Forget ({ match: { params: { address } } }: Props): React.ReactElement<Props> {

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

@@ -5,9 +5,9 @@
 import React, { useContext, useState } from 'react';
 import { QrScanAddress } from '@polkadot/react-qr';
 
-import { ActionContext, Address, Button, ButtonArea, Header, VerticalSpace } from '../components';
+import { ActionContext, Address, Button, ButtonArea, VerticalSpace } from '../components';
 import { createAccountExternal } from '../messaging';
-import { Name } from '../partials';
+import { Header, Name } from '../partials';
 
 type Props = {};
 

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

@@ -5,9 +5,9 @@
 import React, { useCallback, useContext, useState } from 'react';
 import styled from 'styled-components';
 
-import { ActionContext, Address, Button, ButtonArea, Header, TextAreaWithLabel, ValidatedInput, VerticalSpace } from '../components';
+import { ActionContext, Address, Button, ButtonArea, TextAreaWithLabel, ValidatedInput, VerticalSpace } from '../components';
 import { createAccountSuri, validateSeed } from '../messaging';
-import { Name, Password } from '../partials';
+import { Header, Name, Password } from '../partials';
 import { allOf, isNotShorterThan, Result } from '../validators';
 
 type Props = {};

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

@@ -4,7 +4,8 @@
 
 import React, { useContext } from 'react';
 
-import { Header, Loading, MetadataReqContext } from '../../components';
+import { Loading, MetadataReqContext } from '../../components';
+import { Header } from '../../partials';
 import Request from './Request';
 
 export default function Metadata (): React.ReactElement<{}> {

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

@@ -2,12 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { SigningRequest } from '@polkadot/extension-base/background/types';
+
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 
-import { Header, Loading, SigningReqContext } from '../../components';
+import { Loading, SigningReqContext } from '../../components';
+import { Header } from '../../partials';
 import Request from './Request';
 import TransactionIndex from './TransactionIndex';
-import { SigningRequest } from '@polkadot/extension-base/background/types';
 
 function isInnerTransaction (signingRequest: SigningRequest): boolean {
   return 'blockNumber' in signingRequest.request.inner;

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

@@ -3,10 +3,11 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useContext } from 'react';
-
-import { ActionContext, Box, Button, ButtonArea, Header, List, VerticalSpace } from '../components';
 import styled from 'styled-components';
 
+import { ActionContext, Box, Button, ButtonArea, List, VerticalSpace } from '../components';
+import { Header } from '../partials';
+
 type Props = {};
 
 export default function Welcome (): React.ReactElement<Props> {

packages/extension-ui/src/components/Toast/ToastProvider.tsx

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useCallback, useState } from 'react';
+
 import { ToastContext } from '..';
 import Toast from './Toast';
 

packages/extension-ui/src/components/index.ts

@@ -4,7 +4,6 @@
 
 export { default as ActionBar } from './ActionBar';
 export { default as ActionText } from './ActionText';
-export { default as AddAccount } from './AddAccount';
 export { default as Address } from './Address';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
@@ -13,7 +12,6 @@ export { default as ButtonWithSubtitle } from './ButtonWithSubtitle';
 export { default as Checkbox } from './Checkbox';
 export { default as Dropdown } from './Dropdown';
 export { default as Fonts } from './Fonts';
-export { default as Header } from './Header';
 export { default as Icon } from './Icon';
 export { default as Identicon } from './Identicon';
 export { default as InputWithLabel } from './InputWithLabel';
@@ -22,8 +20,8 @@ export { default as List } from './List';
 export { default as Loading } from './Loading';
 export { default as Menu } from './Menu';
 export { default as MnemonicSeed } from './MnemonicSeed';
-export { default as Settings } from './Settings';
 export { default as Svg } from './Svg';
+export { default as Switch } from './Switch';
 export { default as Table } from './Table';
 export { default as TextAreaWithLabel } from './TextAreaWithLabel';
 export { default as Title } from './Title';

packages/extension-ui/src/createView.tsx

@@ -5,6 +5,7 @@
 import React, { Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter } from 'react-router-dom';
+
 import { Fonts, View } from './components';
 
 export default function createView (Entry: React.ComponentType, rootId = 'root'): void {

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

@@ -4,7 +4,8 @@
 
 import React, { useCallback, useContext } from 'react';
 import styled from 'styled-components';
-import { ActionContext } from './contexts';
+
+import { ActionContext } from '../components';
 import AddAccountImage from './AddAccountImage';
 import Header from './Header';
 

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

@@ -4,6 +4,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+
 import ArrowLeftImage from '../assets/arrowLeft.svg';
 import { Link, Svg } from '../components';
 

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

@@ -3,8 +3,9 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useCallback, useState } from 'react';
-import { validateDerivationPath } from '@polkadot/extension-ui/messaging';
+
 import { InputWithLabel, ValidatedInput } from '../components';
+import { validateDerivationPath } from '../messaging';
 import { Result } from '../validators';
 
 interface Props {

packages/extension-ui/src/partials/Header.test.tsx

@@ -4,12 +4,14 @@
 
 import Adapter from 'enzyme-adapter-react-16';
 import { configure, mount, ReactWrapper } from 'enzyme';
-import { themes, Header, Settings } from '@polkadot/extension-ui/components';
-import { MemoryRouter } from 'react-router';
 import React from 'react';
-
+import { MemoryRouter } from 'react-router';
 import { ThemeProvider } from 'styled-components';
 
+import { themes } from '../components';
+import Header from './Header';
+import Settings from './Settings';
+
 configure({ adapter: new Adapter() });
 
 describe('Header component', () => {

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

@@ -2,16 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import ArrowLeftImage from '../assets/arrowLeft.svg';
 import logo from '../assets/pjs.svg';
 import gear from '../assets/gear.svg';
+import { Link, Svg } from '../components';
 import useOutsideClick from '../hooks/useOutsideClick';
-import Link from './Link';
 import Settings from './Settings';
-import Svg from './Svg';
 
 interface Props {
   children?: React.ReactNode;
@@ -27,7 +26,10 @@ function Header ({ children, className, showBackArrow, showSettings, text }: Pro
 
   useOutsideClick(actionsRef, () => (showActionsMenu && setShowActionsMenu(!showActionsMenu)));
 
-  const _toggleSettings = (): void => setShowActionsMenu(!showActionsMenu);
+  const _toggleSettings = useCallback(
+    (): void => setShowActionsMenu((showActionsMenu) => !showActionsMenu),
+    []
+  );
 
   return (
     <div className={className}>
@@ -35,7 +37,7 @@ function Header ({ children, className, showBackArrow, showSettings, text }: Pro
         <Branding>
           {showBackArrow
             ? (
-              <BackLink to={'/'}>
+              <BackLink to='/'>
                 <ArrowLeft/>
               </BackLink>
             )

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

@@ -2,21 +2,14 @@
 // 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, useState, useEffect } from 'react';
-import Menu from './Menu';
-import Title from './Title';
-import Checkbox from './Checkbox';
-import ActionText from './ActionText';
-import Svg from './Svg';
-import Switch from './Switch';
-import { themes } from './themes';
-import { ThemeSwitchContext } from './contexts';
+import React, { useCallback, useContext, useState, useEffect } from 'react';
+import styled, { ThemeContext } from 'styled-components';
 import { setSS58Format } from '@polkadot/util-crypto';
 import settings from '@polkadot/ui-settings';
-import styled, { ThemeContext } from 'styled-components';
-import Dropdown from './Dropdown';
-import { windowOpen } from '../messaging';
+
 import FullScreenIcon from '../assets/fullscreen.svg';
+import { ActionText, Checkbox, Dropdown, Menu, Svg, Switch, ThemeSwitchContext, Title, themes } from '../components';
+import { windowOpen } from '../messaging';
 
 interface Option {
   text: string;
@@ -31,7 +24,6 @@ const prefixOptions = settings.availablePrefixes.map(({ text, value }): Option =
   value: `${value}`
 }));
 
-// FIXME This does not belong in components, this is actual functionality
 export default function Settings ({ reference }: { reference: React.MutableRefObject<null> }): React.ReactElement {
   const [camera, setCamera] = useState(settings.camera === 'on');
   const [prefix, setPrefix] = useState(`${settings.prefix}`);
@@ -43,19 +35,25 @@ export default function Settings ({ reference }: { reference: React.MutableRefOb
   }, [camera]);
 
   // FIXME check against index, we need a better solution
-  const _onChangePrefix = (value: string): void => {
-    const prefix = parseInt(value, 10);
+  const _onChangePrefix = useCallback(
+    (value: string): void => {
+      const prefix = parseInt(value, 10);
 
-    setSS58Format(prefix === -1 ? 42 : prefix);
-    setPrefix(value);
+      setSS58Format(prefix === -1 ? 42 : prefix);
+      setPrefix(value);
 
-    settings.set({ prefix });
+      settings.set({ prefix });
 
-    // FIXME We don't want to reload here
-    location.reload();
-  };
+      // FIXME We don't want to reload here
+      location.reload();
+    },
+    []
+  );
 
-  const _onChangeTheme = (checked: boolean): void => setTheme(checked ? 'dark' : 'light');
+  const _onChangeTheme = useCallback(
+    (checked: boolean): void => setTheme(checked ? 'dark' : 'light'),
+    [setTheme]
+  );
 
   return (
     <SettingsMenu reference={reference}>

packages/extension-ui/src/partials/index.ts

@@ -2,7 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+export { default as AddAccount } from './AddAccount';
 export { default as Back } from './Back';
+export { default as DerivationPath } from './DerivationPath';
+export { default as Header } from './Header';
 export { default as Name } from './Name';
 export { default as Password } from './Password';
-export { default as DerivationPath } from './DerivationPath';
+export { default as Settings } from './Settings';