ghost-portal/packages/app-toolbox/src/Hash.tsx
Jaco Greeff 338bd517a0
Remove /index imports (swap to bare) (#814)
* Remove /index imports (swap to bare)

* Bump deps
2019-03-14 10:45:58 +01:00

93 lines
2.0 KiB
TypeScript

// Copyright 2017-2019 @polkadot/app-toolbox authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { I18nProps as Props } from '@polkadot/ui-app/types';
import React from 'react';
import { Input, Output, Static } from '@polkadot/ui-app';
import { hexToU8a, isHex, stringToU8a } from '@polkadot/util';
import { blake2AsHex } from '@polkadot/util-crypto';
import translate from './translate';
type State = {
data: string,
hash: string,
isHexData: boolean
};
class Hash extends React.PureComponent<Props, State> {
state: State = {
data: '',
hash: blake2AsHex(stringToU8a(''), 256),
isHexData: false
};
render () {
return (
<div className='toolbox--Hash'>
{this.renderInput()}
{this.renderOutput()}
</div>
);
}
renderInput () {
const { t } = this.props;
const { data, isHexData } = this.state;
return (
<div className='ui--row'>
<Input
autoFocus
className='large'
label={t('from the following data (hex or string)')}
onChange={this.onChangeData}
value={data}
/>
<Static
className='small'
label={t('hex input data')}
value={
isHexData
? t('Yes')
: t('No')
}
/>
</div>
);
}
renderOutput () {
const { t } = this.props;
const { hash } = this.state;
return (
<div className='ui--row'>
<Output
className='full toolbox--hex'
isHidden={hash.length === 0}
label={t('the resulting hash is')}
value={hash}
withCopy
/>
</div>
);
}
onChangeData = (data: string): void => {
const isHexData = isHex(data);
const hash = blake2AsHex(
isHexData
? hexToU8a(data)
: stringToU8a(data),
256
);
this.setState({ data, hash, isHexData });
}
}
export default translate(Hash);