@@ -33,10 +33,10 @@ class Passport extends React.Component {
3333 let censor = "";
3434 const blocks = ['▖','▗','▘','▙','▚','▛','▜','▝','▞','▟'];
3535
36− for (var i = 0; i < 12; i++) {
36+ (new UInt32Array(12)).forEach((_, i) => {
3737 let index = Math.floor(Math.random() * blocks.length)
3838 censor += blocks[index];
39− }
39+ })
4040
4141 return censor
4242 }
@@ -44,14 +44,14 @@ class Passport extends React.Component {
4444 // generateCensor() {
4545 // let blocks = [];
4646 //
47− // for (var i = 0; i < 86; i++) {
47+ // (new UInt32Array(86)).forEach((_, i) => {
4848 // let rand = Math.round(Math.random())
4949 // let filled = (rand || i === 0 || i === 43)
5050 //
5151 // let className = filled ? "passport-block bg-gray-30" : "passport-block"
5252 //
5353 // blocks.push(<div key={i} data-key={i}className={className}></div>)
54− // }
54+ // })
5555 //
5656 // return (
5757 // <div className="flex flex-wrap passport-censor">
@@ -135,11 +135,13 @@ class Passport extends React.Component {
135135 }
136136
137137 render() {
138− let patp = this.props.point.matchWith({
139− Just: p => ob.patp(p.value),
138+ let pointVal = this.props.point.matchWith({
139+ Just: p => p.value,
140140 Nothing: () => ''
141141 })
142142
143+ let patp = ob.patp(pointVal)
144+
143145 let wallet = this.props.wallet.matchWith({
144146 Just: w => w.value,
145147 Nothing: () => null
@@ -164,60 +166,75 @@ class Passport extends React.Component {
164166 let paperReady = this.state.paper && this.props.walletStates.includes(WALLET_STATES.PAPER_READY)
165167 let downloadColor = paperReady ? 'green' : 'black'
166168
169+ let downloadBtn = (
170+ <Button
171+ disabled={ !paperReady }
172+ prop-size={ 'lg wide' }
173+ prop-color={ downloadColor }
174+ onClick={ this.download }
175+ >
176+ { 'Download' }
177+ </Button>
178+ )
179+
180+ let paperCollateral = wallet
181+ ? (
182+ <PaperCollateralRenderer
183+ wallet={{[pointVal]: wallet}}
184+ className={'extremely-hidden'}
185+ callback={data => {
186+ this.setState({paper: data})
187+ this.props.pushWalletState(WALLET_STATES.PAPER_READY)
188+ }}
189+ mode={'REGISTRATION'} />
190+ )
191+ : <div />
192+
193+ let walletAddresses = (
194+ <div className="mt-8">
195+ <div className="passport-label text-mono">Ethereum Address</div>
196+ <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
197+
198+ <div className="passport-label gray-50 mt-3">Master Ticket</div>
199+ <div className="passport-value passport-censor overflow-hidden">{this.masterCensor}</div>
200+
201+ <div className="passport-label gray-50 mt-5">Management Seed</div>
202+ <div className="passport-value passport-censor overflow-hidden">{this.managementCensor}</div>
203+ </div>
204+ )
205+
206+ let walletMetadata = (
207+ <div className="flex">
208+ <div className="passport-sigil">
209+ {sigil}
210+ </div>
211+ <div className="passport-metadata ml-4">
212+ <div className="passport-label text-mono">Point</div>
213+ <div className="text-mono">{patp || '-'}</div>
214+
215+ <div className="passport-label gray-50 mt-6">Created on</div>
216+ <div className="passport-value">{patp ? currentDate : '-' }</div>
217+
218+ <div className="passport-label gray-50 mt-2">Invited by</div>
219+ <div className="passport-value">{this.props.invitedBy || '-'}</div>
220+ </div>
221+ </div>
222+ )
223+
167224 return (
168225 <div>
169226 <div className="passport-border">
170227 <div className={`passport ${paperReady && 'passport-filled'}`}>
171− <div className="flex">
172− <div className="passport-sigil">
173− {sigil}
174− </div>
175− <div className="passport-metadata ml-4">
176− <div className="passport-label text-mono">Point</div>
177− <div className="text-mono">{patp || '-'}</div>
178−
179− <div className="passport-label gray-50 mt-6">Created on</div>
180− <div className="passport-value">{patp ? currentDate : '-' }</div>
181−
182− <div className="passport-label gray-50 mt-2">Invited by</div>
183− <div className="passport-value">{this.props.invitedBy || '-'}</div>
184− </div>
185− </div>
186−
187− <div className="mt-8">
188− <div className="passport-label text-mono">Ethereum Address</div>
189− <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
190−
191− <div className="passport-label gray-50 mt-3">Master Ticket</div>
192− <div className="passport-value passport-censor overflow-hidden">{this.masterCensor}</div>
193−
194− <div className="passport-label gray-50 mt-5">Management Seed</div>
195− <div className="passport-value passport-censor overflow-hidden">{this.managementCensor}</div>
196− </div>
197−
198− {wallet &&
199− <PaperCollateralRenderer
200− wallet={{[this.props.point.value]: wallet}}
201− className={'extremely-hidden'}
202− callback={data => {
203− this.setState({paper: data})
204− this.props.pushWalletState(WALLET_STATES.PAPER_READY)
205− }}
206− mode={'REGISTRATION'} />
207− }
228+ { walletMetadata}
229+ { walletAddresses }
230+ { paperCollateral }
231+
208232 </div>
209− <Button
210− disabled={ !paperReady }
211− prop-size={ 'lg wide' }
212− prop-color={ downloadColor }
213− onClick={ this.download }
214− >
215− { 'Download' }
216− </Button>
233+ { downloadBtn }
217234 </div>
218235
219− {walletProgress}
220− {walletStates}
236+ { walletProgress }
237+ { walletStates }
221238
222239 </div>
223240 )