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,25 @@
+import React from "react"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerOverlay,
+} from "@chakra-ui/react"
+import { useDocsDrawer } from "../../hooks"
+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/Modals/Staking/Overview.tsx

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

dapp/src/components/Modals/Staking/StakeForm.tsx

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

dapp/src/components/Modals/Staking/index.tsx

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

dapp/src/components/Overview/PositionDetails.tsx

@@ -8,12 +8,16 @@ import {
   CardFooter,
   HStack,
   CardProps,
+  useBoolean,
 } from "@chakra-ui/react"
 import { Info } from "../../static/icons"
+import StakingModal from "../Modals/Staking"
 import { CurrencyBalanceWithConversion } from "../shared/CurrencyBalanceWithConversion"
 import { TextMd } from "../shared/Typography"
 
 export default function PositionDetails(props: CardProps) {
+  const [isOpenStakingModal, stakingModal] = useBoolean()
+
   return (
     <Card {...props}>
       <CardBody>
@@ -40,11 +44,14 @@ 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={stakingModal.on}>
+          Stake
+        </Button>
         <Button size="lg" variant="outline">
           Unstake
         </Button>
       </CardFooter>
+      <StakingModal isOpen={isOpenStakingModal} onClose={stakingModal.off} />
     </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,23 @@
+import React from "react"
+import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react"
+import { useDocsDrawer, useSidebar } from "../../hooks"
+
+export default function Sidebar() {
+  const { isOpen } = useSidebar()
+  const { onOpen: openDocsDrawer } = useDocsDrawer()
+  const styles = useMultiStyleConfig("Sidebar")
+
+  return (
+    <Box
+      as="aside"
+      mt="header_height"
+      w={isOpen ? 80 : 0}
+      __css={styles.sidebarContainer}
+    >
+      <Box __css={styles.sidebar}>
+        {/* TODO: Add a correct content for the sidebar */}
+        <Button onClick={openDocsDrawer}>Open a documentation</Button>
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import {
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+} from "@chakra-ui/react"
+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
+  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="modal_shift">
+          <ModalCloseButton />
+          {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: () => {},
+})