git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/views/AcceptTransfer.js
309 lines 8.4 kB history raw
1import { Just, Nothing } from 'folktale/maybe'
2import React from 'react'
3import { Row, Col, H1, H3, P, Warning } from '../components/Base'
4import { InnerLabel, AddressInput, ShowBlockie, Anchor } from '../components/Base'
5import * as azimuth from 'azimuth-js'
6import * as ob from 'urbit-ob'
8import StatelessTransaction from '../components/StatelessTransaction'
9import { BRIDGE_ERROR } from '../lib/error'
10import { NETWORK_NAMES } from '../lib/network'
11import { ROUTE_NAMES } from '../lib/router'
12import { sendSignedTransaction, fromWei } from '../lib/txn'
13import { isValidAddress, addressFromSecp256k1Public } from '../lib/wallet'
15class AcceptTransfer extends React.Component {
16 constructor(props) {
17 super(props)
19 const receivingAddress = props.wallet.matchWith({
20 Just: (wal) => addressFromSecp256k1Public(wal.value.publicKey),
21 Nothing: () => {
22 throw BRIDGE_ERROR.MISSING_WALLET
23 }
24 })
26 const incomingPoint = props.pointCursor.matchWith({
27 Just: (shp) => shp.value,
28 Nothing: () => {
29 throw BRIDGE_ERROR.MISSING_POINT
30 }
31 })
33 this.state = {
34 receivingAddress: receivingAddress,
35 txn: Nothing(),
36 txError: Nothing(),
37 incomingPoint: incomingPoint,
38 userApproval: false,
39 nonce: '',
40 gasPrice: '5',
41 showGasDetails: false,
42 chainId: '',
43 gasLimit: '600000',
44 stx: Nothing(),
45 }
47 this.handleAddressInput = this.handleAddressInput.bind(this)
48 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
49 this.handleSubmit = this.handleSubmit.bind(this)
50 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
51 this.handleSetTxn = this.handleSetTxn.bind(this)
52 this.handleSetStx = this.handleSetStx.bind(this)
53 this.handleSetNonce = this.handleSetNonce.bind(this)
54 this.handleSetChainId = this.handleSetChainId.bind(this)
55 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
56 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
57 this.toggleGasDetails = this.toggleGasDetails.bind(this)
58 }
60 toggleGasDetails() {
61 this.setState({
62 showGasDetails: !this.state.showGasDetails
63 })
64 }
66 componentDidMount() {
67 const { props } = this
69 const addr = props.wallet.matchWith({
70 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
71 Nothing: () => {
72 throw BRIDGE_ERROR.MISSING_WALLET
73 }
74 })
76 props.web3.matchWith({
77 Nothing: () => {},
78 Just: (w3) => {
79 const validWeb3 = w3.value
81 const getTxMetadata = [
82 validWeb3.eth.getTransactionCount(addr),
83 validWeb3.eth.net.getId(),
84 validWeb3.eth.getGasPrice()
85 ];
87 Promise.all(getTxMetadata).then(r => {
88 const txMetadata = {
89 nonce: r[0],
90 chainId: r[1],
91 gasPrice: fromWei(r[2], 'gwei'),
92 };
94 this.setState({...txMetadata})
96 })
97 }
98 });
99 }
101 handleAddressInput(proxyAddress) {
102 this.setState({ proxyAddress })
103 this.handleClearTxn()
104 }
106 handleCreateUnsignedTxn() {
107 const txn = this.createUnsignedTxn()
108 this.setState({ txn })
109 }
111 handleSetUserApproval(){
112 const {state} = this
113 this.setState({ userApproval: !state.userApproval })
114 }
116 handleSetTxn(txn){
117 this.setState({ txn })
118 }
120 handleSetStx(stx){
121 this.setState({
122 stx,
123 userApproval: false,
124 })
125 }
127 handleSetNonce(nonce){
128 this.setState({ nonce })
129 this.handleClearStx()
130 }
132 handleSetChainId(chainId){
133 this.setState({ chainId })
134 this.handleClearStx()
135 }
137 handleSetGasPrice(gasPrice){
138 this.setState({ gasPrice })
139 this.handleClearStx()
140 }
142 handleSetGasLimit(gasLimit){
143 this.setState({ gasLimit })
144 this.handleClearStx()
145 }
147 handleClearStx() {
148 this.setState({
149 userApproval: false,
150 stx: Nothing(),
151 })
152 }
154 handleClearTxn() {
155 this.setState({
156 userApproval: false,
157 txn: Nothing(),
158 stx: Nothing(),
159 })
160 }
162 handleSubmit() {
163 const { props, state } = this
164 sendSignedTransaction(props.web3.value, state.stx)
165 .then(sent => {
166 props.setTxnHashCursor(sent)
167 props.popRoute()
168 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
169 })
170 .catch(err => {
171 this.setState({ txError: err.map(val => val.merge()) })
172 })
173 }
175 createUnsignedTxn() {
176 const { state, props } = this
178 const validContracts = props.contracts.matchWith({
179 Just: (cs) => cs.value,
180 Nothing: () => {
181 throw BRIDGE_ERROR.MISSING_CONTRACTS
182 }
183 })
185 const validPoint = props.pointCursor.matchWith({
186 Just: (shp) => shp.value,
187 Nothing: () => {
188 throw BRIDGE_ERROR.MISSING_POINT
189 }
190 })
192 const owner = props.pointCache[validPoint].owner
194 return Just(azimuth.ecliptic.transferFrom(
195 validContracts,
196 owner,
197 state.receivingAddress,
198 validPoint
199 ))
200 }
202 render() {
204 const { state, props } = this
205 const validAddress = isValidAddress(state.receivingAddress)
206 const canGenerate = validAddress === true
207 const canSign = Just.hasInstance(state.txn)
208 const canApprove = Just.hasInstance(state.stx)
209 const canSend =
210 Just.hasInstance(state.stx)
211 && state.userApproval === true
213 const esvisible =
214 props.networkType === NETWORK_NAMES.ROPSTEN ||
215 props.networkType === NETWORK_NAMES.MAINNET
217 const esdomain =
218 props.networkType === NETWORK_NAMES.ROPSTEN
219 ? "ropsten.etherscan.io"
220 : "etherscan.io"
222 return (
223 <Row>
224 <Col>
225 <H1>
226 { 'Accept Transfer of '} <code>{ ` ${ob.patp(state.incomingPoint)} ` }</code>
227 </H1>
229 <P>
230 {
231 "By default, the recipient is the address you're logged in " +
232 "as. But you can transfer to any address you like."
233 }
234 </P>
236 <AddressInput
237 className='mono mt-8'
238 prop-size='lg'
239 prop-format='innerLabel'
240 value={ state.receivingAddress }
241 onChange={ v => this.handleAddressInput(v) }>
242 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
243 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
244 </AddressInput>
246 <Anchor
247 className={'mt-1 sm'}
248 prop-size='sm'
249 prop-disabled={!isValidAddress(state.receivingAddress) || !esvisible}
250 target={'_blank'}
251 href={`https://${esdomain}/address/${state.receivingAddress}`}>
252 {'View on Etherscan ↗'}
253 </Anchor>
255 <StatelessTransaction
256 // Upper scope
257 web3={props.web3}
258 contracts={props.contracts}
259 wallet={props.wallet}
260 walletType={props.walletType}
261 walletHdPath={props.walletHdPath}
262 networkType={props.networkType}
263 // Tx
264 txn={state.txn}
265 stx={state.stx}
266 // Tx details
267 nonce={state.nonce}
268 gasPrice={state.gasPrice}
269 chainId={state.chainId}
270 gasLimit={state.gasLimit}
271 showGasDetails={state.showGasDetails}
272 toggleGasDetails={this.toggleGasDetails}
273 // Checks
274 userApproval={state.userApproval}
275 canGenerate={ canGenerate }
276 canSign={ canSign }
277 canApprove={ canApprove }
278 canSend={ canSend }
279 // Methods
280 createUnsignedTxn={this.handleCreateUnsignedTxn}
281 setUserApproval={this.handleSetUserApproval}
282 setTxn={this.handleSetTxn}
283 setStx={this.handleSetStx}
284 setNonce={this.handleSetNonce}
285 setChainId={this.handleSetChainId}
286 setGasPrice={this.handleSetGasPrice}
287 setGasLimit={this.handleSetGasLimit}
288 handleSubmit={this.handleSubmit} />
290 {
291 Nothing.hasInstance(state.txError)
292 ? ''
293 : <Warning className={'mt-8'}>
294 <H3 style={{marginTop: 0, paddingTop: 0}}>
295 {
296 'There was an error sending your transaction.'
297 }
298 </H3>
299 { state.txError.value }
300 </Warning>
301 }
303 </Col>
304 </Row>
305 )
306 }
309export default AcceptTransfer