Jack Mallers
8 years ago
24 changed files with 336 additions and 117 deletions
@ -1,7 +1,6 @@ |
|||
import React from 'react' |
|||
import path from 'path' |
|||
import Isvg from 'react-inlinesvg' |
|||
|
|||
const AnimatedCheckmark = () => (<Isvg src={'./components/AnimatedCheckmark/checkmark.svg'} />) |
|||
const AnimatedCheckmark = () => <Isvg src={'./components/AnimatedCheckmark/checkmark.svg'} /> |
|||
|
|||
export default AnimatedCheckmark |
|||
|
|||
|
Before Width: | Height: | Size: 235 B After Width: | Height: | Size: 238 B |
@ -1,3 +1,3 @@ |
|||
import AnimatedCheckmark from './AnimatedCheckmark' |
|||
|
|||
export default AnimatedCheckmark |
|||
export default AnimatedCheckmark |
|||
|
|||
@ -0,0 +1,47 @@ |
|||
// ------------------------------------
|
|||
// 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 |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import { MdClose } from 'react-icons/lib/md' |
|||
import SuccessfulSendCoins from './SuccessfulSendCoins' |
|||
import styles from './ModalRoot.scss' |
|||
|
|||
const MODAL_COMPONENTS = { |
|||
SUCCESSFUL_SEND_COINS: SuccessfulSendCoins |
|||
/* other modals */ |
|||
} |
|||
|
|||
const ModalRoot = ({ modalType, modalProps, hideModal, currentTicker, currency }) => { |
|||
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} |
|||
/> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
ModalRoot.propTypes = { |
|||
modalType: PropTypes.string, |
|||
modalProps: PropTypes.object.isRequired, |
|||
hideModal: PropTypes.func.isRequired, |
|||
currentTicker: PropTypes.object.isRequired, |
|||
currency: PropTypes.string.isRequired |
|||
} |
|||
|
|||
export default ModalRoot |
|||
@ -0,0 +1,42 @@ |
|||
@import '../../../../../variables.scss'; |
|||
|
|||
.container { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 10; |
|||
background: #fff; |
|||
} |
|||
|
|||
.content { |
|||
position: relative; |
|||
height: 100vh; |
|||
margin: 5%; |
|||
} |
|||
|
|||
.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: $main; |
|||
} |
|||
|
|||
svg { |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
import { shell } from 'electron' |
|||
import React from 'react' |
|||
import PropTypes from 'prop-types' |
|||
import AnimatedCheckmark from '../../../../../../components/AnimatedCheckmark' |
|||
import { btc } from '../../../../../../utils' |
|||
import styles from './SuccessfulSendCoins.scss' |
|||
|
|||
const SuccessfulSendCoins = ({ amount, addr, txid, hideModal, currentTicker, currency }) => { |
|||
const calculatedAmount = currency === 'usd' ? btc.satoshisToUsd(amount, currentTicker.price_usd) : btc.satoshisToBtc(amount) |
|||
|
|||
return ( |
|||
<div className={styles.container}> |
|||
<AnimatedCheckmark /> |
|||
<h1> |
|||
You |
|||
<span className={styles.link} onClick={() => shell.openExternal(`https://testnet.smartbit.com.au/tx/${txid}`)}>sent</span> |
|||
<span className={styles.amount}>{calculatedAmount} {currency.toUpperCase()}</span> |
|||
to |
|||
<span className={styles.addr}>{addr}</span> |
|||
</h1> |
|||
<div className={styles.button} onClick={hideModal}> |
|||
Done |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
SuccessfulSendCoins.propTypes = { |
|||
amount: PropTypes.oneOf([ |
|||
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 |
|||
} |
|||
|
|||
export default SuccessfulSendCoins |
|||
@ -0,0 +1,37 @@ |
|||
@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; |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
import SuccessfulSendCoins from './SuccessfulSendCoins' |
|||
|
|||
export default SuccessfulSendCoins |
|||
@ -0,0 +1,3 @@ |
|||
import ModalRoot from './ModalRoot' |
|||
|
|||
export default ModalRoot |
|||
Loading…
Reference in new issue