git.iko.soy/bridge
on master help sign in
- Transactions successfully go through and pop you back to Bridge login
commitefbcbeb6cf96513dac2e222b8870d8da732c556c authorChris Johnson <chris@cjohnson.io> dateMon 29 Apr 2019, 10:20 (8 years ago) parentd71b699
3 files changed+69−22
compare with master
unifiedsplit
src/bridge/lib/invite.js+38−11 src/bridge/style/extend.css+2−1 src/bridge/views/InviteTicket.js+29−10
src/bridge/lib/invite.js+38−11
@@ -52,13 +52,38 @@ const WALLET_STATES = {
5252}
5353
5454const TRANSACTION_STATES = {
55− GENERATING: 'Generating transactions',
56− SIGNING: 'Signing transactions',
57− FUNDING: 'Funding transactions',
58− CLAIMING: 'Claiming invite',
59− CONFIGURING: 'Configuring planet',
60− CLEANING: 'Cleaning up',
61− DONE: 'Done'
55+ GENERATING: {
56+ label: 'Generating transactions',
57+ pct: "0%"
58+ },
59+ SIGNING: {
60+ label: 'Signing transactions',
61+ pct: "15%"
62+ },
63+ FUNDING_INVITE: {
64+ label: 'Funding invite wallet',
65+ pct: "30%"
66+ },
67+ CLAIMING: {
68+ label: 'Claiming invite',
69+ pct: "55%"
70+ },
71+ FUNDING_RECIPIENT: {
72+ label: 'Funding recipient wallet',
73+ pct: "65%"
74+ },
75+ CONFIGURING: {
76+ label: 'Configuring planet',
77+ pct: "85%"
78+ },
79+ CLEANING: {
80+ label: 'Cleaning up',
81+ pct: "95%"
82+ },
83+ DONE: {
84+ label: 'Done',
85+ pct: "100%"
86+ },
6287}
6388
6489async function generateWallet(point) {
@@ -198,7 +223,7 @@ async function startTransactions(args) {
198223 let rawTransferStx = '0x'+transferStx.serialize().toString('hex');
199224
200225 const transferCost = transferTx.gas * transferTx.gasPrice;
201− await ensureFundsFor(web3, point, inviteAddress, transferCost, [rawTransferStx], updateProgress);
226+ await ensureFundsFor(web3, point, inviteAddress, transferCost, [rawTransferStx], updateProgress, true);
202227
203228 // send transaction
204229 updateProgress(TRANSACTION_STATES.CLAIMING);
@@ -258,7 +283,7 @@ async function startTransactions(args) {
258283 return '0x'+stx.serialize().toString('hex');
259284 });
260285
261− await ensureFundsFor(web3, point, newAddress, totalCost, rawStxs, updateProgress);
286+ await ensureFundsFor(web3, point, newAddress, totalCost, rawStxs, updateProgress, false);
262287
263288 updateProgress(TRANSACTION_STATES.CONFIGURING);
264289 await sendAndAwaitConfirm(web3, rawStxs);
@@ -294,8 +319,10 @@ async function startTransactions(args) {
294319 //TODO forward to "all done!" screen
295320}
296321
297−async function ensureFundsFor(web3, point, address, cost, signedTxs, updateProgress) {
298− updateProgress(TRANSACTION_STATES.FUNDING);
322+async function ensureFundsFor(web3, point, address, cost, signedTxs, updateProgress, firstTx) {
323+ let fundingState = firstTx? TRANSACTION_STATES.FUNDING_INVITE : TRANSACTION_STATES.FUNDING_RECIPIENT
324+
325+ updateProgress(fundingState);
299326 let balance = await web3.eth.getBalance(address);
300327
301328 if (cost > balance) {
src/bridge/style/extend.css+2−1
@@ -570,13 +570,14 @@ code {
570570.passport-progress-filled {
571571 position: absolute;
572572 height: 4px;
573− width: 30%;
573+ width: 0%;
574574
575575 z-index: 1;
576576 top: 0;
577577 left: 0;
578578
579579 background-color: #2AA779;
580+ transition: width 3s ease;
580581}
581582
582583.passport-wallet-progress {
src/bridge/views/InviteTicket.js+29−10
@@ -188,18 +188,32 @@ class InviteTicket extends React.Component {
188188 )
189189 break
190190 case INVITE_STAGES.INVITE_TRANSACTIONS:
191− return (
192− <div>
193− <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
194− <div className="passport-progress mb-2">
195− <div className="passport-progress-filled"></div>
191+ let progressWidth = this.state.transactionProgress.pct;
192+
193+ if (this.state.transactionProgress.label === TRANSACTION_STATES.DONE.label) {
194+ return (
195+ <div>
196+ <h1 className="fs-6 lh-8 mb-3">
197+ <span>Success</span>
198+ <span className="ml-4 green">✓</span>
199+ </h1>
200+ <p>Transferring to Bridge...</p>
196201 </div>
197− <div className="flex justify-between">
198− <div className="text-mono text-sm lh-6 green-dark">{this.state.transactionProgress}</div>
199− <div className="text-mono text-sm lh-6">3 minutes</div>
202+ )
203+ } else {
204+ return (
205+ <div>
206+ <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
207+ <div className="passport-progress mb-2">
208+ <div className="passport-progress-filled" style={{width: progressWidth}}></div>
209+ </div>
210+ <div className="flex justify-between">
211+ <div className="text-mono text-sm lh-6 green-dark">{this.state.transactionProgress.label}</div>
212+ <div className="text-mono text-sm lh-6">3 minutes</div>
213+ </div>
200214 </div>
201− </div>
202− )
215+ )
216+ }
203217 break
204218 }
205219 }
@@ -266,6 +280,11 @@ class InviteTicket extends React.Component {
266280 setUrbitWallet,
267281 updateProgress: this.updateProgress
268282 })
283+ .then(() => {
284+ setTimeout(() => {
285+ this.props.popRoute()
286+ }, 5000)
287+ })
269288 // }
270289 }
271290 continueReady = true