Refactor modal window handling

This commit is contained in:
Germán Martínez 2019-08-28 11:00:49 +02:00
parent a1b787a9d9
commit 44bd6b1070
3 changed files with 67 additions and 3 deletions

View File

@ -220,6 +220,7 @@ class Balances extends React.Component<Props, State> {
tokens={activeTokens}
selectedToken={sendFunds.selectedToken}
createTransaction={createTransaction}
activeScreenType="sendFunds"
/>
<Modal
title="Receive Tokens"

View File

@ -14,6 +14,9 @@ import Button from '~/components/layout/Button'
import Link from '~/components/layout/Link'
import Paragraph from '~/components/layout/Paragraph'
import Img from '~/components/layout/Img'
import Modal from '~/components/Modal'
import SendModal from './Balances/SendModal'
import Receive from './Balances/Receive'
import NoSafe from '~/components/NoSafe'
import { type SelectorProps } from '~/routes/safe/container/selector'
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
@ -43,6 +46,12 @@ type Props = SelectorProps &
Actions & {
classes: Object,
granted: boolean,
sendFunds: Object,
showReceive: boolean,
onShow: Function,
onHide: Function,
showSendFunds: Function,
hideSendFunds: Function
}
const openIconStyle = {
@ -119,6 +128,12 @@ class Layout extends React.Component<Props, State> {
updateSafe,
transactions,
userAddress,
sendFunds,
showReceive,
onShow,
onHide,
showSendFunds,
hideSendFunds,
} = this.props
const { tabIndex } = this.state
@ -156,7 +171,7 @@ class Layout extends React.Component<Props, State> {
size="small"
color="primary"
className={classes.receive}
onClick={() => {}}
onClick={onShow('Receive')}
rounded
>
<Img src={ReceiveTx} alt="Receive Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />
@ -168,7 +183,7 @@ class Layout extends React.Component<Props, State> {
size="small"
color="primary"
className={classes.send}
onClick={() => {}}
onClick={() => showSendFunds('Ether')}
rounded
testId="balance-send-btn"
>

View File

@ -6,6 +6,13 @@ import Layout from '~/routes/safe/components/Layout'
import selector, { type SelectorProps } from './selector'
import actions, { type Actions } from './actions'
type State = {
showReceive: boolean,
sendFunds: Object,
}
type Action = 'Send' | 'Receive'
export type Props = Actions &
SelectorProps & {
granted: boolean,
@ -13,7 +20,15 @@ export type Props = Actions &
const TIMEOUT = process.env.NODE_ENV === 'test' ? 1500 : 5000
class SafeView extends React.Component<Props> {
class SafeView extends React.Component<Props, State> {
state = {
sendFunds: {
isOpen: false,
selectedToken: undefined,
},
showReceive: false,
}
intervalId: IntervalID
componentDidMount() {
@ -44,6 +59,32 @@ class SafeView extends React.Component<Props> {
clearInterval(this.intervalId)
}
onShow = (action: Action) => () => {
this.setState(() => ({ [`show${action}`]: true }))
}
onHide = (action: Action) => () => {
this.setState(() => ({ [`show${action}`]: false }))
}
showSendFunds = (token: Token) => {
this.setState({
sendFunds: {
isOpen: true,
selectedToken: token,
},
})
}
hideSendFunds = () => {
this.setState({
sendFunds: {
isOpen: false,
selectedToken: undefined,
},
})
}
checkForUpdates() {
const {
safeUrl, activeTokens, fetchTokenBalances,
@ -53,6 +94,7 @@ class SafeView extends React.Component<Props> {
}
render() {
const { sendFunds, showReceive } = this.state
const {
safe,
provider,
@ -83,6 +125,12 @@ class SafeView extends React.Component<Props> {
fetchTransactions={fetchTransactions}
updateSafe={updateSafe}
transactions={transactions}
sendFunds={sendFunds}
showReceive={showReceive}
onShow={this.onShow}
onHide={this.onHide}
showSendFunds={this.showSendFunds}
hideSendFunds={this.hideSendFunds}
/>
</Page>
)