git.iko.soy/bridge
on master help sign in
- use ternary style for inviteTicket functions
ff7df0dChris Johnson
src/bridge/views/InviteTicket.js+79−87
compare with master
unifiedsplit
@@ -179,34 +179,29 @@ class InviteTicket extends React.Component {
179 }
179 }
180
180
181 getStageText() {
181 getStageText() {
182− switch (this.state.stage) {
182+ const { stage } = this.state
183+
184+ let progressWidth = this.state.transactionProgress.pct;
185+
183− case INVITE_STAGES.INVITE_LOGIN:
186+ const stageText = stage === INVITE_STAGES.INVITE_LOGIN
184− return (
185− <h1 className="text-700 mt-15">Welcome</h1>
187+ ? <h1 className="text-700 mt-15">Welcome</h1>
186− )
187− break
188− case INVITE_STAGES.INVITE_WALLET:
188+ : stage === INVITE_STAGES.INVITE_LOGIN
189− return (
189+ ? (
190 <div>
190 <div>
191 <h1 className="fs-6 lh-8 mb-3">Passport</h1>
191 <h1 className="fs-6 lh-8 mb-3">Passport</h1>
192 <p>A passport is your digital identity. You will use your passport to access your true computer, send payments, and administer your identity. So naturally, you must keep this secure.</p>
192 <p>A passport is your digital identity. You will use your passport to access your true computer, send payments, and administer your identity. So naturally, you must keep this secure.</p>
193 <p>After you’ve downloaded your passport, back up the ticket manually or store on a trusted device.</p>
193 <p>After you’ve downloaded your passport, back up the ticket manually or store on a trusted device.</p>
194 </div>
194 </div>
195 )
195 )
196− break
197− case INVITE_STAGES.INVITE_VERIFY:
196+ : stage === INVITE_STAGES.INVITE_VERIFY
198− return (
197+ ? (
199 <div>
198 <div>
200 <h1 className="fs-6 lh-8 mb-3">Verify Passport</h1>
199 <h1 className="fs-6 lh-8 mb-3">Verify Passport</h1>
201 <p>Afer you download your passport, verify your custody. Your passport should be a folder of image files. One of them is your Master Ticket. Open it and enter the 4 word phrase below (with hyphens).</p>
200 <p>Afer you download your passport, verify your custody. Your passport should be a folder of image files. One of them is your Master Ticket. Open it and enter the 4 word phrase below (with hyphens).</p>
202 </div>
201 </div>
203− )
204− break
205− case INVITE_STAGES.INVITE_TRANSACTIONS:
202+ ) : INVITE_STAGES.INVITE_TRANSACTIONS
206− let progressWidth = this.state.transactionProgress.pct;
207−
208− if (this.state.transactionProgress.label === TRANSACTION_STATES.DONE.label) {
203+ ? this.state.transactionProgress.label === TRANSACTION_STATES.DONE.label
209− return (
204+ ? (
210 <div>
205 <div>
211 <h1 className="fs-6 lh-8 mb-3">
206 <h1 className="fs-6 lh-8 mb-3">
212 <span>Success</span>
207 <span>Success</span>
@@ -215,8 +210,7 @@ class InviteTicket extends React.Component {
215 <p>Transferring to Bridge...</p>
210 <p>Transferring to Bridge...</p>
216 </div>
211 </div>
217 )
212 )
218− } else {
213+ : (
219− return (
220 <div>
214 <div>
221 <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
215 <h1 className="fs-6 lh-8 mb-3">Submitting</h1>
222 <p className="mt-4 mb-4">This step can take up to five minutes. Please do not leave this page until the transactions are complete.</p>
216 <p className="mt-4 mb-4">This step can take up to five minutes. Please do not leave this page until the transactions are complete.</p>
@@ -228,9 +222,9 @@ class InviteTicket extends React.Component {
228 </div>
222 </div>
229 </div>
223 </div>
230 )
224 )
231− }
225+ : null
232− break
226+
233− }
227+ return stageText
234 }
228 }
235
229
236 updateProgress(transactionProgress) {
230 updateProgress(transactionProgress) {
@@ -240,75 +234,73 @@ class InviteTicket extends React.Component {
240 }
234 }
241
235
242 getContinueButton() {
236 getContinueButton() {
243− if (this.state.stage === INVITE_STAGES.INVITE_TRANSACTIONS) return null
237+ const { realPoint, realWallet, inviteWallet, stage, walletStates,
244−
245− const { realPoint, realWallet, inviteWallet, verifyTicket, inviteTicket } = this.state
238+ verifyTicket, inviteTicket } = this.state
246 const { web3, contracts, setUrbitWallet } = this.props
239 const { web3, contracts, setUrbitWallet } = this.props
247
240
248− let clickHandler
249− let btnColor = this.state.walletStates.includes(WALLET_STATES.PAPER_READY)
241+ const btnColor = this.state.walletStates.includes(WALLET_STATES.PAPER_READY)
250 ? 'green'
242 ? 'green'
251 : 'black'
243 : 'black'
252− let continueReady
253−
254− switch(this.state.stage) {
255− case INVITE_STAGES.INVITE_LOGIN:
256− clickHandler = () => {
257− this.unlockInviteWallet(inviteTicket)
258− }
259− continueReady = true
260− break
261− case INVITE_STAGES.INVITE_WALLET:
262− clickHandler = () => {
263− this.setState({
264− stage: INVITE_STAGES.INVITE_VERIFY
265− })
266− }
267− continueReady = this.state.walletStates.includes(WALLET_STATES.DOWNLOADED)
268− break
269− case INVITE_STAGES.INVITE_VERIFY:
270− clickHandler = () => {
271− const realTicket = realWallet.matchWith({
272− Just: w => w.value.ticket,
273− Nothing: null
274− })
275−
276− this.setState({
277− stage: INVITE_STAGES.INVITE_TRANSACTIONS,
278− walletStates: this.state.walletStates.concat(WALLET_STATES.TRANSACTIONS)
279− })
280−
281− startTransactions({
282− inviteWalletM: inviteWallet,
283− realWalletM: realWallet,
284− realPointM: realPoint,
285− realTicket: verifyTicket,
286− web3M: web3,
287− contractsM: contracts,
288− setUrbitWallet,
289− updateProgress: this.updateProgress
290− })
291− .then(() => {
292− setTimeout(() => {
293− this.props.popRoute()
294− }, 5000)
295− })
296− }
297− continueReady = true
298− break
299− }
300
244
301− return (
245+ const clickHandler = stage === INVITE_STAGES.INVITE_LOGIN
246+ ? () => {
247+ this.unlockInviteWallet(inviteTicket)
248+ }
249+ : stage === INVITE_STAGES.INVITE_WALLET
250+ ? () => {
251+ this.setState({
252+ stage: INVITE_STAGES.INVITE_VERIFY
253+ })
254+ }
255+ : stage === INVITE_STAGES.INVITE_TRANSACTIONS
256+ ? () => {
257+ const realTicket = realWallet.matchWith({
258+ Just: w => w.value.ticket,
259+ Nothing: null
260+ })
261+
262+ this.setState({
263+ stage: INVITE_STAGES.INVITE_TRANSACTIONS,
264+ walletStates: this.state.walletStates.concat(WALLET_STATES.TRANSACTIONS)
265+ })
266+
267+ startTransactions({
268+ inviteWalletM: inviteWallet,
269+ realWalletM: realWallet,
270+ realPointM: realPoint,
271+ realTicket: verifyTicket,
272+ web3M: web3,
273+ contractsM: contracts,
274+ setUrbitWallet,
275+ updateProgress: this.updateProgress
276+ })
277+ .then(() => {
278+ setTimeout(() => {
279+ this.props.popRoute()
280+ }, 5000)
281+ })
282+ }
283+ : null
284+
285+ const continueReady = stage === INVITE_STAGES.INVITE_WALLET
286+ ? walletStates.includes(WALLET_STATES.DOWNLOADED)
287+ : true
288+
289+ const buttonElem = stage === INVITE_STAGES.INVITE_TRANSACTIONS
290+ ? null
291+ : (
302− <Button
292+ <Button
303− className={'mt-4'}
293+ className={'mt-4'}
304− prop-size={'lg'}
294+ prop-size={'lg'}
305− prop-color={btnColor}
295+ prop-color={btnColor}
306− disabled={!continueReady}
296+ disabled={!continueReady}
307− onClick={clickHandler}
297+ onClick={clickHandler}
308− >
298+ >
309− { 'Continue →' }
299+ { 'Continue →' }
310− </Button>
300+ </Button>
311− )
301+ )
302+
303+ return buttonElem
312 }
304 }
313
305
314 getStageDisplay() {
306 getStageDisplay() {