feat: close modal on esc, closes #192

app/modals/receive-stx/receive-stx-modal.tsx

@@ -1,25 +1,25 @@
 import React, { FC } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { useHotkeys } from 'react-hotkeys-hook';
 import Qr from 'qrcode.react';
 import { Text, Modal, Button, Flex, Box, useClipboard } from '@blockstack/ui';
 
 import { TxModalHeader, TxModalFooter } from '../transaction/transaction-modal-layout';
-import { homeActions, selectReceiveModalOpen } from '../../store/home/home.reducer';
+import { homeActions } from '../../store/home/home.reducer';
 
 interface ReceiveStxModalProps {
   address: string;
 }
 
 export const ReceiveStxModal: FC<ReceiveStxModalProps> = ({ address }) => {
   const dispatch = useDispatch();
-  const modalOpen = useSelector(selectReceiveModalOpen);
+  useHotkeys('esc', () => void dispatch(homeActions.closeReceiveModal()));
   const { hasCopied, onCopy } = useClipboard(address);
   const closeModal = () => dispatch(homeActions.closeReceiveModal());
-  if (!modalOpen) return null;
   return (
     <Modal
       minWidth="488px"
-      isOpen={modalOpen}
+      isOpen
       headerComponent={<TxModalHeader onSelectClose={closeModal}>Receive STX</TxModalHeader>}
       footerComponent={
         <TxModalFooter>

app/modals/transaction/transaction-form.tsx

@@ -27,7 +27,6 @@ export const TxModalForm: FC<TxModalFormProps> = ({ balance, form }) => {
         <Input
           id="stxAddress"
           name="recipient"
-          autoFocus
           mt="base-tight"
           placeholder="STX address"
           onChange={form.handleChange}

app/modals/transaction/transaction-modal.tsx

@@ -6,6 +6,7 @@ import BN from 'bn.js';
 import { BigNumber } from 'bignumber.js';
 import { Modal, Text, Button } from '@blockstack/ui';
 import { StacksTransaction } from '@blockstack/stacks-transactions';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import { RootState } from '../../store';
 import { validateStacksAddress } from '../../utils/get-stx-transfer-direction';
@@ -42,6 +43,7 @@ type ModalComponents = () => {
 
 export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
   const dispatch = useDispatch();
+  useHotkeys('esc', () => void dispatch(homeActions.closeTxModal()));
   const [step, setStep] = useState(TxModalStep.DescribeTx);
   const [fee, setFee] = useState(new BN(0));
   const [amount, setAmount] = useState(new BigNumber(0));
@@ -172,7 +174,7 @@ export const TransactionModal: FC<TxModalProps> = ({ balance, address }) => {
   const { header, body, footer } = txFormStepMap[step]();
 
   return (
-    <Modal isOpen={txModalOpen} headerComponent={header} footerComponent={footer} {...modalStyle}>
+    <Modal isOpen headerComponent={header} footerComponent={footer} {...modalStyle}>
       {body}
     </Modal>
   );

app/pages/home/home.tsx

@@ -12,7 +12,11 @@ import { getAddressDetails } from '../../store/address/address.actions';
 import { selectAddressBalance } from '../../store/address/address.reducer';
 import { selectTransactions } from '../../store/transaction/transaction.reducer';
 import { selectPendingTransactions } from '../../store/pending-transaction/pending-transaction.reducer';
-import { homeActions } from '../../store/home/home.reducer';
+import {
+  homeActions,
+  selectTxModalOpen,
+  selectReceiveModalOpen,
+} from '../../store/home/home.reducer';
 import {
   TransactionList,
   StackingPromoCard,
@@ -32,12 +36,16 @@ import { HomeLayout } from './home-layout';
 
 export const Home: FC = () => {
   const dispatch = useDispatch();
-  const { address, balance, txs, pendingTxs } = useSelector((state: RootState) => ({
-    address: selectAddress(state),
-    txs: selectTransactions(state),
-    balance: selectAddressBalance(state),
-    pendingTxs: selectPendingTransactions(state),
-  }));
+  const { address, balance, txs, pendingTxs, txModalOpen, receiveModalOpen } = useSelector(
+    (state: RootState) => ({
+      address: selectAddress(state),
+      txs: selectTransactions(state),
+      balance: selectAddressBalance(state),
+      pendingTxs: selectPendingTransactions(state),
+      txModalOpen: selectTxModalOpen(state),
+      receiveModalOpen: selectReceiveModalOpen(state),
+    })
+  );
 
   const checkIfPendingTxIsComplete = async (address: string) => {
     const [error, txResponse] = await safeAwait(Api.getTxDetails(address));
@@ -96,8 +104,8 @@ export const Home: FC = () => {
 
   return (
     <>
-      <ReceiveStxModal address={address} />
-      <TransactionModal balance={balance || '0'} address={address} />
+      {receiveModalOpen && <ReceiveStxModal address={address} />}
+      {txModalOpen && <TransactionModal balance={balance || '0'} address={address} />}
       <HomeLayout
         transactionList={transactionList}
         balanceCard={balanceCard}

package.json

@@ -224,6 +224,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-hot-loader": "4.12.21",
+    "react-hotkeys-hook": "2.2.1",
     "react-redux": "7.2.0",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",