diff --git a/packages/extension-ui/src/Popup/Accounts/Account.test.tsx b/packages/extension-ui/src/Popup/Accounts/Account.test.tsx index 584ceb3a..f6931077 100644 --- a/packages/extension-ui/src/Popup/Accounts/Account.test.tsx +++ b/packages/extension-ui/src/Popup/Accounts/Account.test.tsx @@ -6,13 +6,13 @@ import '../../../../../__mocks__/chrome'; import Adapter from 'enzyme-adapter-react-16'; import { configure, mount, ReactWrapper } from 'enzyme'; -import { themes, Theme } from '@polkadot/extension-ui/components'; import { MemoryRouter } from 'react-router'; import React from 'react'; - -import Account from './Account'; import { ThemeProvider } from 'styled-components'; +import { themes, Theme } from '../../components'; +import Account from './Account'; + configure({ adapter: new Adapter() }); describe('Account component', () => { diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx index 9db90d9d..e04cd450 100644 --- a/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx +++ b/packages/extension-ui/src/Popup/CreateAccount/CreateAccount.test.tsx @@ -146,7 +146,7 @@ describe('Create Account', () => { it('saves account with provided name and password', async () => { await enterName('abc').then(password('abcdef')).then(repeat('abcdef')); - wrapper.find(Button).find('button').simulate('click'); + wrapper.find('[data-button-action="add new root"] button').simulate('click'); await act(flushAllPromises); expect(messaging.createAccountSuri).toBeCalledWith('abc', 'abcdef', exampleAccount.seed); diff --git a/packages/extension-ui/src/Popup/Derive/Derive.test.tsx b/packages/extension-ui/src/Popup/Derive/Derive.test.tsx index c9e42b53..2c140cae 100644 --- a/packages/extension-ui/src/Popup/Derive/Derive.test.tsx +++ b/packages/extension-ui/src/Popup/Derive/Derive.test.tsx @@ -10,10 +10,10 @@ import { configure, mount, ReactWrapper } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import { act } from 'react-dom/test-utils'; import { ThemeProvider } from 'styled-components'; -import * as messaging from '@polkadot/extension-ui/messaging'; import { AccountContext, ActionContext, themes } from '../../components'; -import { buildHierarchy } from '../../utils/buildHierarchy'; +import * as messaging from '../../messaging'; +import { buildHierarchy } from '../../util/buildHierarchy'; import { flushAllPromises } from '../../testHelpers'; import AddressDropdown from './AddressDropdown'; import Derive from '.'; diff --git a/packages/extension-ui/src/Popup/Derive/SelectParent.tsx b/packages/extension-ui/src/Popup/Derive/SelectParent.tsx index ca06212d..cebc1f38 100644 --- a/packages/extension-ui/src/Popup/Derive/SelectParent.tsx +++ b/packages/extension-ui/src/Popup/Derive/SelectParent.tsx @@ -8,7 +8,7 @@ import styled from 'styled-components'; import { AccountContext, ActionContext, Address, ButtonArea, Checkbox, InputWithLabel, Label, NextStepButton, VerticalSpace } from '../../components'; import { validateAccount } from '../../messaging'; import { DerivationPath } from '../../partials'; -import { nextDerivationPath } from '../../utils/nextDerivationPath'; +import { nextDerivationPath } from '../../util/nextDerivationPath'; import AddressDropdown from './AddressDropdown'; interface Props { diff --git a/packages/extension-ui/src/Popup/Export.test.tsx b/packages/extension-ui/src/Popup/Export.test.tsx index f4cb0280..efc90b93 100644 --- a/packages/extension-ui/src/Popup/Export.test.tsx +++ b/packages/extension-ui/src/Popup/Export.test.tsx @@ -9,13 +9,12 @@ import Adapter from 'enzyme-adapter-react-16'; import { configure, mount, ReactWrapper } from 'enzyme'; import { MemoryRouter, Route } from 'react-router'; import React from 'react'; -import * as messaging from '@polkadot/extension-ui/messaging'; +import { ThemeProvider } from 'styled-components'; import { Button, themes } from '../components'; import Export from './Export'; -import { exportAccount } from '../messaging'; -import { ThemeProvider } from 'styled-components'; -import { flushAllPromises } from '@polkadot/extension-ui/testHelpers'; +import * as messaging from '../messaging'; +import { flushAllPromises } from '../testHelpers'; configure({ adapter: new Adapter() }); @@ -45,7 +44,7 @@ describe('Export component', () => { wrapper.find('[data-export-button] button').simulate('click'); await act(flushAllPromises); - expect(exportAccount).toHaveBeenCalledWith(VALID_ADDRESS, 'passw0rd'); + expect(messaging.exportAccount).toHaveBeenCalledWith(VALID_ADDRESS, 'passw0rd'); }); it('button is disabled before any password is typed', () => { diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx index 841ab767..1016aa6d 100644 --- a/packages/extension-ui/src/Popup/ImportSeed.tsx +++ b/packages/extension-ui/src/Popup/ImportSeed.tsx @@ -5,11 +5,11 @@ import React, { useCallback, useContext, useState } from 'react'; import styled from 'styled-components'; +import upload from '../assets/file-upload.svg'; import { ActionContext, Address, ButtonArea, NextStepButton, TextAreaWithLabel, ValidatedInput, VerticalSpace, ActionText } from '../components'; -import { allOf, isNotShorterThan, Result } from '../validators'; import { createAccountSuri, validateSeed, jsonRestoreWindowOpen } from '../messaging'; import { Header, Name, Password } from '../partials'; -import upload from '../assets/file-upload.svg'; +import { allOf, isNotShorterThan, Result } from '../util/validators'; async function validate (suri: string): Promise> { try { diff --git a/packages/extension-ui/src/Popup/Signing/Signing.test.tsx b/packages/extension-ui/src/Popup/Signing/Signing.test.tsx index 1194366d..4f1d588a 100644 --- a/packages/extension-ui/src/Popup/Signing/Signing.test.tsx +++ b/packages/extension-ui/src/Popup/Signing/Signing.test.tsx @@ -4,22 +4,23 @@ import '../../../../../__mocks__/chrome'; -import React, { useState } from 'react'; -import Adapter from 'enzyme-adapter-react-16'; - -import { configure, mount, ReactWrapper } from 'enzyme'; -import { act } from 'react-dom/test-utils'; -import * as messaging from '@polkadot/extension-ui/messaging'; import { SigningRequest } from '@polkadot/extension-base/background/types'; -import { flushAllPromises } from '@polkadot/extension-ui/testHelpers'; -import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '@polkadot/extension-ui/components'; + +import Adapter from 'enzyme-adapter-react-16'; +import { configure, mount, ReactWrapper } from 'enzyme'; +import { EventEmitter } from 'events'; +import React, { useState } from 'react'; +import { act } from 'react-dom/test-utils'; import { ThemeProvider } from 'styled-components'; -import Signing from '.'; + +import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '../../components'; +import * as messaging from '../../messaging'; +import { flushAllPromises } from '../../testHelpers'; import TransactionIndex from './TransactionIndex'; import Request from './Request'; import Extrinsic from './Extrinsic'; import Qr from './Qr'; -import { EventEmitter } from 'events'; +import Signing from '.'; configure({ adapter: new Adapter() }); diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 9e5e4517..1c6e8d1d 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -14,7 +14,7 @@ import { Loading } from '../components'; import { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext } from '../components/contexts'; import ToastProvider from '../components/Toast/ToastProvider'; import { subscribeAccounts, subscribeAuthorizeRequests, subscribeMetadataRequests, subscribeSigningRequests } from '../messaging'; -import { buildHierarchy } from '../utils/buildHierarchy'; +import { buildHierarchy } from '../util/buildHierarchy'; import Accounts from './Accounts'; import Authorize from './Authorize'; import CreateAccount from './CreateAccount'; diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx index 7c000641..73f2e590 100644 --- a/packages/extension-ui/src/components/ActionText.tsx +++ b/packages/extension-ui/src/components/ActionText.tsx @@ -5,9 +5,10 @@ import { ThemeProps } from '../types'; import React, { MouseEventHandler } from 'react'; -import Svg from '@polkadot/extension-ui/components/Svg'; import styled from 'styled-components'; +import Svg from './Svg'; + interface Props { className?: string; icon?: string; diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx index a086c6a3..41d78505 100644 --- a/packages/extension-ui/src/components/Address.tsx +++ b/packages/extension-ui/src/components/Address.tsx @@ -238,11 +238,11 @@ const ActiveActionsIcon = styled(Svg).attrs(() => ({ src: details }))` `; const ArrowLabel = styled(Svg).attrs(() => ({ src: parentArrow }))` + background: ${({ theme }: ThemeProps): string => theme.labelColor}; position: absolute; top: 5px; width: 9px; height: 9px; - background: ${({ theme }: ThemeProps): string => theme.labelColor}; `; const MovableMenu = styled(Menu)<{ isMoved: boolean }>` @@ -250,17 +250,14 @@ const MovableMenu = styled(Menu)<{ isMoved: boolean }>` `; export default styled(Address)(({ theme }: ThemeProps) => ` - position: relative; - margin-bottom: 8px; - background: ${theme.accountBackground}; border: 1px solid ${theme.boxBorderColor}; box-sizing: border-box; border-radius: 4px; + margin-bottom: 8px; + position: relative; .banner { - border-radius: 0 0 8px 8px; - color: white; font-size: 12px; line-height: 16px; position: absolute; @@ -268,8 +265,11 @@ export default styled(Address)(({ theme }: ThemeProps) => ` &.chain { background: ${theme.primaryColor}; - padding: 0.1rem 0.5rem; - right: 40px; + border-radius: 0 0 0 10px; + color: white; + padding: 0.1rem 0.5rem 0.1rem 0.75rem; + right: 0; + z-index: 1; } } diff --git a/packages/extension-ui/src/components/BackButton.tsx b/packages/extension-ui/src/components/BackButton.tsx index 436517d0..25f9b51b 100644 --- a/packages/extension-ui/src/components/BackButton.tsx +++ b/packages/extension-ui/src/components/BackButton.tsx @@ -12,27 +12,34 @@ import Button from './Button'; import Svg from './Svg'; interface Props { + className?: string; onClick: () => void; } -export default function BackButton ({ onClick }: Props): React.ReactElement { +function BackButton ({ className, onClick }: Props): React.ReactElement { return ( - - - + ); } -const SmallButton = styled(Button)` +export default styled(BackButton)(({ theme }: ThemeProps) => ` + background: ${theme.backButtonBackground}; margin-right: 11px; width: 42px; - background: ${({ theme }: ThemeProps): string => theme.backButtonBackground}; -`; -const ArrowLeft = styled(Svg).attrs(() => ({ src: arrowLeft }))` - width: 12px; - height: 12px; - display: block; - margin: auto; - background: ${({ theme }: ThemeProps): string => theme.backButtonTextColor}; -`; + > .arrowLeft { + background: ${theme.backButtonTextColor}; + display: block; + height: 12px; + margin: auto; + width: 12px; + } +`); diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx index 62e0b76c..fe7d3fde 100644 --- a/packages/extension-ui/src/components/Menu.tsx +++ b/packages/extension-ui/src/components/Menu.tsx @@ -25,14 +25,14 @@ function Menu ({ children, className, reference }: Props): React.ReactElement ` - position: absolute; - right: 0; - margin-top: 90px; - padding: 16px 0; background: ${theme.popupBackground}; border-radius: 4px; border: 1px solid ${theme.boxBorderColor}; box-sizing: border-box; box-shadow: 0 0 32px ${theme.boxShadow}; - z-index: 1; + margin-top: 90px; + padding: 16px 0; + position: absolute; + right: 0; + z-index: 2; `); diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx index ef0b8a03..6d11da83 100644 --- a/packages/extension-ui/src/components/MnemonicSeed.tsx +++ b/packages/extension-ui/src/components/MnemonicSeed.tsx @@ -4,11 +4,12 @@ import { ThemeProps } from '../types'; -import styled from 'styled-components'; import React, { MouseEventHandler } from 'react'; -import TextAreaWithLabel from './TextAreaWithLabel'; -import ActionText from '@polkadot/extension-ui/components/ActionText'; +import styled from 'styled-components'; + import copy from '../assets/copy.svg'; +import ActionText from './ActionText'; +import TextAreaWithLabel from './TextAreaWithLabel'; interface Props { seed: string; @@ -19,9 +20,15 @@ interface Props { function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement { return (
- +
({ - isReadOnly: true, - label: 'Generated 12-word mnemonic seed:' -}))` - textarea { - font-size: ${({ theme }: ThemeProps): string => theme.fontSize}; - line-height: ${({ theme }: ThemeProps): string => theme.lineHeight}; - height: unset; - letter-spacing: -0.01em; - padding: 14px; - margin-bottom: 10px; - color: ${({ theme }: ThemeProps): string => theme.primaryColor}; - } -`; - -export default styled(MnemonicSeed)` +export default styled(MnemonicSeed)(({ theme }: ThemeProps) => ` margin-top: 21px; .buttonsRow { display: flex; flex-direction: row; - ${ActionText} { + .copyBtn { margin-right: 32px; } } -`; + + .mnemonicDisplay { + textarea { + color: ${theme.primaryColor}; + font-size: ${theme.fontSize}; + height: unset; + letter-spacing: -0.01em; + line-height: ${theme.lineHeight}; + margin-bottom: 10px; + padding: 14px; + } + } +`); diff --git a/packages/extension-ui/src/components/ValidatedInput.tsx b/packages/extension-ui/src/components/ValidatedInput.tsx index 3f330a2d..32a0d8e9 100644 --- a/packages/extension-ui/src/components/ValidatedInput.tsx +++ b/packages/extension-ui/src/components/ValidatedInput.tsx @@ -7,7 +7,7 @@ import { ThemeProps } from '../types'; import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; -import { Result, Validator } from '../validators'; +import { Result, Validator } from '../util/validators'; interface BasicProps { isError?: boolean; diff --git a/packages/extension-ui/src/partials/DerivationPath.tsx b/packages/extension-ui/src/partials/DerivationPath.tsx index 848ff4a5..8a316099 100644 --- a/packages/extension-ui/src/partials/DerivationPath.tsx +++ b/packages/extension-ui/src/partials/DerivationPath.tsx @@ -7,11 +7,11 @@ import { ThemeProps } from '../types'; import React, { useCallback, useState } from 'react'; import styled from 'styled-components'; -import { InputWithLabel, Svg, ValidatedInput, Button } from '../components'; -import { validateDerivationPath } from '../messaging'; -import { Result } from '../validators'; import lockIcon from '../assets/lock.svg'; import unlockIcon from '../assets/unlock.svg'; +import { InputWithLabel, Svg, ValidatedInput, Button } from '../components'; +import { validateDerivationPath } from '../messaging'; +import { Result } from '../util/validators'; interface Props { className?: string; diff --git a/packages/extension-ui/src/partials/Name.tsx b/packages/extension-ui/src/partials/Name.tsx index 8d869011..4840f968 100644 --- a/packages/extension-ui/src/partials/Name.tsx +++ b/packages/extension-ui/src/partials/Name.tsx @@ -5,7 +5,7 @@ import React, { useContext } from 'react'; import { AccountContext, InputWithLabel, ValidatedInput } from '../components'; -import { isNotShorterThan } from '../validators'; +import { isNotShorterThan } from '../util/validators'; interface Props { address?: string; diff --git a/packages/extension-ui/src/partials/Password.tsx b/packages/extension-ui/src/partials/Password.tsx index 32dab72a..64c5a7bc 100644 --- a/packages/extension-ui/src/partials/Password.tsx +++ b/packages/extension-ui/src/partials/Password.tsx @@ -5,7 +5,7 @@ import React, { useState, useEffect } from 'react'; import { InputWithLabel, ValidatedInput } from '../components'; -import { allOf, isNotShorterThan, isSameAs, Validator } from '../validators'; +import { allOf, isNotShorterThan, isSameAs, Validator } from '../util/validators'; interface Props { isFocussed?: boolean; diff --git a/packages/extension-ui/src/utils/buildHierarchy.test.ts b/packages/extension-ui/src/util/buildHierarchy.test.ts similarity index 100% rename from packages/extension-ui/src/utils/buildHierarchy.test.ts rename to packages/extension-ui/src/util/buildHierarchy.test.ts diff --git a/packages/extension-ui/src/utils/buildHierarchy.ts b/packages/extension-ui/src/util/buildHierarchy.ts similarity index 100% rename from packages/extension-ui/src/utils/buildHierarchy.ts rename to packages/extension-ui/src/util/buildHierarchy.ts diff --git a/packages/extension-ui/src/utils/nextDerivationPath.test.ts b/packages/extension-ui/src/util/nextDerivationPath.test.ts similarity index 100% rename from packages/extension-ui/src/utils/nextDerivationPath.test.ts rename to packages/extension-ui/src/util/nextDerivationPath.test.ts diff --git a/packages/extension-ui/src/utils/nextDerivationPath.ts b/packages/extension-ui/src/util/nextDerivationPath.ts similarity index 100% rename from packages/extension-ui/src/utils/nextDerivationPath.ts rename to packages/extension-ui/src/util/nextDerivationPath.ts diff --git a/packages/extension-ui/src/validators.ts b/packages/extension-ui/src/util/validators.ts similarity index 100% rename from packages/extension-ui/src/validators.ts rename to packages/extension-ui/src/util/validators.ts