lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #417 from Empact/modal-root 

Drop ModalRoot
renovate/lint-staged-8.x
Ben Woosley 7 years ago
committed by GitHub
parent
58acc4e9f3 037f351b59
commit
2b4190d6d0
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 0 additions and 469 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      app/components/ModalRoot/ModalRoot.js
  2. 43
      app/components/ModalRoot/ModalRoot.scss
  3. 42
      app/components/ModalRoot/SuccessfulSendCoins.js
  4. 37
      app/components/ModalRoot/SuccessfulSendCoins.scss
  5. 22
      app/components/ModalRoot/SuccessfulSendPayment.js
  6. 42
      app/components/ModalRoot/SuccessfulSendPayment.scss
  7. 40
      app/components/ModalRoot/WalletDetails.js
  8. 70
      app/components/ModalRoot/WalletDetails.scss
  9. 3
      app/components/ModalRoot/index.js
  10. 2
      app/reducers/index.js
  11. 47
      app/reducers/modal.js
  12. 17
      app/routes/app/components/App.js
  13. 6
      app/routes/app/containers/AppContainer.js
  14. 48
      test/components/ModalRoot.spec.js

50
app/components/ModalRoot/ModalRoot.js
View File

@ -1,50 +0,0 @@
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 */
}
const ModalRoot = ({
modalType, modalProps, hideModal, currentTicker, currency, isTestnet
}) => {
if (!modalType) { return null }
const SpecificModal = MODAL_COMPONENTS[modalType]
return (
<div className={styles.container}>
<div className={styles.content}>
<div className={styles.esc} onClick={hideModal}>
<MdClose />
</div>
<SpecificModal
{...modalProps}
hideModal={hideModal}
currentTicker={currentTicker}
currency={currency}
isTestnet={isTestnet}
/>
</div>
</div>
)
}
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

43
app/components/ModalRoot/ModalRoot.scss
View File

@ -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;
}
}

42
app/components/ModalRoot/SuccessfulSendCoins.js
View File

@ -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 (
<div className={styles.container}>
<AnimatedCheckmark />
<h1>
You&nbsp;
<span className={styles.link} onClick={() => blockExplorer.showTransaction(isTestnet, txid)}>sent</span>&nbsp;
<span className={styles.amount}>{calculatedAmount} {currency.toUpperCase()}</span>&nbsp;
to&nbsp;
<span className={styles.addr}>{addr}</span>
</h1>
<div className={styles.button} onClick={hideModal}>
Done
</div>
</div>
)
}
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

37
app/components/ModalRoot/SuccessfulSendCoins.scss
View File

@ -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;
}
}

22
app/components/ModalRoot/SuccessfulSendPayment.js
View File

@ -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 }) => (
<div className={styles.container}>
<AnimatedCheckmark />
<h1>
<span>Successfully sent payment</span>&nbsp;
</h1>
<div className={styles.button} onClick={hideModal}>
Done
</div>
</div>
)
SuccessfulSendPayment.propTypes = {
hideModal: PropTypes.func.isRequired
}
export default SuccessfulSendPayment

42
app/components/ModalRoot/SuccessfulSendPayment.scss
View File

@ -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%);
}
}
}

40
app/components/ModalRoot/WalletDetails.js
View File

@ -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 }) => (
<div className={styles.walletdetails}>
<div className={styles.inner}>
<div className={styles.left}>
<section>
<h4>Node Alias</h4>
<h1>Testing</h1>
</section>
<section>
<h4>Node Public Key</h4>
<p className={styles.copytext}>{info.data.identity_pubkey}</p>
</section>
<section>
<h4>Deposit Address</h4>
<div className={styles.qrcode}>
<QRCode value={address} />
</div>
<p className={styles.copytext}>{address}</p>
</section>
</div>
<div className={styles.right}>
<section>
<h2>Network</h2>
</section>
</div>
</div>
</div>
)
WalletDetails.propTypes = {
info: PropTypes.object.isRequired,
address: PropTypes.string.isRequired
}
export default WalletDetails

70
app/components/ModalRoot/WalletDetails.scss
View File

@ -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;
}
}
}

3
app/components/ModalRoot/index.js
View File

@ -1,3 +0,0 @@
import ModalRoot from './ModalRoot'
export default ModalRoot

2
app/reducers/index.js
View File

@ -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,

47
app/reducers/modal.js
View File

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

17
app/routes/app/components/App.js
View File

@ -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 {
<div>
<div className={styles.titleBar} />
<GlobalError error={error} clearError={clearError} />
<ModalRoot
modalType={modalType}
modalProps={modalProps}
hideModal={hideModal}
currentTicker={currentTicker}
currency={ticker.currency}
isTestnet={data.testnet}
/>
<ContactModal {...contactModalProps} />
@ -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,

6
app/routes/app/containers/AppContainer.js
View File

@ -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,

48
test/components/ModalRoot.spec.js
View File

@ -1,48 +0,0 @@
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: ''
}
describe('no modal', () => {
const props = { ...defaultProps }
const el = shallow(<ModalRoot {...props} />)
it('should return null', () => {
expect(el.html()).toBeNull()
})
})
describe('SuccessfulSendCoins modal', () => {
const props = {
...defaultProps,
modalType: 'SUCCESSFUL_SEND_COINS',
modalProps: {
amount: 10000000,
addr: 'mkrfWvHSbUjgyne4EWnydWekywWBjrucKs',
txid: 'fd7dfc8b809a128323b1b679fe31e27ed7b34baae0a79cd4a290fb4dab892d26'
}
}
const el = shallow(<ModalRoot {...props} />)
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(<ModalRoot {...props} />)
it('should render specific modal', () => {
expect(el.find(SuccessfulSendPayment).length).toBe(1)
})
})
Write Preview
Loading…
Cancel
Save