diff --git a/app/animated_checkmark.scss b/app/animated_checkmark.scss
index 42d85085..48c9e0db 100644
--- a/app/animated_checkmark.scss
+++ b/app/animated_checkmark.scss
@@ -5,19 +5,19 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
- stroke: $gold;
+ stroke: $green;
fill: none;
animation: stroke .6s $curve forwards;
}
.checkmark {
- width: 56px;
- height: 56px;
+ width: 20px;
+ height: 20px;
border-radius: 50%;
stroke-width: 2;
stroke: #fff;
stroke-miterlimit: 10;
- box-shadow: inset 0px 0px 0px $gold;
+ box-shadow: inset 0px 0px 0px $green;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}
@@ -45,6 +45,6 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
@keyframes fill {
100% {
- box-shadow: inset 0px 0px 0px 30px $gold;
+ box-shadow: inset 0px 0px 0px 30px $green;
}
}
\ No newline at end of file
diff --git a/app/components/Activity/TransactionModal.js b/app/components/Activity/TransactionModal.js
index f75dd7b8..30decb8f 100644
--- a/app/components/Activity/TransactionModal.js
+++ b/app/components/Activity/TransactionModal.js
@@ -1,8 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
+import Moment from 'react-moment'
+import 'moment-timezone'
+
import { FaAngleDown } from 'react-icons/lib/fa'
+import Isvg from 'react-inlinesvg'
+import paperPlane from 'icons/paper_plane.svg'
+import link from 'icons/link.svg'
import { blockExplorer } from 'utils'
import Value from 'components/Value'
@@ -23,52 +29,54 @@ const TransactionModal = ({
}
}) => (
-
-
-
-
-
- 0 && styles.active}`}>
- {
- transaction.amount > 0 ?
- '+'
- :
- '-'
- }
-
-
-
- setActivityModalCurrencyFilters(!showCurrencyFilters)}>
- {currencyName}
-
-
- {
- currentCurrencyFilters.map(filter =>
- - onCurrencyFilterClick(filter.key)}>{filter.name}
)
- }
-
-
-
- {transaction.num_confirmations} {transaction.num_confirmations > 1 ? 'confirmations' : 'confirmation'}
-
-
- {currencyName} fee
-
-
-
+
+
-
-
-
Transaction
-
blockExplorer.showTransaction(transaction.tx_hash)}>{transaction.tx_hash}
+
+
+
+ blockExplorer.showTransaction(transaction.tx_hash)}>On-Chain
-
-
-
Block
-
blockExplorer.showBlock(transaction.block_hash)}>{transaction.block_hash}
+
+
+ {currencyName} fee
+
+
+
+
+ 0 && styles.active}`}>
+ {
+ transaction.amount > 0 ?
+ '+'
+ :
+ '-'
+ }
+
+
+
+
setActivityModalCurrencyFilters(!showCurrencyFilters)}>
+ {currencyName}
+
+ {
+ currentCurrencyFilters.map(filter =>
+ - onCurrencyFilterClick(filter.key)}>{filter.name}
)
+ }
+
+
+
+
+
+ {transaction.time_stamp * 1000}
+
+
+
)
diff --git a/app/components/Activity/TransactionModal.scss b/app/components/Activity/TransactionModal.scss
index ca97d337..4ec856d7 100644
--- a/app/components/Activity/TransactionModal.scss
+++ b/app/components/Activity/TransactionModal.scss
@@ -2,126 +2,133 @@
.container {
color: $white;
+ font-size: 12px;
+ width: 75%;
+ margin: 0 auto;
+ background: $spaceblue;
}
-.content {
- background: $spaceblue;
- width: 85%;
- margin: 50px auto;
- padding-top: 30px;
-
- .top {
- padding: 10px 60px;
-
- .details {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- margin-bottom: 40px;
-
- .amount {
- display: flex;
- flex-direction: row;
- align-items: center;
- position: relative;
-
- .symbol {
- color: $red;
-
- &.active {
- color: $green;
- }
- }
+.header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 20px;
+
+ section {
+ &:nth-child(1) {
+ font-size: 16px;
+ color: $green;
+
+ svg {
+ width: 16px;
+ height: 16px;
+ vertical-align: top;
+ fill: $green;
+ }
- h1 {
- font-size: 40px;
- margin-right: 10px;
- }
+ span:nth-child(2) {
+ margin-left: 5px;
+ }
+ }
- .currentCurrency {
- cursor: pointer;
- transition: 0.25s all;
+ &.details {
+ text-align: right;
- &:hover {
- opacity: 0.5;
- }
+ div:nth-child(1) {
+ margin-bottom: 5px;
+ }
- span {
- font-size: 14px;
-
- &:nth-child(1) {
- font-weight: bold;
- }
- }
+ svg {
+ width: 12px;
+ height: 12px;
+ vertical-align: middle;
+ }
- }
+ .link {
+ text-decoration: underline;
+ margin-left: 5px;
+ cursor: pointer;
+ transition: all 0.25s;
- ul {
- visibility: hidden;
- position: absolute;
- top: 40px;
- right: -50px;
-
- &.active {
- visibility: visible;
- }
-
- li {
- padding: 8px 15px;
- background: #191919;
- cursor: pointer;
- transition: 0.25s hover;
- border-bottom: 1px solid #0f0f0f;
-
- &:hover {
- background: #0f0f0f;
- }
- }
+ &:hover {
+ opacity: 0.5;
}
}
+ }
+ }
+}
- .date {
- font-size: 12px;
- text-align: right;
+.amount {
+ margin-top: 50px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
- .notPaid {
- color: #FF8A65;
- margin-top: 5px;
- }
+ h1 {
+ font-size: 40px;
+ }
+
+ section {
+ font-size: 20px;
+ margin-left: 10px;
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ span {
+ opacity: 0.5;
+ }
+ }
+
+ span {
+ transition: all 0.25s;
+ }
+
+ ul {
+ visibility: hidden;
+ position: absolute;
+ top: 40px;
+ right: -50px;
+ font-size: 12px;
+
+ &.active {
+ visibility: visible;
+ }
- p {
- margin-bottom: 5px;
+ li {
+ padding: 8px 15px;
+ background: #191919;
+ cursor: pointer;
+ transition: 0.25s hover;
+ border-bottom: 1px solid #0f0f0f;
- &:nth-child(2) {
- opacity: 0.5;
- }
+ &:hover {
+ background: #0f0f0f;
}
}
}
}
}
-.bottom {
- background: #31343f;
- padding: 40px;
+.date {
+ text-align: center;
+ margin: 20px 0 50px 0;
+ padding: 20px;
+}
- .txHash, .blockHash {
- margin: 40px 0;
-
- h4 {
- font-size: 10px;
- margin-bottom: 10px;
- }
+.footer {
+ background: #31343f;
+ padding: 20px;
+ text-align: center;
- p {
- font-size: 14px;
- text-decoration: underline;
- cursor: pointer;
- transition: all 0.25s;
+ p {
+ text-decoration: underline;
+ cursor: pointer;
- &:hover {
- opacity: 0.5;
- }
+ &:hover {
+ opacity: 0.5;
}
}
-}
+}
\ No newline at end of file
diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index 75606f3d..b3ae5052 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -5,6 +5,7 @@ import Isvg from 'react-inlinesvg'
import { btc } from 'utils'
import Value from 'components/Value'
+import AnimatedCheckmark from 'components/AnimatedCheckmark'
import bitcoinIcon from 'icons/bitcoin.svg'
import zapLogo from 'icons/zap_logo.svg'
@@ -19,7 +20,9 @@ const Wallet = ({
ticker,
currentTicker,
openPayForm,
- openRequestForm
+ openRequestForm,
+ showPayLoadingScreen,
+ showSuccessPayScreen
}) => {
const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
@@ -66,8 +69,20 @@ const Wallet = ({
Request
-
-
+ {
+ showPayLoadingScreen &&
+
+
+ Sending your lightning payment...
+
+ }
+ {
+ showSuccessPayScreen &&
+
+
+ Successfully sent payment
+
+ }
diff --git a/app/components/Wallet/Wallet.scss b/app/components/Wallet/Wallet.scss
index c2bca584..5dc92f5e 100644
--- a/app/components/Wallet/Wallet.scss
+++ b/app/components/Wallet/Wallet.scss
@@ -142,26 +142,57 @@
}
}
- .notificationBox {
- text-align: right;
- font-size: 12px;
+}
+
+.notificationBox {
+ text-align: right;
+ font-size: 12px;
+
+ section {
+ display: inline-block;
+ vertical-align: middle;
+ transition: all 0.25s;
+ }
+
+ .spinner {
+ height: 20px;
+ width: 20px;
+ border: 1px solid rgba(235, 184, 100, 0.1);
+ border-left-color: rgba(235, 184, 100, 0.4);
+ -webkit-border-radius: 999px;
+ -moz-border-radius: 999px;
+ border-radius: 999px;
+ -webkit-animation: animation-rotate 1000ms linear infinite;
+ -moz-animation: animation-rotate 1000ms linear infinite;
+ -o-animation: animation-rotate 1000ms linear infinite;
+ animation: animation-rotate 1000ms linear infinite;
+ }
+
+ .icon {
+ margin-right: 5px;
}
}
-.spinner {
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-left-color: rgba(0, 0, 0, 0.4);
- -webkit-border-radius: 999px;
- -moz-border-radius: 999px;
- border-radius: 999px;
+@-webkit-keyframes animation-rotate {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
}
-.spinner {
- margin: 0 auto;
- height: 20px;
- width: 20px;
- -webkit-animation: animation-rotate 1000ms linear infinite;
- -moz-animation: animation-rotate 1000ms linear infinite;
- -o-animation: animation-rotate 1000ms linear infinite;
- animation: animation-rotate 1000ms linear infinite;
+@-moz-keyframes animation-rotate {
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
+}
+
+@-o-keyframes animation-rotate {
+ 100% {
+ -o-transform: rotate(360deg);
+ }
+}
+
+@keyframes animation-rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
}
diff --git a/app/lnd/methods/paymentsController.js b/app/lnd/methods/paymentsController.js
index e9afd981..3a8f3de2 100644
--- a/app/lnd/methods/paymentsController.js
+++ b/app/lnd/methods/paymentsController.js
@@ -14,6 +14,7 @@ export function sendPaymentSync(lnd, meta, { paymentRequest }) {
if (!data || !data.payment_route) { reject({ error: data.payment_error }) }
+ console.log('data: ', data)
resolve(data)
})
})
diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index 3569ad97..3365c369 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -19,6 +19,9 @@ export const SEND_PAYMENT = 'SEND_PAYMENT'
export const PAYMENT_SUCCESSFULL = 'PAYMENT_SUCCESSFULL'
export const PAYMENT_FAILED = 'PAYMENT_FAILED'
+export const SHOW_SUCCESS_SCREEN = 'SHOW_SUCCESS_SCREEN'
+export const HIDE_SUCCESS_SCREEN = 'HIDE_SUCCESS_SCREEN'
+
// ------------------------------------
// Actions
// ------------------------------------
@@ -48,6 +51,18 @@ export function paymentSuccessfull(payment) {
}
}
+export function showSuccessScreen() {
+ return {
+ type: SHOW_SUCCESS_SCREEN
+ }
+}
+
+export function hideSuccessScreen() {
+ return {
+ type: HIDE_SUCCESS_SCREEN
+ }
+}
+
// Send IPC event for payments
export const fetchPayments = () => (dispatch) => {
dispatch(getPayments())
@@ -62,11 +77,10 @@ export const receivePayments = (event, { payments }) => dispatch => dispatch({ t
export const paymentSuccessful = () => (dispatch) => {
// Dispatch successful payment to stop loading screen
dispatch(paymentSuccessfull())
- // Close the form modal once the payment was succesful
- dispatch(setFormType(null))
- // Show successful payment state
- dispatch(showModal('SUCCESSFUL_SEND_PAYMENT'))
+ // Show successful payment state for 5 seconds
+ dispatch(showSuccessScreen())
+ setTimeout(() => dispatch(hideSuccessScreen()), 5000)
// Refetch payments (TODO: dont do a full refetch, rather append new tx to list)
dispatch(fetchPayments())
@@ -86,14 +100,17 @@ export const payInvoice = paymentRequest => (dispatch, getState) => {
dispatch(sendPayment())
ipcRenderer.send('lnd', { msg: 'sendPayment', data: { paymentRequest } })
+ // Close the form modal once the payment has been sent
+ dispatch(setFormType(null))
+
// if LND hangs on sending the payment we'll cut it after 10 seconds and return an error
- setTimeout(() => {
- const { payment } = getState()
+ // setTimeout(() => {
+ // const { payment } = getState()
- if (payment.sendingPayment) {
- dispatch(paymentFailed(null, { error: 'Shoot, we\'re having some trouble sending your payment.' }))
- }
- }, 10000)
+ // if (payment.sendingPayment) {
+ // dispatch(paymentFailed(null, { error: 'Shoot, we\'re having some trouble sending your payment.' }))
+ // }
+ // }, 10000)
}
@@ -101,12 +118,16 @@ export const payInvoice = paymentRequest => (dispatch, getState) => {
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
- [SET_PAYMENT]: (state, { payment }) => ({ ...state, payment }),
[GET_PAYMENTS]: state => ({ ...state, paymentLoading: true }),
- [SEND_PAYMENT]: state => ({ ...state, sendingPayment: true }),
[RECEIVE_PAYMENTS]: (state, { payments }) => ({ ...state, paymentLoading: false, payments }),
+
+ [SET_PAYMENT]: (state, { payment }) => ({ ...state, payment }),
+ [SEND_PAYMENT]: state => ({ ...state, sendingPayment: true }),
[PAYMENT_SUCCESSFULL]: state => ({ ...state, sendingPayment: false }),
- [PAYMENT_FAILED]: state => ({ ...state, sendingPayment: false })
+ [PAYMENT_FAILED]: state => ({ ...state, sendingPayment: false }),
+
+ [SHOW_SUCCESS_SCREEN]: state => ({ ...state, showSuccessPayScreen: true }),
+ [HIDE_SUCCESS_SCREEN]: state => ({ ...state, showSuccessPayScreen: false })
}
const paymentSelectors = {}
@@ -126,7 +147,8 @@ const initialState = {
sendingPayment: false,
paymentLoading: false,
payments: [],
- payment: null
+ payment: null,
+ showSuccessPayScreen: false
}
export default function paymentReducer(state = initialState, action) {
diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js
index a4243e75..6fd50fcd 100644
--- a/app/routes/activity/components/Activity.js
+++ b/app/routes/activity/components/Activity.js
@@ -56,8 +56,8 @@ class Activity extends Component {
walletProps
} = this.props
- if (invoiceLoading || paymentLoading) { return }
- if (balance.balanceLoading) { return }
+ // if (invoiceLoading || paymentLoading) { return }
+ // if (balance.balanceLoading) { return }
if (!balance.channelBalance || !balance.walletBalance) { return }
return (
diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js
index 166a36f4..cda3c15d 100644
--- a/app/routes/activity/containers/ActivityContainer.js
+++ b/app/routes/activity/containers/ActivityContainer.js
@@ -78,6 +78,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
ticker: stateProps.ticker,
currentTicker: stateProps.currentTicker,
showPayLoadingScreen: stateProps.showPayLoadingScreen,
+ showSuccessPayScreen: stateProps.payment.showSuccessPayScreen,
setCurrency: dispatchProps.setCurrency,
newAddress: dispatchProps.newAddress,