Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code style polishing #34

Merged
merged 1 commit into from
Nov 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/extension-ui/src/Popup/Accounts/Account.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ describe('Account component', () => {
<MemoryRouter>
<ThemeProvider theme={theme}>
<Account
{...{ address: VALID_ADDRESS, ...additionalAccountProperties }}>
{...{ address: VALID_ADDRESS, ...additionalAccountProperties }}
>
</Account>
</ThemeProvider>
</MemoryRouter>);
Expand Down
54 changes: 28 additions & 26 deletions packages/extension-ui/src/Popup/Accounts/Account.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,34 @@ function Account ({ address, className, isExternal }: Props): React.ReactElement
_toggleEdit();
};

return <div className={className}>
<Address
address={address}
name={editedName}
actions={
<>
<MenuGroup>
<MenuItem onClick={_toggleEdit}>Rename</MenuItem>
</MenuGroup>
{!isExternal && <MenuItem isDanger to={`/account/export/${address}`}>Export Account</MenuItem>}
<MenuItem isDanger to={`/account/forget/${address}`}>Forget Account</MenuItem>
</>
}
>
{isEditing && (
<Name
address={address}
className='edit-name'
isFocussed
label={' '}
onBlur={_saveChanges}
onChange={setName}
/>
)}
</Address>
</div>;
return (
<div className={className}>
<Address
address={address}
name={editedName}
actions={(
<>
<MenuGroup>
<MenuItem onClick={_toggleEdit}>Rename</MenuItem>
</MenuGroup>
{!isExternal && <MenuItem isDanger to={`/account/export/${address}`}>Export Account</MenuItem>}
<MenuItem isDanger to={`/account/forget/${address}`}>Forget Account</MenuItem>
</>
)}
>
{isEditing && (
<Name
address={address}
className='edit-name'
isFocussed
label={' '}
onBlur={_saveChanges}
onChange={setName}
/>
)}
</Address>
</div>
);
}

