Handling modal windows

dapp/src/DApp.tsx

@@ -2,9 +2,18 @@ import React from "react"
 import { Box, ChakraProvider } from "@chakra-ui/react"
 import { useDetectThemeMode } from "./hooks"
 import theme from "./theme"
-import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
+import {
+  DocsDrawerContextProvider,
+  LedgerWalletAPIProvider,
+  ModalContextProvider,
+  SidebarContextProvider,
+  WalletContextProvider,
+} from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
+import Sidebar from "./components/Sidebar"
+import DocsDrawer from "./components/DocsDrawer"
+import ModalOverlay from "./components/ModalOverlay"
 
 function DApp() {
   useDetectThemeMode()
@@ -15,6 +24,11 @@ function DApp() {
       <Box as="main">
         <Overview />
       </Box>
+      <Sidebar />
+      <DocsDrawer />
+      {/* The user has several modals in a flow.
+      Let's use our own modal overlay to prevent the background flickering effect. */}
+      <ModalOverlay />
     </>
   )
 }
@@ -23,9 +37,15 @@ function DAppProviders() {
   return (
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
-        <ChakraProvider theme={theme}>
-          <DApp />
-        </ChakraProvider>
+        <DocsDrawerContextProvider>
+          <SidebarContextProvider>
+            <ModalContextProvider>
+              <ChakraProvider theme={theme}>
+                <DApp />
+              </ChakraProvider>
+            </ModalContextProvider>
+          </SidebarContextProvider>
+        </DocsDrawerContextProvider>
       </WalletContextProvider>
     </LedgerWalletAPIProvider>
   )

dapp/src/components/DocsDrawer/index.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerOverlay,
+} from "@chakra-ui/react"
+import { useDocsDrawer } from "../../hooks"
+import { TextMd } from "../Typography"
+import { HEADER_HEIGHT } from "../Header"
+
+export default function DocsDrawer() {
+  const { isOpen, onClose } = useDocsDrawer()
+
+  return (
+    <Drawer size="xl" placement="right" isOpen={isOpen} onClose={onClose}>
+      <DrawerOverlay mt={HEADER_HEIGHT} />
+      <DrawerContent mt={HEADER_HEIGHT}>
+        <DrawerBody>
+          {/* TODO: Add a documentation */}
+          <TextMd>Documentation</TextMd>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}

dapp/src/components/Header/index.tsx

@@ -3,9 +3,11 @@ import { Flex, HStack, Icon } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
 import { AcreLogo } from "../../static/icons"
 
+export const HEADER_HEIGHT = 24
+
 export default function Header() {
   return (
-    <HStack as="header" p={6}>
+    <HStack as="header" p={6} height={HEADER_HEIGHT}>
       <Icon as={AcreLogo} boxSize={20} />
       <Flex ml="auto">
         <ConnectWallet />

dapp/src/components/ModalOverlay/index.tsx

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react"
+import { Box } from "@chakra-ui/react"
+import { useModal } from "../../hooks"
+import { HEADER_HEIGHT } from "../Header"
+
+const DELAY = 300
+
+export default function ModalOverlay() {
+  const { modalType } = useModal()
+  const [showOverlay, setShowOverlay] = useState(!modalType)
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () => {
+        setShowOverlay(!!modalType)
+      },
+      // When the modal opens, we should show the sidebar without delay.
+      // However, when the modal disappears, the overlay should disappear with some delay.
+      modalType ? 0 : DELAY,
+    )
+    return () => clearTimeout(timeout)
+  }, [modalType])
+
+  return (
+    <Box
+      top={0}
+      left={0}
+      w="100vw"
+      h="100vh"
+      position="fixed"
+      bg="gold.300"
+      opacity={modalType ? 1 : 0}
+      zIndex="overlay"
+      // Hide the element when it is no longer needed.
+      display={showOverlay ? "block" : "none"}
+      transition={`opacity ${DELAY}ms`}
+      mt={HEADER_HEIGHT}
+    />
+  )
+}

dapp/src/components/Modals/BaseModal.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import { Modal, ModalCloseButton, ModalContent } from "@chakra-ui/react"
+import { HEADER_HEIGHT } from "../Header"
+import { useModal, useSidebar } from "../../hooks"
+
+export default function BaseModal({ children }: { children: React.ReactNode }) {
+  const { closeModal } = useModal()
+  const { onClose: closeSidebar } = useSidebar()
+
+  return (
+    <Modal
+      isOpen
+      size="md"
+      onClose={() => {
+        closeSidebar()
+        closeModal()
+      }}
+    >
+      <ModalContent mt={2 * HEADER_HEIGHT}>
+        <ModalCloseButton />
+        {children}
+      </ModalContent>
+    </Modal>
+  )
+}

dapp/src/components/Modals/StakingOverviewModal.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { ModalHeader } from "@chakra-ui/react"
+import BaseModal from "./BaseModal"
+
+export default function StakingOverviewModal() {
+  return (
+    <BaseModal>
+      <ModalHeader textAlign="center">Staking overview</ModalHeader>
+    </BaseModal>
+  )
+}

dapp/src/components/Overview/PositionDetails.tsx

