diff --git a/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js b/src/components/Modals/ExtensionInviteCodeModal/ExtensionInviteCodeModal.js index e54d5a3b6..8e05f558e 100644 --- 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 index 2a1feedce..d4e1fc44a 100644 --- 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 index 1026b0450..77526defc 100644 --- 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(, { disableClose: true }) + const isSeen = extensionInviteCodeModalSeenBy.includes(account.id) + + if (!isSeen) { + setExtensionInviteCodeModalSeenBy((prev) => [...prev, account.id]) + } + + showModal(, { + 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])