From a69b647a34d7dca35df9db05ffae863b7d521a99 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Mon, 14 Oct 2024 15:22:55 +0200 Subject: [PATCH 1/6] Set scrolling behavior for the modal outside --- dapp/src/components/ModalRoot/withBaseModal.tsx | 1 - dapp/src/theme/Modal.ts | 8 ++------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/dapp/src/components/ModalRoot/withBaseModal.tsx b/dapp/src/components/ModalRoot/withBaseModal.tsx index 8a75ebea3..33619079e 100644 --- a/dapp/src/components/ModalRoot/withBaseModal.tsx +++ b/dapp/src/components/ModalRoot/withBaseModal.tsx @@ -27,7 +27,6 @@ function withBaseModal( Date: Tue, 15 Oct 2024 13:43:39 +0200 Subject: [PATCH 2/6] Make the scrollbar visible when the sidebar is open The sidebar has a higher z-index than the modal. When the scrollbar appears for the modal window it is covered by the sidebar. Therefore, we should check when the scrollbar is visible and then set the position of the Sidebar correctly. Note that we can not change the z-index for the Sidebar because the container for the modal window covers all window and will not allow a user to click on the element. --- dapp/src/components/Sidebar.tsx | 17 ++++++++++---- dapp/src/hooks/index.ts | 1 + dapp/src/hooks/useScrollbarVisibility.ts | 29 ++++++++++++++++++++++++ 3 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 dapp/src/hooks/useScrollbarVisibility.ts diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx index e72fc922c..d1e1c90ea 100644 --- a/dapp/src/components/Sidebar.tsx +++ b/dapp/src/components/Sidebar.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps } from "react" +import React, { ComponentProps, useEffect } from "react" import { Box, Card, @@ -7,7 +7,7 @@ import { useMultiStyleConfig, Image, } from "@chakra-ui/react" -import { useSidebar } from "#/hooks" +import { useScrollbarVisibility, useSidebar } from "#/hooks" import { EXTERNAL_HREF, REWARD_BOOST, @@ -18,6 +18,8 @@ import { rewardsBoostArrowImage } from "#/assets/images/benefits" import ButtonLink from "./shared/ButtonLink" import { TextSm } from "./shared/Typography" +const CHAKRA_MODAL_CONTAINER = "chakra-modal__content-container" + const BUTTONS: Partial>[] = [ { children: "Docs", @@ -52,16 +54,23 @@ const BENEFITS = [ export default function Sidebar() { const { isOpen } = useSidebar() - // TODO Bring back when dApp embedded docs are ready - // const { onOpen: openDocsDrawer } = useDocsDrawer() + const { isVisible, scrollbarWidth, refetch } = useScrollbarVisibility( + CHAKRA_MODAL_CONTAINER, + ) const styles = useMultiStyleConfig("Sidebar") + useEffect(() => { + if (!isOpen) return + refetch() + }, [isOpen, refetch]) + return ( {featureFlags.GAMIFICATION_ENABLED && ( diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 4aad5a775..1c733a463 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -33,3 +33,4 @@ export { default as useDetectReferral } from "./useDetectReferral" export { default as useReferral } from "./useReferral" export { default as useMats } from "./useMats" export { default as useSignMessageAndCreateSession } from "./useSignMessageAndCreateSession" +export { default as useScrollbarVisibility } from "./useScrollbarVisibility" diff --git a/dapp/src/hooks/useScrollbarVisibility.ts b/dapp/src/hooks/useScrollbarVisibility.ts new file mode 100644 index 000000000..12a604149 --- /dev/null +++ b/dapp/src/hooks/useScrollbarVisibility.ts @@ -0,0 +1,29 @@ +import { useCallback, useEffect, useState } from "react" + +const SCROLLBAR_WIDTH = `${window.innerWidth - document.body.offsetWidth}px` + +function scrollbarVisible(className: string) { + const element = document.getElementsByClassName(className)[0] + return element?.scrollHeight > element?.clientHeight +} + +export default function useScrollbarVisibility(className: string) { + const [isVisible, setIsVisible] = useState(false) + + useEffect(() => { + const handleResize = () => { + setIsVisible(scrollbarVisible(className)) + } + window.addEventListener("resize", handleResize) + + return () => { + window.removeEventListener("resize", handleResize) + } + }, [className]) + + const refetch = useCallback(() => { + setIsVisible(scrollbarVisible(className)) + }, [className]) + + return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refetch } +} From d660d6bde13872f2896822ff767ae3c91e2cb27e Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 15 Oct 2024 13:48:25 +0200 Subject: [PATCH 3/6] Revert the property for the modal dialog --- dapp/src/theme/Modal.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index b4c17de38..65aae5315 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -12,6 +12,7 @@ const baseStyleDialog = defineStyle({ boxShadow: "none", borderColor: "white", borderRadius: "xl", + bg: "gold.100", }) const baseCloseButton = defineStyle({ From f75fe59747eac984f19eab26303094e32128b078 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 18 Oct 2024 11:42:15 +0200 Subject: [PATCH 4/6] Rename from `scrollbarVisible` to `isScrollbarVisible` --- dapp/src/hooks/useScrollbarVisibility.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dapp/src/hooks/useScrollbarVisibility.ts b/dapp/src/hooks/useScrollbarVisibility.ts index 12a604149..ca2abe395 100644 --- a/dapp/src/hooks/useScrollbarVisibility.ts +++ b/dapp/src/hooks/useScrollbarVisibility.ts @@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from "react" const SCROLLBAR_WIDTH = `${window.innerWidth - document.body.offsetWidth}px` -function scrollbarVisible(className: string) { +function isScrollbarVisible(className: string) { const element = document.getElementsByClassName(className)[0] return element?.scrollHeight > element?.clientHeight } @@ -12,7 +12,7 @@ export default function useScrollbarVisibility(className: string) { useEffect(() => { const handleResize = () => { - setIsVisible(scrollbarVisible(className)) + setIsVisible(isScrollbarVisible(className)) } window.addEventListener("resize", handleResize) @@ -22,7 +22,7 @@ export default function useScrollbarVisibility(className: string) { }, [className]) const refetch = useCallback(() => { - setIsVisible(scrollbarVisible(className)) + setIsVisible(isScrollbarVisible(className)) }, [className]) return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refetch } From 038a7f2e27d883b8f2a2fdb28a8a4a0fc3764b4b Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 18 Oct 2024 11:50:26 +0200 Subject: [PATCH 5/6] Use `selector` instead of `className` --- dapp/src/components/Sidebar.tsx | 4 ++-- dapp/src/hooks/useScrollbarVisibility.ts | 17 ++++++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx index d1e1c90ea..3b20cb42c 100644 --- a/dapp/src/components/Sidebar.tsx +++ b/dapp/src/components/Sidebar.tsx @@ -18,7 +18,7 @@ import { rewardsBoostArrowImage } from "#/assets/images/benefits" import ButtonLink from "./shared/ButtonLink" import { TextSm } from "./shared/Typography" -const CHAKRA_MODAL_CONTAINER = "chakra-modal__content-container" +const CHAKRA_MODAL_CONTAINER_SELECTOR = ".chakra-modal__content-container" const BUTTONS: Partial>[] = [ { @@ -55,7 +55,7 @@ const BENEFITS = [ export default function Sidebar() { const { isOpen } = useSidebar() const { isVisible, scrollbarWidth, refetch } = useScrollbarVisibility( - CHAKRA_MODAL_CONTAINER, + CHAKRA_MODAL_CONTAINER_SELECTOR, ) const styles = useMultiStyleConfig("Sidebar") diff --git a/dapp/src/hooks/useScrollbarVisibility.ts b/dapp/src/hooks/useScrollbarVisibility.ts index ca2abe395..caca7a2b3 100644 --- a/dapp/src/hooks/useScrollbarVisibility.ts +++ b/dapp/src/hooks/useScrollbarVisibility.ts @@ -2,28 +2,31 @@ import { useCallback, useEffect, useState } from "react" const SCROLLBAR_WIDTH = `${window.innerWidth - document.body.offsetWidth}px` -function isScrollbarVisible(className: string) { - const element = document.getElementsByClassName(className)[0] +function isScrollbarVisible(selector: string) { + const element = document.querySelector(selector) + + if (!element) return false + return element?.scrollHeight > element?.clientHeight } -export default function useScrollbarVisibility(className: string) { +export default function useScrollbarVisibility(selector: string) { const [isVisible, setIsVisible] = useState(false) useEffect(() => { const handleResize = () => { - setIsVisible(isScrollbarVisible(className)) + setIsVisible(isScrollbarVisible(selector)) } window.addEventListener("resize", handleResize) return () => { window.removeEventListener("resize", handleResize) } - }, [className]) + }, [selector]) const refetch = useCallback(() => { - setIsVisible(isScrollbarVisible(className)) - }, [className]) + setIsVisible(isScrollbarVisible(selector)) + }, [selector]) return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refetch } } From 3562bbcfc4395f5395b454998d3f8066beab0e2e Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 18 Oct 2024 11:54:04 +0200 Subject: [PATCH 6/6] Rename from `refetch` to `refreshState` --- dapp/src/components/Sidebar.tsx | 6 +++--- dapp/src/hooks/useScrollbarVisibility.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx index 3b20cb42c..5484b4470 100644 --- a/dapp/src/components/Sidebar.tsx +++ b/dapp/src/components/Sidebar.tsx @@ -54,15 +54,15 @@ const BENEFITS = [ export default function Sidebar() { const { isOpen } = useSidebar() - const { isVisible, scrollbarWidth, refetch } = useScrollbarVisibility( + const { isVisible, scrollbarWidth, refreshState } = useScrollbarVisibility( CHAKRA_MODAL_CONTAINER_SELECTOR, ) const styles = useMultiStyleConfig("Sidebar") useEffect(() => { if (!isOpen) return - refetch() - }, [isOpen, refetch]) + refreshState() + }, [isOpen, refreshState]) return ( { + const refreshState = useCallback(() => { setIsVisible(isScrollbarVisible(selector)) }, [selector]) - return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refetch } + return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refreshState } }