Merge pull request #363 from keep-network/automatic-wallet-modal

Automatic wallet modal

The "Connect to a wallet" modal will be shown whenever web3 is required
to take action - on the start pages for deposit and redemption and any route
that is wrapped in the <Loadable> component. This changes the
<ConnectWalletDialog> state to be controlled by redux state rather than React
state.

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,
+  }
+}

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
   )
 }

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 = (
     <div>
       <div className="web3-status loading">Loading...</div>
@@ -17,17 +23,12 @@ export const Web3Status = (props) => {
   if (!active) {
     body = (
       <div className="web3-status notify">
-        <span onClick={() => setShowConnectWallet(true)}>
-          Connect to a Wallet
-        </span>
+        <span onClick={openWalletModal}>Connect to a Wallet</span>
       </div>
     )
   } else if (active) {
     body = (
-      <div
-        className="web3-status success"
-        onClick={() => setShowConnectWallet(true)}
-      >
+      <div className="web3-status success" onClick={openWalletModal}>
         <Check width="15px" /> Connected
       </div>
     )
@@ -36,13 +37,27 @@ export const Web3Status = (props) => {
   return (
     <div>
       <ConnectWalletDialog
-        onConnected={() => setShowConnectWallet(false)}
-        onClose={() => setShowConnectWallet(false)}
-        shown={showConnectWallet}
+        onConnected={closeWalletModal}
+        onClose={closeWalletModal}
+        shown={isWalletModalOpen}
       />
       {body}
     </div>
   )
 }
 
-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)

src/components/redemption/Start.js

@@ -3,18 +3,19 @@ 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"
 
 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,13 +139,15 @@ const Start = ({ saveAddresses, resetState }) => {
 Start.propTypes = {
   saveAddresses: PropTypes.func,
   resetState: PropTypes.func,
+  openWalletModal: PropTypes.func,
 }
 
 const mapDispatchToProps = (dispatch) => {
   return bindActionCreators(
     {
       saveAddresses,
       resetState,
+      openWalletModal,
     },
     dispatch
   )

src/reducers/index.js

@@ -3,13 +3,15 @@ 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"
 
 const reducers = combineReducers({
   deposit,
   redemption,
   modal,
+  walletModal,
   account,
   tbtc,
 })

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!")

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

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
   )