git.iko.soy/bridge
on 616e621 help sign in
bridge/src/views/AcceptTransfer.js
352 lines 8.8 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import { Row, Col, H1, H3, P, Form, 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 { ROUTE_NAMES } from '../lib/router'
12import {
13 sendSignedTransaction,
14 fromWei,
15 } from '../lib/txn'
17import {
18 isValidAddress,
19 addressFromSecp256k1Public,
20} from '../lib/wallet'
23class AcceptTransfer extends React.Component {
24 constructor(props) {
25 super(props)
27 const receivingAddress = props.wallet.matchWith({
28 Just: (wal) => addressFromSecp256k1Public(wal.value.publicKey),
29 Nothing: () => {
30 throw BRIDGE_ERROR.MISSING_WALLET
31 }
32 })
34 const incomingPoint = props.pointCursor.matchWith({
35 Just: (shp) => shp.value,
36 Nothing: () => {
37 throw BRIDGE_ERROR.MISSING_POINT
38 }
39 })
41 this.state = {
42 receivingAddress: receivingAddress,
43 txn: Maybe.Nothing(),
44 txError: Maybe.Nothing(),
45 incomingPoint: incomingPoint,
46 userApproval: false,
47 nonce: '',
48 gasPrice: '5',
49 chainId: '',
50 gasLimit: '600000',
51 stx: Maybe.Nothing(),
52 }
53 this.handleAddressInput = this.handleAddressInput.bind(this)
54 // Transaction
55 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
56 this.handleSubmit = this.handleSubmit.bind(this)
57 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
58 this.handleSetTxn = this.handleSetTxn.bind(this)
59 this.handleSetStx = this.handleSetStx.bind(this)
60 this.handleSetNonce = this.handleSetNonce.bind(this)
61 this.handleSetChainId = this.handleSetChainId.bind(this)
62 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
63 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
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 });
100 // const validPoint = props.pointCursor.matchWith({
101 // Just: (shp) => shp.value,
102 // Nothing: () => {
103 // throw BRIDGE_ERROR.MISSING_POINT
104 // }
105 // })
107 // NB (jtobin):
108 //
109 // We need to get the point's owner, so it's not possible to perform this
110 // transaction offline.
111 //
112 // Perhaps we could add an 'owner' input in the offline case, if necessary.
114 // const owner = props.pointCache[validPoint].owner
115 //
116 // const txn = Maybe.Just(this.createUnsignedTxn(
117 // owner,
118 // state.receivingAddress))
119 //
120 // this.setState({ txn })
121 }
125 handleAddressInput(proxyAddress) {
126 this.setState({ proxyAddress })
127 this.handleClearTxn()
128 }
131 handleCreateUnsignedTxn() {
132 const txn = this.createUnsignedTxn()
133 this.setState({ txn })
134 }
137 handleSetUserApproval(){
138 const {state} = this
139 this.setState({ userApproval: !state.userApproval })
140 }
144 handleSetTxn(txn){
145 this.setState({ txn })
146 }
150 handleSetStx(stx){
151 this.setState({
152 stx,
153 userApproval: false,
154 })
155 }
159 handleSetNonce(nonce){
160 this.setState({ nonce })
161 this.handleClearStx()
162 }
166 handleSetChainId(chainId){
167 this.setState({ chainId })
168 this.handleClearStx()
169 }
173 handleSetGasPrice(gasPrice){
174 this.setState({ gasPrice })
175 this.handleClearStx()
176 }
180 handleSetGasLimit(gasLimit){
181 this.setState({ gasLimit })
182 this.handleClearStx()
183 }
187 handleClearStx() {
188 this.setState({
189 userApproval: false,
190 stx: Maybe.Nothing(),
191 })
192 }
196 handleClearTxn() {
197 this.setState({
198 userApproval: false,
199 txn: Maybe.Nothing(),
200 stx: Maybe.Nothing(),
201 })
202 }
206 handleClearTransaction() {
207 this.setState({
208 userApproval: false,
209 txn: Maybe.Nothing(),
210 stx: Maybe.Nothing(),
211 })
212 }
216 handleSubmit() {
217 const { props, state } = this
218 sendSignedTransaction(props.web3.value, state.stx)
219 .then(sent => {
220 props.setTxnCursor(sent)
221 props.popRoute()
222 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
223 })
224 .catch(err => {
225 // Note that value.value is due to wrapped Maybe.Just + Result.Error
226 this.setState({ txError: Maybe.Just(err.value.value) })
227 })
228 }
230 createUnsignedTxn() {
231 const { state, props } = this
233 const validContracts = props.contracts.matchWith({
234 Just: (cs) => cs.value,
235 Nothing: () => {
236 throw BRIDGE_ERROR.MISSING_CONTRACTS
237 }
238 })
240 const validPoint = props.pointCursor.matchWith({
241 Just: (shp) => shp.value,
242 Nothing: () => {
243 throw BRIDGE_ERROR.MISSING_POINT
244 }
245 })
247 const owner = props.pointCache[validPoint].owner
249 return Maybe.Just(azimuth.ecliptic.transferFrom(
250 validContracts,
251 owner,
252 state.receivingAddress,
253 validPoint
254 ))
255 }
257 render() {
259 const { state, props } = this
260 const validAddress = isValidAddress(state.receivingAddress)
261 const canGenerate = validAddress === true
262 const canSign = !Maybe.Nothing.hasInstance(state.txn)
263 const canApprove = !Maybe.Nothing.hasInstance(state.stx)
264 const canSend = !Maybe.Nothing.hasInstance(state.stx) && state.userApproval === true
267 return (
268 <Row>
269 <Col>
270 <H1>
271 { 'Accept Transfer of '} <code>{ ` ${ob.patp(state.incomingPoint)} ` }</code>
272 </H1>
274 <P>
275 {
276 "By default, the recipient is the address you're logged in " +
277 "as. But you can transfer to any address you like."
278 }
279 </P>
280 <Form>
281 <AddressInput
282 className='mono mt-8'
283 prop-size='lg'
284 prop-format='innerLabel'
285 value={ state.receivingAddress }
286 onChange={ v => this.handleAddressInput(v) }>
287 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
288 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
289 </AddressInput>
291 <Anchor
292 className={'mt-1 sm'}
293 prop-size='sm'
294 prop-disabled={!isValidAddress(state.receivingAddress)}
295 target={'_blank'}
296 href={`https://etherscan.io/address/${state.receivingAddress}`}>
297 {'View on Etherscan ↗'}
298 </Anchor>
300 <StatelessTransaction
301 // Upper scope
302 web3={props.web3}
303 contracts={props.contracts}
304 wallet={props.wallet}
305 walletType={props.walletType}
306 walletHdPath={props.walletHdPath}
307 // Tx
308 txn={state.txn}
309 stx={state.stx}
310 // Tx details
311 nonce={state.nonce}
312 gasPrice={state.gasPrice}
313 chainId={state.chainId}
314 gasLimit={state.gasLimit}
315 // Checks
316 userApproval={state.userApproval}
317 canGenerate={ canGenerate }
318 canSign={ canSign }
319 canApprove={ canApprove }
320 canSend={ canSend }
321 // Methods
322 createUnsignedTxn={this.handleCreateUnsignedTxn}
323 setUserApproval={this.handleSetUserApproval}
324 setTxn={this.handleSetTxn}
325 setStx={this.handleSetStx}
326 setNonce={this.handleSetNonce}
327 setChainId={this.handleSetChainId}
328 setGasPrice={this.handleSetGasPrice}
329 setGasLimit={this.handleSetGasLimit}
330 handleSubmit={this.handleSubmit} />
332 </Form>
334 {
335 Maybe.Nothing.hasInstance(state.txError)
336 ? ''
337 : <Warning className={'mt-8'}>
338 <H3 style={{marginTop: 0, paddingTop: 0}}>
339 {
340 'There was an error sending your transaction.'
341 }
342 </H3>
343 { state.txError.value }
344 </Warning>
345 }
346 </Col>
347 </Row>
348 )
349 }
352export default AcceptTransfer