git.iko.soy/bridge
on 915baeb help sign in
bridge/src/views/SetProxy.js
383 lines 9.3 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import * as azimuth from 'azimuth-js'
4import { Row, Col, H1, H3, P, InnerLabel, ShowBlockie, Anchor } from '../components/Base'
5import { AddressInput, Warning } from '../components/Base'
6import * as ob from 'urbit-ob'
8import { PROXY_TYPE, renderProxyType } from '../lib/proxy'
9import { BRIDGE_ERROR } from '../lib/error'
11import { NETWORK_NAMES } from '../lib/network'
13import StatelessTransaction from '../components/StatelessTransaction'
15import { ROUTE_NAMES } from '../lib/router'
17import {
18 sendSignedTransaction,
19 fromWei,
20 } from '../lib/txn'
22import {
23 isValidAddress,
24 addressFromSecp256k1Public,
25} from '../lib/wallet'
27const SetManagementProxy = (props) =>
28 <SetProxy
29 { ...props }
30 proxyType={ PROXY_TYPE.MANAGEMENT_PROXY }
31 />
33const SetSpawnProxy = (props) =>
34 <SetProxy
35 { ...props }
36 proxyType={ PROXY_TYPE.SPAWN_PROXY }
37 />
39const SetTransferProxy = (props) =>
40 <SetProxy
41 { ...props }
42 proxyType={ PROXY_TYPE.TRANSFER_PROXY }
43 />
45class SetProxy extends React.Component {
46 constructor(props) {
47 super(props)
49 const issuingPoint = props.pointCursor.matchWith({
50 Just: (shp) => shp.value,
51 Nothing: () => {
52 throw BRIDGE_ERROR.MISSING_POINT
53 }
54 })
56 this.state = {
57 proxyAddress: '',
58 txn: Maybe.Nothing(),
59 txError: Maybe.Nothing(),
60 issuingPoint: issuingPoint,
61 userApproval: false,
62 nonce: '',
63 gasPrice: '5',
64 chainId: '',
65 gasLimit: '600000',
66 stx: Maybe.Nothing(),
67 }
69 this.handleAddressInput = this.handleAddressInput.bind(this)
70 // Transaction
71 this.handleCreateUnsignedTxn = this.handleCreateUnsignedTxn.bind(this)
72 this.handleSubmit = this.handleSubmit.bind(this)
73 this.handleSetUserApproval = this.handleSetUserApproval.bind(this)
74 this.handleSetTxn = this.handleSetTxn.bind(this)
75 this.handleSetStx = this.handleSetStx.bind(this)
76 this.handleSetNonce = this.handleSetNonce.bind(this)
77 this.handleSetChainId = this.handleSetChainId.bind(this)
78 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)
79 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)
80 }
82 componentDidMount() {
83 const { props } = this
85 const addr = props.wallet.matchWith({
86 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
87 Nothing: () => {
88 throw BRIDGE_ERROR.MISSING_WALLET
89 }
90 })
92 props.web3.matchWith({
93 Nothing: () => {},
94 Just: (w3) => {
95 const validWeb3 = w3.value
97 const getTxMetadata = [
98 validWeb3.eth.getTransactionCount(addr),
99 validWeb3.eth.net.getId(),
100 validWeb3.eth.getGasPrice()
101 ];
103 Promise.all(getTxMetadata).then(r => {
104 const txMetadata = {
105 nonce: r[0],
106 chainId: r[1],
107 gasPrice: fromWei(r[2], 'gwei'),
108 };
110 this.setState({...txMetadata})
112 })
113 }
114 });
116 }
120 handleAddressInput(proxyAddress) {
121 this.setState({ proxyAddress })
122 this.handleClearTxn()
123 }
126 handleCreateUnsignedTxn() {
127 const txn = this.createUnsignedTxn()
128 this.setState({ txn })
129 }
132 handleSetUserApproval(){
133 const {state} = this
134 this.setState({ userApproval: !state.userApproval })
135 }
139 handleSetTxn(txn){
140 this.setState({ txn })
141 }
145 handleSetStx(stx){
146 this.setState({
147 stx,
148 userApproval: false,
149 })
150 }
154 handleSetNonce(nonce){
155 this.setState({ nonce })
156 this.handleClearStx()
157 }
161 handleSetChainId(chainId){
162 this.setState({ chainId })
163 this.handleClearStx()
164 }
168 handleSetGasPrice(gasPrice){
169 this.setState({ gasPrice })
170 this.handleClearStx()
171 }
175 handleSetGasLimit(gasLimit){
176 this.setState({ gasLimit })
177 this.handleClearStx()
178 }
182 handleClearStx() {
183 this.setState({
184 userApproval: false,
185 stx: Maybe.Nothing(),
186 })
187 }
191 handleClearTxn() {
192 this.setState({
193 userApproval: false,
194 txn: Maybe.Nothing(),
195 stx: Maybe.Nothing(),
196 })
197 }
201 handleClearTransaction() {
202 this.setState({
203 userApproval: false,
204 txn: Maybe.Nothing(),
205 stx: Maybe.Nothing(),
206 })
207 }
211 handleSubmit(){
212 const { props, state } = this
213 sendSignedTransaction(props.web3.value, state.stx)
214 .then(sent => {
215 props.setTxnCursor(sent)
216 props.popRoute()
217 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
218 })
219 .catch(err => {
220 // Note that value.value is due to wrapped Maybe.Just + Result.Error
221 this.setState({ txError: Maybe.Just(err.value.value) })
222 })
223 }
226 createUnsignedTxn(proxyAddress) {
227 const { state, props } = this
229 const validContracts = props.contracts.matchWith({
230 Just: (cs) => cs.value,
231 Nothing: () => {
232 throw BRIDGE_ERROR.MISSING_CONTRACTS
233 }
234 })
236 const validPoint = props.pointCursor.matchWith({
237 Just: (shp) => shp.value,
238 Nothing: () => {
239 throw BRIDGE_ERROR.MISSING_POINT
240 }
241 })
243 const txArgs = [
244 validContracts,
245 validPoint,
246 state.proxyAddress
247 ]
249 if (props.proxyType === PROXY_TYPE.TRANSFER_PROXY) {
250 return Maybe.Just(azimuth.ecliptic.setTransferProxy(...txArgs))
251 }
253 if (props.proxyType === PROXY_TYPE.SPAWN_PROXY) {
254 return Maybe.Just(azimuth.ecliptic.setSpawnProxy(...txArgs))
255 }
257 if (props.proxyType === PROXY_TYPE.MANAGEMENT_PROXY) {
258 return Maybe.Just(azimuth.ecliptic.setManagementProxy(...txArgs))
259 }
261 return Maybe.Nothing()
263 }
265 render() {
267 const { props, state } = this
269 const renderedProxyType = renderProxyType(props.proxyType)
271 const validAddress = isValidAddress(state.proxyAddress)
273 const canGenerate = validAddress === true
275 const canSign = !Maybe.Nothing.hasInstance(state.txn)
276 const canApprove = !Maybe.Nothing.hasInstance(state.stx)
277 const canSend = !Maybe.Nothing.hasInstance(state.stx) && state.userApproval === true
279 const esvisible =
280 props.networkType === NETWORK_NAMES.ROPSTEN ||
281 props.networkType === NETWORK_NAMES.MAINNET
283 const esdomain =
284 props.networkType === NETWORK_NAMES.ROPSTEN
285 ? "ropsten.etherscan.io"
286 : "etherscan.io"
288 const ucFirst = w => w.charAt(0).toUpperCase() + w.slice(1);
291 return (
292 <Row>
293 <Col>
294 <H1>
295 { `Set ${ucFirst(renderedProxyType)} Proxy For ` }
296 <code>{ `${ob.patp(state.issuingPoint)}` }</code>
297 </H1>
299 <P>
300 {
301 'Please provide an Ethereum address to act as the ' +
302 `${renderedProxyType} proxy. You can also use Wallet ` +
303 'Generator to generate a keypair.'
304 }
305 </P>
307 <AddressInput
308 className='mono mt-8'
309 prop-size='lg'
310 prop-format='innerLabel'
311 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
312 value={ state.proxyAddress }
313 onChange={ v => this.handleAddressInput(v) }>
314 <InnerLabel>{ 'Proxy Address' }</InnerLabel>
315 <ShowBlockie className={'mt-1'} address={state.proxyAddress} />
316 </AddressInput>
318 <Anchor
319 className={'mt-1'}
320 prop-size={'sm'}
321 prop-disabled={!isValidAddress(state.proxyAddress) || !esvisible}
322 target={'_blank'}
323 href={`https://${esdomain}/address/${state.proxyAddress}`}>
324 {'View on Etherscan ↗'}
325 </Anchor>
327 <StatelessTransaction
328 // Upper scope
329 web3={props.web3}
330 contracts={props.contracts}
331 wallet={props.wallet}
332 walletType={props.walletType}
333 walletHdPath={props.walletHdPath}
334 networkType={props.networkType}
335 // Tx
336 txn={state.txn}
337 stx={state.stx}
338 // Tx details
339 nonce={state.nonce}
340 gasPrice={state.gasPrice}
341 chainId={state.chainId}
342 gasLimit={state.gasLimit}
343 // Checks
344 userApproval={state.userApproval}
345 canGenerate={ canGenerate }
346 canSign={ canSign }
347 canApprove={ canApprove }
348 canSend={ canSend }
349 // Methods
350 createUnsignedTxn={this.handleCreateUnsignedTxn}
351 setUserApproval={this.handleSetUserApproval}
352 setTxn={this.handleSetTxn}
353 setStx={this.handleSetStx}
354 setNonce={this.handleSetNonce}
355 setChainId={this.handleSetChainId}
356 setGasPrice={this.handleSetGasPrice}
357 setGasLimit={this.handleSetGasLimit}
358 handleSubmit={this.handleSubmit} />
360 {
361 Maybe.Nothing.hasInstance(state.txError)
362 ? ''
363 : <Warning className={'mt-8'}>
364 <H3 style={{marginTop: 0, paddingTop: 0}}>
365 {
366 'There was an error sending your transaction.'
367 }
368 </H3>
369 { state.txError.value }
370 </Warning>
371 }
373 </Col>
374 </Row>
375 )
376 }
379export {
380 SetManagementProxy,
381 SetSpawnProxy,
382 SetTransferProxy