From 4652c60ea775c6cf757ebee3c87e482e2de05802 Mon Sep 17 00:00:00 2001 From: Ben Woosley Date: Wed, 13 Jun 2018 19:01:09 -0500 Subject: [PATCH 1/4] Fix ModalRoot spec to pass By providing required param isTestnet --- test/components/ModalRoot.spec.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/test/components/ModalRoot.spec.js b/test/components/ModalRoot.spec.js index 05a6dcf2..e4e6a187 100644 --- a/test/components/ModalRoot.spec.js +++ b/test/components/ModalRoot.spec.js @@ -1,14 +1,13 @@ import React from 'react' import { shallow } from 'enzyme' import ModalRoot from '../../app/components/ModalRoot' -import SuccessfulSendCoins from '../../app/components/ModalRoot/SuccessfulSendCoins' -import SuccessfulSendPayment from '../../app/components/ModalRoot/SuccessfulSendPayment' const defaultProps = { hideModal: () => {}, modalProps: {}, currentTicker: {}, - currency: '' + currency: '', + isTestnet: false } describe('no modal', () => { From 7e998285f9610562bbbe5b6912d8dff9a6b6f032 Mon Sep 17 00:00:00 2001 From: Ben Woosley Date: Wed, 13 Jun 2018 19:02:00 -0500 Subject: [PATCH 2/4] Drop the SuccessfulSendPayment and SuccessfulSendCoins modals These are defunct, see the replacements: showSuccessPayScreen and successTransactionScreen in Wallet. --- app/components/ModalRoot/ModalRoot.js | 4 -- .../ModalRoot/SuccessfulSendCoins.js | 42 ------------------- .../ModalRoot/SuccessfulSendCoins.scss | 37 ---------------- .../ModalRoot/SuccessfulSendPayment.js | 22 ---------- .../ModalRoot/SuccessfulSendPayment.scss | 42 ------------------- test/components/ModalRoot.spec.js | 28 ------------- 6 files changed, 175 deletions(-) delete mode 100644 app/components/ModalRoot/SuccessfulSendCoins.js delete mode 100644 app/components/ModalRoot/SuccessfulSendCoins.scss delete mode 100644 app/components/ModalRoot/SuccessfulSendPayment.js delete mode 100644 app/components/ModalRoot/SuccessfulSendPayment.scss diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js index a2f0f20c..1145cfa5 100644 --- a/app/components/ModalRoot/ModalRoot.js +++ b/app/components/ModalRoot/ModalRoot.js @@ -1,14 +1,10 @@ import React from 'react' 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, WALLET_DETAILS: WalletDetails /* other modals */ } diff --git a/app/components/ModalRoot/SuccessfulSendCoins.js b/app/components/ModalRoot/SuccessfulSendCoins.js deleted file mode 100644 index 462e3d05..00000000 --- a/app/components/ModalRoot/SuccessfulSendCoins.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import AnimatedCheckmark from 'components/AnimatedCheckmark' -import { btc, blockExplorer } from 'utils' -import styles from './SuccessfulSendCoins.scss' - -const SuccessfulSendCoins = ({ - amount, addr, txid, hideModal, currentTicker, currency, isTestnet -}) => { - const calculatedAmount = currency === 'usd' ? btc.satoshisToUsd(amount, currentTicker.price_usd) : btc.satoshisToBtc(amount) - - return ( -
- -

- You  - blockExplorer.showTransaction(isTestnet, txid)}>sent  - {calculatedAmount} {currency.toUpperCase()}  - to  - {addr} -

-
- Done -
-
- ) -} - -SuccessfulSendCoins.propTypes = { - amount: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string - ]).isRequired, - addr: PropTypes.string.isRequired, - txid: PropTypes.string.isRequired, - hideModal: PropTypes.func.isRequired, - currentTicker: PropTypes.object.isRequired, - currency: PropTypes.string.isRequired, - isTestnet: PropTypes.bool.isRequired -} - -export default SuccessfulSendCoins diff --git a/app/components/ModalRoot/SuccessfulSendCoins.scss b/app/components/ModalRoot/SuccessfulSendCoins.scss deleted file mode 100644 index ef7bd550..00000000 --- a/app/components/ModalRoot/SuccessfulSendCoins.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import '../../variables.scss'; - -.container { - position: relative; - min-height: 250px; - top: calc(50% - 250px); - text-align: center; - - h1 { - font-size: 20px; - margin: 50px 0; - - .link { - cursor: pointer; - color: $main; - text-decoration: underline; - } - - .amount, .addr { - font-weight: bold; - } - } - - .button { - text-align: center; - border-radius: 8px; - background: $main; - padding: 20px 10px; - font-weight: bold; - cursor: pointer; - text-transform: uppercase; - letter-spacing: .2px; - color: $white; - width: 15%; - margin: 0 auto; - } -} diff --git a/app/components/ModalRoot/SuccessfulSendPayment.js b/app/components/ModalRoot/SuccessfulSendPayment.js deleted file mode 100644 index d8d74380..00000000 --- a/app/components/ModalRoot/SuccessfulSendPayment.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import AnimatedCheckmark from 'components/AnimatedCheckmark' -import styles from './SuccessfulSendPayment.scss' - -const SuccessfulSendPayment = ({ hideModal }) => ( -
- -

- Successfully sent payment  -

-
- Done -
-
-) - -SuccessfulSendPayment.propTypes = { - hideModal: PropTypes.func.isRequired -} - -export default SuccessfulSendPayment diff --git a/app/components/ModalRoot/SuccessfulSendPayment.scss b/app/components/ModalRoot/SuccessfulSendPayment.scss deleted file mode 100644 index f71069c2..00000000 --- a/app/components/ModalRoot/SuccessfulSendPayment.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import '../../variables.scss'; - -.container { - position: relative; - min-height: 250px; - top: calc(50% - 250px); - text-align: center; - - h1 { - font-size: 20px; - margin: 50px 0; - - .link { - cursor: pointer; - color: $main; - text-decoration: underline; - } - - .amount, .addr { - font-weight: bold; - } - } - - .button { - text-align: center; - border-radius: 8px; - background: #31343f; - padding: 20px 10px; - font-weight: bold; - cursor: pointer; - text-transform: uppercase; - letter-spacing: .2px; - color: $white; - width: 15%; - margin: 0 auto; - transition: all 0.25s; - - &:hover { - background: darken(#31343f, 5%); - } - } -} \ No newline at end of file diff --git a/test/components/ModalRoot.spec.js b/test/components/ModalRoot.spec.js index e4e6a187..b0946bdf 100644 --- a/test/components/ModalRoot.spec.js +++ b/test/components/ModalRoot.spec.js @@ -17,31 +17,3 @@ describe('no modal', () => { expect(el.html()).toBeNull() }) }) - -describe('SuccessfulSendCoins modal', () => { - const props = { - ...defaultProps, - modalType: 'SUCCESSFUL_SEND_COINS', - modalProps: { - amount: 10000000, - addr: 'mkrfWvHSbUjgyne4EWnydWekywWBjrucKs', - txid: 'fd7dfc8b809a128323b1b679fe31e27ed7b34baae0a79cd4a290fb4dab892d26' - } - } - const el = shallow() - it('should render specific modal', () => { - expect(el.find(SuccessfulSendCoins).length).toBe(1) - }) -}) - -describe('SuccessfulSendPayment modal', () => { - const props = { - ...defaultProps, - modalType: 'SUCCESSFUL_SEND_PAYMENT', - modalProps: {} - } - const el = shallow() - it('should render specific modal', () => { - expect(el.find(SuccessfulSendPayment).length).toBe(1) - }) -}) From ba79b67e3147fc89038803cd766f4814dbbb5f36 Mon Sep 17 00:00:00 2001 From: Ben Woosley Date: Wed, 13 Jun 2018 19:06:33 -0500 Subject: [PATCH 3/4] Drop the unused WalletDetails modal Seems to have been supplanted, e.g. see the Wallet/ReceiveModal. --- app/components/ModalRoot/ModalRoot.js | 2 - app/components/ModalRoot/WalletDetails.js | 40 ------------ app/components/ModalRoot/WalletDetails.scss | 70 --------------------- 3 files changed, 112 deletions(-) delete mode 100644 app/components/ModalRoot/WalletDetails.js delete mode 100644 app/components/ModalRoot/WalletDetails.scss diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js index 1145cfa5..639d775c 100644 --- a/app/components/ModalRoot/ModalRoot.js +++ b/app/components/ModalRoot/ModalRoot.js @@ -1,11 +1,9 @@ import React from 'react' import PropTypes from 'prop-types' import { MdClose } from 'react-icons/lib/md' -import WalletDetails from './WalletDetails' import styles from './ModalRoot.scss' const MODAL_COMPONENTS = { - WALLET_DETAILS: WalletDetails /* other modals */ } diff --git a/app/components/ModalRoot/WalletDetails.js b/app/components/ModalRoot/WalletDetails.js deleted file mode 100644 index 99000285..00000000 --- a/app/components/ModalRoot/WalletDetails.js +++ /dev/null @@ -1,40 +0,0 @@ -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 deleted file mode 100644 index f9c8092e..00000000 --- a/app/components/ModalRoot/WalletDetails.scss +++ /dev/null @@ -1,70 +0,0 @@ -@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 From 037f351b592ebd281713141d8a53ee5f35b4c3f1 Mon Sep 17 00:00:00 2001 From: Ben Woosley Date: Wed, 13 Jun 2018 19:25:38 -0500 Subject: [PATCH 4/4] Drop the ModalRoot component Given we have no active use of it, and the trend seems to be toward independent modal components, eg. ContactModal, let's drop it. --- app/components/ModalRoot/ModalRoot.js | 44 --------------------- app/components/ModalRoot/ModalRoot.scss | 43 --------------------- app/components/ModalRoot/index.js | 3 -- app/reducers/index.js | 2 - app/reducers/modal.js | 47 ----------------------- app/routes/app/components/App.js | 17 -------- app/routes/app/containers/AppContainer.js | 6 --- test/components/ModalRoot.spec.js | 19 --------- 8 files changed, 181 deletions(-) delete mode 100644 app/components/ModalRoot/ModalRoot.js delete mode 100644 app/components/ModalRoot/ModalRoot.scss delete mode 100644 app/components/ModalRoot/index.js delete mode 100644 app/reducers/modal.js delete mode 100644 test/components/ModalRoot.spec.js diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js deleted file mode 100644 index 639d775c..00000000 --- a/app/components/ModalRoot/ModalRoot.js +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { MdClose } from 'react-icons/lib/md' -import styles from './ModalRoot.scss' - -const MODAL_COMPONENTS = { - /* other modals */ -} - -const ModalRoot = ({ - modalType, modalProps, hideModal, currentTicker, currency, isTestnet -}) => { - if (!modalType) { return null } - - const SpecificModal = MODAL_COMPONENTS[modalType] - return ( -
-
-
- -
- - -
-
- ) -} - -ModalRoot.propTypes = { - modalType: PropTypes.string, - modalProps: PropTypes.object, - hideModal: PropTypes.func.isRequired, - currentTicker: PropTypes.object.isRequired, - currency: PropTypes.string.isRequired, - isTestnet: PropTypes.bool.isRequired -} - -export default ModalRoot diff --git a/app/components/ModalRoot/ModalRoot.scss b/app/components/ModalRoot/ModalRoot.scss deleted file mode 100644 index 956fc93b..00000000 --- a/app/components/ModalRoot/ModalRoot.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import '../../variables.scss'; - -.container { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - background: $spaceblue; -} - -.content { - position: relative; - height: 100vh; - margin: 5%; - color: $white; -} - -.esc { - position: absolute; - top: 0; - right: 0; - color: $darkestgrey; - cursor: pointer; - padding: 20px; - border-radius: 50%; - - &:hover { - color: $bluegrey; - background: $darkgrey; - } - - &:active { - color: $white; - background: $gold; - } - - svg { - width: 32px; - height: 32px; - } -} diff --git a/app/components/ModalRoot/index.js b/app/components/ModalRoot/index.js deleted file mode 100644 index 676d19a1..00000000 --- a/app/components/ModalRoot/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ModalRoot from './ModalRoot' - -export default ModalRoot diff --git a/app/reducers/index.js b/app/reducers/index.js index 0bb57dc8..c8042de4 100644 --- a/app/reducers/index.js +++ b/app/reducers/index.js @@ -16,7 +16,6 @@ import payform from './payform' import requestform from './requestform' import invoice from './invoice' -import modal from './modal' import address from './address' import transaction from './transaction' import activity from './activity' @@ -40,7 +39,6 @@ const rootReducer = combineReducers({ requestform, invoice, - modal, address, transaction, activity, diff --git a/app/reducers/modal.js b/app/reducers/modal.js deleted file mode 100644 index dd1a4591..00000000 --- a/app/reducers/modal.js +++ /dev/null @@ -1,47 +0,0 @@ -// ------------------------------------ -// Initial State -// ------------------------------------ -const initialState = { - modalType: null, - modalProps: {} -} - -// ------------------------------------ -// Constants -// ------------------------------------ -export const SHOW_MODAL = 'SHOW_MODAL' -export const HIDE_MODAL = 'HIDE_MODAL' - -// ------------------------------------ -// Actions -// ------------------------------------ -export function showModal(modalType, modalProps) { - return { - type: SHOW_MODAL, - modalType, - modalProps - } -} - -export function hideModal() { - return { - type: HIDE_MODAL - } -} - -// ------------------------------------ -// Action Handlers -// ------------------------------------ -const ACTION_HANDLERS = { - [SHOW_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modalType, modalProps }), - [HIDE_MODAL]: () => initialState -} - -// ------------------------------------ -// Reducer -// ------------------------------------ -export default function modalReducer(state = initialState, action) { - const handler = ACTION_HANDLERS[action.type] - - return handler ? handler(state, action) : state -} diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index a2cd9794..6b49e81f 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -6,7 +6,6 @@ import LoadingBolt from 'components/LoadingBolt' import Form from 'components/Form' import ChannelForm from 'components/Contacts/ChannelForm' -import ModalRoot from 'components/ModalRoot' import Network from 'components/Contacts/Network' import AddChannel from 'components/Contacts/AddChannel' @@ -47,12 +46,8 @@ class App extends Component { render() { const { - modal: { modalType, modalProps }, - hideModal, - ticker, currentTicker, form, - info: { data }, formProps, closeForm, @@ -76,14 +71,6 @@ class App extends Component {
- @@ -110,13 +97,10 @@ class App extends Component { } App.propTypes = { - modal: PropTypes.object.isRequired, - ticker: PropTypes.object.isRequired, form: PropTypes.object.isRequired, formProps: PropTypes.object.isRequired, closeForm: PropTypes.func.isRequired, error: PropTypes.object.isRequired, - info: PropTypes.object.isRequired, currentTicker: PropTypes.object, contactModalProps: PropTypes.object, contactsFormProps: PropTypes.object, @@ -127,7 +111,6 @@ App.propTypes = { newAddress: PropTypes.func.isRequired, fetchInfo: PropTypes.func.isRequired, - hideModal: PropTypes.func.isRequired, fetchTicker: PropTypes.func.isRequired, clearError: PropTypes.func.isRequired, fetchChannels: PropTypes.func.isRequired, diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index 353ce18a..89cde976 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/app/routes/app/containers/AppContainer.js @@ -9,8 +9,6 @@ import { newAddress, closeWalletModal } from 'reducers/address' import { fetchInfo } from 'reducers/info' -import { showModal, hideModal } from 'reducers/modal' - import { setFormType } from 'reducers/form' import { setPayAmount, setPayInput, setCurrencyFilters, updatePayErrors, payFormSelectors } from 'reducers/payform' @@ -81,9 +79,6 @@ const mapDispatchToProps = { fetchInfo, - showModal, - hideModal, - setFormType, setPayAmount, @@ -156,7 +151,6 @@ const mapStateToProps = state => ({ requestform: state.requestform, invoice: state.invoice, - modal: state.modal, error: state.error, diff --git a/test/components/ModalRoot.spec.js b/test/components/ModalRoot.spec.js deleted file mode 100644 index b0946bdf..00000000 --- a/test/components/ModalRoot.spec.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react' -import { shallow } from 'enzyme' -import ModalRoot from '../../app/components/ModalRoot' - -const defaultProps = { - hideModal: () => {}, - modalProps: {}, - currentTicker: {}, - currency: '', - isTestnet: false -} - -describe('no modal', () => { - const props = { ...defaultProps } - const el = shallow() - it('should return null', () => { - expect(el.html()).toBeNull() - }) -})