From c6d019fe3cda43a9734de8da5d0067039e1b555a Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 3 Apr 2020 12:20:36 +0200 Subject: [PATCH] Cleanup some UI import locations (#308) * Cleanup som UI import locations * Remove content.inject (from elsewhere) * Update index.tsx --- .../extension-ui/src/Popup/Accounts/index.tsx | 3 +- .../src/Popup/Authorize/Authorize.test.tsx | 16 +++---- .../src/Popup/Authorize/index.tsx | 7 ++-- .../CreateAccount/CreateAccount.test.tsx | 15 +++---- .../src/Popup/CreateAccount/index.tsx | 8 ++-- .../extension-ui/src/Popup/Derive/Step.tsx | 3 +- packages/extension-ui/src/Popup/Export.tsx | 3 +- packages/extension-ui/src/Popup/Forget.tsx | 7 ++-- packages/extension-ui/src/Popup/ImportQr.tsx | 4 +- .../extension-ui/src/Popup/ImportSeed.tsx | 4 +- .../extension-ui/src/Popup/Metadata/index.tsx | 3 +- .../extension-ui/src/Popup/Signing/index.tsx | 6 ++- packages/extension-ui/src/Popup/Welcome.tsx | 5 ++- .../src/components/Toast/ToastProvider.tsx | 1 + packages/extension-ui/src/components/index.ts | 4 +- packages/extension-ui/src/createView.tsx | 1 + .../{components => partials}/AddAccount.tsx | 3 +- .../AddAccountImage.tsx | 0 packages/extension-ui/src/partials/Back.tsx | 1 + .../src/partials/DerivationPath.tsx | 3 +- .../{components => partials}/Header.test.tsx | 8 ++-- .../src/{components => partials}/Header.tsx | 12 +++--- .../src/{components => partials}/Settings.tsx | 42 +++++++++---------- packages/extension-ui/src/partials/index.ts | 5 ++- 24 files changed, 93 insertions(+), 71 deletions(-) rename packages/extension-ui/src/{components => partials}/AddAccount.tsx (97%) rename packages/extension-ui/src/{components => partials}/AddAccountImage.tsx (100%) rename packages/extension-ui/src/{components => partials}/Header.test.tsx (92%) rename packages/extension-ui/src/{components => partials}/Header.tsx (92%) rename packages/extension-ui/src/{components => partials}/Settings.tsx (81%) diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx index 84a33b40..712ca33d 100644 --- a/packages/extension-ui/src/Popup/Accounts/index.tsx +++ b/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 = {}; diff --git a/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx b/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx index 0825df9b..1f021e14 100644 --- a/packages/extension-ui/src/Popup/Authorize/Authorize.test.tsx +++ b/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() }); diff --git a/packages/extension-ui/src/Popup/Authorize/index.tsx b/packages/extension-ui/src/Popup/Authorize/index.tsx index 42511857..d6811059 100644 --- a/packages/extension-ui/src/Popup/Authorize/index.tsx +++ b/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); diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx index 659dca96..25a38094 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx +++ b/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', () => { diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx index b7fd513f..1812929f 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx +++ b/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); diff --git a/packages/extension-ui/src/Popup/Derive/Step.tsx b/packages/extension-ui/src/Popup/Derive/Step.tsx index ce152007..e96c93e6 100644 --- a/packages/extension-ui/src/Popup/Derive/Step.tsx +++ b/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; diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx index 00206cde..7c0c6de2 100644 --- a/packages/extension-ui/src/Popup/Export.tsx +++ b/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; diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx index 1de00880..d6d7daf5 100644 --- a/packages/extension-ui/src/Popup/Forget.tsx +++ b/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 { diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx index 814930f1..26538a4e 100644 --- a/packages/extension-ui/src/Popup/ImportQr.tsx +++ b/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 = {}; diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx index 2b96e1e6..619759f8 100644 --- a/packages/extension-ui/src/Popup/ImportSeed.tsx +++ b/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 = {}; diff --git a/packages/extension-ui/src/Popup/Metadata/index.tsx b/packages/extension-ui/src/Popup/Metadata/index.tsx index ed28885c..d8875da3 100644 --- a/packages/extension-ui/src/Popup/Metadata/index.tsx +++ b/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<{}> { diff --git a/packages/extension-ui/src/Popup/Signing/index.tsx b/packages/extension-ui/src/Popup/Signing/index.tsx index 7fa234ec..cff4b410 100644 --- a/packages/extension-ui/src/Popup/Signing/index.tsx +++ b/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; diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx index 3494cebe..624a844b 100644 --- a/packages/extension-ui/src/Popup/Welcome.tsx +++ b/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 { diff --git a/packages/extension-ui/src/components/Toast/ToastProvider.tsx b/packages/extension-ui/src/components/Toast/ToastProvider.tsx index a41c1727..c325601e 100644 --- a/packages/extension-ui/src/components/Toast/ToastProvider.tsx +++ b/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'; diff --git a/packages/extension-ui/src/components/index.ts b/packages/extension-ui/src/components/index.ts index 8c4f00e2..aaa1df8d 100644 --- a/packages/extension-ui/src/components/index.ts +++ b/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'; diff --git a/packages/extension-ui/src/createView.tsx b/packages/extension-ui/src/createView.tsx index 8705eadd..dcae17b8 100644 --- a/packages/extension-ui/src/createView.tsx +++ b/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 { diff --git a/packages/extension-ui/src/components/AddAccount.tsx b/packages/extension-ui/src/partials/AddAccount.tsx similarity index 97% rename from packages/extension-ui/src/components/AddAccount.tsx rename to packages/extension-ui/src/partials/AddAccount.tsx index 8ab5cb58..3e939bbb 100644 --- a/packages/extension-ui/src/components/AddAccount.tsx +++ b/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'; diff --git a/packages/extension-ui/src/components/AddAccountImage.tsx b/packages/extension-ui/src/partials/AddAccountImage.tsx similarity index 100% rename from packages/extension-ui/src/components/AddAccountImage.tsx rename to packages/extension-ui/src/partials/AddAccountImage.tsx diff --git a/packages/extension-ui/src/partials/Back.tsx b/packages/extension-ui/src/partials/Back.tsx index 14cade8c..770d1e56 100644 --- a/packages/extension-ui/src/partials/Back.tsx +++ b/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'; diff --git a/packages/extension-ui/src/partials/DerivationPath.tsx b/packages/extension-ui/src/partials/DerivationPath.tsx index 0c269f7b..dc680bd6 100644 --- a/packages/extension-ui/src/partials/DerivationPath.tsx +++ b/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 { diff --git a/packages/extension-ui/src/components/Header.test.tsx b/packages/extension-ui/src/partials/Header.test.tsx similarity index 92% rename from packages/extension-ui/src/components/Header.test.tsx rename to packages/extension-ui/src/partials/Header.test.tsx index cda7a664..0e4952c0 100644 --- a/packages/extension-ui/src/components/Header.test.tsx +++ b/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', () => { diff --git a/packages/extension-ui/src/components/Header.tsx b/packages/extension-ui/src/partials/Header.tsx similarity index 92% rename from packages/extension-ui/src/components/Header.tsx rename to packages/extension-ui/src/partials/Header.tsx index 39b7fa5f..86b858d5 100644 --- a/packages/extension-ui/src/components/Header.tsx +++ b/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 (
@@ -35,7 +37,7 @@ function Header ({ children, className, showBackArrow, showSettings, text }: Pro {showBackArrow ? ( - + ) diff --git a/packages/extension-ui/src/components/Settings.tsx b/packages/extension-ui/src/partials/Settings.tsx similarity index 81% rename from packages/extension-ui/src/components/Settings.tsx rename to packages/extension-ui/src/partials/Settings.tsx index 25e0a82d..acbd459d 100644 --- a/packages/extension-ui/src/components/Settings.tsx +++ b/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 }): 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 ( diff --git a/packages/extension-ui/src/partials/index.ts b/packages/extension-ui/src/partials/index.ts index 633415ed..65e699d9 100644 --- a/packages/extension-ui/src/partials/index.ts +++ b/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';