Browse Source
Add a new set of screens into the connection onboarding flow that allow the user to select wether to connect to a local or remote LND node. Fix #326renovate/lint-staged-8.x
Tom Kirkpatrick
7 years ago
18 changed files with 416 additions and 108 deletions
@ -0,0 +1,57 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import styles from './ConnectionDetails.scss' |
||||
|
|
||||
|
const ConnectionDetails = ({ |
||||
|
connectionHost, connectionCert, connectionMacaroon, setConnectionHost, setConnectionCert, setConnectionMacaroon |
||||
|
}) => ( |
||||
|
<div className={styles.container}> |
||||
|
<div> |
||||
|
<label htmlFor='connectionHost'>Host:</label> |
||||
|
<input |
||||
|
type='text' |
||||
|
id='connectionHost' |
||||
|
placeholder='Hostname / Port of the Lnd gRPC interface' |
||||
|
className={styles.host} |
||||
|
ref={input => input} |
||||
|
value={connectionHost} |
||||
|
onChange={event => setConnectionHost(event.target.value)} |
||||
|
/> |
||||
|
</div> |
||||
|
<div> |
||||
|
<label htmlFor='connectionCert'>TLS Certificate:</label> |
||||
|
<input |
||||
|
type='text' |
||||
|
id='connectionCert' |
||||
|
placeholder='Path to the lnd tls cert' |
||||
|
className={styles.cert} |
||||
|
ref={input => input} |
||||
|
value={connectionCert} |
||||
|
onChange={event => setConnectionCert(event.target.value)} |
||||
|
/> |
||||
|
</div> |
||||
|
<div> |
||||
|
<label htmlFor='connectionMacaroon'>Macaroon:</label> |
||||
|
<input |
||||
|
type='text' |
||||
|
id='connectionMacaroon' |
||||
|
placeholder='Path to the lnd macaroon file' |
||||
|
className={styles.macaroon} |
||||
|
ref={input => input} |
||||
|
value={connectionMacaroon} |
||||
|
onChange={event => setConnectionMacaroon(event.target.value)} |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
ConnectionDetails.propTypes = { |
||||
|
connectionHost: PropTypes.string.isRequired, |
||||
|
connectionCert: PropTypes.string.isRequired, |
||||
|
connectionMacaroon: PropTypes.string.isRequired, |
||||
|
setConnectionHost: PropTypes.func.isRequired, |
||||
|
setConnectionCert: PropTypes.func.isRequired, |
||||
|
setConnectionMacaroon: PropTypes.func.isRequired |
||||
|
} |
||||
|
|
||||
|
export default ConnectionDetails |
||||
@ -0,0 +1,29 @@ |
|||||
|
@import '../../variables.scss'; |
||||
|
|
||||
|
.container { |
||||
|
color: $white; |
||||
|
|
||||
|
label { |
||||
|
font-size: 12px; |
||||
|
line-height: 14px; |
||||
|
padding: 10px 0px; |
||||
|
min-height: 14px; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
background: transparent; |
||||
|
outline: none; |
||||
|
border: 0; |
||||
|
color: $gold; |
||||
|
-webkit-text-fill-color: $white; |
||||
|
font-size: 22px; |
||||
|
width: 100%; |
||||
|
// font-weight: 200; |
||||
|
margin-bottom: 25px; |
||||
|
} |
||||
|
|
||||
|
input::-webkit-input-placeholder { |
||||
|
text-shadow: none; |
||||
|
-webkit-text-fill-color: initial; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' |
||||
|
import { FaCircle, FaCircleThin } from 'react-icons/lib/fa' |
||||
|
import styles from './ConnectionType.scss' |
||||
|
|
||||
|
const ConnectionType = ({ connectionType, setConnectionType }) => ( |
||||
|
<div className={styles.container}> |
||||
|
<section className={`${styles.option} ${connectionType === 'local' && styles.active}`}> |
||||
|
<div className={`${styles.button}`} onClick={() => setConnectionType('local')}> |
||||
|
{connectionType === 'local' ? <FaCircle /> : <FaCircleThin />} |
||||
|
<span className={styles.label}>Automatic</span> |
||||
|
</div> |
||||
|
<div className={`${styles.description}`}> |
||||
|
In automatic mode, we will check your local machine to see if you already have a Lightning node running. |
||||
|
If so, we will try to use it. If not, we will start up a light-weight neutrino node for you. |
||||
|
</div> |
||||
|
</section> |
||||
|
<section className={`${styles.option} ${connectionType === 'custom' && styles.active}`}> |
||||
|
<div className={`${styles.button}`} onClick={() => setConnectionType('custom')}> |
||||
|
{connectionType === 'custom' ? <FaCircle /> : <FaCircleThin />} |
||||
|
<span className={styles.label}>Custom</span> |
||||
|
</div> |
||||
|
<div className={`${styles.description}`}> |
||||
|
Connect to a remote Lightning node or a node running in a non-standard location (advanced users only). |
||||
|
</div> |
||||
|
</section> |
||||
|
</div> |
||||
|
) |
||||
|
|
||||
|
ConnectionType.propTypes = { |
||||
|
connectionType: PropTypes.string.isRequired, |
||||
|
setConnectionType: PropTypes.func.isRequired |
||||
|
} |
||||
|
|
||||
|
export default ConnectionType |
||||
@ -0,0 +1,40 @@ |
|||||
|
@import '../../variables.scss'; |
||||
|
|
||||
|
.container { |
||||
|
color: $white; |
||||
|
|
||||
|
section { |
||||
|
margin: 30px 0; |
||||
|
|
||||
|
&.option { |
||||
|
.button { |
||||
|
width: 150px; |
||||
|
text-align: center; |
||||
|
display: inline-block; |
||||
|
padding: 20px; |
||||
|
border: 1px solid $white; |
||||
|
border-radius: 5px; |
||||
|
font-weight: 200; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.25s; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
.button { |
||||
|
color: $gold; |
||||
|
border-color: $gold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.button:hover { |
||||
|
color: $gold; |
||||
|
border-color: $gold; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
margin-left: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue