git.iko.soy/bridge
on bf5080e help sign in
bridge/src/views/SetProxy.js
382 lines 9.2 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.setTxnHashCursor(sent)
216 props.popRoute()
217 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
218 })
219 .catch(err => {
220 this.setState({ txError: err.map(val => val.merge()) })
221 })
222 }
225 createUnsignedTxn(proxyAddress) {
226 const { state, props } = this
228 const validContracts = props.contracts.matchWith({
229 Just: (cs) => cs.value,
230 Nothing: () => {
231 throw BRIDGE_ERROR.MISSING_CONTRACTS
232 }
233 })
235 const validPoint = props.pointCursor.matchWith({
236 Just: (shp) => shp.value,
237 Nothing: () => {
238 throw BRIDGE_ERROR.MISSING_POINT
239 }
240 })
242 const txArgs = [
243 validContracts,
244 validPoint,
245 state.proxyAddress
246 ]
248 if (props.proxyType === PROXY_TYPE.TRANSFER_PROXY) {
249 return Maybe.Just(azimuth.ecliptic.setTransferProxy(...txArgs))
250 }
252 if (props.proxyType === PROXY_TYPE.SPAWN_PROXY) {
253 return Maybe.Just(azimuth.ecliptic.setSpawnProxy(...txArgs))
254 }
256 if (props.proxyType === PROXY_TYPE.MANAGEMENT_PROXY) {
257 return Maybe.Just(azimuth.ecliptic.setManagementProxy(...txArgs))
258 }
260 return Maybe.Nothing()
262 }
264 render() {
266 const { props, state } = this
268 const renderedProxyType = renderProxyType(props.proxyType)
270 const validAddress = isValidAddress(state.proxyAddress)
272 const canGenerate = validAddress === true
274 const canSign = !Maybe.Nothing.hasInstance(state.txn)
275 const canApprove = !Maybe.Nothing.hasInstance(state.stx)
276 const canSend = !Maybe.Nothing.hasInstance(state.stx) && state.userApproval === true
278 const esvisible =
279 props.networkType === NETWORK_NAMES.ROPSTEN ||
280 props.networkType === NETWORK_NAMES.MAINNET
282 const esdomain =
283 props.networkType === NETWORK_NAMES.ROPSTEN
284 ? "ropsten.etherscan.io"
285 : "etherscan.io"
287 const ucFirst = w => w.charAt(0).toUpperCase() + w.slice(1);
290 return (
291 <Row>
292 <Col>
293 <H1>
294 { `Set ${ucFirst(renderedProxyType)} Proxy For ` }
295 <code>{ `${ob.patp(state.issuingPoint)}` }</code>
296 </H1>
298 <P>
299 {
300 'Please provide an Ethereum address to act as the ' +
301 `${renderedProxyType} proxy. You can also use Wallet ` +
302 'Generator to generate a keypair.'
303 }
304 </P>
306 <AddressInput
307 className='mono mt-8'
308 prop-size='lg'
309 prop-format='innerLabel'
310 placeholder={ `e.g. 0x84295d5e054d8cff5a22428b195f5a1615bd644f` }
311 value={ state.proxyAddress }
312 onChange={ v => this.handleAddressInput(v) }>
313 <InnerLabel>{ 'Proxy Address' }</InnerLabel>
314 <ShowBlockie className={'mt-1'} address={state.proxyAddress} />
315 </AddressInput>
317 <Anchor
318 className={'mt-1'}
319 prop-size={'sm'}
320 prop-disabled={!isValidAddress(state.proxyAddress) || !esvisible}
321 target={'_blank'}
322 href={`https://${esdomain}/address/${state.proxyAddress}`}>
323 {'View on Etherscan ↗'}
324 </Anchor>
326 <StatelessTransaction
327 // Upper scope
328 web3={props.web3}
329 contracts={props.contracts}
330 wallet={props.wallet}
331 walletType={props.walletType}
332 walletHdPath={props.walletHdPath}
333 networkType={props.networkType}
334 // Tx
335 txn={state.txn}
336 stx={state.stx}
337 // Tx details
338 nonce={state.nonce}
339 gasPrice={state.gasPrice}
340 chainId={state.chainId}
341 gasLimit={state.gasLimit}
342 // Checks
343 userApproval={state.userApproval}
344 canGenerate={ canGenerate }
345 canSign={ canSign }
346 canApprove={ canApprove }
347 canSend={ canSend }
348 // Methods
349 createUnsignedTxn={this.handleCreateUnsignedTxn}
350 setUserApproval={this.handleSetUserApproval}
351 setTxn={this.handleSetTxn}
352 setStx={this.handleSetStx}
353 setNonce={this.handleSetNonce}
354 setChainId={this.handleSetChainId}
355 setGasPrice={this.handleSetGasPrice}
356 setGasLimit={this.handleSetGasLimit}
357 handleSubmit={this.handleSubmit} />
359 {
360 Maybe.Nothing.hasInstance(state.txError)
361 ? ''
362 : <Warning className={'mt-8'}>
363 <H3 style={{marginTop: 0, paddingTop: 0}}>
364 {
365 'There was an error sending your transaction.'
366 }
367 </H3>
368 { state.txError.value }
369 </Warning>
370 }
372 </Col>
373 </Row>
374 )
375 }
378export {
379 SetManagementProxy,
380 SetSpawnProxy,
381 SetTransferProxy