From 8f44ab50aaaf7b126f6d577cb429445fac6a0ceb Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 14 May 2019 06:44:03 +0200 Subject: [PATCH] Vanity -> styled-components (#1149) --- packages/app-accounts/src/Vanity/Match.tsx | 50 +++++++++++++++-- packages/app-accounts/src/Vanity/index.css | 57 ------------------- packages/app-accounts/src/Vanity/index.tsx | 64 ++++++++++++---------- 3 files changed, 82 insertions(+), 89 deletions(-) delete mode 100644 packages/app-accounts/src/Vanity/index.css diff --git a/packages/app-accounts/src/Vanity/Match.tsx b/packages/app-accounts/src/Vanity/Match.tsx index 03b707c436..aa6b9f5160 100644 --- a/packages/app-accounts/src/Vanity/Match.tsx +++ b/packages/app-accounts/src/Vanity/Match.tsx @@ -5,6 +5,7 @@ import { BareProps } from '@polkadot/ui-app/types'; import React from 'react'; +import styled from 'styled-components'; import { Button, IdentityIcon } from '@polkadot/ui-app'; import { u8aToHex } from '@polkadot/util'; @@ -21,6 +22,47 @@ type State = { hexSeed: string }; +const Wrapper = styled.div` + text-align: center; + + &:hover { + background: #f9f9f9; + } + + .vanity--Match-addr { + font-size: 1.5rem; + padding: 0 1rem; + + .no { + color: inherit; + } + + .yes { + color: red; + } + } + + .vanity--Match-buttons, + .vanity--Match-data, + .vanity--Match-icon { + display: inline-block; + vertical-align: middle; + } + + .vanity--Match-item { + display: inline-block; + font-family: monospace; + margin: 0 auto; + padding: 0.5em; + position: relative; + } + + .vanity--Match-seed { + opacity: 0.45; + padding: 0 1rem; + } +`; + export default class Match extends React.PureComponent { state: State = {} as State; @@ -35,7 +77,7 @@ export default class Match extends React.PureComponent { const { hexSeed } = this.state; return ( -
+
{ />
- + ); } - onCreate = (): void => { + private onCreate = (): void => { const { onCreateToggle } = this.props; const { hexSeed } = this.state; onCreateToggle(hexSeed); } - onRemove = (): void => { + private onRemove = (): void => { const { address, onRemove } = this.props; onRemove(address); diff --git a/packages/app-accounts/src/Vanity/index.css b/packages/app-accounts/src/Vanity/index.css deleted file mode 100644 index 57fc40a20c..0000000000 --- a/packages/app-accounts/src/Vanity/index.css +++ /dev/null @@ -1,57 +0,0 @@ -/* Copyright 2017-2019 @polkadot/app-accounts authors & contributors -/* This software may be modified and distributed under the terms -/* of the Apache-2.0 license. See the LICENSE file for details. */ - -.vanity--App-matches { - padding: 1em 0; -} - -.vanity--App-stats { - padding: 1em 0 0 0; - opacity: 0.45; - text-align: center; -} - -.vanity--Match { - text-align: center; -} - -.vanity--Match:hover { - background: #f9f9f9; -} - -.vanity--Match-item { - display: inline-block; - font-family: monospace; - margin: 0 auto; - padding: 0.5em; - position: relative; -} - -.vanity--Match-icon, -.vanity--Match-data, -.vanity--Match-buttons { - display: inline-block; - vertical-align: middle; -} - -.vanity--Match-addr, -.vanity--Match-seed { - padding: 0 1rem; -} - -.vanity--Match-addr { - font-size: 1.5rem; - - .no { - color: inherit; - } - - .yes { - color: red; - } -} - -.vanity--Match-seed { - opacity: 0.45; -} diff --git a/packages/app-accounts/src/Vanity/index.tsx b/packages/app-accounts/src/Vanity/index.tsx index 8c542bebd1..1d353b3572 100644 --- a/packages/app-accounts/src/Vanity/index.tsx +++ b/packages/app-accounts/src/Vanity/index.tsx @@ -7,9 +7,8 @@ import { KeypairType } from '@polkadot/util-crypto/types'; import { Generator$Matches, Generator$Result } from '../vanitygen/types'; import { ComponentProps } from '../types'; -import './index.css'; - import React from 'react'; +import styled from 'styled-components'; import { Button, Dropdown, Input } from '@polkadot/ui-app'; import uiSettings from '@polkadot/ui-settings'; @@ -40,6 +39,18 @@ const BOOL_OPTIONS = [ { text: 'Yes', value: true } ]; +const Wrapper = styled.div` + .vanity--App-matches { + padding: 1em 0; + } + + .vanity--App-stats { + padding: 1em 0 0 0; + opacity: 0.45; + text-align: center; + } +`; + class VanityApp extends React.PureComponent { results: Array = []; state: State = { @@ -63,16 +74,16 @@ class VanityApp extends React.PureComponent { render () { return ( -
+ {this.renderOptions()} {this.renderButtons()} {this.renderStats()} {this.renderMatches()} -
+ ); } - renderButtons () { + private renderButtons () { const { t } = this.props; const { isMatchValid, isRunning } = this.state; @@ -92,7 +103,7 @@ class VanityApp extends React.PureComponent { ); } - renderMatches () { + private renderMatches () { const { matches } = this.state; return ( @@ -109,7 +120,7 @@ class VanityApp extends React.PureComponent { ); } - renderOptions () { + private renderOptions () { const { t } = this.props; const { isMatchValid, isRunning, match, type, withCase } = this.state; @@ -150,7 +161,7 @@ class VanityApp extends React.PureComponent { ); } - renderStats () { + private renderStats () { const { t } = this.props; const { elapsed, keyCount } = this.state; @@ -173,7 +184,7 @@ class VanityApp extends React.PureComponent { ); } - checkMatches (): void { + private checkMatches (): void { const results = this.results; this.results = []; @@ -183,24 +194,23 @@ class VanityApp extends React.PureComponent { } this.setState( - (prevState: State) => { - let newKeyCount = prevState.keyCount; - let newKeyTime = prevState.keyTime; - - const matches = results + ({ keyCount, keyTime, matches, startAt }: State) => { + let newKeyCount = keyCount; + let newKeyTime = keyTime; + const newMatches = results .reduce((result, { elapsed, found }) => { newKeyCount += found.length; newKeyTime += elapsed; return result.concat(found); - }, prevState.matches) + }, matches) .sort(generatorSort) .slice(0, 25); - const elapsed = Date.now() - prevState.startAt; + const elapsed = Date.now() - startAt; return { elapsed, - matches, + matches: newMatches, keyCount: newKeyCount, keyTime: newKeyTime }; @@ -208,7 +218,7 @@ class VanityApp extends React.PureComponent { ); } - executeGeneration = (): void => { + private executeGeneration = (): void => { if (!this.state.isRunning) { this.checkMatches(); @@ -244,11 +254,11 @@ class VanityApp extends React.PureComponent { window.location.hash = `${basePath}/create/${type}/${seed}`; } - onChangeCase = (withCase: boolean): void => { + private onChangeCase = (withCase: boolean): void => { this.setState({ withCase }); } - onChangeMatch = (match: string): void => { + private onChangeMatch = (match: string): void => { this.setState({ isMatchValid: matchRegex.test(match) && @@ -258,25 +268,23 @@ class VanityApp extends React.PureComponent { }); } - onChangeType = (type: KeypairType): void => { + private onChangeType = (type: KeypairType): void => { this.setState({ type } as State); } - onRemove = (address: string): void => { + private onRemove = (address: string): void => { this.setState( - (prevState: State) => ({ - matches: prevState.matches.filter((item) => + ({ matches }: State) => ({ + matches: matches.filter((item) => item.address !== address ) }) ); } - toggleStart = (): void => { + private toggleStart = (): void => { this.setState( - (prevState: State) => { - const { isRunning, keyCount, keyTime, startAt } = prevState; - + ({ isRunning, keyCount, keyTime, startAt }: State) => { this._isActive = !isRunning; return {