From 6094a6e355e749a5ae00d04423fdd24df97d065b Mon Sep 17 00:00:00 2001
From: brdy <41711440+BrodyHughes@users.noreply.github.com>
Date: Tue, 30 Apr 2024 14:51:33 -0400
Subject: [PATCH] Fix backup reminder shortcuts (#1454)

---
 .../BackupReminder/BackupReminder.tsx         | 16 +++++++++-
 .../ExplainerSheet/ExplainerSheet.tsx         | 12 ++++++++
 src/entries/popup/hooks/useHomeShortcuts.ts   |  3 ++
 .../popup/pages/home/TokenDetails/About.tsx   | 29 +++++++------------
 4 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/entries/popup/components/BackupReminder/BackupReminder.tsx b/src/entries/popup/components/BackupReminder/BackupReminder.tsx
index c4ed644c70..6f61c2b69a 100644
--- a/src/entries/popup/components/BackupReminder/BackupReminder.tsx
+++ b/src/entries/popup/components/BackupReminder/BackupReminder.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { i18n } from '~/core/languages';
+import { shortcuts } from '~/core/references/shortcuts';
 import {
   Box,
   Button,
@@ -13,6 +14,7 @@ import {
 } from '~/design-system';
 import { BottomSheet } from '~/design-system/components/BottomSheet/BottomSheet';
 
+import { useKeyboardShortcut } from '../../hooks/useKeyboardShortcut';
 import { useRainbowNavigate } from '../../hooks/useRainbowNavigate';
 import { useWalletBackups } from '../../hooks/useWalletBackups';
 import { ROUTES } from '../../urls';
@@ -23,13 +25,23 @@ export const BackupReminder = () => {
   const { showWalletBackupReminder, closeBackupReminder } = useWalletBackups();
   const navigate = useRainbowNavigate();
 
+  useKeyboardShortcut({
+    condition: () => showWalletBackupReminder,
+    handler: (e: KeyboardEvent) => {
+      if (e.key === shortcuts.global.CLOSE.key) {
+        e.preventDefault();
+        closeBackupReminder();
+      }
+    },
+  });
+
   return (
     <BottomSheet
       show={showWalletBackupReminder}
       zIndex={zIndexes.APP_CONNECTION_WALLET_SWITCHER}
       onClickOutside={closeBackupReminder}
     >
-      <Box id="wallet-backup-reminder-sheet">
+      <Box id="wallet-backup-reminder-sheet" isExplainerSheet>
         <Navbar
           leftComponent={
             <Navbar.CloseButton
@@ -90,6 +102,7 @@ export const BackupReminder = () => {
                     },
                   });
                 }}
+                tabIndex={0}
               >
                 <Text align="center" color="label" size="16pt" weight="heavy">
                   {i18n.t('wallet_backup_reminder.button_label_action')}
@@ -102,6 +115,7 @@ export const BackupReminder = () => {
                 height="44px"
                 variant="tinted"
                 onClick={closeBackupReminder}
+                tabIndex={0}
               >
                 <Text
                   align="center"
diff --git a/src/entries/popup/components/ExplainerSheet/ExplainerSheet.tsx b/src/entries/popup/components/ExplainerSheet/ExplainerSheet.tsx
index 0416f672e1..1fb48fb0e1 100644
--- a/src/entries/popup/components/ExplainerSheet/ExplainerSheet.tsx
+++ b/src/entries/popup/components/ExplainerSheet/ExplainerSheet.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
+import { shortcuts } from '~/core/references/shortcuts';
 import { goToNewTab } from '~/core/utils/tabs';
 import {
   Box,
@@ -18,6 +19,7 @@ import { TextLink } from '~/design-system/components/TextLink/TextLink';
 import { TextStyles } from '~/design-system/styles/core.css';
 import { ButtonVariant } from '~/design-system/styles/designTokens';
 
+import { useKeyboardShortcut } from '../../hooks/useKeyboardShortcut';
 import { zIndexes } from '../../utils/zIndexes';
 
 export interface ExplainerSheetProps {
@@ -111,6 +113,16 @@ export const ExplainerSheet = ({
   testId,
   onClickOutside,
 }: ExplainerSheetProps) => {
+  useKeyboardShortcut({
+    condition: () => !!show,
+    handler: (e: KeyboardEvent) => {
+      if (e.key === shortcuts.global.CLOSE.key) {
+        e.preventDefault();
+        onClickOutside?.();
+      }
+    },
+  });
+
   const goToLink = useCallback((link?: string) => {
     link &&
       goToNewTab({
diff --git a/src/entries/popup/hooks/useHomeShortcuts.ts b/src/entries/popup/hooks/useHomeShortcuts.ts
index 23128ec5b5..86c26addd1 100644
--- a/src/entries/popup/hooks/useHomeShortcuts.ts
+++ b/src/entries/popup/hooks/useHomeShortcuts.ts
@@ -22,6 +22,7 @@ import { ROUTES } from '../urls';
 import {
   appConnectionMenuIsActive,
   appConnectionSwitchWalletsPromptIsActive,
+  getExplainerSheet,
   getInputIsFocused,
 } from '../utils/activeElement';
 import {
@@ -104,7 +105,9 @@ export function useHomeShortcuts() {
       const activeAppWalletSwitcher =
         appConnectionSwitchWalletsPromptIsActive();
       const inputIsFocused = getInputIsFocused();
+      const isExplainerSheet = getExplainerSheet();
       if (inputIsFocused) return;
+      if (isExplainerSheet) return;
       switch (e.key) {
         case shortcuts.home.BUY.key:
           trackShortcut({
diff --git a/src/entries/popup/pages/home/TokenDetails/About.tsx b/src/entries/popup/pages/home/TokenDetails/About.tsx
index 3ebd6fd417..38ba57a675 100644
--- a/src/entries/popup/pages/home/TokenDetails/About.tsx
+++ b/src/entries/popup/pages/home/TokenDetails/About.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ReactNode, useReducer } from 'react';
+import { ReactNode, useState } from 'react';
 
 import { i18n } from '~/core/languages';
 import { ParsedUserAsset } from '~/core/types/assets';
@@ -95,10 +95,7 @@ export const InfoRow = ({
 );
 
 function MarketCapInfoRow({ marketCap }: { marketCap: ReactNode }) {
-  const [isMarketCapExplainerOpen, toggleMarketCapExplainer] = useReducer(
-    (s) => !s,
-    false,
-  );
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <>
       <InfoRow
@@ -108,7 +105,7 @@ function MarketCapInfoRow({ marketCap }: { marketCap: ReactNode }) {
             display="flex"
             alignItems="center"
             gap="4px"
-            onClick={toggleMarketCapExplainer}
+            onClick={() => setIsOpen(true)}
           >
             {i18n.t(`token_details.about.market_cap`)}
             <Symbol
@@ -122,17 +119,17 @@ function MarketCapInfoRow({ marketCap }: { marketCap: ReactNode }) {
         value={marketCap}
       />
       <ExplainerSheet
-        show={isMarketCapExplainerOpen}
+        show={isOpen}
         title={i18n.t('token_details.about.market_cap_explainer.title')}
         description={[
           i18n.t('token_details.about.market_cap_explainer.description'),
         ]}
-        onClickOutside={toggleMarketCapExplainer}
+        onClickOutside={() => setIsOpen(false)}
         actionButton={{
           label: i18n.t('token_details.about.market_cap_explainer.action'),
           variant: 'tinted',
           labelColor: 'blue',
-          action: toggleMarketCapExplainer,
+          action: () => setIsOpen(false),
         }}
         header={{ emoji: '📈' }}
       />
@@ -141,11 +138,7 @@ function MarketCapInfoRow({ marketCap }: { marketCap: ReactNode }) {
 }
 
 function FullyDilutedInfoRow({ fullyDiluted }: { fullyDiluted: ReactNode }) {
-  const [isFullyDilutedExplainerOpen, toggleFullyDilutedExplainer] = useReducer(
-    (s) => !s,
-    false,
-  );
-
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <>
       <InfoRow
@@ -155,7 +148,7 @@ function FullyDilutedInfoRow({ fullyDiluted }: { fullyDiluted: ReactNode }) {
             display="flex"
             alignItems="center"
             gap="4px"
-            onClick={toggleFullyDilutedExplainer}
+            onClick={() => setIsOpen(true)}
           >
             {i18n.t(`token_details.about.fully_diluted`)}
             <Symbol
@@ -169,17 +162,17 @@ function FullyDilutedInfoRow({ fullyDiluted }: { fullyDiluted: ReactNode }) {
         value={fullyDiluted}
       />
       <ExplainerSheet
-        show={isFullyDilutedExplainerOpen}
+        show={isOpen}
         title={i18n.t('token_details.about.fully_diluted_explainer.title')}
         description={[
           i18n.t('token_details.about.fully_diluted_explainer.description'),
         ]}
-        onClickOutside={toggleFullyDilutedExplainer}
+        onClickOutside={() => setIsOpen(false)}
         actionButton={{
           label: i18n.t('token_details.about.fully_diluted_explainer.action'),
           variant: 'tinted',
           labelColor: 'blue',
-          action: toggleFullyDilutedExplainer,
+          action: () => setIsOpen(false),
         }}
         header={{ emoji: '📊' }}
       />