git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/components/ShowBlockie.js
81 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 {
11 constructor(props) {
12 super(props)
14 this.state = {
15 open: false
16 }
18 this.toggle = this.toggle.bind(this)
19 // this.close = this.close.bind(this)
21 }
23 toggle = () => this.setState(invert('open', this.state))
25 render() {
26 const { props, state } = this
28 const display = state.open
29 ? ''
30 : 'super-hidden'
32 const isValid = isValidAddress(props.address)
34 return (
35 <div className={`flex flex-column items-start ${props.className}`}>
36 <Button
37 onClick={this.toggle}
38 disabled={!isValid}
39 prop-type='link'
40 prop-size='sm'>
41 { state.open
42 ? 'Hide Blockie'
43 : 'Display Blockie'
44 }
45 </Button>
46 {
47 !isValid
48 ? <div/>
49 : <img
50 className={`${display} mt-2`}
51 alt={ props.address }
52 src={ makeBlockie(props.address) }
53 style={{
54 width: props.size,
55 height: props.size,
56 }} />
57 }
59 </div>
60 )
61 }
65ShowBlockie.propTypes = {
66 className: PropTypes.string,
67 children: PropTypes.node,
68 style: PropTypes.object,
69};
72ShowBlockie.defaultProps = {
73 className: '',
74 style: {},
75 size: 64,
76 address: '',
78};
81export default ShowBlockie;