git.iko.soy/bridge
on master help sign in
- Add progress bar for wallet states
321ca82Chris Johnson
src/bridge/components/Passport.js+40−3
compare with master
unifiedsplit
@@ -58,15 +58,50 @@ class Passport extends React.Component {
58 return fmtDate
58 return fmtDate
59 }
59 }
60
60
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+
61 getWalletStates() {
97 getWalletStates() {
62 let { walletStates } = this.props
98 let { walletStates } = this.props
63
99
64− let hideWalletStates = walletStates.includes(WALLET_STATES.TRANSACTIONS)
100+ if ( walletStates.includes(WALLET_STATES.TRANSACTIONS) ) return null
65− if (hideWalletStates) return null
66
101
67 let stateElems = walletStates.map(state => {
102 let stateElems = walletStates.map(state => {
68 if (state === WALLET_STATES.DOWNLOADED) return null
103 if (state === WALLET_STATES.DOWNLOADED) return null
69−
104+
70 let lastIndex = walletStates.indexOf(state) === walletStates.length - 1
105 let lastIndex = walletStates.indexOf(state) === walletStates.length - 1
71
106
72 return (
107 return (
@@ -116,6 +151,7 @@ class Passport extends React.Component {
116
151
117 let currentDate = this.getCurrentDate()
152 let currentDate = this.getCurrentDate()
118 let walletStates = this.getWalletStates()
153 let walletStates = this.getWalletStates()
154+ let walletProgress = this.getWalletProgress()
119 let paperReady = this.state.paper && this.props.walletStates.includes(WALLET_STATES.PAPER_READY)
155 let paperReady = this.state.paper && this.props.walletStates.includes(WALLET_STATES.PAPER_READY)
120 let downloadColor = paperReady ? 'green' : 'black'
156 let downloadColor = paperReady ? 'green' : 'black'
121
157
@@ -173,6 +209,7 @@ class Passport extends React.Component {
173 </Button>
209 </Button>
174 </div>
210 </div>
175
211
212+ {walletProgress}
176 {walletStates}
213 {walletStates}
177
214
178 </div>
215 </div>
src/bridge/style/extend.css+11
@@ -570,3 +570,14 @@ code {
570
570
571 background-color: #2AA779;
571 background-color: #2AA779;
572}
572}
573+
574+.passport-wallet-progress {
575+ height: 4px;
576+ background-color: #C5FBE7;
577+}
578+
579+.passport-wallet-progress-fill {
580+ height: 4px;
581+ width: 100%;
582+ background-color: #2AA779;
583+}