From 9d714929f5bab712e7771a613694abe9fe9e6f0e Mon Sep 17 00:00:00 2001
From: Tom Quirk <12551741+tomquirk@users.noreply.github.com>
Date: Sat, 17 Feb 2024 14:03:15 +1000
Subject: [PATCH] fix: mobile accept legal notice (#4251)

---
 package.json                                  |   2 +-
 src/components/Navbar/SiteNavigation.tsx      | 162 +++++++++---------
 .../Navbar/components/HamburgerMenuButton.tsx |   4 +-
 .../Navbar/components/Wallet/WalletButton.tsx |  29 +++-
 .../common/CoreAppWrapper/CoreAppWrapper.tsx  |   2 +-
 src/components/modals/LegalNoticeModal.tsx    |  21 +--
 .../CyclesPayoutsPanel.test.tsx.snap          |   2 +
 yarn.lock                                     |  21 ++-
 8 files changed, 127 insertions(+), 116 deletions(-)

diff --git a/package.json b/package.json
index efc269efb8..5a8fef657e 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
   "dependencies": {
     "@apollo/client": "3.6.9",
     "@graphql-codegen/add": "^4.0.1",
-    "@headlessui/react": "^1.7.10",
+    "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.0.17",
     "@jbx-protocol/contracts-v1": "2.0.0",
     "@jbx-protocol/contracts-v2-4.0.0": "npm:@jbx-protocol/contracts-v2@4.0.0",
diff --git a/src/components/Navbar/SiteNavigation.tsx b/src/components/Navbar/SiteNavigation.tsx
index 6f6c400618..e643fc11b9 100644
--- a/src/components/Navbar/SiteNavigation.tsx
+++ b/src/components/Navbar/SiteNavigation.tsx
@@ -3,30 +3,32 @@ import { Trans, t } from '@lingui/macro'
 import { QuickProjectSearchButton } from 'components/QuickProjectSearch/QuickProjectSearchButton'
 import { TruncatedText } from 'components/TruncatedText'
 import PatchedNextLink from 'components/fixes/PatchedNextLink'
-import { Fragment } from 'react'
+import useMobile from 'hooks/useMobile'
+import { Fragment, useEffect, useState } from 'react'
 import { DropdownMenu } from './components/DropdownMenu'
 import { MobileMenuButton } from './components/HamburgerMenuButton'
 import { LogoHomeButton } from './components/LogoHomeButton'
 import NavLanguageSelector from './components/NavLanguageSelector'
 import ThemePicker from './components/ThemePicker'
 import { TransactionsList } from './components/TransactionList/TransactionsList'
-import WalletButton from './components/Wallet/WalletButton'
+import { WalletButton } from './components/Wallet/WalletButton'
 
-export default function SiteNavigation() {
-  return (
-    <>
-      <div className="hidden md:block">
-        <DesktopSiteNavigation />
-      </div>
-      <div className="md:hidden">
-        <MobileSitNavigation />
-      </div>
-    </>
-  )
+export function SiteNavigation() {
+  const [hasMounted, setHasMounted] = useState(false)
+  const isMobile = useMobile()
+
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) {
+    return null
+  }
+
+  return isMobile ? <MobileSiteNavigation /> : <DesktopSiteNavigation />
 }
 
 const DesktopSiteNavigation = () => {
-  const isMobile = false
   return (
     <div className="z-10 w-full min-w-0 px-6 xl:px-20">
       <nav className="flex items-center gap-12 bg-white px-0 py-4 dark:bg-slate-900">
@@ -47,14 +49,6 @@ const DesktopSiteNavigation = () => {
             <div className="stroke-secondary flex min-w-0 flex-col gap-8 border-y py-9 md:w-full md:flex-shrink md:flex-row md:items-center md:justify-between md:border-y-0 md:py-0">
               {/* Main site links */}
               <div className="flex flex-col gap-8 px-4 md:min-w-0 md:flex-shrink md:flex-row md:items-center md:gap-8 md:px-0">
-                {isMobile && (
-                  <PatchedNextLink
-                    className="text-primary text-base font-medium md:text-sm"
-                    href="/"
-                  >
-                    <Trans>Home</Trans>
-                  </PatchedNextLink>
-                )}
                 <PatchedNextLink
                   className="text-primary text-base font-medium md:text-sm"
                   href="/projects"
@@ -90,81 +84,83 @@ const DesktopSiteNavigation = () => {
   )
 }
 
-const MobileSitNavigation = () => {
+const MobileSiteNavigation = () => {
   return (
     <div className="fixed z-10 w-full min-w-0 md:static md:px-6 xl:px-20">
       <Popover
         className="bg-white dark:bg-slate-900 md:flex md:items-center md:gap-12 md:px-0 md:py-4"
         as="nav"
       >
-        {({ open }) => (
-          <>
-            <div className="flex items-center justify-between py-6 px-5 md:inline-flex md:py-0 md:px-0">
-              <div className="flex gap-2">
-                <LogoHomeButton />
+        {({ open }) => {
+          return (
+            <>
+              <div className="flex items-center justify-between py-6 px-5 md:inline-flex md:py-0 md:px-0">
+                <div className="flex gap-2">
+                  <LogoHomeButton />
+                </div>
+                <MobileMenuButton className="md:hidden" open={open} />
               </div>
-              <MobileMenuButton className="md:hidden" open={open} />
-            </div>
 
-            <Transition
-              show={open}
-              as={Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-150"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Popover.Panel
-                className="stroke-tertiar flex flex-col shadow-lg outline-none md:inline-flex md:max-h-full md:w-full md:min-w-0 md:flex-row md:items-center md:justify-between md:gap-6 md:overflow-y-visible md:border-b-0 md:shadow-none"
-                style={{
-                  maxHeight: 'calc(100vh - 5rem)',
-                  overflowY: 'auto',
-                }}
+              <Transition
+                show={open}
+                as={Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-150"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
               >
-                <div className="stroke-secondary flex flex-col gap-8 border-y py-9 md:w-full md:flex-shrink md:flex-row md:items-center md:justify-between md:border-y-0 md:py-0">
-                  {/* Main site links */}
-                  <div className="flex flex-col gap-8 px-4 md:min-w-0 md:flex-shrink md:flex-row md:items-center md:gap-8 md:px-0">
-                    <PatchedNextLink
-                      className="text-primary text-base font-medium md:text-sm"
-                      href="/"
-                    >
-                      <Trans>Home</Trans>
-                    </PatchedNextLink>
+                <Popover.Panel
+                  className="stroke-tertiar flex flex-col shadow-lg outline-none md:inline-flex md:max-h-full md:w-full md:min-w-0 md:flex-row md:items-center md:justify-between md:gap-6 md:overflow-y-visible md:border-b-0 md:shadow-none"
+                  style={{
+                    maxHeight: 'calc(100vh - 5rem)',
+                    overflowY: 'auto',
+                  }}
+                >
+                  <div className="stroke-secondary flex flex-col gap-8 border-y py-9 md:w-full md:flex-shrink md:flex-row md:items-center md:justify-between md:border-y-0 md:py-0">
+                    {/* Main site links */}
+                    <div className="flex flex-col gap-8 px-4 md:min-w-0 md:flex-shrink md:flex-row md:items-center md:gap-8 md:px-0">
+                      <PatchedNextLink
+                        className="text-primary text-base font-medium md:text-sm"
+                        href="/"
+                      >
+                        <Trans>Home</Trans>
+                      </PatchedNextLink>
 
-                    <PatchedNextLink
-                      className="text-primary text-base font-medium md:text-sm"
-                      href="/projects"
-                    >
-                      <Trans>Explore</Trans>
-                    </PatchedNextLink>
-                    <ResourcesMenu />
-                    <PatchedNextLink
-                      className="text-primary text-base font-medium md:min-w-0 md:max-w-xs md:truncate md:text-sm"
-                      href="/create"
-                    >
-                      <Trans>Create a project</Trans>
-                    </PatchedNextLink>
-                  </div>
+                      <PatchedNextLink
+                        className="text-primary text-base font-medium md:text-sm"
+                        href="/projects"
+                      >
+                        <Trans>Explore</Trans>
+                      </PatchedNextLink>
+                      <ResourcesMenu />
+                      <PatchedNextLink
+                        className="text-primary text-base font-medium md:min-w-0 md:max-w-xs md:truncate md:text-sm"
+                        href="/create"
+                      >
+                        <Trans>Create a project</Trans>
+                      </PatchedNextLink>
+                    </div>
 
-                  <div className="flex flex-col gap-8 md:flex-row md:items-center md:gap-6">
-                    <div className="flex flex-col gap-8 px-6 md:flex-row md:items-center md:gap-6 md:px-0">
-                      <NavLanguageSelector className="md:order-2" />
-                      <ThemePicker className="md:order-3" />
-                      <QuickProjectSearchButton className="md:order-1" />
-                      <TransactionsList listClassName="absolute top-full mt-4 right-0 md:-right-6 md:w-[320px] w-full" />
+                    <div className="flex flex-col gap-8 md:flex-row md:items-center md:gap-6">
+                      <div className="flex flex-col gap-8 px-6 md:flex-row md:items-center md:gap-6 md:px-0">
+                        <NavLanguageSelector className="md:order-2" />
+                        <ThemePicker className="md:order-3" />
+                        <QuickProjectSearchButton className="md:order-1" />
+                        <TransactionsList listClassName="absolute top-full mt-4 right-0 md:-right-6 md:w-[320px] w-full" />
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <div className="py-6 px-5 md:p-0">
-                  <WalletButton />
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
+                  <div className="py-6 px-5 md:p-0">
+                    <WalletButton />
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          )
+        }}
       </Popover>
     </div>
   )
diff --git a/src/components/Navbar/components/HamburgerMenuButton.tsx b/src/components/Navbar/components/HamburgerMenuButton.tsx
index 0c60d17388..edb566df94 100644
--- a/src/components/Navbar/components/HamburgerMenuButton.tsx
+++ b/src/components/Navbar/components/HamburgerMenuButton.tsx
@@ -14,7 +14,7 @@ export const MobileMenuButton = ({
     role="button"
     aria-label="menu button"
   >
-    <div>
+    <>
       {open ? (
         <XMarkIcon
           className="text-primary h-9 w-9 leading-none"
@@ -26,6 +26,6 @@ export const MobileMenuButton = ({
           role="button"
         />
       )}
-    </div>
+    </>
   </Popover.Button>
 )
diff --git a/src/components/Navbar/components/Wallet/WalletButton.tsx b/src/components/Navbar/components/Wallet/WalletButton.tsx
index e4246aac40..d39021c120 100644
--- a/src/components/Navbar/components/Wallet/WalletButton.tsx
+++ b/src/components/Navbar/components/Wallet/WalletButton.tsx
@@ -1,14 +1,14 @@
 import { WarningOutlined } from '@ant-design/icons'
 import { Trans } from '@lingui/macro'
 import { Button } from 'antd'
-import LegalNoticeModal from 'components/modals/LegalNoticeModal'
+import { LegalNoticeModal } from 'components/modals/LegalNoticeModal'
 import { useWallet } from 'hooks/Wallet'
 import { useEffect, useState } from 'react'
 import WalletMenu from './WalletMenu'
 
 const LEGAL_NOTICE_STORAGE_KEY = 'jbm_hasAcceptedLegalNotice'
 
-export default function WalletButton() {
+export function WalletButton() {
   const {
     userAddress,
     isConnected,
@@ -20,10 +20,18 @@ export default function WalletButton() {
   const [legalNoticeAccepted, setLegalNoticeAccepted] = useState<boolean>(false)
   const [legalNoticeVisible, setLegalNoticeVisible] = useState<boolean>(false)
 
+  // set initial state
   useEffect(() => {
-    setLegalNoticeAccepted(
-      localStorage.getItem(LEGAL_NOTICE_STORAGE_KEY) === 'true',
-    )
+    try {
+      const localStorageState = localStorage.getItem(LEGAL_NOTICE_STORAGE_KEY)
+      const isLegalNoticeAccepted = Boolean(
+        JSON.parse(localStorageState ?? 'false'),
+      )
+
+      setLegalNoticeAccepted(isLegalNoticeAccepted)
+    } catch (error) {
+      return
+    }
   }, [])
 
   const onOk = () => {
@@ -36,13 +44,20 @@ export default function WalletButton() {
   if (!legalNoticeAccepted) {
     return (
       <>
-        <Button onClick={() => setLegalNoticeVisible(true)} block>
+        <Button
+          onClick={() => {
+            setLegalNoticeVisible(true)
+          }}
+          block
+        >
           <Trans>Connect</Trans>
         </Button>
         <LegalNoticeModal
           open={legalNoticeVisible}
           onOk={onOk}
-          onCancel={() => setLegalNoticeVisible(false)}
+          onCancel={() => {
+            setLegalNoticeVisible(false)
+          }}
         />
       </>
     )
diff --git a/src/components/common/CoreAppWrapper/CoreAppWrapper.tsx b/src/components/common/CoreAppWrapper/CoreAppWrapper.tsx
index aea1c132c7..86313125c9 100644
--- a/src/components/common/CoreAppWrapper/CoreAppWrapper.tsx
+++ b/src/components/common/CoreAppWrapper/CoreAppWrapper.tsx
@@ -1,6 +1,6 @@
 import { Layout } from 'antd'
 import { Content } from 'antd/lib/layout/layout'
-import SiteNavigation from 'components/Navbar/SiteNavigation'
+import { SiteNavigation } from 'components/Navbar/SiteNavigation'
 import { QuickProjectSearchProvider } from 'components/QuickProjectSearch/QuickProjectSearchProvider'
 import { EtherPriceProvider } from 'contexts/EtherPrice/EtherPriceProvider'
 import ReactQueryProvider from 'contexts/ReactQueryProvider'
diff --git a/src/components/modals/LegalNoticeModal.tsx b/src/components/modals/LegalNoticeModal.tsx
index 1c1e558514..211b75e501 100644
--- a/src/components/modals/LegalNoticeModal.tsx
+++ b/src/components/modals/LegalNoticeModal.tsx
@@ -1,26 +1,11 @@
 import { t } from '@lingui/macro'
-import { Modal } from 'antd'
+import { Modal, ModalProps } from 'antd'
 import ExternalLink from 'components/ExternalLink'
 import { helpPagePath } from 'utils/routes'
 
-export default function LegalNoticeModal({
-  open,
-  onOk,
-  onCancel,
-}: {
-  open: boolean
-  onOk: () => void
-  onCancel: () => void
-}) {
+export function LegalNoticeModal(props: ModalProps) {
   return (
-    <Modal
-      okText={t`I Agree`}
-      open={open}
-      destroyOnClose
-      centered={true}
-      onOk={onOk}
-      onCancel={onCancel}
-    >
+    <Modal okText={t`I Agree`} destroyOnClose centered={true} {...props}>
       <h2 className="font-display text-2xl">Notice</h2>
       <p className="mb-4 text-center">
         By selecting "I Agree", you accept and agree to the{' '}
diff --git a/src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/__snapshots__/CyclesPayoutsPanel.test.tsx.snap b/src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/__snapshots__/CyclesPayoutsPanel.test.tsx.snap
index 2fbc0987eb..9d39cb997b 100644
--- a/src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/__snapshots__/CyclesPayoutsPanel.test.tsx.snap
+++ b/src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/__snapshots__/CyclesPayoutsPanel.test.tsx.snap
@@ -82,6 +82,7 @@ exports[`CyclesPayoutsPanel renders 1`] = `
         </div>
       </div>
       <span
+        aria-hidden="true"
         aria-labelledby="headlessui-tabs-tab-:r1:"
         id="headlessui-tabs-panel-:r4:"
         role="tabpanel"
@@ -89,6 +90,7 @@ exports[`CyclesPayoutsPanel renders 1`] = `
         tabindex="-1"
       />
       <span
+        aria-hidden="true"
         aria-labelledby="headlessui-tabs-tab-:r2:"
         id="headlessui-tabs-panel-:r5:"
         role="tabpanel"
diff --git a/yarn.lock b/yarn.lock
index 90f6996e04..7f317d1e0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3510,11 +3510,12 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@headlessui/react@^1.7.10":
-  version "1.7.14"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.14.tgz#75f19552c535113640fe8a3a40e71474f49e89c9"
-  integrity sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==
+"@headlessui/react@^1.7.18":
+  version "1.7.18"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7"
+  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
   dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
     client-only "^0.0.1"
 
 "@heroicons/react@^2.0.17":
@@ -5102,6 +5103,18 @@
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.4.tgz#32a90aa6faa2eeebb5f4ca561d26bae9f3435e45"
+  integrity sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA==
+  dependencies:
+    "@tanstack/virtual-core" "3.0.0"
+
+"@tanstack/virtual-core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz#637bee36f0cabf96a1d436887c90f138a7e9378b"
+  integrity sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==
+
 "@testing-library/cypress@^8.0.2":
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-8.0.7.tgz#18315eba3cf8852808afadf122e4858406384015"