@@ -12,8 +12,13 @@ import {
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
+import { useModal, useSidebar } from "../../hooks"
+import Staking from "../Staking"
 
 export default function PositionDetails(props: CardProps) {
+  const { openModal } = useModal()
+  const { onOpen: openSidebar } = useSidebar()
+
   return (
     <Card {...props}>
       <CardBody>
@@ -33,9 +38,17 @@ export default function PositionDetails(props: CardProps) {
       </CardBody>
       <CardFooter flexDirection="column" gap={2}>
         {/* TODO: Handle click actions */}
-        <Button>Stake</Button>
+        <Button
+          onClick={() => {
+            openSidebar()
+            openModal("overview")
+          }}
+        >
+          Stake
+        </Button>
         <Button variant="outline">Withdraw</Button>
       </CardFooter>
+      <Staking />
     </Card>
   )
 }

dapp/src/components/Overview/index.tsx

@@ -12,16 +12,24 @@ import Statistics from "./Statistics"
 import TransactionHistory from "./TransactionHistory"
 import { USD } from "../../constants"
 import { ChevronRight } from "../../static/icons"
+import { useDocsDrawer } from "../../hooks"
 
 export default function Overview() {
+  const { onOpen } = useDocsDrawer()
+
   // TODO: Create a custom theme for card component
   const bg = useColorModeValue("gold.100", "gold.100")
+
   return (
     <Flex direction="column" gap={2} p={6}>
       <Flex justifyContent="space-between">
         {/* TODO: Handle click actions */}
         <Switch size="sm">Show values in {USD.symbol}</Switch>
-        <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
+        <Button
+          variant="link"
+          rightIcon={<Icon as={ChevronRight} />}
+          onClick={onOpen}
+        >
           Read documentation
         </Button>
       </Flex>

dapp/src/components/Sidebar/index.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { Box, Button } from "@chakra-ui/react"
+import DocsDrawer from "../DocsDrawer"
+import { useDocsDrawer, useSidebar } from "../../hooks"
+import { HEADER_HEIGHT } from "../Header"
+
+export default function Sidebar() {
+  const { isOpen } = useSidebar()
+  const { onOpen: openDocsDrawer } = useDocsDrawer()
+
+  return (
+    <>
+      <Box
+        top={0}
+        right={0}
+        h="100vh"
+        w={isOpen ? 80 : 0}
+        position="fixed"
+        overflow="hidden"
+        transition="width 0.3s"
+        zIndex="sidebar"
+        mt={HEADER_HEIGHT}
+      >
+        <Box
+          p={4}
+          h="100%"
+          borderTop="2px"
+          borderLeft="2px"
+          borderColor="white"
+          borderTopLeftRadius="xl"
+        >
+          {/* TODO: Add a correct content for the sidebar */}
+          <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        </Box>
+      </Box>
+      <DocsDrawer />
+    </>
+  )
+}

dapp/src/components/Staking/index.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { useModal } from "../../hooks"
+import StakingOverviewModal from "../Modals/StakingOverviewModal"
+
+export default function Staking() {
+  const { modalType } = useModal()
+
+  if (!modalType) return null
+
+  if (modalType === "overview") return <StakingOverviewModal />
+}

dapp/src/contexts/DocsDrawerContext.tsx

@@ -0,0 +1,44 @@
+import React, { createContext, useCallback, useMemo, useState } from "react"
+
+type DocsDrawerContextValue = {
+  isOpen: boolean
+  onOpen: () => void
+  onClose: () => void
+}
+
+export const DocsDrawerContext = createContext<DocsDrawerContextValue>({
+  isOpen: false,
+  onOpen: () => {},
+  onClose: () => {},
+})
+
+export function DocsDrawerContextProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.ReactElement {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onOpen = useCallback(() => {
+    setIsOpen(true)
+  }, [])
+
+  const onClose = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const contextValue: DocsDrawerContextValue = useMemo<DocsDrawerContextValue>(
+    () => ({
+      isOpen,
+      onOpen,
+      onClose,
+    }),
+    [isOpen, onClose, onOpen],
+  )
+
+  return (
+    <DocsDrawerContext.Provider value={contextValue}>
+      {children}
+    </DocsDrawerContext.Provider>
+  )
+}

dapp/src/contexts/ModalContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useCallback, useMemo, useState } from "react"
+
+type ModalType = "overview"
+
+type ModalContextValue = {
+  modalType?: ModalType
+  openModal: (modalType: ModalType) => void
+  closeModal: () => void
+}
+
+export const ModalContext = createContext<ModalContextValue>({
+  openModal: () => {},
+  closeModal: () => {},
+})
+
+export function ModalContextProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.ReactElement {
+  const [modalType, setModalType] = useState<ModalType | undefined>(undefined)
+
+  const openModal = useCallback((type: ModalType) => {
+    setModalType(type)
+  }, [])
+
+  const closeModal = useCallback(() => {
+    setModalType(undefined)
+  }, [])
+
+  const contextValue: ModalContextValue = useMemo<ModalContextValue>(
+    () => ({
+      modalType,
+      openModal,
+      closeModal,
+    }),
+    [modalType, closeModal, openModal],
+  )
+
+  return (
+    <ModalContext.Provider value={contextValue}>
+      {children}
+    </ModalContext.Provider>
+  )
+}