git.iko.soy/bridge
on d760cbf help sign in
bridge/src/components/old/ShowBlockie.js
70 lines 1.6 kB history raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import makeBlockie from 'ethereum-blockies-base64';
4import Button from './Button';
5import { invert } from '../../lib/state';
7const isValidAddress = address => /^0x[0-9a-fA-F]{40}$/.test(address);
9class ShowBlockie extends React.Component {
10 constructor(props) {
11 super(props);
13 this.state = {
14 open: false,
15 };
17 this.toggle = this.toggle.bind(this);
18 // this.close = this.close.bind(this)
19 }
21 toggle = () => this.setState(invert('open', this.state));
23 render() {
24 const { props, state } = this;
26 const display = state.open ? '' : 'super-hidden';
28 const isValid = isValidAddress(props.address);
30 return (
31 <div className={`flex flex-column items-start ${props.className}`}>
32 <Button
33 onClick={this.toggle}
34 disabled={!isValid}
35 prop-type="link"
36 prop-size="sm">
37 {state.open ? 'Hide Blockie' : 'Display Blockie'}
38 </Button>
39 {!isValid ? (
40 <div />
41 ) : (
42 <img
43 className={`${display} mt-2`}
44 alt={props.address}
45 src={makeBlockie(props.address)}
46 style={{
47 width: props.size,
48 height: props.size,
49 }}
50 />
51 )}
52 </div>
53 );
54 }
57ShowBlockie.propTypes = {
58 className: PropTypes.string,
59 children: PropTypes.node,
60 style: PropTypes.object,
61};
63ShowBlockie.defaultProps = {
64 className: '',
65 style: {},
66 size: 64,
67 address: '',
68};
70export default ShowBlockie;