diff --git a/src/actions/index.js b/src/actions/index.js index 6a0c3125..101013c3 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -124,3 +124,18 @@ export function setRenderContent(renderContent) { }, } } + +export const OPEN_WALLET_MODAL = "OPEN_WALLET_MODAL" +export const CLOSE_WALLET_MODAL = "CLOSE_WALLET_MODAL" + +export function openWalletModal() { + return { + type: OPEN_WALLET_MODAL, + } +} + +export function closeWalletModal() { + return { + type: CLOSE_WALLET_MODAL, + } +} diff --git a/src/components/deposit/Start.js b/src/components/deposit/Start.js index bcb5a2fc..9b265979 100644 --- a/src/components/deposit/Start.js +++ b/src/components/deposit/Start.js @@ -9,6 +9,7 @@ import { selectLotSize, requestAvailableLotSizes, resetState, + openWalletModal, } from "../../actions" import Description from "../lib/Description" import StatusIndicator from "../svgs/StatusIndicator" @@ -27,6 +28,7 @@ const handleClickPay = (evt) => { const Start = ({ resetState, requestAvailableLotSizes, + openWalletModal, availableLotSizes = [], lotSize, selectLotSize, @@ -37,7 +39,13 @@ const Start = ({ resetState() }, [resetState]) - const { account } = useWeb3React() + const { account, active } = useWeb3React() + + useEffect(() => { + if (!active) { + openWalletModal() + } + }, [active, openWalletModal]) useEffect(() => { if (account) { @@ -80,6 +88,7 @@ const Start = ({ Start.propTypes = { resetState: PropTypes.func, requestAvailableLotSizes: PropTypes.func, + openWalletModal: PropTypes.func, availableLotSizes: PropTypes.arrayOf(PropTypes.string), lotSize: PropTypes.string, selectLotSize: PropTypes.func, @@ -94,7 +103,7 @@ const mapStateToProps = ({ deposit }) => ({ const mapDispatchToProps = (dispatch) => { return bindActionCreators( - { selectLotSize, requestAvailableLotSizes, resetState }, + { selectLotSize, requestAvailableLotSizes, resetState, openWalletModal }, dispatch ) } diff --git a/src/components/lib/Web3Status.js b/src/components/lib/Web3Status.js index 74a80886..797fa652 100644 --- a/src/components/lib/Web3Status.js +++ b/src/components/lib/Web3Status.js @@ -1,13 +1,19 @@ -import React, { useState } from "react" +import React from "react" +import { bindActionCreators } from "redux" +import { connect } from "react-redux" +import PropTypes from "prop-types" import Check from "../svgs/Check" import { useWeb3React } from "@web3-react/core" import { ConnectWalletDialog } from "./ConnectWalletDialog" +import { openWalletModal, closeWalletModal } from "../../actions" -export const Web3Status = (props) => { +export const Web3Status = ({ + isWalletModalOpen, + openWalletModal, + closeWalletModal, +}) => { const { active } = useWeb3React() - const [showConnectWallet, setShowConnectWallet] = useState(false) - let body = (