diff --git a/app/api/index.js b/app/api/index.js index e71c69df..7ea44624 100644 --- a/app/api/index.js +++ b/app/api/index.js @@ -15,13 +15,12 @@ export function requestTickers(ids) { .then(axios.spread((btcTicker, ltcTicker) => ({ btcTicker: btcTicker[0], ltcTicker: ltcTicker[0] }))) } - -export function requestBlockHeight(id) { - const BASE_URL = `https://testnet-api.smartbit.com.au/v1/blockchain/blocks?limit=1` +export function requestBlockHeight() { + const BASE_URL = 'https://testnet-api.smartbit.com.au/v1/blockchain/blocks?limit=1' return axios({ method: 'get', url: BASE_URL }) .then(response => response.data) .catch(error => error) -} \ No newline at end of file +} diff --git a/app/app.global.scss b/app/app.global.scss index d55b7f23..0a946033 100644 --- a/app/app.global.scss +++ b/app/app.global.scss @@ -66,4 +66,10 @@ body { opacity: 1; stroke: darken($main, 10%); } +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } } \ No newline at end of file diff --git a/app/components/Channels/Channels.js b/app/components/Channels/Channels.js index 18c73cee..ab2d29f2 100644 --- a/app/components/Channels/Channels.js +++ b/app/components/Channels/Channels.js @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { TiPlus } from 'react-icons/lib/ti' +import { FaRepeat } from 'react-icons/lib/fa' import ChannelModal from './ChannelModal' import ChannelForm from './ChannelForm' import Channel from './Channel' @@ -9,6 +10,7 @@ import ClosedPendingChannel from './ClosedPendingChannel' import styles from './Channels.scss' const Channels = ({ + fetchChannels, ticker, peers, channelsLoading, @@ -22,69 +24,103 @@ const Channels = ({ closeChannel, currentTicker, explorerLinkBase -}) => ( -
- - -
-

Channels

-
setChannelForm({ isOpen: true })} - > - +}) => { + const refreshClicked = (event) => { + // store event in icon so we dont get an error when react clears it + const icon = event.currentTarget + + // fetch channels + fetchChannels() + + // clear animation after the second so we can reuse it + setTimeout(() => { icon.style.animation = '' }, 1000) + + // spin icon for 1 sec + icon.style.animation = 'spin 1000ms linear 1' + } + + return ( +
+ + +
+

Channels

+ + + +
setChannelForm({ isOpen: true })} + > + +
-
-
    - { - !channelsLoading ? - allChannels.map((channel, index) => { - if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) { +
      + { + !channelsLoading ? + allChannels.map((channel, index) => { + if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) { + return ( + + ) + } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) { + return ( + + ) + } return ( - - ) - } else if (Object.prototype.hasOwnProperty.call(channel, 'closing_txid')) { - return ( - ) - } - return ( - - ) - }) - : - 'Loading...' - } -
    -
-) + }) + : + 'Loading...' + } + +
+ ) +} Channels.propTypes = { + fetchChannels: PropTypes.func.isRequired, ticker: PropTypes.object.isRequired, peers: PropTypes.array.isRequired, channelsLoading: PropTypes.bool.isRequired, diff --git a/app/components/Channels/Channels.scss b/app/components/Channels/Channels.scss index 8d73c905..df5f7b38 100644 --- a/app/components/Channels/Channels.scss +++ b/app/components/Channels/Channels.scss @@ -1,5 +1,15 @@ @import '../../variables.scss'; +@keyframes spin { + from { + transform: rotate(0deg) + } + + to { + transform: rotate(360deg); + } +} + .channels { width: 75%; margin: 50px auto; @@ -15,6 +25,20 @@ text-align: left; } + .refresh { + cursor: pointer; + margin-left: 5px; + font-size: 12px; + vertical-align: top; + color: $darkestgrey; + line-height: 14px; + transition: color 0.25s; + + &:hover { + color: $main; + } + } + .openChannel { float: right; cursor: pointer; diff --git a/app/components/LndSyncing/LndSyncing.js b/app/components/LndSyncing/LndSyncing.js index 43acbde1..eff73e6a 100644 --- a/app/components/LndSyncing/LndSyncing.js +++ b/app/components/LndSyncing/LndSyncing.js @@ -1,14 +1,15 @@ import React, { Component } from 'react' +import PropTypes from 'prop-types' import styles from './LndSyncing.scss' class LndSyncing extends Component { constructor(props) { - super(props); + super(props); this.state = { facts: [ { title: 'No2x', - description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA signers. The idea was drawn up and signed in a locked hotel room with select individuals and goes against everything that Bitcoin stands for. There is no favoritism in Bitcoin. There are no politicians. Hash power and business don\'t speak for us. Don\'t trust, verify.' + description: 'Segwit2x is a hard fork proposal led by Barry Silbert and the NYA signers. The idea was drawn up and signed in a locked hotel room with select individuals and goes against everything that Bitcoin stands for. There is no favoritism in Bitcoin. There are no politicians. Hash power and business don\'t speak for us. Don\'t trust, verify.' // eslint-disable-line }, { title: 'Gang', @@ -41,8 +42,7 @@ class LndSyncing extends Component {

zap

{!fetchingBlockHeight &&

{syncPercentage}%

} -
-
+

syncing your lightning node to the blockchain

@@ -52,15 +52,13 @@ class LndSyncing extends Component {
    { - facts.map((facts, index) => { - return ( -
  • this.setState({ currentFact: index })} - /> - ) - }) + facts.map((fact, index) => ( +
  • this.setState({ currentFact: index })} + /> + )) }
@@ -69,4 +67,10 @@ class LndSyncing extends Component { } } +LndSyncing.propTypes = { + fetchBlockHeight: PropTypes.func.isRequired, + fetchingBlockHeight: PropTypes.bool.isRequired, + syncPercentage: PropTypes.number.isRequired +} + export default LndSyncing diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js index 2241d0da..b7e9a6ae 100644 --- a/app/components/ModalRoot/ModalRoot.js +++ b/app/components/ModalRoot/ModalRoot.js @@ -3,11 +3,13 @@ import PropTypes from 'prop-types' import { MdClose } from 'react-icons/lib/md' import SuccessfulSendCoins from './SuccessfulSendCoins' import SuccessfulSendPayment from './SuccessfulSendPayment' +import WalletDetails from './WalletDetails' import styles from './ModalRoot.scss' const MODAL_COMPONENTS = { SUCCESSFUL_SEND_COINS: SuccessfulSendCoins, - SUCCESSFUL_SEND_PAYMENT: SuccessfulSendPayment + SUCCESSFUL_SEND_PAYMENT: SuccessfulSendPayment, + WALLET_DETAILS: WalletDetails /* other modals */ } diff --git a/app/components/ModalRoot/WalletDetails.js b/app/components/ModalRoot/WalletDetails.js new file mode 100644 index 00000000..2789dd6a --- /dev/null +++ b/app/components/ModalRoot/WalletDetails.js @@ -0,0 +1,42 @@ +import React from 'react' +import PropTypes from 'prop-types' +import QRCode from 'qrcode.react' +import styles from './WalletDetails.scss' + +const WalletDetails = ({ info, address }) => ( +
+
+
+
+

Node Alias

+

Testing

+
+
+

Node Public Key

+

{info.data.identity_pubkey}

+
+
+

Deposit Address

+
+ +
+

{address}

+
+
+
+
+

+ Network +

+
+
+
+
+) + +WalletDetails.propTypes = { + info: PropTypes.object.isRequired, + address: PropTypes.string.isRequired +} + +export default WalletDetails diff --git a/app/components/ModalRoot/WalletDetails.scss b/app/components/ModalRoot/WalletDetails.scss new file mode 100644 index 00000000..f9c8092e --- /dev/null +++ b/app/components/ModalRoot/WalletDetails.scss @@ -0,0 +1,70 @@ +@import '../../variables.scss'; + +.walletdetails { +} + +.inner { + width: 75%; + margin: 0 auto; + display: flex; + flex-direction: row; +} + +.left, .right { + padding: 50px 0; + width: 100%; + + section { + position: relative; + margin: 0 20px; + padding: 20px 0; + } +} + +.left { + border-right: 1px solid $darkgrey; + + section { + border-bottom: 1px solid $main; + + h4 { + text-transform: uppercase; + letter-spacing: 1.5px; + font-size: 10px; + margin-bottom: 15px; + } + } + + h1 { + font-family: 'Roboto'; + font-weight: 300; + font-size: 24px; + } + + .qrcode { + text-align: center; + margin: 20px 0; + } + + .copytext { + font-family: 'Roboto'; + text-align: center; + font-size: 14px; + font-weight: 200; + border-radius: 7px; + background: $lightgrey; + border: 1px solid $darkestgrey; + padding: 10px; + } +} + +.right { + section { + h2 { + text-transform: uppercase; + font-family: 'Roboto'; + font-weight: 300; + font-size: 24px; + } + } +} \ No newline at end of file diff --git a/app/components/Nav/Nav.js b/app/components/Nav/Nav.js index ac27b896..527036ef 100644 --- a/app/components/Nav/Nav.js +++ b/app/components/Nav/Nav.js @@ -3,60 +3,14 @@ import PropTypes from 'prop-types' import { NavLink } from 'react-router-dom' import ReactSVG from 'react-svg' import { MdAccountBalanceWallet } from 'react-icons/lib/md' -import { FaClockO, FaDollar } from 'react-icons/lib/fa' -import CryptoIcon from 'components/CryptoIcon' -import CurrencyIcon from 'components/CurrencyIcon' -import { btc, usd } from 'utils' +import { FaClockO } from 'react-icons/lib/fa' import styles from './Nav.scss' -const Nav = ({ ticker, balance, setCurrency, currentTicker, openPayForm, openRequestForm }) => ( +const Nav = ({ openPayForm, openRequestForm }) => (