@@ -10,6 +10,7 @@ import { ROUTE_NAMES } from '../lib/router'
1010import { DEFAULT_HD_PATH, urbitWalletFromTicket,
1111 walletFromMnemonic, addressFromSecp256k1Public } from '../lib/wallet'
1212import { BRIDGE_ERROR } from '../lib/error'
13+import { INVITE_STAGES, WALLET_STATES } from '../lib/invite'
1314import { generateWallet } from '../lib/invite'
1415
1516const placeholder = (len) => {
@@ -21,20 +22,6 @@ const placeholder = (len) => {
2122 return ob.hex2patq(hex)
2223}
2324
24−const INVITE_STAGES = {
25− INVITE_LOGIN: "invite login",
26− INVITE_WALLET: "invite wallet",
27− INVITE_VERIFY: "invite verify",
28− INVITE_TRANSACTIONS: "invite transactions"
29−}
30−
31−const WALLET_STATES = {
32− UNLOCKING: "Unlocking invite wallet",
33− GENERATING: "Generating your wallet",
34− GENERATED: "Wallet generation complete",
35− DOWNLOADED: "Wallet downloaded"
36−}
37−
3825class InviteLogin extends React.Component {
3926
4027 constructor(props) {
@@ -46,7 +33,6 @@ class InviteLogin extends React.Component {
4633 realPoint: Nothing(),
4734 realWallet: Nothing(),
4835 walletReady: false,
49− continueReady: true,
5036 stage: INVITE_STAGES.INVITE_LOGIN,
5137 walletStates: []
5238 }
@@ -57,9 +43,16 @@ class InviteLogin extends React.Component {
5743 this.handleInviteTicketInput = this.handleInviteTicketInput.bind(this)
5844 this.handleVerifyTicketInput = this.handleVerifyTicketInput.bind(this)
5945 this.confirmWalletDownload = this.confirmWalletDownload.bind(this)
46+ this.pushWalletState = this.pushWalletState.bind(this)
6047 this.navigateLogin = this.navigateLogin.bind(this)
6148 }
6249
50+ pushWalletState(walletState) {
51+ this.setState({
52+ walletStates: this.state.walletStates.concat(walletState)
53+ })
54+ }
55+
6356 navigateLogin() {
6457 this.props.popRoute()
6558 this.props.pushRoute(ROUTE_NAMES.NETWORK)
@@ -75,13 +68,12 @@ class InviteLogin extends React.Component {
7568
7669 confirmWalletDownload() {
7770 this.setState({
78− continueReady: true
71+ walletStates: this.state.walletStates.concat(WALLET_STATES.DOWNLOADED),
7972 })
8073 }
8174
8275 async unlockInviteWallet(inviteTicket) {
8376 this.setState({
84− continueReady: false,
8577 walletStates: this.state.walletStates.concat(WALLET_STATES.UNLOCKING),
8678 stage: INVITE_STAGES.INVITE_WALLET
8779 });
@@ -172,12 +164,20 @@ class InviteLogin extends React.Component {
172164 case INVITE_STAGES.INVITE_WALLET:
173165 return (
174166 <div>
175− <h1 className="fs-6 lh-8">Welcome</h1>
167+ <h1 className="fs-6 lh-8 mb-3">Passport</h1>
176168 <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>
177169 <p>After you’ve downloaded your passport, back up the ticket manually or store on a trusted device.</p>
178170 </div>
179171 )
180172 break
173+ case INVITE_STAGES.INVITE_VERIFY:
174+ return (
175+ <div>
176+ <h1 className="fs-6 lh-8 mb-3">Verify Passport</h1>
177+ <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>
178+ </div>
179+ )
180+ break
181181 }
182182 }
183183
@@ -185,18 +185,27 @@ class InviteLogin extends React.Component {
185185 if (this.state.stage === INVITE_STAGES.INVITE_TRANSACTIONS) return null
186186
187187 let clickHandler
188− let btnColor
188+ let btnColor = this.state.walletStates.includes(WALLET_STATES.PAPER_READY)
189+ ? 'green'
190+ : 'black'
191+ let continueReady
189192
190193 switch(this.state.stage) {
191194 case INVITE_STAGES.INVITE_LOGIN:
192195 clickHandler = () => {
193196 this.unlockInviteWallet(this.state.inviteTicket)
194197 }
195− btnColor = "black"
198+ continueReady = true
196199 break
197− case INVITE_STAGES.INVITE_VERIFY:
198200 case INVITE_STAGES.INVITE_WALLET:
199− btnColor = "green"
201+ clickHandler = () => {
202+ this.setState({
203+ stage: INVITE_STAGES.INVITE_VERIFY
204+ })
205+ }
206+ continueReady = this.state.walletStates.includes(WALLET_STATES.DOWNLOADED)
207+ break
208+ case INVITE_STAGES.INVITE_VERIFY:
200209 break
201210 }
202211
@@ -205,7 +214,7 @@ class InviteLogin extends React.Component {
205214 className={'mt-4'}
206215 prop-size={'lg'}
207216 prop-color={btnColor}
208− disabled={!this.state.continueReady}
217+ disabled={!continueReady}
209218 onClick={clickHandler}
210219 >
211220 { 'Continue →' }
@@ -258,6 +267,7 @@ class InviteLogin extends React.Component {
258267 point={this.state.realPoint}
259268 wallet={this.state.realWallet}
260269 walletStates={this.state.walletStates}
270+ pushWalletState={this.pushWalletState}
261271 confirmWalletDownload={this.confirmWalletDownload}
262272 />
263273 </Col>