@@ -45,11 +45,40 @@ class Passport extends React.Component {
4545 )
4646 }
4747
48+ getCurrentDate() {
49+ let date = new Date()
50+ var fil = function(n) {
51+ return n >= 10 ? n : "0" + n;
52+ };
53+ let fmtDate = `${date.getUTCFullYear()}.` +
54+ `${(date.getUTCMonth() + 1)}.` +
55+ `${fil(date.getUTCDate())}`
56+
57+ return fmtDate
58+ }
59+
60+ getWalletStates() {
61+ console.log('walletStates = ', this.props.walletStates)
62+
63+ let stateElems = this.props.walletStates.map(state => {
64+ return (
65+ <div className="flex justify-between">
66+ <div className="text-mono text-sm lh-6 green-dark">{state}</div>
67+ <div className="text-700 text-sm lh-6 green-dark">✓</div>
68+ </div>
69+ )
70+ })
71+
72+ return (
73+ <div>
74+ {stateElems}
75+ </div>
76+ )
77+ }
78+
4879 render() {
4980 let sigil = null
5081
51− console.log('this.props.point = ', this.props.point)
52−
5382 let patp = this.props.point.matchWith({
5483 Just: p => ob.patp(p.value),
5584 Nothing: () => ''
@@ -60,6 +89,11 @@ class Passport extends React.Component {
6089 Nothing: () => null
6190 })
6291
92+ let ownershipAddress = this.props.wallet.matchWith({
93+ Just: w => w.value.ownership.keys.address,
94+ Nothing: () => null
95+ })
96+
6397 if (patp !== '') {
6498 sigil = pour({
6599 patp: patp,
@@ -70,72 +104,73 @@ class Passport extends React.Component {
70104 sigil = <div className="passport-sigil-blank"></div>
71105 }
72106
107+ let currentDate = this.getCurrentDate()
108+ let walletStates = this.getWalletStates()
109+
73110 return (
74− <div className="passport">
75− <div className="flex">
76− <div className="passport-sigil">
77− {sigil}
111+ <div>
112+ <div className={`passport ${wallet && 'passport-filled'}`}>
113+ <div className="flex">
114+ <div className="passport-sigil">
115+ {sigil}
116+ </div>
117+ <div className="passport-metadata ml-4">
118+ <div className="passport-label text-mono">Point</div>
119+ <div className="text-mono">{patp || '-'}</div>
120+
121+ <div className="passport-label gray-50 mt-6">Created on</div>
122+ <div className="passport-value">{patp ? currentDate : '-' }</div>
123+
124+ <div className="passport-label gray-50 mt-2">Invited by</div>
125+ <div className="passport-value">{this.props.invitedBy || '-'}</div>
126+ </div>
78127 </div>
79− <div className="passport-metadata ml-4">
80− <div className="passport-label text-mono">Point</div>
81− <div className="text-mono">{patp || '-'}</div>
82−
83− <div className="passport-label gray-50 mt-6">Created on</div>
84− <div className="passport-value">{this.props.createdOn || '-'}</div>
85128
86− <div className="passport-label gray-50 mt-2">Invited by</div>
87− <div className="passport-value">{this.props.invitedBy || '-'}</div>
129+ <div className="mt-8">
130+ <div className="passport-label text-mono">Ethereum Address</div>
131+ <div className="passport-value">{ownershipAddress || 'Ungenerated'}</div>
132+
133+ <div className="passport-label gray-50 mt-3">Master Ticket</div>
134+ <div className="passport-value">{ownershipAddress ? this.masterScreen : 'Ungenerated'}</div>
135+
136+ <div className="passport-label gray-50 mt-5">Managment Seed</div>
137+ <div className="passport-value">{ownershipAddress ? this.managementScreen : 'Ungenerated'}</div>
138+
139+ <Button
140+ disabled={ !this.state.paper }
141+ className={ 'mt-8' }
142+ prop-size={ 'lg wide' }
143+ prop-color={ 'green' }
144+ onClick={ this.download }
145+ >
146+ { 'Download' }
147+ </Button>
88148 </div>
89− </div>
90149
91− <div className="mt-8">
92− <div className="passport-label text-mono">Ethereum Address</div>
93− <div className="passport-value">{this.props.ethAddress || 'Ungenerated'}</div>
94−
95− <div className="passport-label gray-50 mt-3">Master Ticket</div>
96− <div className="passport-value">{this.props.ethAddress ? this.masterScreen : 'Ungenerated'}</div>
97−
98− <div className="passport-label gray-50 mt-5">Managment Seed</div>
99− <div className="passport-value">{this.props.ethAddress ? this.managmentScreen : 'Ungenerated'}</div>
100−
101− <Button
102− disabled={ !this.state.paper }
103− className={ 'mt-8' }
104− prop-size={ 'lg wide' }
105− prop-color={ 'green' }
106− onClick={ this.download }
107− >
108− { 'Download' }
109− </Button>
150+ {wallet &&
151+ <PaperCollateralRenderer
152+ wallet={{[this.props.point.value]: wallet}}
153+ className={'extremely-hidden'}
154+ callback={data => {
155+ console.log('paper wallet generated')
156+ this.setState({paper: data})
157+ }}
158+ mode={'REGISTRATION'} />
159+ }
160+ </div>
161+ <div className="passport-wallet-states mt-3">
162+ {walletStates}
110163 </div>
111−
112− {wallet &&
113− <PaperCollateralRenderer
114− wallet={this.props.wallet}
115− className={'extremely-hidden'}
116− callback={data => {
117− this.setState({paper: data})
118− }}
119− mode={'REGISTRATION'} />
120− }
121164 </div>
122165 )
123166 }
124167}
125168
126169Passport.propTypes = {
127− 'patp': PropTypes.string,
128− 'createdOn': PropTypes.string,
129− 'invitedBy': PropTypes.string,
130− 'ethAddress': PropTypes.string,
131170 wallet: PropTypes.object
132171};
133172
134173Passport.defaultProps = {
135− 'patp': '',
136− 'createdOn': '',
137− 'invitedBy': '',
138− 'ethAddress': '',
139174 wallet: null
140175};
141176