Refactor modal window handling
This commit is contained in:
parent
a1b787a9d9
commit
44bd6b1070
|
@ -220,6 +220,7 @@ class Balances extends React.Component<Props, State> {
|
|||
tokens={activeTokens}
|
||||
selectedToken={sendFunds.selectedToken}
|
||||
createTransaction={createTransaction}
|
||||
activeScreenType="sendFunds"
|
||||
/>
|
||||
<Modal
|
||||
title="Receive Tokens"
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
Loading…
Reference in New Issue