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