Merge branch 'main' into acre-points-ui

dapp/src/components/ModalRoot/withBaseModal.tsx

@@ -27,7 +27,6 @@ function withBaseModal<T extends BaseModalProps>(
       <Modal
         isOpen
         onClose={handleCloseModal}
-        scrollBehavior="inside"
         closeOnOverlayClick={false}
         size={MODAL_BASE_SIZE}
         closeOnEsc={closeOnEsc}

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_SELECTOR = ".chakra-modal__content-container"
+
 const BUTTONS: Partial<ComponentProps<typeof ButtonLink>>[] = [
   {
     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, refreshState } = useScrollbarVisibility(
+    CHAKRA_MODAL_CONTAINER_SELECTOR,
+  )
   const styles = useMultiStyleConfig("Sidebar")
 
+  useEffect(() => {
+    if (!isOpen) return
+    refreshState()
+  }, [isOpen, refreshState])
+
   return (
     <Box
       as="aside"
       mt="header_height"
       w={isOpen ? "sidebar_width" : "0"}
       __css={styles.sidebarContainer}
+      mr={isVisible ? scrollbarWidth : 0}
     >
       <Box __css={styles.sidebar}>
         {featureFlags.GAMIFICATION_ENABLED && (

dapp/src/hooks/index.ts

@@ -34,3 +34,4 @@ export { default as useReferral } from "./useReferral"
 export { default as useMats } from "./useMats"
 export { default as useAcrePoints } from "./useAcrePoints"
 export { default as useSignMessageAndCreateSession } from "./useSignMessageAndCreateSession"
+export { default as useScrollbarVisibility } from "./useScrollbarVisibility"

dapp/src/hooks/useScrollbarVisibility.ts

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useState } from "react"
+
+const SCROLLBAR_WIDTH = `${window.innerWidth - document.body.offsetWidth}px`
+
+function isScrollbarVisible(selector: string) {
+  const element = document.querySelector(selector)
+
+  if (!element) return false
+
+  return element?.scrollHeight > element?.clientHeight
+}
+
+export default function useScrollbarVisibility(selector: string) {
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsVisible(isScrollbarVisible(selector))
+    }
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [selector])
+
+  const refreshState = useCallback(() => {
+    setIsVisible(isScrollbarVisible(selector))
+  }, [selector])
+
+  return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refreshState }
+}

dapp/src/theme/Modal.ts

@@ -2,20 +2,17 @@ import { modalAnatomy as parts } from "@chakra-ui/anatomy"
 import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 
 const baseStyleContainer = defineStyle({
-  height: "calc(100vh - var(--chakra-space-modal_shift))",
-  top: "var(--chakra-space-modal_shift)",
-  overflow: "unset",
   px: 8,
 })
 
 const baseStyleDialog = defineStyle({
+  marginTop: "var(--chakra-space-modal_shift)",
+  marginBottom: 8,
   borderWidth: "2px",
   boxShadow: "none",
   borderColor: "white",
   borderRadius: "xl",
   bg: "gold.100",
-  mt: 0,
-  mb: "auto",
 })
 
 const baseCloseButton = defineStyle({