From 91eb5e32c5ceaf4c7cc42b130a91e2887bee55ea Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 5 Mar 2018 14:06:56 -0600 Subject: [PATCH] fix(on-chain): fix on chain modal to new styles --- app/animated_checkmark.scss | 10 +- app/components/Activity/TransactionModal.js | 90 ++++---- app/components/Activity/TransactionModal.scss | 203 +++++++++--------- app/components/Wallet/Wallet.js | 21 +- app/components/Wallet/Wallet.scss | 65 ++++-- app/lnd/methods/paymentsController.js | 1 + app/reducers/payment.js | 50 +++-- app/routes/activity/components/Activity.js | 4 +- .../activity/containers/ActivityContainer.js | 1 + 9 files changed, 265 insertions(+), 180 deletions(-) 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 -

-
-
+
+
+ + Sent
-
-
-

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} +
+ +
+

blockExplorer.showTransaction(transaction.tx_hash)}>{transaction.tx_hash}

+
) 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
-
-
Gang gang gang baby
+ { + 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,