git.iko.soy/bridge
on master help sign in
- Wallet download screen mostly implemented
4c52e05Chris Johnson
src/bridge/components/Passport.js+87−52
compare with master
unifiedsplit
@@ -45,11 +45,40 @@ class Passport extends React.Component {
45 )
45 )
46 }
46 }
47
47
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+
48 render() {
79 render() {
49 let sigil = null
80 let sigil = null
50
81
51− console.log('this.props.point = ', this.props.point)
52−
53 let patp = this.props.point.matchWith({
82 let patp = this.props.point.matchWith({
54 Just: p => ob.patp(p.value),
83 Just: p => ob.patp(p.value),
55 Nothing: () => ''
84 Nothing: () => ''
@@ -60,6 +89,11 @@ class Passport extends React.Component {
60 Nothing: () => null
89 Nothing: () => null
61 })
90 })
62
91
92+ let ownershipAddress = this.props.wallet.matchWith({
93+ Just: w => w.value.ownership.keys.address,
94+ Nothing: () => null
95+ })
96+
63 if (patp !== '') {
97 if (patp !== '') {
64 sigil = pour({
98 sigil = pour({
65 patp: patp,
99 patp: patp,
@@ -70,72 +104,73 @@ class Passport extends React.Component {
70 sigil = <div className="passport-sigil-blank"></div>
104 sigil = <div className="passport-sigil-blank"></div>
71 }
105 }
72
106
107+ let currentDate = this.getCurrentDate()
108+ let walletStates = this.getWalletStates()
109+
73 return (
110 return (
74− <div className="passport">
111+ <div>
75− <div className="flex">
112+ <div className={`passport ${wallet && 'passport-filled'}`}>
113+ <div className="flex">
76− <div className="passport-sigil">
114+ <div className="passport-sigil">
77− {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>
78 </div>
127 </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>
85
128
129+ <div className="mt-8">
86− <div className="passport-label gray-50 mt-2">Invited by</div>
130+ <div className="passport-label text-mono">Ethereum Address</div>
87− <div className="passport-value">{this.props.invitedBy || '-'}</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>
88 </div>
148 </div>
89− </div>
90
149
91− <div className="mt-8">
150+ {wallet &&
92− <div className="passport-label text-mono">Ethereum Address</div>
151+ <PaperCollateralRenderer
93− <div className="passport-value">{this.props.ethAddress || 'Ungenerated'}</div>
152+ wallet={{[this.props.point.value]: wallet}}
94−
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>
95− <div className="passport-label gray-50 mt-3">Master Ticket</div>
161+ <div className="passport-wallet-states mt-3">
96− <div className="passport-value">{this.props.ethAddress ? this.masterScreen : 'Ungenerated'}</div>
162+ {walletStates}
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>
110 </div>
163 </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− }
121 </div>
164 </div>
122 )
165 )
123 }
166 }
124}
167}
125
168
126Passport.propTypes = {
169Passport.propTypes = {
127− 'patp': PropTypes.string,
128− 'createdOn': PropTypes.string,
129− 'invitedBy': PropTypes.string,
130− 'ethAddress': PropTypes.string,
131 wallet: PropTypes.object
170 wallet: PropTypes.object
132};
171};
133
172
134Passport.defaultProps = {
173Passport.defaultProps = {
135− 'patp': '',
136− 'createdOn': '',
137− 'invitedBy': '',
138− 'ethAddress': '',
139 wallet: null
174 wallet: null
140};
175};
141
176
src/bridge/style/extend.css+13
@@ -212,6 +212,10 @@ footer,
212 font-size: 8rem;
212 font-size: 8rem;
213}
213}
214
214
215+.lh-6 {
216+ line-height: 6rem;
217+}
218+
215.lh-8 {
219.lh-8 {
216 line-height: 8rem;
220 line-height: 8rem;
217}
221}
@@ -499,6 +503,15 @@ code {
499 padding: 24px;
503 padding: 24px;
500}
504}
501
505
506+.passport .text-sm {
507+ font-size: 3rem;
508+ line-height: 6rem;
509+}
510+
511+.passport-filled {
512+ background-color: #C5FBE7;
513+}
514+
502.passport-block {
515.passport-block {
503 width: 8px;
516 width: 8px;
504 height: 8px;
517 height: 8px;
src/bridge/views/InviteLogin.js+18−3
@@ -28,6 +28,13 @@ const INVITE_STAGES = {
28 INVITE_TRANSACTIONS: "invite transactions"
28 INVITE_TRANSACTIONS: "invite transactions"
29}
29}
30
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+
31class InviteLogin extends React.Component {
38class InviteLogin extends React.Component {
32
39
33 constructor(props) {
40 constructor(props) {
@@ -40,7 +47,8 @@ class InviteLogin extends React.Component {
40 realWallet: Nothing(),
47 realWallet: Nothing(),
41 walletReady: false,
48 walletReady: false,
42 continueReady: true,
49 continueReady: true,
43− stage: INVITE_STAGES.INVITE_LOGIN
50+ stage: INVITE_STAGES.INVITE_LOGIN,
51+ walletStates: []
44 }
52 }
45
53
46 this.pointPlaceholder = placeholder(4)
54 this.pointPlaceholder = placeholder(4)
@@ -74,6 +82,7 @@ class InviteLogin extends React.Component {
74 async unlockInviteWallet(inviteTicket) {
82 async unlockInviteWallet(inviteTicket) {
75 this.setState({
83 this.setState({
76 continueReady: false,
84 continueReady: false,
85+ walletStates: this.state.walletStates.concat(WALLET_STATES.UNLOCKING),
77 stage: INVITE_STAGES.INVITE_WALLET
86 stage: INVITE_STAGES.INVITE_WALLET
78 });
87 });
79
88
@@ -99,6 +108,10 @@ class InviteLogin extends React.Component {
99
108
100 const incoming = await azimuth.azimuth.getTransferringFor(ctrcs, addr)
109 const incoming = await azimuth.azimuth.getTransferringFor(ctrcs, addr)
101
110
111+ this.setState({
112+ walletStates: this.state.walletStates.concat(WALLET_STATES.GENERATING)
113+ })
114+
102 let point
115 let point
103 let wallet
116 let wallet
104
117
@@ -113,7 +126,8 @@ class InviteLogin extends React.Component {
113
126
114 this.setState({
127 this.setState({
115 realPoint: point,
128 realPoint: point,
116− realWallet: Just(wallet)
129+ realWallet: Just(wallet),
130+ walletStates: this.state.walletStates.concat(WALLET_STATES.GENERATED)
117 })
131 })
118 }
132 }
119
133
@@ -189,7 +203,7 @@ class InviteLogin extends React.Component {
189 return (
203 return (
190 <Button
204 <Button
191 className={'mt-4'}
205 className={'mt-4'}
192− prop-size={'md'}
206+ prop-size={'lg'}
193 prop-color={btnColor}
207 prop-color={btnColor}
194 disabled={!this.state.continueReady}
208 disabled={!this.state.continueReady}
195 onClick={clickHandler}
209 onClick={clickHandler}
@@ -243,6 +257,7 @@ class InviteLogin extends React.Component {
243 <Passport
257 <Passport
244 point={this.state.realPoint}
258 point={this.state.realPoint}
245 wallet={this.state.realWallet}
259 wallet={this.state.realWallet}
260+ walletStates={this.state.walletStates}
246 confirmWalletDownload={this.confirmWalletDownload}
261 confirmWalletDownload={this.confirmWalletDownload}
247 />
262 />
248 </Col>
263 </Col>