From 906e8af9db141e756904b88c361a915de81dcecd Mon Sep 17 00:00:00 2001 From: ironng Date: Thu, 17 Sep 2020 15:04:21 -0700 Subject: [PATCH 1/6] Open choose wallet modal if web3 necessary but not yet active ConnectWalletDialog component is now controlled via redux. The Loadable component will open the dialog if web3 isn't active yet. --- src/actions/index.js | 15 +++++++++++ src/components/lib/Web3Status.js | 45 +++++++++++++++++++++----------- src/reducers/index.js | 2 ++ src/reducers/wallet-modal.js | 24 +++++++++++++++++ src/wrappers/loadable.js | 11 +++++++- 5 files changed, 81 insertions(+), 16 deletions(-) create mode 100644 src/reducers/wallet-modal.js 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/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/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/wallet-modal.js b/src/reducers/wallet-modal.js new file mode 100644 index 00000000..96dc8358 --- /dev/null +++ b/src/reducers/wallet-modal.js @@ -0,0 +1,24 @@ +import { OPEN_WALLET_MODAL, CLOSE_WALLET_MODAL } from "../actions" + +const intialState = { + isOpen: false, +} + +const walletModal = (state = intialState, 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 ) From 0c2d8c284cf53bf4f1528745f9be071ec0f20249 Mon Sep 17 00:00:00 2001 From: ironng Date: Thu, 17 Sep 2020 15:11:36 -0700 Subject: [PATCH 2/6] Show choose wallet modal if web3 is inactive on deposit start --- src/components/deposit/Start.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/deposit/Start.js b/src/components/deposit/Start.js index bcb5a2fc..a27ee373 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() + } + }) 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 ) } From 29987e9dc9ee36b7efd0b1b602b113f855a06897 Mon Sep 17 00:00:00 2001 From: ironng Date: Thu, 17 Sep 2020 15:16:07 -0700 Subject: [PATCH 3/6] Show wallet modal if web3 is inactive on redemption start --- src/components/redemption/Start.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/redemption/Start.js b/src/components/redemption/Start.js index 2709f1a2..66bc8fd3 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,6 +28,14 @@ const Start = ({ saveAddresses, resetState }) => { resetState() }, [resetState]) + const { active } = useWeb3React() + + useEffect(() => { + if (!active) { + openWalletModal() + } + }) + const handleClickConfirm = (evt) => { evt.preventDefault() evt.stopPropagation() @@ -131,6 +140,7 @@ const Start = ({ saveAddresses, resetState }) => { Start.propTypes = { saveAddresses: PropTypes.func, resetState: PropTypes.func, + openWalletModal: PropTypes.func, } const mapDispatchToProps = (dispatch) => { @@ -138,6 +148,7 @@ const mapDispatchToProps = (dispatch) => { { saveAddresses, resetState, + openWalletModal, }, dispatch ) From b2f203bed98760e3795a91ccd523364a1468f2ee Mon Sep 17 00:00:00 2001 From: ironng Date: Thu, 17 Sep 2020 17:13:07 -0700 Subject: [PATCH 4/6] Make sure effect doesn't run on every update Add dependency array to effect hooks in start components --- src/components/deposit/Start.js | 2 +- src/components/redemption/Start.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/deposit/Start.js b/src/components/deposit/Start.js index a27ee373..9b265979 100644 --- a/src/components/deposit/Start.js +++ b/src/components/deposit/Start.js @@ -45,7 +45,7 @@ const Start = ({ if (!active) { openWalletModal() } - }) + }, [active, openWalletModal]) useEffect(() => { if (account) { diff --git a/src/components/redemption/Start.js b/src/components/redemption/Start.js index 66bc8fd3..9978e16b 100644 --- a/src/components/redemption/Start.js +++ b/src/components/redemption/Start.js @@ -34,7 +34,7 @@ const Start = ({ saveAddresses, resetState, openWalletModal }) => { if (!active) { openWalletModal() } - }) + }, [active, openWalletModal]) const handleClickConfirm = (evt) => { evt.preventDefault() From 8887a8dc7dce98a89d7c6d902c19fc7fa2240815 Mon Sep 17 00:00:00 2001 From: ironng Date: Thu, 17 Sep 2020 17:16:20 -0700 Subject: [PATCH 5/6] Fix typos --- src/reducers/modal.js | 4 ++-- src/reducers/wallet-modal.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 index 96dc8358..c711ebc5 100644 --- a/src/reducers/wallet-modal.js +++ b/src/reducers/wallet-modal.js @@ -1,10 +1,10 @@ import { OPEN_WALLET_MODAL, CLOSE_WALLET_MODAL } from "../actions" -const intialState = { +const initialState = { isOpen: false, } -const walletModal = (state = intialState, action) => { +const walletModal = (state = initialState, action) => { switch (action.type) { case OPEN_WALLET_MODAL: return { From 6342e73a684dc53c57b334a490512559eac5224d Mon Sep 17 00:00:00 2001 From: ironng Date: Thu, 17 Sep 2020 23:56:32 -0700 Subject: [PATCH 6/6] Show wallet modal after clicking redeem if web3 inactive Alternative to showing the modal on redemption start on page load --- src/components/redemption/Start.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/redemption/Start.js b/src/components/redemption/Start.js index 9978e16b..82b39902 100644 --- a/src/components/redemption/Start.js +++ b/src/components/redemption/Start.js @@ -30,16 +30,15 @@ const Start = ({ saveAddresses, resetState, openWalletModal }) => { const { active } = useWeb3React() - useEffect(() => { - if (!active) { - openWalletModal() - } - }, [active, openWalletModal]) - const handleClickConfirm = (evt) => { evt.preventDefault() evt.stopPropagation() + if (!active) { + openWalletModal() + return + } + saveAddresses({ btcAddress: btcAddress.address, depositAddress: depositAddress.address,