diff --git a/app/app.global.scss b/app/app.global.scss index 1af35784..d7d5d94d 100644 --- a/app/app.global.scss +++ b/app/app.global.scss @@ -86,7 +86,8 @@ body { padding-bottom: 15px; border-radius: 2px; text-align: center; - font-size: 18px; + font-size: 16px; + letter-spacing: 1.5px; transition: none; position: relative; color: white; diff --git a/app/components/Channels/Channel.scss b/app/components/Channels/Channel.scss index e7eefe52..e985cf8e 100644 --- a/app/components/Channels/Channel.scss +++ b/app/components/Channels/Channel.scss @@ -2,15 +2,17 @@ .channel { position: relative; - background: $lightgrey; + background: $white; margin: 5px 0; padding: 10px; border-top: 1px solid $white; cursor: pointer; transition: all 0.25s; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); &:hover { opacity: 0.75; + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } &:first-child { diff --git a/app/components/Channels/OpenPendingChannel.js b/app/components/Channels/OpenPendingChannel.js index ea46fad2..523e1a86 100644 --- a/app/components/Channels/OpenPendingChannel.js +++ b/app/components/Channels/OpenPendingChannel.js @@ -4,17 +4,20 @@ import PropTypes from 'prop-types' import { btc } from 'utils' import styles from './OpenPendingChannel.scss' -const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker, explorerLinkBase }) => ( -
  • shell.openExternal(`${explorerLinkBase}/tx/${channel.channel_point.split(':')[0]}`)}> -

    Opening Channel...

    +const OpenPendingChannel = ({ ticker, channel, currentTicker, explorerLinkBase }) => ( +
  • shell.openExternal(`${explorerLinkBase}/tx/${channel.channel.channel_point.split(':')[0]}`)}> +
    +

    Opening Channel...

    + Blocks till open: {channel.blocks_till_open} +
    Remote Pubkey -

    {channel.remote_node_pub}

    +

    {channel.channel.remote_node_pub}

    Channel Point -

    {channel.channel_point}

    +

    {channel.channel.channel_point}

    @@ -23,9 +26,9 @@ const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker, explo

    { ticker.currency === 'btc' ? - btc.satoshisToBtc(channel.capacity) + btc.satoshisToBtc(channel.channel.capacity) : - btc.satoshisToUsd(channel.capacity, currentTicker.price_usd) + btc.satoshisToUsd(channel.channel.capacity, currentTicker.price_usd) }

    @@ -34,9 +37,9 @@ const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker, explo

    { ticker.currency === 'btc' ? - btc.satoshisToBtc(channel.local_balance) + btc.satoshisToBtc(channel.channel.local_balance) : - btc.satoshisToUsd(channel.local_balance, currentTicker.price_usd) + btc.satoshisToUsd(channel.channel.local_balance, currentTicker.price_usd) }

    Local @@ -45,9 +48,9 @@ const OpenPendingChannel = ({ ticker, channel: { channel }, currentTicker, explo

    { ticker.currency === 'btc' ? - btc.satoshisToBtc(channel.remote_balance) + btc.satoshisToBtc(channel.channel.remote_balance) : - btc.satoshisToUsd(channel.remote_balance, currentTicker.price_usd) + btc.satoshisToUsd(channel.channel.remote_balance, currentTicker.price_usd) }

    Remote diff --git a/app/components/Channels/OpenPendingChannel.scss b/app/components/Channels/OpenPendingChannel.scss index a191915e..6378d213 100644 --- a/app/components/Channels/OpenPendingChannel.scss +++ b/app/components/Channels/OpenPendingChannel.scss @@ -13,14 +13,21 @@ opacity: 0.5; .pending { - color: $main; position: absolute; top: 0; left: 10px; padding: 10px; text-transform: uppercase; font-weight: bold; - font-size: 10px; + + h1 { + color: $main; + font-size: 10px; + } + + span { + font-size: 8px; + } } &:first-child { @@ -30,7 +37,7 @@ .left, .right { padding: 0 10px; margin-bottom: 5; - margin-top: 25px; + margin-top: 40px; section { margin-bottom: 20px; diff --git a/app/components/Peers/PeerModal.js b/app/components/Peers/PeerModal.js index ed578209..1d6ea161 100644 --- a/app/components/Peers/PeerModal.js +++ b/app/components/Peers/PeerModal.js @@ -1,6 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' + import ReactModal from 'react-modal' +import { MdClose } from 'react-icons/lib/md' + import styles from './PeerModal.scss' const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { @@ -16,7 +19,8 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { bottom: 'auto', width: '40%', margin: '50px auto', - padding: '40px' + borderRadius: 'none', + padding: '0' } } @@ -30,32 +34,35 @@ const PeerModal = ({ isOpen, resetPeer, peer, disconnect }) => { parentSelector={() => document.body} style={customStyles} > +
    + resetPeer(null)}> + + +
    { - peer ? -
    -
    -

    {peer.address}

    -

    {peer.pub_key}

    -
    + peer && +
    +
    +

    {peer.address}

    +

    {peer.pub_key}

    +
    -
    -
    -
    Satoshis Received
    -
    {peer.sat_recv}
    -
    Satoshis Sent
    -
    {peer.sat_sent}
    -
    Bytes Received
    -
    {peer.bytes_recv}
    -
    Bytes Sent
    -
    {peer.bytes_sent}
    -
    -
    -
    disconnect({ pubkey: peer.pub_key })}> -
    Disconnect peer
    -
    +
    +
    +
    Satoshis Received
    +
    {peer.sat_recv}
    +
    Satoshis Sent
    +
    {peer.sat_sent}
    +
    Bytes Received
    +
    {peer.bytes_recv}
    +
    Bytes Sent
    +
    {peer.bytes_sent}
    +
    +
    +
    disconnect({ pubkey: peer.pub_key })}> +
    Disconnect peer
    - : - null +
    } ) diff --git a/app/components/Peers/PeerModal.scss b/app/components/Peers/PeerModal.scss index e1d41492..91ae0086 100644 --- a/app/components/Peers/PeerModal.scss +++ b/app/components/Peers/PeerModal.scss @@ -1,29 +1,39 @@ @import '../../variables.scss'; -.peer { - padding: 40px; +.closeContainer { + background: $lightgrey; + text-align: right; + padding: 10px; + + span { + color: $darkestgrey; + font-size: 20px; + cursor: pointer; + } } .header { - margin-bottom: 50px; + background: $lightgrey; + padding: 20px; h1 { color: $black; text-align: center; - margin-bottom: 5px; + margin-bottom: 20px; font-weight: bold; } h2 { color: $darkestgrey; - font-size: 14px; + font-size: 12px; text-align: center; } } .details { - width: 75%; - margin: 20px auto; + dl { + padding: 40px 40px 40px 40px; + } dt { text-align: left; @@ -38,36 +48,28 @@ dd { text-align: right; font-weight: 400; - padding: 19px 0; + padding: 30px 0 10px 0; margin-left: 0; - border-top: 1px solid $darkgrey; + border-bottom: 1px solid $darkgrey; } } .close { text-align: center; + padding-bottom: 40px; div { - width: 35%; margin: 0 auto; cursor: pointer; - height: 55px; - min-height: 55px; - text-transform: none; font-size: 18px; - transition: opacity .2s ease-out; - background: $red; - color: $white; + color: $red; border: none; - font-weight: 500; padding: 0; text-align: center; - line-height: 55px; transition: all 0.25s; - border-radius: 5px; &:hover { - background: darken($red, 10%); + color: lighten($red, 10%); } } } diff --git a/app/components/Wallet/ReceiveModal.js b/app/components/Wallet/ReceiveModal.js index 761f4e36..49b89710 100644 --- a/app/components/Wallet/ReceiveModal.js +++ b/app/components/Wallet/ReceiveModal.js @@ -4,9 +4,11 @@ import ReactModal from 'react-modal' import copy from 'copy-to-clipboard' import QRCode from 'qrcode.react' import { showNotification } from 'notifications' +import { MdClose } from 'react-icons/lib/md' +import { FaCopy } from 'react-icons/lib/fa' import styles from './ReceiveModal.scss' -const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress }) => { +const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress, qrCodeType, changeQrCode }) => { const customStyles = { overlay: { cursor: 'pointer' @@ -16,8 +18,10 @@ const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress } left: '20%', right: '0', bottom: 'auto', - width: '60%', - margin: '50px auto' + width: '40%', + margin: '50px auto', + borderRadius: 'none', + padding: '0' } } @@ -36,22 +40,48 @@ const ReceiveModal = ({ isOpen, hideActivityModal, pubkey, address, newAddress } parentSelector={() => document.body} style={customStyles} > +
    + hideActivityModal()}> + + +
    +
    -
    -

    Node Public Key ( copyOnClick(pubkey)}>Copy)

    -

    {pubkey}

    -
    +
    +
    + +
    +
      +
    • + Wallet address +
    • +
    • + Node pubkey +
    • +
    +
    -

    Deposit Address ( copyOnClick(address)}>Copy)

    +

    Deposit Address

    newAddress('p2pkh')}>New Address
    -

    {address}

    +

    + {address} + copyOnClick(address)} className='hint--left' data-hint='Copy address'> + + +

    +
    -
    - -
    +
    +

    Node Public Key

    +

    + {pubkey} + copyOnClick(pubkey)} className='hint--left' data-hint='Copy pubkey'> + + +

    diff --git a/app/components/Wallet/ReceiveModal.scss b/app/components/Wallet/ReceiveModal.scss index 50c32dc6..b2485f66 100644 --- a/app/components/Wallet/ReceiveModal.scss +++ b/app/components/Wallet/ReceiveModal.scss @@ -1,15 +1,59 @@ @import '../../variables.scss'; +.closeContainer { + background: $lightgrey; + text-align: right; + padding: 10px; + + span { + color: $darkestgrey; + font-size: 20px; + cursor: pointer; + } +} + .container { + header { + background: $lightgrey; + padding: 10px 40px 40px; + text-align: center; + + .qrcodes { + text-align: center; + margin-top: 20px; + } + + .tabs { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin-top: 20px; + + li { + margin: 0 20px; + color: $darkestgrey; + transition: all 0.25s; + + &:hover { + color: $black; + } + + &.active { + color: $black; + font-weight: bold; + } + } + } + } + section { margin: 25px 0; padding: 25px; - border-bottom: 1px solid $darkestgrey; h4 { font-size: 14px; font-weight: bold; - text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px; @@ -19,20 +63,33 @@ } } - .qrcode { - text-align: center; - margin-top: 20px; - } - p { + display: flex; + flex-direction: row; font-family: 'Roboto'; - text-align: center; font-size: 14px; font-weight: 200; - border-radius: 7px; background: $lightgrey; - border: 1px solid $main; - padding: 10px; + + span { + padding: 15px; + } + + span:nth-child(1) { + flex: 9; + overflow-x: scroll; + } + + span:nth-child(2) { + background: $darkgrey; + color: $black; + cursor: pointer; + transition: all 0.25s; + + &:hover { + background: $darkestgrey; + } + } } } } diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js index 10130a5e..8c9b0216 100644 --- a/app/components/Wallet/Wallet.js +++ b/app/components/Wallet/Wallet.js @@ -13,7 +13,8 @@ class Wallet extends Component { super(props) this.state = { - modalOpen: false + modalOpen: false, + qrCodeType: 1 } } @@ -25,19 +26,29 @@ class Wallet extends Component { newAddress } = this.props - const { modalOpen } = this.state + const { modalOpen, qrCodeType } = this.state + + const changeQrCode = () => { + const qrCodeType = this.state.qrCodeType === 1 ? 2 : 1 + + this.setState({ qrCodeType }) + } return (
    { - (modalOpen && + ( + modalOpen && this.setState({ modalOpen: false })} pubkey={info.data.identity_pubkey} address={address} newAddress={newAddress} - />) + qrCodeType={qrCodeType} + changeQrCode={changeQrCode} + /> + ) }
    @@ -52,7 +63,7 @@ class Wallet extends Component {
    -
    this.setState({ modalOpen: true })}> +
    this.setState({ modalOpen: true })}> Address
    diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss index 88b4e6bf..b2cf35e2 100644 --- a/app/components/Wallet/Wallet.scss +++ b/app/components/Wallet/Wallet.scss @@ -58,10 +58,10 @@ height: calc(100% - 50px); div { - font-size: 20px; - padding: 10px 25px; + padding: 7px 20px; background: $main; transition: background 0.25s; + color: $black; &:hover { background: darken($main, 10%); diff --git a/app/lnd/methods/paymentsController.js b/app/lnd/methods/paymentsController.js index f0f36fab..29ff826c 100644 --- a/app/lnd/methods/paymentsController.js +++ b/app/lnd/methods/paymentsController.js @@ -6,10 +6,13 @@ */ export function sendPaymentSync(lnd, { paymentRequest }) { return new Promise((resolve, reject) => { - lnd.sendPaymentSync({ payment_request: paymentRequest }, (err, data) => { - if (err) { reject(err) } + lnd.sendPaymentSync({ payment_request: paymentRequest }, (error, data) => { + if (error) { + reject({ error }) + return + } - if (!data.payment_route) { reject({ error: data.payment_error }) } + if (!data || !data.payment_route) { reject({ error: data.payment_error }) } resolve(data) }) diff --git a/app/lnd/subscribe/transactions.js b/app/lnd/subscribe/transactions.js index 0c816c4a..5c3f0091 100644 --- a/app/lnd/subscribe/transactions.js +++ b/app/lnd/subscribe/transactions.js @@ -9,5 +9,5 @@ export default function subscribeToTransactions(mainWindow, lnd) { }) call.on('end', () => console.log('end')) call.on('error', error => console.log('error: ', error)) - call.on('status', status => console.log('status: ', status)) + call.on('status', status => console.log('TRANSACTION STATUS: ', status)) } diff --git a/app/main.dev.js b/app/main.dev.js index 8f69f8e2..dfc91720 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -165,6 +165,7 @@ export const startLnd = () => { '--bitcoin.active', '--bitcoin.testnet', '--neutrino.active', + '--neutrino.connect=btcd0.lightning.computer:18333', '--neutrino.connect=faucet.lightning.community:18333', '--autopilot.active', '--debuglevel=debug', diff --git a/app/reducers/channels.js b/app/reducers/channels.js index a8457bf2..5f99fb83 100644 --- a/app/reducers/channels.js +++ b/app/reducers/channels.js @@ -165,27 +165,32 @@ export const closeChannel = ({ channel_point }) => (dispatch) => { // TODO: Decide how to handle streamed updates for closing channels // Receive IPC event for closeChannel -export const closeChannelSuccessful = () => (dispatch) => { +export const closeChannelSuccessful = (event, data) => (dispatch) => { + console.log('PUSH CLOSE CHANNEL SUCCESSFUL: ', data) dispatch(fetchChannels()) } // Receive IPC event for updated closing channel -export const pushclosechannelupdated = () => (dispatch) => { +export const pushclosechannelupdated = (event, data) => (dispatch) => { + console.log('PUSH CLOSE CHANNEL UPDATED: ', data) dispatch(fetchChannels()) } // Receive IPC event for closing channel end -export const pushclosechannelend = () => (dispatch) => { +export const pushclosechannelend = (event, data) => (dispatch) => { + console.log('PUSH CLOSE CHANNEL END: ', data) dispatch(fetchChannels()) } // Receive IPC event for closing channel error -export const pushclosechannelerror = () => (dispatch) => { +export const pushclosechannelerror = (event, data) => (dispatch) => { + console.log('PUSH CLOSE CHANNEL END: ', data) dispatch(fetchChannels()) } // Receive IPC event for closing channel status -export const pushclosechannelstatus = () => (dispatch) => { +export const pushclosechannelstatus = (event, data) => (dispatch) => { + console.log('PUSH CLOSE CHANNEL STATUS: ', data) dispatch(fetchChannels()) } diff --git a/app/reducers/info.js b/app/reducers/info.js index 0a80e8cc..f86641d3 100644 --- a/app/reducers/info.js +++ b/app/reducers/info.js @@ -1,7 +1,6 @@ import { createSelector } from 'reselect' import { ipcRenderer } from 'electron' -import { fetchBalance } from './balance' -import { newAddress } from './address' + // ------------------------------------ // Constants // ------------------------------------ @@ -25,8 +24,6 @@ export const fetchInfo = () => async (dispatch) => { // Receive IPC event for info export const receiveInfo = (event, data) => (dispatch) => { - dispatch(fetchBalance()) - dispatch(newAddress('p2pkh')) dispatch({ type: RECEIVE_INFO, data }) } diff --git a/app/routes/activity/components/components/Modal/Invoice/Invoice.js b/app/routes/activity/components/components/Modal/Invoice/Invoice.js index a22cac3c..ddb78493 100644 --- a/app/routes/activity/components/components/Modal/Invoice/Invoice.js +++ b/app/routes/activity/components/components/Modal/Invoice/Invoice.js @@ -6,7 +6,6 @@ import 'moment-timezone' import QRCode from 'qrcode.react' -import { MdCheck } from 'react-icons/lib/md' import { FaCircle } from 'react-icons/lib/fa' import CurrencyIcon from 'components/CurrencyIcon'