diff --git a/pages/[chainNameAndSafeAddress]/claim.tsx b/pages/[chainNameAndSafeAddress]/claim.tsx index edc0bed5..6702d681 100644 --- a/pages/[chainNameAndSafeAddress]/claim.tsx +++ b/pages/[chainNameAndSafeAddress]/claim.tsx @@ -1,15 +1,11 @@ import { ArrowLeft } from "@icons" import ClaimListView from "components/claim/ClaimListView" import AccountNavBar from "components/core/AccountNavBar" -import { convertGlobalId } from "models/terminal/utils" import Link from "next/link" import { useRouter } from "next/router" const TerminalClaimListView = ({}: {}) => { const router = useRouter() - const { address } = convertGlobalId( - router.query.chainNameAndSafeAddress as string, - ) return (
@@ -20,7 +16,7 @@ const TerminalClaimListView = ({}: {}) => { > - +
) } diff --git a/pages/_app.tsx b/pages/_app.tsx index 6f852943..fc87672c 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -15,6 +15,7 @@ import trackerInit, { initializeUser, trackEvent } from "lib/utils/amplitude" import { useRouter } from "next/router" import Script from "next/script" import AppLayout from "../src/components/core/AppLayout" +import SliderManager from "../src/components/core/SliderManager" import { useIsRouterLoading } from "../src/hooks/useIsRouterLoading" const queryClient = new QueryClient({ @@ -182,6 +183,7 @@ function App({ Component, pageProps }: AppProps) { ) : ( + ))} diff --git a/pages/u/[address]/profile/claim.tsx b/pages/u/[address]/profile/claim.tsx index 0f9b559d..8838dc5f 100644 --- a/pages/u/[address]/profile/claim.tsx +++ b/pages/u/[address]/profile/claim.tsx @@ -14,7 +14,7 @@ const ProfileClaimListView = () => { - + ) } diff --git a/src/components/automation/CreateAutomationDropdown.tsx b/src/components/automation/CreateAutomationDropdown.tsx index c01499e9..bb0511e4 100644 --- a/src/components/automation/CreateAutomationDropdown.tsx +++ b/src/components/automation/CreateAutomationDropdown.tsx @@ -6,97 +6,61 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@ui/Dropdown" -import { addQueryParam, removeQueryParam } from "lib/utils/updateQueryParam" -import dynamic from "next/dynamic" import Link from "next/link" import { useRouter } from "next/router" -import { useEffect, useState } from "react" - -const RightSlider = dynamic(() => - import("../../../src/components/ui/RightSlider").then( - (mod) => mod.RightSlider, - ), -) -const NewAutomationContent = dynamic(() => - import("../pages/newAutomation/components/NewAutomationContent").then( - (mod) => mod.NewAutomationContent, - ), -) +import { + Sliders, + useSliderManagerStore, +} from "../../hooks/stores/useSliderManagerStore" export const CreateAutomationDropdown = () => { const router = useRouter() - - const [createAutomationSliderOpen, setCreateAutomationSliderOpen] = - useState(false) - const closeCreateAutomationSlider = (isOpen: boolean) => { - if (!isOpen) { - removeQueryParam(router, "createAutomationSliderOpen") - } - } - - useEffect(() => { - if (router.query.createAutomationSliderOpen) { - setCreateAutomationSliderOpen(true) - } else { - setCreateAutomationSliderOpen(false) - } - }, [router.query]) + const setActiveSlider = useSliderManagerStore( + (state) => state.setActiveSlider, + ) return ( - <> - - - - - - {/* Copy same styles as primary, base button because annoying console.error if we use Button component */} - - + Create - - - - - - {(isMobile) => { - if (isMobile) { - return ( - - Revenue share - - ) - } + + + {/* Copy same styles as primary, base button because annoying console.error if we use Button component */} + + + Create + + + + + + {(isMobile) => { + if (isMobile) { return ( - { - addQueryParam( - router, - "createAutomationSliderOpen", - "true", - ) - setCreateAutomationSliderOpen(true) - }} + Revenue share - + ) - }} - - - - - + } + return ( + { + setActiveSlider(Sliders.CREATE_AUTOMATION, { value: true }) + }} + > + Revenue share + + ) + }} + + + + ) } diff --git a/src/components/claim/ClaimListView.tsx b/src/components/claim/ClaimListView.tsx index 98210fae..6d646556 100644 --- a/src/components/claim/ClaimListView.tsx +++ b/src/components/claim/ClaimListView.tsx @@ -8,7 +8,10 @@ import { addressesAreEqual } from "lib/utils" import { useAccountItemsToClaim } from "models/account/hooks" import { RevShareWithdraw } from "models/automation/types" import { RequestFrob } from "models/request/types" +import { useRouter } from "next/router" import { useReducer, useState } from "react" +import { useAccount } from "wagmi" +import { usePermissionsStore } from "../../hooks/stores/usePermissionsStore" enum BatchEvent { ADD_ITEM, @@ -92,8 +95,39 @@ const batchReducer = ( } } -const ClaimListView = ({ recipientAddress }: { recipientAddress: string }) => { - const { isLoading, items, mutate } = useAccountItemsToClaim(recipientAddress) +const ClaimListView = () => { + const router = useRouter() + const isSigner = usePermissionsStore((state) => state.isSigner) + const { address: userAddress } = useAccount() + + let pageType = "" as "terminal" | "profile" + const path = router.pathname.split("/")[1] + if (path === "[chainNameAndSafeAddress]") { + pageType = "terminal" + } + if (path === "u") { + pageType = "profile" + } + + let recipientAddressParam + const { address, chainNameAndSafeAddress } = router.query as { + address: string | undefined + chainNameAndSafeAddress: string | undefined + } + if (address) { + recipientAddressParam = address as string + } else if (chainNameAndSafeAddress) { + const safeAddress = chainNameAndSafeAddress.split(":")[1] + recipientAddressParam = safeAddress as string + } + const { isLoading, items, mutate, error } = useAccountItemsToClaim( + recipientAddressParam, + ) + + const canView = + (isSigner && pageType === "terminal") || + (recipientAddressParam === userAddress && pageType === "profile") + const [claimDrawerItemPending, setClaimDrawerItemPending] = useState(false) const [claimDrawerOpen, setClaimDrawerOpen] = useState(false) @@ -197,13 +231,25 @@ const ClaimListView = ({ recipientAddress }: { recipientAddress: string }) => { revalidate: false, }) } + + if (!canView) { + return ( +
+ +
+ ) + } + return (
{/* single view & execute */} { - import("../../components/ui/RightSlider").then((mod) => mod.RightSlider), -) - export const ProfileReadyToClaim = () => { const router = useRouter() + const setActiveSlider = useSliderManagerStore( + (state) => state.setActiveSlider, + ) const accountAddress = router.query.address as string - const [claimSliderOpen, setClaimSliderOpen] = useState(false) - const closeClaimSlider = (isOpen: boolean) => { - if (!isOpen) { - removeQueryParam(router, "claimSliderOpen") - } - } - - useEffect(() => { - if (router.query.claimSliderOpen) { - setClaimSliderOpen(true) - } else { - setClaimSliderOpen(false) - } - }, [router.query]) - return ( - <> - - - - - {(isMobile) => { - if (isMobile) { - return ( - - - - ) - } + + {(isMobile) => { + if (isMobile) { return ( - { - setClaimSliderOpen(true) - addQueryParam(router, "claimSliderOpen", "true") - }} - > + - + ) - }} - - + } + return ( + { + setActiveSlider(Sliders.CLAIM_TOKENS, { value: true }) + }} + > + + + ) + }} + ) } diff --git a/src/components/claim/TerminalReadyToClaim.tsx b/src/components/claim/TerminalReadyToClaim.tsx index c13924e7..fb58a0c0 100644 --- a/src/components/claim/TerminalReadyToClaim.tsx +++ b/src/components/claim/TerminalReadyToClaim.tsx @@ -1,64 +1,43 @@ import Breakpoint from "@ui/Breakpoint" -import RightSlider from "@ui/RightSlider" -import ClaimListView from "components/claim/ClaimListView" import { convertGlobalId } from "models/terminal/utils" import Link from "next/link" import { useRouter } from "next/router" -import { useEffect, useState } from "react" import { - addQueryParam, - removeQueryParam, -} from "../../lib/utils/updateQueryParam" + Sliders, + useSliderManagerStore, +} from "../../hooks/stores/useSliderManagerStore" import { ReadyToClaim } from "./ReadyToClaim" export const TerminalReadyToClaim = () => { const router = useRouter() + const setActiveSlider = useSliderManagerStore( + (state) => state.setActiveSlider, + ) const { address } = convertGlobalId( router.query.chainNameAndSafeAddress as string, ) - const [claimSliderOpen, setClaimSliderOpen] = useState(false) - const closeClaimSlider = (isOpen: boolean) => { - if (!isOpen) { - removeQueryParam(router, "claimSliderOpen") - } - } - - useEffect(() => { - if (router.query.claimSliderOpen) { - setClaimSliderOpen(true) - } else { - setClaimSliderOpen(false) - } - }, [router.query]) - return ( - <> - - - - - {(isMobile) => { - if (isMobile) { - return ( - - - - ) - } + + {(isMobile) => { + if (isMobile) { return ( - { - setClaimSliderOpen(true) - addQueryParam(router, "claimSliderOpen", "true") - }} - > + - + ) - }} - - + } + return ( + { + setActiveSlider(Sliders.CLAIM_TOKENS, { value: true }) + }} + > + + + ) + }} + ) } diff --git a/src/components/core/AccountNavBar/AccountDropdown.tsx b/src/components/core/AccountNavBar/AccountDropdown.tsx index e9efdc84..283fa6c9 100644 --- a/src/components/core/AccountNavBar/AccountDropdown.tsx +++ b/src/components/core/AccountNavBar/AccountDropdown.tsx @@ -3,6 +3,7 @@ import { BellIcon } from "@heroicons/react/24/solid" import { Avatar } from "@ui/Avatar" import BottomDrawer from "@ui/BottomDrawer" import Breakpoint from "@ui/Breakpoint" +import { useBreakpoint } from "@ui/Breakpoint/Breakpoint" import { Button } from "@ui/Button" import { DropdownMenu, @@ -15,33 +16,25 @@ import { trackClick } from "lib/utils/amplitude" import dynamic from "next/dynamic" import Link from "next/link" import { useRouter } from "next/router" -import React, { useEffect, useState } from "react" +import React, { useState } from "react" +import { + Sliders, + useSliderManagerStore, +} from "../../../hooks/stores/useSliderManagerStore" import useStore from "../../../hooks/stores/useStore" import { useToast } from "../../../hooks/useToast" -import { - addQueryParam, - removeQueryParam, -} from "../../../lib/utils/updateQueryParam" import EmailNotificationForm from "../../email/EmailNotificationForm" -import CreateTerminalContent from "../../pages/createTerminal/components/CreateTerminalContent" import { AvatarAddress } from "../AvatarAddress" import NetworkDropdown from "../NetworkDropdown" const { LOCATION, EVENT_NAME } = TRACKING -const RightSlider = dynamic(() => - import("../../ui/RightSlider").then((mod) => mod.RightSlider), -) - export const AccountNavBar = () => { const router = useRouter() - const [createTerminalSliderOpen, setCreateTerminalSliderOpen] = - useState(false) - const closeCreateTerminalSlider = (isOpen: boolean) => { - if (!isOpen) { - removeQueryParam(router, "createTerminalSliderOpen") - } - } + const { isMobile } = useBreakpoint() + const setActiveSlider = useSliderManagerStore( + (state) => state.setActiveSlider, + ) const [notificationOpen, setNotificationOpen] = useState(false) const setActiveUser = useStore((state) => state.setActiveUser) @@ -54,24 +47,10 @@ export const AccountNavBar = () => { user, } = useDynamicContext() - useEffect(() => { - if (router.query.createTerminalSliderOpen) { - setCreateTerminalSliderOpen(true) - } else { - setCreateTerminalSliderOpen(false) - } - }, [router.query]) - const { successToast } = useToast() return ( <> - - - {(isMobile) => { if (isMobile) { @@ -91,18 +70,6 @@ export const AccountNavBar = () => { ) } - return ( - - { - setNotificationOpen(false) - successToast({ - message: "Email notification settings updated", - }) - }} - /> - - ) }} @@ -140,12 +107,10 @@ export const AccountNavBar = () => { accountAddress: primaryWallet?.address, userId: user?.userId, }) - addQueryParam( - router, - "createTerminalSliderOpen", - "true", - ) - setCreateTerminalSliderOpen(true) + + setActiveSlider(Sliders.CREATE_TERMINAL, { + value: true, + }) }} > + New Project @@ -157,8 +122,16 @@ export const AccountNavBar = () => {
setNotificationOpen(true)} + className="h-8 w-8 cursor-pointer rounded bg-gray-90 p-1" + onClick={() => { + if (isMobile) { + setNotificationOpen(true) + } else { + setActiveSlider(Sliders.EMAIL_NOTIFICATIONS, { + value: true, + }) + } + }} >
diff --git a/src/components/core/AccountNavBar/index.tsx b/src/components/core/AccountNavBar/index.tsx index 6a2272c5..3b8a74ab 100644 --- a/src/components/core/AccountNavBar/index.tsx +++ b/src/components/core/AccountNavBar/index.tsx @@ -8,7 +8,7 @@ export const AccountNavBar = () => { const { address: accountAddress } = useAccount() return (