const MenuGroup = styled.div`
Expand Down
21 changes: 15 additions & 6 deletions packages/extension-ui/src/Popup/Accounts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ export default function Accounts (): React.ReactElement<Props> {
const mediaAllowed = useContext(MediaContext);
return (
<>
<Header showSettings/>
<Header showSettings />
{
(accounts.length === 0)
? <AddAccount/>
? <AddAccount />
: (
<AccountsArea>
<>
Expand All @@ -39,18 +39,27 @@ export default function Accounts (): React.ReactElement<Props> {
<Account
{...json}
key={`${index}:${json.address}`}
/>))
/>
))
}
</>
</AccountsArea>
)
}
<ButtonArea>
<ButtonWithSubtitle to='/account/create' title='Create New Account' subTitle='With new seed'/>
<ButtonWithSubtitle to='/account/import-seed' title='Import an Account' subTitle='I have a pre-existing seed'/>
<ButtonWithSubtitle
to='/account/create'
title='Create New Account'
subTitle='With new seed'
/>
<ButtonWithSubtitle
to='/account/import-seed'
title='Import an Account'
subTitle='I have a pre-existing seed'
/>
{mediaAllowed && (
<QrButton to='/account/import-qr'>
<Svg src={QrImage}/>
<Svg src={QrImage} />
</QrButton>
)}
</ButtonArea>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('Authorize', () => {
const mountAuthorize = (authorizeRequests: AuthorizeRequest[] = []): ReactWrapper => mount(
<AuthorizeContext.Provider value={authorizeRequests}>
<ThemeProvider theme={defaultTheme}>
<Authorize/>
<Authorize />
</ThemeProvider>
</AuthorizeContext.Provider>);

Expand Down
11 changes: 10 additions & 1 deletion packages/extension-ui/src/Popup/Authorize/Request.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,16 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
<RequestInfo>
<Info>
<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"><span className='tab-url'>{url}</span></a>.</div>
<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"
>
<span className='tab-url'>{url}</span>
</a>.
</div>
</Info>
{isFirst && (
<>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-ui/src/Popup/Authorize/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function Authorize (): React.ReactElement<{}> {
url={url}
/>
))}
<VerticalSpace/>
<VerticalSpace />
</div>
);
}
46 changes: 24 additions & 22 deletions packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 +15,31 @@ function AccountName ({ onCreate, address }: Props): React.ReactElement<Props> {
const [name, setName] = useState<string | null>(null);
const [password, setPassword] = useState<string | null>(null);

return <>
<Name
isFocussed
onChange={setName}
/>
{name && <Password onChange={setPassword} />}
{name && password && (
<>
<Address
address={address}
name={name}
/>
<VerticalSpace/>
<ButtonArea>
<Button
onClick={(): void | Promise<void | boolean> => onCreate(name, password)}
>
return (
<>
<Name
isFocussed
onChange={setName}
/>
{name && <Password onChange={setPassword} />}
{name && password && (
<>
<Address
address={address}
name={name}
/>
<VerticalSpace />
<ButtonArea>
<Button
onClick={(): void | Promise<void | boolean> => onCreate(name, password)}
>
Add the account with the generated seed
</Button>
</ButtonArea>
</>
)}
</>;
</Button>
</ButtonArea>
</>
)}
</>
);
}

export default AccountName;
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('Create Account', () => {
const mountComponent = (): ReactWrapper => mount(
<ActionContext.Provider value={onActionStub}>
<ThemeProvider theme={defaultTheme}>
<CreateAccount/>
<CreateAccount />
</ThemeProvider>
</ActionContext.Provider>
);
Expand Down
16 changes: 9 additions & 7 deletions packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,16 @@ interface Props {
}

function CreationStep ({ step, onClick, className }: Props): React.ReactElement<Props> {
return <div className={className}>
<div>
<CreateAnAccount/>
<CurrentStep>{step}</CurrentStep>
<TotalSteps>/2</TotalSteps>
return (
<div className={className}>
<div>
<CreateAnAccount />
<CurrentStep>{step}</CurrentStep>
<TotalSteps>/2</TotalSteps>
</div>
<ActionText text='Cancel' onClick={onClick} />
</div>
<ActionText text='Cancel' onClick={onClick}/>
</div>;
);
}

const CreateAnAccount = styled(Title).attrs(() => ({
Expand Down
32 changes: 21 additions & 11 deletions packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,28 @@ const onPrint = (seed: string) => (): void => {

function Mnemonic ({ seed, onNextStep }: Props): React.ReactElement<Props> {
const [isMnemonicSaved, setIsMnemonicSaved] = useState(false);
return <>
<Warning>
Please write down your wallet’s mnemonic seed and keep it in a safe place. <br/>
return (
<>
<Warning>
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>
<MnemonicSeed seed={seed} onCopy={onCopy} onPrint={onPrint(seed)}/>
<VerticalSpace/>
<Checkbox checked={isMnemonicSaved} onChange={setIsMnemonicSaved} label='I have saved my mnemonic seed safely.'/>
<ButtonArea>
<Button isDisabled={!isMnemonicSaved} onClick={onNextStep}>Next step</Button>
</ButtonArea>
</>;
</Warning>
<MnemonicSeed
seed={seed}
onCopy={onCopy}
onPrint={onPrint(seed)}
/>
<VerticalSpace />
<Checkbox
checked={isMnemonicSaved}
onChange={setIsMnemonicSaved}
label='I have saved my mnemonic seed safely.'
/>
<ButtonArea>
<Button isDisabled={!isMnemonicSaved} onClick={onNextStep}>Next step</Button>
</ButtonArea>
</>
);
}

export default Mnemonic;
8 changes: 4 additions & 4 deletions packages/extension-ui/src/Popup/CreateAccount/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,12 @@ export default function CreateAccount (): React.ReactElement {

return (
<>
<Header/>
<CreationStep step={step} onClick={_onCancel}/>
<Header />
<CreationStep step={step} onClick={_onCancel} />
<Loading>{account && (step === 1 ? (
<Mnemonic seed={account.seed} onNextStep={_onNextStep}/>
<Mnemonic seed={account.seed} onNextStep={_onNextStep} />
) : (
<AccountName address={account.address} onCreate={_onCreate}/>
<AccountName address={account.address} onCreate={_onCreate} />
))}</Loading>
</>
);
Expand Down
13 changes: 7 additions & 6 deletions packages/extension-ui/src/Popup/Export.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,13 @@ describe('Export component', () => {
beforeEach(() => {
jest.spyOn(messaging, 'exportAccount').mockResolvedValue({ exportedJson: '{ "meta": { "name": "account_name" } }' });

wrapper = mount(<MemoryRouter
initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
<ThemeProvider theme={defaultTheme}>
<Route path='/account/export/:address' component={ Export }/>
</ThemeProvider>
</MemoryRouter>);
wrapper = mount(
<MemoryRouter initialEntries={ [`/account/export/${VALID_ADDRESS}`] }>
<ThemeProvider theme={defaultTheme}>
<Route path='/account/export/:address' component={ Export } />
</ThemeProvider>
</MemoryRouter>
);
});

it('creates export message on button press', async () => {
Expand Down
6 changes: 3 additions & 3 deletions packages/extension-ui/src/Popup/ImportQr.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export default function ImportQr (): React.ReactElement<Props> {

return (
<>
<Header/>
<Header />
<TitleWithAction title='Import account from QR code'>
<ActionText text='Cancel' onClick={(): void => onAction('/')}/>
<ActionText text='Cancel' onClick={(): void => onAction('/')} />
</TitleWithAction>
{!account && (
<div>
Expand All @@ -46,7 +46,7 @@ export default function ImportQr (): React.ReactElement<Props> {
{...account}
name={name}
/>
<VerticalSpace/>
<VerticalSpace />
{name && (
<ButtonArea>
<Button onClick={_onCreate}>
Expand Down
6 changes: 3 additions & 3 deletions packages/extension-ui/src/Popup/ImportSeed.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ export default function Import (): React.ReactElement<Props> {

return (
<>
<Header/>
<Header />
<TitleWithAction title='Import account'>
<ActionText text='Cancel' onClick={(): void => onAction('/')}/>
<ActionText text='Cancel' onClick={(): void => onAction('/')} />
</TitleWithAction>
<SeedInput
rowsCount={2}
Expand All @@ -62,7 +62,7 @@ export default function Import (): React.ReactElement<Props> {
address={account.address}
name={name}
/>
<VerticalSpace/>
<VerticalSpace />
<ButtonArea>
<Button onClick={_onCreate}>Add the account with the supplied seed</Button>
</ButtonArea>
Expand Down
12 changes: 7 additions & 5 deletions packages/extension-ui/src/Popup/Signing/Qr.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,13 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
<div className={className}>
{isScanning
? <QrScanSignature onScan={onSignature} />
: <QrDisplayPayload
address={request.address}
cmd={CMD_MORTAL}
payload={payloadU8a}
/>
: (
<QrDisplayPayload
address={request.address}
cmd={CMD_MORTAL}
payload={payloadU8a}
/>
)
}
{!isScanning && (
<Button onClick={_onShowQr}>Scan signature via camera</Button>
Expand Down
Loading