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 = (
Loading...
@@ -17,17 +23,12 @@ export const Web3Status = (props) => { if (!active) { body = (
- setShowConnectWallet(true)}> - Connect to a Wallet - + Connect to a Wallet
) } else if (active) { body = ( -
setShowConnectWallet(true)} - > +
Connected
) @@ -36,13 +37,27 @@ export const Web3Status = (props) => { return (
setShowConnectWallet(false)} - onClose={() => setShowConnectWallet(false)} - shown={showConnectWallet} + onConnected={closeWalletModal} + onClose={closeWalletModal} + shown={isWalletModalOpen} /> {body}
) } -export default Web3Status +Web3Status.propTypes = { + isWalletModalOpen: PropTypes.bool, + openWalletModal: PropTypes.func, + closeWalletModal: PropTypes.func, +} + +const mapStateToProps = (state) => ({ + isWalletModalOpen: state.walletModal.isOpen, +}) + +const mapDispatchToProps = (dispatch) => { + return bindActionCreators({ openWalletModal, closeWalletModal }, dispatch) +} + +export default connect(mapStateToProps, mapDispatchToProps)(Web3Status) diff --git a/src/components/redemption/Start.js b/src/components/redemption/Start.js index 2709f1a2..82b39902 100644 --- a/src/components/redemption/Start.js +++ b/src/components/redemption/Start.js @@ -3,6 +3,7 @@ import classnames from "classnames" import { bindActionCreators } from "redux" import { connect } from "react-redux" import PropTypes from "prop-types" +import { useWeb3React } from "@web3-react/core" import { BitcoinHelpers } from "@keep-network/tbtc.js" @@ -10,11 +11,11 @@ import StatusIndicator from "../svgs/StatusIndicator" import TLogo from "../svgs/tlogo" import Check from "../svgs/Check" import X from "../svgs/X" -import { saveAddresses, resetState } from "../../actions" +import { saveAddresses, resetState, openWalletModal } from "../../actions" import web3 from "web3" -const Start = ({ saveAddresses, resetState }) => { +const Start = ({ saveAddresses, resetState, openWalletModal }) => { const initialAddressState = { address: "", isValid: false, @@ -27,10 +28,17 @@ const Start = ({ saveAddresses, resetState }) => { resetState() }, [resetState]) + const { active } = useWeb3React() + const handleClickConfirm = (evt) => { evt.preventDefault() evt.stopPropagation() + if (!active) { + openWalletModal() + return + } + saveAddresses({ btcAddress: btcAddress.address, depositAddress: depositAddress.address, @@ -131,6 +139,7 @@ const Start = ({ saveAddresses, resetState }) => { Start.propTypes = { saveAddresses: PropTypes.func, resetState: PropTypes.func, + openWalletModal: PropTypes.func, } const mapDispatchToProps = (dispatch) => { @@ -138,6 +147,7 @@ const mapDispatchToProps = (dispatch) => { { saveAddresses, resetState, + openWalletModal, }, dispatch ) diff --git a/src/reducers/index.js b/src/reducers/index.js index 53b3899d..c2460db3 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -3,6 +3,7 @@ import { combineReducers } from "redux" import deposit from "./deposit.js" import redemption from "./redemption.js" import modal from "./modal.js" +import walletModal from "./wallet-modal.js" import account from "./account.js" import tbtc from "./tbtc" @@ -10,6 +11,7 @@ const reducers = combineReducers({ deposit, redemption, modal, + walletModal, account, tbtc, }) diff --git a/src/reducers/modal.js b/src/reducers/modal.js index b8274526..142952c8 100644 --- a/src/reducers/modal.js +++ b/src/reducers/modal.js @@ -1,11 +1,11 @@ import { OPEN_MODAL, CLOSE_MODAL, SET_RENDER_CONTENT } from "../actions" -const intialState = { +const initialState = { isOpen: false, renderContent: null, } -const modal = (state = intialState, action) => { +const modal = (state = initialState, action) => { switch (action.type) { case OPEN_MODAL: // console.log("OPEN!") diff --git a/src/reducers/wallet-modal.js b/src/reducers/wallet-modal.js new file mode 100644 index 00000000..c711ebc5 --- /dev/null +++ b/src/reducers/wallet-modal.js @@ -0,0 +1,24 @@ +import { OPEN_WALLET_MODAL, CLOSE_WALLET_MODAL } from "../actions" + +const initialState = { + isOpen: false, +} + +const walletModal = (state = initialState, action) => { + switch (action.type) { + case OPEN_WALLET_MODAL: + return { + ...state, + isOpen: true, + } + case CLOSE_WALLET_MODAL: + return { + ...state, + isOpen: false, + } + default: + return state + } +} + +export default walletModal diff --git a/src/wrappers/loadable.js b/src/wrappers/loadable.js index 54200725..886e45a9 100644 --- a/src/wrappers/loadable.js +++ b/src/wrappers/loadable.js @@ -2,7 +2,11 @@ import React, { useEffect } from "react" import { useParams } from "react-router-dom" import { bindActionCreators } from "redux" import { connect, useSelector } from "react-redux" -import { restoreDepositState, restoreRedemptionState } from "../actions" +import { + restoreDepositState, + restoreRedemptionState, + openWalletModal, +} from "../actions" import { useWeb3React } from "@web3-react/core" export const RESTORER = { @@ -16,6 +20,7 @@ function LoadableBase({ restoreRedemptionState, restorer, error, + openWalletModal, }) { // Wait for web3 connected const { active: web3Active } = useWeb3React() @@ -33,6 +38,8 @@ function LoadableBase({ } else { throw new Error("Unknown restorer.") } + } else if (!web3Active) { + openWalletModal() } }, [ web3Active, @@ -41,6 +48,7 @@ function LoadableBase({ restorer, restoreDepositState, restoreRedemptionState, + openWalletModal, ]) if (!depositStateRestored) { @@ -66,6 +74,7 @@ const mapDispatchToProps = (dispatch) => { { restoreDepositState, restoreRedemptionState, + openWalletModal, }, dispatch )