Skip to content

Commit

Permalink
fix: mobile accept legal notice (#4251)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomquirk
tomquirk authored Feb 17, 2024
1 parent 340340d commit 9d71492
Show file tree
Hide file tree
Showing 8 changed files with 127 additions and 116 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]",
Expand Down
162 changes: 79 additions & 83 deletions src/components/Navbar/SiteNavigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand Down Expand Up @@ -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>
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navbar/components/HamburgerMenuButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -26,6 +26,6 @@ export const MobileMenuButton = ({
role="button"
/>
)}
</div>
</>
</Popover.Button>
)
29 changes: 22 additions & 7 deletions src/components/Navbar/components/Wallet/WalletButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 = () => {
Expand All @@ -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)
}}
/>
</>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/CoreAppWrapper/CoreAppWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
21 changes: 3 additions & 18 deletions src/components/modals/LegalNoticeModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -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{' '}
Expand Down
2 changes: 2 additions & 0 deletions ...ectDashboard/components/CyclesPayoutsPanel/__snapshots__/CyclesPayoutsPanel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,15 @@ exports[`CyclesPayoutsPanel renders 1`] = `
</div>
</div>
<span
aria-hidden="true"
aria-labelledby="headlessui-tabs-tab-:r1:"
id="headlessui-tabs-panel-:r4:"
role="tabpanel"
style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
tabindex="-1"
/>
<span
aria-hidden="true"
aria-labelledby="headlessui-tabs-tab-:r2:"
id="headlessui-tabs-panel-:r5:"
role="tabpanel"
Expand Down
21 changes: 17 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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":
Expand Down Expand Up @@ -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/[email protected]":
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"
Expand Down

0 comments on commit 9d71492

Please sign in to comment.