git.iko.soy/bridge
on 05c1914 help sign in
bridge/src/views/CancelTransfer.js
291 lines 7.1 kB history raw
1import Maybe from 'folktale/maybe'
2import React from 'react'
3import { Row, Col, H1, P, Warning, H3 } from '../components/Base'
4import * as azimuth from 'azimuth-js'
5import * as ob from 'urbit-ob'
7import StatelessTransaction from '../components/StatelessTransaction'
8import { BRIDGE_ERROR } from '../lib/error'
9import { ETH_ZERO_ADDR } from '../lib/wallet'
10import { ROUTE_NAMES } from '../lib/router'
12import {
13 sendSignedTransaction,
14 fromWei,
15 } from '../lib/txn'
17import {
18 addressFromSecp256k1Public,
19} from '../lib/wallet'
22class CancelTransfer extends React.Component {
23 constructor(props) {
24 super(props)
26 const pointInTransfer = props.pointCursor.matchWith({
27 Just: (pt) => pt.value,
28 Nothing: () => {
29 throw BRIDGE_ERROR.MISSING_POINT
30 }
31 })
33 this.state = {
34 proxyAddress: '',
35 txn: Maybe.Nothing(),
36 txError: Maybe.Nothing(),
37 pointInTransfer: pointInTransfer,
38 userApproval: false,
39 nonce: '',
40 gasPrice: '5',
41 showGasDetails: false,
42 chainId: '',
43 gasLimit: '600000',
44 stx: Maybe.Nothing(),
45 }
46 // Transaction
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 this.toggleGasDetails = this.toggleGasDetails.bind(this)
57 }
59 toggleGasDetails() {
60 this.setState({
61 showGasDetails: !this.state.showGasDetails
62 })
63 }
65 componentDidMount() {
66 const { props } = this
68 const addr = props.wallet.matchWith({
69 Just: wal => addressFromSecp256k1Public(wal.value.publicKey),
70 Nothing: () => {
71 throw BRIDGE_ERROR.MISSING_WALLET
72 }
73 })
75 props.web3.matchWith({
76 Nothing: () => {},
77 Just: (w3) => {
78 const validWeb3 = w3.value
80 const getTxMetadata = [
81 validWeb3.eth.getTransactionCount(addr),
82 validWeb3.eth.net.getId(),
83 validWeb3.eth.getGasPrice()
84 ];
86 Promise.all(getTxMetadata).then(r => {
87 const txMetadata = {
88 nonce: r[0],
89 chainId: r[1],
90 gasPrice: fromWei(r[2], 'gwei'),
91 };
93 this.setState({...txMetadata})
95 })
96 }
97 });
99 }
103 handleCreateUnsignedTxn() {
104 const txn = this.createUnsignedTxn()
105 this.setState({ txn })
106 }
110 handleSetUserApproval(){
111 const {state} = this
112 this.setState({ userApproval: !state.userApproval })
113 }
117 handleSetTxn(txn){
118 this.setState({ txn })
119 }
123 handleSetStx(stx){
124 this.setState({
125 stx,
126 userApproval: false,
127 })
128 }
132 handleSetNonce(nonce){
133 this.setState({ nonce })
134 this.handleClearStx()
135 }
139 handleSetChainId(chainId){
140 this.setState({ chainId })
141 this.handleClearStx()
142 }
146 handleSetGasPrice(gasPrice){
147 this.setState({ gasPrice })
148 this.handleClearStx()
149 }
153 handleSetGasLimit(gasLimit){
154 this.setState({ gasLimit })
155 this.handleClearStx()
156 }
160 handleClearStx() {
161 this.setState({
162 userApproval: false,
163 stx: Maybe.Nothing(),
164 })
165 }
168 handleSubmit(){
169 const { props, state } = this
170 sendSignedTransaction(props.web3.value, state.stx)
171 .then(sent => {
172 props.setTxnHashCursor(sent)
173 props.popRoute()
174 props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION)
175 })
176 .catch(err => {
177 this.setState({ txError: err.map(val => val.merge()) })
178 })
179 }
181 createUnsignedTxn() {
182 const { props } = this
184 const validContracts = props.contracts.matchWith({
185 Just: (cs) => cs.value,
186 Nothing: () => {
187 throw BRIDGE_ERROR.MISSING_CONTRACTS
188 }
189 })
191 const validPoint = props.pointCursor.matchWith({
192 Just: (pt) => pt.value,
193 Nothing: () => {
194 throw BRIDGE_ERROR.MISSING_POINT
195 }
196 })
198 const txn = azimuth.ecliptic.setTransferProxy(
199 validContracts,
200 validPoint,
201 ETH_ZERO_ADDR
202 )
204 return Maybe.Just(txn)
205 }
208 render() {
209 const { props, state } = this
211 const online = Maybe.Just.hasInstance(props.web3)
213 const proxy = online
214 ? props.pointCache[state.pointInTransfer].transferProxy
215 : 'any outgoing addresses'
217 // const canGenerate = validAddress === true
219 const canGenerate = true
220 const canSign = Maybe.Just.hasInstance(state.txn)
221 const canApprove = Maybe.Just.hasInstance(state.stx)
222 const canSend = Maybe.Just.hasInstance(state.stx) && state.userApproval === true
225 return (
226 <Row>
227 <Col>
228 <H1>
229 { 'Cancel Transfer of '} <code>{ ` ${ob.patp(state.pointInTransfer)} ` }</code>
230 </H1>
232 <P>
233 {
234 `This action will cancel the transfer to ${proxy}.`
235 }
236 </P>
237 <StatelessTransaction
238 // Upper scope
239 web3={props.web3}
240 contracts={props.contracts}
241 wallet={props.wallet}
242 walletType={props.walletType}
243 walletHdPath={props.walletHdPath}
244 networkType={props.networkType}
245 // Tx
246 txn={state.txn}
247 stx={state.stx}
248 // Tx details
249 nonce={state.nonce}
250 gasPrice={state.gasPrice}
251 chainId={state.chainId}
252 gasLimit={state.gasLimit}
253 showGasDetails={state.showGasDetails}
254 toggleGasDetails={this.toggleGasDetails}
255 // Checks
256 userApproval={state.userApproval}
257 canGenerate={ canGenerate }
258 canSign={ canSign }
259 canApprove={ canApprove }
260 canSend={ canSend }
261 // Methods
262 createUnsignedTxn={this.handleCreateUnsignedTxn}
263 setUserApproval={this.handleSetUserApproval}
264 setTxn={this.handleSetTxn}
265 setStx={this.handleSetStx}
266 setNonce={this.handleSetNonce}
267 setChainId={this.handleSetChainId}
268 setGasPrice={this.handleSetGasPrice}
269 setGasLimit={this.handleSetGasLimit}
270 handleSubmit={this.handleSubmit} />
272 {
273 Maybe.Nothing.hasInstance(state.txError)
274 ? ''
275 : <Warning className={'mt-8'}>
276 <H3 style={{marginTop: 0, paddingTop: 0}}>
277 {
278 'There was an error sending your transaction.'
279 }
280 </H3>
281 { state.txError.value }
282 </Warning>
283 }
285 </Col>
286 </Row>
287 )
288 }
291export default CancelTransfer