update: don't wait for close if the account has seen the modal

AmbireTech · Aug 8, 2024 · f6c7f3e · f6c7f3e
1 parent e663287
commit f6c7f3e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js
@@ -14,15 +14,16 @@ import styles from './ExtensionInviteCodeModal.module.scss'
 const CAN_CLOSE_AFTER_MS = 5400
 
 const ExtensionInviteCodeModal = ({ inviteCode, waitForClose = true }) => {
-  const { onHideModal } = useModals()
+  const { hideModal } = useModals()
   const { addToast } = useToasts()
   const [remainingTime, setRemainingTime] = useState(CAN_CLOSE_AFTER_MS)
   const [canClose, setCanClose] = useState(!waitForClose)
 
   const handleCloseModal = useCallback(() => {
     if (!canClose) return
-    onHideModal()
-  }, [canClose, onHideModal])
+
+    hideModal()
+  }, [canClose, hideModal])
 
   useEffect(() => {
     const startingTime = Date.now()

diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.module.scss
@@ -69,6 +69,7 @@ $min-modal-height: 34.375rem;
       color: #fff;
       font-size: 0.875rem;
       opacity: 0.6;
+      user-select: none;
     }
     .closeIcon {
       cursor: pointer;

diff --git a/src/components/Wallet/Wallet.js b/src/components/Wallet/Wallet.js
@@ -43,6 +43,10 @@ export default function Wallet(props) {
     key: 'dAppsAdvancedMode',
     defaultValue: []
   })
+  const [extensionInviteCodeModalSeenBy, setExtensionInviteCodeModalSeenBy] = useLocalStorage({
+    key: 'extensionInviteCodeModalSeenBy',
+    defaultValue: []
+  })
 
   const routes = [
     {
@@ -257,7 +261,16 @@ export default function Wallet(props) {
 
     if (!key || used || rewardsAccountAddr !== account.id) return
 
-    showModal(<ExtensionInviteCodeModal inviteCode={key} />, { disableClose: true })
+    const isSeen = extensionInviteCodeModalSeenBy.includes(account.id)
+
+    if (!isSeen) {
+      setExtensionInviteCodeModalSeenBy((prev) => [...prev, account.id])
+    }
+
+    showModal(<ExtensionInviteCodeModal inviteCode={key} waitForClose={!isSeen} />, {
+      disableClose: !isSeen
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     props.accounts,
     props.relayerURL,
@@ -271,7 +284,8 @@ export default function Wallet(props) {
     isClipboardGranted,
     isNoticationsGranted,
     modalHidden,
-    showModal
+    showModal,
+    setExtensionInviteCodeModalSeenBy
   ])
 
   useEffect(() => handleDisplayInitialModal(), [handleDisplayInitialModal])