git.iko.soy/bridge
on master help sign in
- Transactions successfully go through and pop you back to Bridge login
efbcbebChris Johnson
src/bridge/lib/invite.js+38−11
compare with master
unifiedsplit
@@ -52,13 +52,38 @@ const WALLET_STATES = {
52}
52}
53
53
54const TRANSACTION_STATES = {
54const TRANSACTION_STATES = {
55+ GENERATING: {
55− GENERATING: 'Generating transactions',
56+ label: 'Generating transactions',
57+ pct: "0%"
58+ },
59+ SIGNING: {
56− SIGNING: 'Signing transactions',
60+ label: 'Signing transactions',
57− FUNDING: 'Funding transactions',
61+ pct: "15%"
62+ },
63+ FUNDING_INVITE: {
64+ label: 'Funding invite wallet',
65+ pct: "30%"
66+ },
67+ CLAIMING: {
58− CLAIMING: 'Claiming invite',
68+ label: 'Claiming invite',
69+ pct: "55%"
70+ },
71+ FUNDING_RECIPIENT: {
72+ label: 'Funding recipient wallet',
73+ pct: "65%"
74+ },
75+ CONFIGURING: {
59− CONFIGURING: 'Configuring planet',
76+ label: 'Configuring planet',
77+ pct: "85%"
78+ },
60− CLEANING: 'Cleaning up',
79+ CLEANING: {
80+ label: 'Cleaning up',
81+ pct: "95%"
82+ },
61− DONE: 'Done'
83+ DONE: {
84+ label: 'Done',
85+ pct: "100%"
86+ },
62}
87}
63
88
64async function generateWallet(point) {
89async function generateWallet(point) {
@@ -198,7 +223,7 @@ async function startTransactions(args) {
198 let rawTransferStx = '0x'+transferStx.serialize().toString('hex');
223 let rawTransferStx = '0x'+transferStx.serialize().toString('hex');
199
224
200 const transferCost = transferTx.gas * transferTx.gasPrice;
225 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);
202
227
203 // send transaction
228 // send transaction
204 updateProgress(TRANSACTION_STATES.CLAIMING);
229 updateProgress(TRANSACTION_STATES.CLAIMING);
@@ -258,7 +283,7 @@ async function startTransactions(args) {
258 return '0x'+stx.serialize().toString('hex');
283 return '0x'+stx.serialize().toString('hex');
259 });
284 });
260
285
261− await ensureFundsFor(web3, point, newAddress, totalCost, rawStxs, updateProgress);
286+ await ensureFundsFor(web3, point, newAddress, totalCost, rawStxs, updateProgress, false);
262
287
263 updateProgress(TRANSACTION_STATES.CONFIGURING);
288 updateProgress(TRANSACTION_STATES.CONFIGURING);
264 await sendAndAwaitConfirm(web3, rawStxs);
289 await sendAndAwaitConfirm(web3, rawStxs);
@@ -294,8 +319,10 @@ async function startTransactions(args) {
294 //TODO forward to "all done!" screen
319 //TODO forward to "all done!" screen
295}
320}
296
321
297−async function ensureFundsFor(web3, point, address, cost, signedTxs, updateProgress) {
322+async function ensureFundsFor(web3, point, address, cost, signedTxs, updateProgress, firstTx) {
298− updateProgress(TRANSACTION_STATES.FUNDING);
323+ let fundingState = firstTx? TRANSACTION_STATES.FUNDING_INVITE : TRANSACTION_STATES.FUNDING_RECIPIENT
324+
325+ updateProgress(fundingState);
299 let balance = await web3.eth.getBalance(address);
326 let balance = await web3.eth.getBalance(address);
300
327
301 if (cost > balance) {
328 if (cost > balance) {
src/bridge/style/extend.css+2−1
@@ -570,13 +570,14 @@ code {
570.passport-progress-filled {
570.passport-progress-filled {
571 position: absolute;
571 position: absolute;
572 height: 4px;
572 height: 4px;
573− width: 30%;
573+ width: 0%;
574
574
575 z-index: 1;
575 z-index: 1;
576 top: 0;
576 top: 0;
577 left: 0;
577 left: 0;
578
578
579 background-color: #2AA779;
579 background-color: #2AA779;
580+ transition: width 3s ease;
580}
581}
581
582
582.passport-wallet-progress {
583.passport-wallet-progress {
src/bridge/views/InviteTicket.js+29−10
@@ -188,18 +188,32 @@ class InviteTicket extends React.Component {
188 )
188 )
189 break
189 break
190 case INVITE_STAGES.INVITE_TRANSACTIONS:
190 case INVITE_STAGES.INVITE_TRANSACTIONS:
191+ let progressWidth = this.state.transactionProgress.pct;
192+
193+ if (this.state.transactionProgress.label === TRANSACTION_STATES.DONE.label) {
191− return (
194+ return (
192− <div>
195+ <div>
193− <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
196+ <h1 className="fs-6 lh-8 mb-3">
194− <div className="passport-progress mb-2">
197+ <span>Success</span>
195− <div className="passport-progress-filled"></div>
198+ <span className="ml-4 green">✓</span>
199+ </h1>
200+ <p>Transferring to Bridge...</p>
196 </div>
201 </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>
197− <div className="flex justify-between">
210+ <div className="flex justify-between">
198− <div className="text-mono text-sm lh-6 green-dark">{this.state.transactionProgress}</div>
211+ <div className="text-mono text-sm lh-6 green-dark">{this.state.transactionProgress.label}</div>
199− <div className="text-mono text-sm lh-6">3 minutes</div>
212+ <div className="text-mono text-sm lh-6">3 minutes</div>
213+ </div>
200 </div>
214 </div>
201− </div>
215+ )
202− )
216+ }
203 break
217 break
204 }
218 }
205 }
219 }
@@ -266,6 +280,11 @@ class InviteTicket extends React.Component {
266 setUrbitWallet,
280 setUrbitWallet,
267 updateProgress: this.updateProgress
281 updateProgress: this.updateProgress
268 })
282 })
283+ .then(() => {
284+ setTimeout(() => {
285+ this.props.popRoute()
286+ }, 5000)
287+ })
269 // }
288 // }
270 }
289 }
271 continueReady = true
290 continueReady = true