1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Identicon from '../identicon'
import Tooltip from '../tooltip-v2'
import copyToClipboard from 'copy-to-clipboard'
export default class SenderToRecipient extends Component {
static propTypes = {
senderName: PropTypes.string,
senderAddress: PropTypes.string,
recipientName: PropTypes.string,
recipientAddress: PropTypes.string,
t: PropTypes.func,
}
static contextTypes = {
t: PropTypes.func,
}
state = {
senderAddressCopied: false,
recipientAddressCopied: false,
}
renderRecipientWithAddress () {
const { t } = this.context
const { recipientName, recipientAddress } = this.props
return (
<div
className="sender-to-recipient__recipient sender-to-recipient__recipient--with-address"
onClick={() => {
this.setState({ recipientAddressCopied: true })
copyToClipboard(recipientAddress)
}}
>
<div className="sender-to-recipient__sender-icon">
<Identicon
address={recipientAddress}
diameter={24}
/>
</div>
<Tooltip
position="bottom"
title={this.state.recipientAddressCopied ? t('copiedExclamation') : t('copyAddress')}
wrapperClassName="sender-to-recipient__tooltip-wrapper"
containerClassName="sender-to-recipient__tooltip-container"
onHidden={() => this.setState({ recipientAddressCopied: false })}
>
<div className="sender-to-recipient__name sender-to-recipient__recipient-name">
{ recipientName || this.context.t('newContract') }
</div>
</Tooltip>
</div>
)
}
renderRecipientWithoutAddress () {
return (
<div className="sender-to-recipient__recipient">
<i className="fa fa-file-text-o" />
<div className="sender-to-recipient__name sender-to-recipient__recipient-name">
{ this.context.t('newContract') }
</div>
</div>
)
}
render () {
const { t } = this.context
const { senderName, senderAddress, recipientAddress } = this.props
return (
<div className="sender-to-recipient__container">
<div
className="sender-to-recipient__sender"
onClick={() => {
this.setState({ senderAddressCopied: true })
copyToClipboard(senderAddress)
}}
>
<div className="sender-to-recipient__sender-icon">
<Identicon
address={senderAddress}
diameter={24}
/>
</div>
<Tooltip
position="bottom"
title={this.state.senderAddressCopied ? t('copiedExclamation') : t('copyAddress')}
wrapperClassName="sender-to-recipient__tooltip-wrapper"
containerClassName="sender-to-recipient__tooltip-container"
onHidden={() => this.setState({ senderAddressCopied: false })}
>
<div className="sender-to-recipient__name sender-to-recipient__sender-name">
{ senderName }
</div>
</Tooltip>
</div>
<div className="sender-to-recipient__arrow-container">
<div className="sender-to-recipient__arrow-circle">
<img
height={15}
width={15}
src="./images/arrow-right.svg"
/>
</div>
</div>
{
recipientAddress
? this.renderRecipientWithAddress()
: this.renderRecipientWithoutAddress()
}
</div>
)
}
}
|
