Handling modal windows

dapp/src/DApp.tsx

@@ -2,9 +2,16 @@ 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,
+  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 GlobalStyles from "./components/GlobalStyles"
 
 function DApp() {
@@ -16,6 +23,8 @@ function DApp() {
       <Box as="main">
         <Overview />
       </Box>
+      <Sidebar />
+      <DocsDrawer />
     </>
   )
 }
@@ -24,10 +33,14 @@ function DAppProviders() {
   return (
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
-        <ChakraProvider theme={theme}>
-          <GlobalStyles />
-          <DApp />
-        </ChakraProvider>
+        <DocsDrawerContextProvider>
+          <SidebarContextProvider>
+            <ChakraProvider theme={theme}>
+              <GlobalStyles />
+              <DApp />
+            </ChakraProvider>
+          </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 { HEADER_HEIGHT } from "../Header"
+import { TextMd } from "../shared/Typography"
+
+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} w={20} h={12} />
       <Flex ml="auto">
         <ConnectWallet />

dapp/src/components/Modals/StakeModal.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { Button, ModalBody, ModalCloseButton } from "@chakra-ui/react"
+import { ModalStep } from "../../contexts"
+import { TextMd } from "../shared/Typography"
+
+export default function StakeModal({ goNext }: ModalStep) {
+  return (
+    <>
+      <ModalCloseButton />
+      <ModalBody>
+        <TextMd>Stake modal</TextMd>
+        <Button width="100%" onClick={goNext}>
+          Stake
+        </Button>
+      </ModalBody>
+    </>
+  )
+}

dapp/src/components/Modals/StakingOverviewModal.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import {
+  Button,
+  ModalBody,
+  ModalCloseButton,
+  ModalFooter,
+} from "@chakra-ui/react"
+import { ModalStep } from "../../contexts"
+import { TextMd } from "../shared/Typography"
+
+export default function StakingOverviewModal({ goNext }: ModalStep) {
+  return (
+    <>
+      <ModalCloseButton />
+      <ModalBody>
+        <TextMd>Staking overview</TextMd>
+      </ModalBody>
+      <ModalFooter>
+        <Button width="100%" onClick={goNext}>
+          Get started
+        </Button>
+      </ModalFooter>
+    </>
+  )
+}

dapp/src/components/Overview/PositionDetails.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import {
   Text,
   Button,
@@ -12,8 +12,11 @@ import {
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
+import StakingModal from "../StakingModal"
 
 export default function PositionDetails(props: CardProps) {
+  const [isOpenStakingModal, setIsOpenStakingModal] = useState(false)
+
   return (
     <Card {...props}>
       <CardBody>
@@ -33,11 +36,17 @@ export default function PositionDetails(props: CardProps) {
       </CardBody>
       <CardFooter flexDirection="column" gap={2}>
         {/* TODO: Handle click actions */}
-        <Button size="lg">Stake</Button>
+        <Button size="lg" onClick={() => setIsOpenStakingModal(true)}>
+          Stake
+        </Button>
         <Button size="lg" variant="outline">
           Unstake
         </Button>
       </CardFooter>
+      <StakingModal
+        isOpen={isOpenStakingModal}
+        onClose={() => setIsOpenStakingModal(false)}
+      />
     </Card>
   )
 }

dapp/src/components/Overview/index.tsx

@@ -6,8 +6,11 @@ import TransactionHistory from "./TransactionHistory"
 import { USD } from "../../constants"
 import { ArrowUpRight } from "../../static/icons"
 import { TextSm } from "../shared/Typography"
+import { useDocsDrawer } from "../../hooks"
 
 export default function Overview() {
+  const { onOpen } = useDocsDrawer()
+
   return (
     <Flex direction="column" gap={2} p={6}>
       <Flex justifyContent="space-between" alignItems="center">
@@ -18,6 +21,7 @@ export default function Overview() {
         </HStack>
         <Button
           variant="card"
+          onClick={onOpen}
           leftIcon={<Icon as={ArrowUpRight} color="brand.400" boxSize={4} />}
         >
           Docs

dapp/src/components/Sidebar/index.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { Box, Button, useMultiStyleConfig } 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()
+  const styles = useMultiStyleConfig("Sidebar")
+
+  return (
+    <>
+      <Box
+        w={isOpen ? 80 : 0}
+        mt={HEADER_HEIGHT}
+        __css={styles.sidebarContainer}
+      >
+        <Box __css={styles.sidebar}>
+          {/* TODO: Add a correct content for the sidebar */}
+          <Button onClick={openDocsDrawer}>Open a documentation</Button>
+        </Box>
+      </Box>
+      <DocsDrawer />
+    </>
+  )
+}

dapp/src/components/StakingModal/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { useModalFlowContext } from "../../hooks"
+import StakeModal from "../Modals/StakeModal"
+import StakingOverviewModal from "../Modals/StakingOverviewModal"
+import ModalBase from "../shared/ModalBase"
+
+function StakingModalSteps() {
+  const { activeStep, goNext } = useModalFlowContext()
+
+  switch (activeStep) {
+    case 1:
+      return <StakingOverviewModal goNext={goNext} />
+    case 2:
+      return <StakeModal goNext={goNext} />
+    default:
+      return null
+  }
+}
+
+export default function StakingModal({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) {
+  return (
+    <ModalBase isOpen={isOpen} onClose={onClose} numberOfSteps={2}>
+      <StakingModalSteps />
+    </ModalBase>
+  )
+}

dapp/src/components/shared/ModalBase/index.tsx

@@ -0,0 +1,72 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { Modal, ModalContent, ModalOverlay } from "@chakra-ui/react"
+import { HEADER_HEIGHT } from "../../Header"
+import { ModalFlowContext, ModalFlowContextValue } from "../../../contexts"
+import { useSidebar } from "../../../hooks"
+
+export default function ModalBase({
+  isOpen,
+  onClose,
+  numberOfSteps,
+  defaultStep = 1,
+  children,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  numberOfSteps: number
+  // eslint-disable-next-line react/require-default-props
+  defaultStep?: number
+  children: React.ReactNode
+}) {
+  const { onOpen: openSideBar, onClose: closeSidebar } = useSidebar()
+
+  const [activeStep, setActiveStep] = useState(defaultStep)
+
+  const handleGoNext = useCallback(() => {
+    setActiveStep((prevStep) => prevStep + 1)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    onClose()
+  }, [onClose])
+
+  const resetState = useCallback(() => {
+    setActiveStep(defaultStep)
+  }, [defaultStep])
+
+  useEffect(() => {
+    if (activeStep > numberOfSteps) {
+      handleClose()
+    }
+  }, [activeStep, numberOfSteps, handleClose])
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout
+
+    if (isOpen) {
+      openSideBar()
+    } else {
+      closeSidebar()
+      timeout = setTimeout(resetState, 100)
+    }
+    return () => clearTimeout(timeout)
+  }, [isOpen, resetState, openSideBar, closeSidebar])
+
+  const contextValue: ModalFlowContextValue = useMemo<ModalFlowContextValue>(
+    () => ({
+      activeStep,
+      onClose: handleClose,
+      goNext: handleGoNext,
+    }),
+    [activeStep, handleGoNext, handleClose],
+  )
+
+  return (
+    <ModalFlowContext.Provider value={contextValue}>
+      <Modal size="md" isOpen={isOpen} onClose={handleClose}>
+        <ModalOverlay mt={HEADER_HEIGHT} />
+        <ModalContent mt={2 * HEADER_HEIGHT}>{children}</ModalContent>
+      </Modal>
+    </ModalFlowContext.Provider>
+  )
+}

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/ModalFlowContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from "react"
+
+export type ModalStep = {
+  goNext: () => void
+}
+
+export type ModalFlowContextValue = {
+  activeStep?: number
+  onClose: () => void
+  goNext: () => void
+}
+
+export const ModalFlowContext = createContext<ModalFlowContextValue>({
+  activeStep: undefined,
+  goNext: () => {},
+  onClose: () => {},
+})