git.iko.soy/bridge
on 515bb45 help sign in
bridge/src/views/AcceptTransfer.js
299 lines 8.1 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 chainId: '',
42 gasLimit: '600000',
43 stx: Nothing(),
44 }
46 this.handleAddressInput = this.handleAddressInput.bind(this)
47 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
48 this.handleSubmit = this.handleSubmit.bind(this)
49 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
50 this.handleSetTxn = this.handleSetTxn.bind(this)
51 this.handleSetStx = this.handleSetStx.bind(this)
52 this.handleSetNonce = this.handleSetNonce.bind(this)
53 this.handleSetChainId = this.handleSetChainId.bind(this)
54 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
55 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
56 }
58 componentDidMount() {
59 const { props } = this
61 const addr = props.wallet.matchWith({
62 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
63 Nothing: () => {
64 throw BRIDGE_ERROR.MISSING_WALLET
65 }
66 })
68 props.web3.matchWith({
69 Nothing: () => {},
70 Just: (w3) => {
71 const validWeb3 = w3.value
73 const getTxMetadata = [
74 validWeb3.eth.getTransactionCount(addr),
75 validWeb3.eth.net.getId(),
76 validWeb3.eth.getGasPrice()
77 ];
79 Promise.all(getTxMetadata).then(r => {
80 const txMetadata = {
81 nonce: r[0],
82 chainId: r[1],
83 gasPrice: fromWei(r[2], 'gwei'),
84 };
86 this.setState({...txMetadata})
88 })
89 }
90 });
91 }
93 handleAddressInput(proxyAddress) {
94 this.setState({ proxyAddress })
95 this.handleClearTxn()
96 }
98 handleCreateUnsignedTxn() {
99 const txn = this.createUnsignedTxn()
100 this.setState({ txn })
101 }
103 handleSetUserApproval(){
104 const {state} = this
105 this.setState({ userApproval: !state.userApproval })
106 }
108 handleSetTxn(txn){
109 this.setState({ txn })
110 }
112 handleSetStx(stx){
113 this.setState({
114 stx,
115 userApproval: false,
116 })
117 }
119 handleSetNonce(nonce){
120 this.setState({ nonce })
121 this.handleClearStx()
122 }
124 handleSetChainId(chainId){
125 this.setState({ chainId })
126 this.handleClearStx()
127 }
129 handleSetGasPrice(gasPrice){
130 this.setState({ gasPrice })
131 this.handleClearStx()
132 }
134 handleSetGasLimit(gasLimit){
135 this.setState({ gasLimit })
136 this.handleClearStx()
137 }
139 handleClearStx() {
140 this.setState({
141 userApproval: false,
142 stx: Nothing(),
143 })
144 }
146 handleClearTxn() {
147 this.setState({
148 userApproval: false,
149 txn: Nothing(),
150 stx: Nothing(),
151 })
152 }
154 handleSubmit() {
155 const { props, state } = this
156 sendSignedTransaction(props.web3.value, state.stx)
157 .then(sent => {
158 props.setTxnHashCursor(sent)
159 props.popRoute()
160 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
161 })
162 .catch(err => {
163 this.setState({ txError: err.map(val => val.merge()) })
164 })
165 }
167 createUnsignedTxn() {
168 const { state, props } = this
170 const validContracts = props.contracts.matchWith({
171 Just: (cs) => cs.value,
172 Nothing: () => {
173 throw BRIDGE_ERROR.MISSING_CONTRACTS
174 }
175 })
177 const validPoint = props.pointCursor.matchWith({
178 Just: (shp) => shp.value,
179 Nothing: () => {
180 throw BRIDGE_ERROR.MISSING_POINT
181 }
182 })
184 const owner = props.pointCache[validPoint].owner
186 return Just(azimuth.ecliptic.transferFrom(
187 validContracts,
188 owner,
189 state.receivingAddress,
190 validPoint
191 ))
192 }
194 render() {
196 const { state, props } = this
197 const validAddress = isValidAddress(state.receivingAddress)
198 const canGenerate = validAddress === true
199 const canSign = Just.hasInstance(state.txn)
200 const canApprove = Just.hasInstance(state.stx)
201 const canSend =
202 Just.hasInstance(state.stx)
203 && state.userApproval === true
205 const esvisible =
206 props.networkType === NETWORK_NAMES.ROPSTEN ||
207 props.networkType === NETWORK_NAMES.MAINNET
209 const esdomain =
210 props.networkType === NETWORK_NAMES.ROPSTEN
211 ? "ropsten.etherscan.io"
212 : "etherscan.io"
214 return (
215 <Row>
216 <Col>
217 <H1>
218 { 'Accept Transfer of '} <code>{ ` ${ob.patp(state.incomingPoint)} ` }</code>
219 </H1>
221 <P>
222 {
223 "By default, the recipient is the address you're logged in " +
224 "as. But you can transfer to any address you like."
225 }
226 </P>
228 <AddressInput
229 className='mono mt-8'
230 prop-size='lg'
231 prop-format='innerLabel'
232 value={ state.receivingAddress }
233 onChange={ v => this.handleAddressInput(v) }>
234 <InnerLabel>{ 'Receiving Address' }</InnerLabel>
235 <ShowBlockie className={'mt-1'} address={state.receivingAddress} />
236 </AddressInput>
238 <Anchor
239 className={'mt-1 sm'}
240 prop-size='sm'
241 prop-disabled={!isValidAddress(state.receivingAddress) || !esvisible}
242 target={'_blank'}
243 href={`https://${esdomain}/address/${state.receivingAddress}`}>
244 {'View on Etherscan ↗'}
245 </Anchor>
247 <StatelessTransaction
248 // Upper scope
249 web3={props.web3}
250 contracts={props.contracts}
251 wallet={props.wallet}
252 walletType={props.walletType}
253 walletHdPath={props.walletHdPath}
254 networkType={props.networkType}
255 // Tx
256 txn={state.txn}
257 stx={state.stx}
258 // Tx details
259 nonce={state.nonce}
260 gasPrice={state.gasPrice}
261 chainId={state.chainId}
262 gasLimit={state.gasLimit}
263 // Checks
264 userApproval={state.userApproval}
265 canGenerate={ canGenerate }
266 canSign={ canSign }
267 canApprove={ canApprove }
268 canSend={ canSend }
269 // Methods
270 createUnsignedTxn={this.handleCreateUnsignedTxn}
271 setUserApproval={this.handleSetUserApproval}
272 setTxn={this.handleSetTxn}
273 setStx={this.handleSetStx}
274 setNonce={this.handleSetNonce}
275 setChainId={this.handleSetChainId}
276 setGasPrice={this.handleSetGasPrice}
277 setGasLimit={this.handleSetGasLimit}
278 handleSubmit={this.handleSubmit} />
280 {
281 Nothing.hasInstance(state.txError)
282 ? ''
283 : <Warning className={'mt-8'}>
284 <H3 style={{marginTop: 0, paddingTop: 0}}>
285 {
286 'There was an error sending your transaction.'
287 }
288 </H3>
289 { state.txError.value }
290 </Warning>
291 }
293 </Col>
294 </Row>
295 )
296 }
299export default AcceptTransfer