@@ -109,64 +109,72 @@ export default function Ledger({ loginCompleted }) {
109109 />
110110 );
111111
112+ // when not on https, tell user how to get there
113+ const body =
114+ document.location.protocol !== 'https:' ? (
115+ <>
116+ <H2>Running on HTTP?</H2>
117+
118+ <P>
119+ To authenticate and sign transactions with a Ledger, Bridge must be
120+ serving over HTTPS on localhost. You can do this via the following:
121+ </P>
122+
123+ <ol className="measure-md">
124+ <li className="mt-4">
125+ Install
126+ <a target="_blank" href="https://github.com/FiloSottile/mkcert">
127+ mkcert
128+ </a>
129+ </li>
130+ <li className="mt-4">
131+ Install a local certificate authority via{' '}
132+ <code>mkcert -install</code>
133+ </li>
134+ <li className="mt-4">
135+ In your <code>bridge</code> directory, generate a certificate valid
136+ for localhost via <code>mkcert localhost</code>. This will produce
137+ two files: <code>localhost.pem</code>, the local certificate, and
138+ <code>localhost-key.pem</code> , its corresponding private key.
139+ </li>
140+ <li className="mt-4">
141+ Run <code>python bridge-https.py</code>
142+ </li>
143+ </ol>
144+ </>
145+ ) : (
146+ <>
147+ <P>
148+ Connect and authenticate to your Ledger, and then open the "Ethereum"
149+ application. If you're running on older firmware, make sure the
150+ "browser support" option is turned on. To sign transactions, you'll
151+ also need to enable the "contract data" option.
152+ </P>
153+
154+ <P>
155+ If you'd like to use a custom derivation path, you may enter it below.
156+ </P>
157+
158+ {basePathSelection}
159+ {truePathSelection}
160+
161+ <ForwardButton className={'mt3'} onClick={pollDevice}>
162+ {'Authenticate'}
163+ </ForwardButton>
164+
165+ <ForwardButton
166+ className={'mt3'}
167+ disabled={Maybe.Nothing.hasInstance(wallet)}
168+ onClick={loginCompleted}>
169+ {'Continue'}
170+ </ForwardButton>
171+ </>
172+ );
173+
112174 return (
113175 <View>
114176 <H1>Authenticate With Your Ledger</H1>
115−
116− <H2>Running on HTTPS?</H2>
117−
118− <P>
119− Connect and authenticate to your Ledger, and then open the "Ethereum"
120− application. If you're running on older firmware, make sure the "browser
121− support" option is turned on. To sign transactions, you'll also need to
122− enable the "contract data" option.
123− </P>
124−
125− <P>
126− If you'd like to use a custom derivation path, you may enter it below.
127− </P>
128−
129− <H2>Running on HTTP?</H2>
130−
131− <P>
132− To authenticate and sign transactions with a Ledger, Bridge must be
133− serving over HTTPS on localhost. You can do this via the following:
134− </P>
135−
136− <ol className="measure-md">
137− <li className="mt-4">
138− Install
139− <a target="_blank" href="https://github.com/FiloSottile/mkcert">
140− mkcert
141− </a>
142− </li>
143− <li className="mt-4">
144− Install a local certificate authority via <code>mkcert -install</code>
145− </li>
146− <li className="mt-4">
147− In your <code>bridge</code> directory, generate a certificate valid
148− for localhost via <code>mkcert localhost</code>. This will produce two
149− files: <code>localhost.pem</code>, the local certificate, and
150− <code>localhost-key.pem</code> , its corresponding private key.
151− </li>
152− <li className="mt-4">
153− Run <code>python bridge-https.py</code>
154− </li>
155− </ol>
156−
157− {basePathSelection}
158− {truePathSelection}
159−
160− <ForwardButton className={'mt3'} onClick={pollDevice}>
161− {'Authenticate'}
162− </ForwardButton>
163−
164− <ForwardButton
165− className={'mt3'}
166− disabled={Maybe.Nothing.hasInstance(wallet)}
167− onClick={loginCompleted}>
168− {'Continue'}
169− </ForwardButton>
177+ {body}
170178 </View>
171179 );
172180}