@@ -58,15 +58,50 @@ class Passport extends React.Component {
5858 return fmtDate
5959 }
6060
61+ getWalletProgress() {
62+ let { walletStates } = this.props
63+
64+ if ( !walletStates.includes(WALLET_STATES.UNLOCKING) ) return null
65+ if ( walletStates.includes(WALLET_STATES.TRANSACTIONS) ) return null
66+
67+ let progressTimes = {
68+ [WALLET_STATES.UNLOCKING]: {ms: "2813", pct: "44%"},
69+ [WALLET_STATES.GENERATING]: {ms: "2433", pct: "38%"},
70+ [WALLET_STATES.RENDERING]: {ms: "986", pct: "15%"}
71+ }
72+
73+ const progressBars = Object.keys(progressTimes).map(state => {
74+ let progressIndex = walletStates.indexOf(state)
75+ let progressDone = progressIndex !== -1 && progressIndex < walletStates.length -1
76+
77+ let progressStyle = {
78+ width: progressTimes[state].pct
79+ }
80+
81+ return (
82+ <div className="passport-wallet-progress" style={progressStyle}>
83+ {progressDone &&
84+ <div className="passport-wallet-progress-fill"></div>
85+ }
86+ </div>
87+ )
88+ })
89+
90+ return (
91+ <div className="flex space-between mt-3">
92+ {progressBars}
93+ </div>
94+ )
95+ }
96+
6197 getWalletStates() {
6298 let { walletStates } = this.props
6399
64− let hideWalletStates = walletStates.includes(WALLET_STATES.TRANSACTIONS)
65− if (hideWalletStates) return null
100+ if ( walletStates.includes(WALLET_STATES.TRANSACTIONS) ) return null
66101
67102 let stateElems = walletStates.map(state => {
68103 if (state === WALLET_STATES.DOWNLOADED) return null
69−
104+
70105 let lastIndex = walletStates.indexOf(state) === walletStates.length - 1
71106
72107 return (
@@ -116,6 +151,7 @@ class Passport extends React.Component {
116151
117152 let currentDate = this.getCurrentDate()
118153 let walletStates = this.getWalletStates()
154+ let walletProgress = this.getWalletProgress()
119155 let paperReady = this.state.paper && this.props.walletStates.includes(WALLET_STATES.PAPER_READY)
120156 let downloadColor = paperReady ? 'green' : 'black'
121157
@@ -173,6 +209,7 @@ class Passport extends React.Component {
173209 </Button>
174210 </div>
175211
212+ {walletProgress}
176213 {walletStates}
177214
178215 </div>