Add a sidebar for docs drawer

dapp/src/DApp.tsx

@@ -6,6 +6,7 @@ import {
   LedgerWalletAPIProvider,
   StakingFlowProvider,
   WalletContextProvider,
+  DocsDrawerContextProvider,
 } from "./contexts"
 import Header from "./components/Header"
 import Overview from "./components/Overview"
@@ -28,9 +29,11 @@ function DAppProviders() {
     <LedgerWalletAPIProvider>
       <WalletContextProvider>
         <StakingFlowProvider>
-          <ChakraProvider theme={theme}>
-            <DApp />
-          </ChakraProvider>
+          <DocsDrawerContextProvider>
+            <ChakraProvider theme={theme}>
+              <DApp />
+            </ChakraProvider>
+          </DocsDrawerContextProvider>
         </StakingFlowProvider>
       </WalletContextProvider>
     </LedgerWalletAPIProvider>

dapp/src/components/DocsDrawer/index.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  Text,
+  DrawerOverlay,
+  useColorModeValue,
+} from "@chakra-ui/react"
+import { useDocsDrawerContext } from "../../hooks"
+
+export default function DocsDrawer() {
+  const { isOpen, onClose } = useDocsDrawerContext()
+
+  return (
+    <Drawer size="lg" placement="right" isOpen={isOpen} onClose={onClose}>
+      <DrawerOverlay />
+      {/* TODO: Set the correct background color */}
+      <DrawerContent bg={useColorModeValue("grey.100", "grey.100")}>
+        <DrawerBody>
+          {/* TODO: Add a documentation */}
+          <Text>Documentation</Text>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}

dapp/src/components/Sidebar/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { Box, Button, useColorModeValue } from "@chakra-ui/react"
+import { useDocsDrawerContext, useStakingFlowContext } from "../../hooks"
+import DocsDrawer from "../DocsDrawer"
+
+export default function Sidebar({ marginTop }: { marginTop?: number }) {
+  const { modalType } = useStakingFlowContext()
+  const { onOpen } = useDocsDrawerContext()
+
+  return (
+    <>
+      <Box
+        top={0}
+        right={0}
+        h="100vh"
+        position="fixed"
+        width={modalType ? 80 : 0}
+        height="100vh"
+        transition="width 0.3s"
+        zIndex="sidebar"
+        // TODO: Set the correct background color
+        bg={useColorModeValue("white", "white")}
+        mt={marginTop}
+      >
+        {/* TODO: Add a correct content for the sidebar */}
+        <Button onClick={onOpen}>Open a documentation</Button>
+      </Box>
+      <DocsDrawer />
+    </>
+  )
+}

dapp/src/components/Staking/index.tsx

@@ -4,6 +4,7 @@ import StakingOverviewModal from "../Modals/StakingOverviewModal"
 import { useStakingFlowContext, useWalletContext } from "../../hooks"
 import ModalOverlay from "../ModalOverlay"
 import { HEADER_HEIGHT } from "../Header"
+import Sidebar from "../Sidebar"
 
 function Modal() {
   const { modalType } = useStakingFlowContext()
@@ -23,6 +24,7 @@ export default function Staking() {
       {/* The user has several modals in a flow.
       Let's use our own modal overlay to prevent the background flickering effect. */}
       <ModalOverlay marginTop={HEADER_HEIGHT} />
+      <Sidebar marginTop={HEADER_HEIGHT} />
     </>
   )
 }

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

@@ -1,3 +1,4 @@
 export * from "./WalletContext"
 export * from "./LedgerWalletAPIProvider"
 export * from "./StakingFlowContext"
+export * from "./DocsDrawerContext"

dapp/src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from "./useRequestBitcoinAccount"
 export * from "./useRequestEthereumAccount"
 export * from "./useWalletContext"
 export * from "./useStakingFlowContext"
+export * from "./useDocsDrawerContext"

dapp/src/hooks/useDocsDrawerContext.ts

@@ -0,0 +1,14 @@
+import { useContext } from "react"
+import { DocsDrawerContext } from "../contexts"
+
+export function useDocsDrawerContext() {
+  const context = useContext(DocsDrawerContext)
+
+  if (!context) {
+    throw new Error(
+      "DocsDrawerContext used outside of DocsDrawerContext component",
+    )
+  }
+
+  return context
+}

dapp/src/theme/Drawer.ts

@@ -0,0 +1,11 @@
+import { ComponentSingleStyleConfig } from "@chakra-ui/react"
+
+const Drawer: ComponentSingleStyleConfig = {
+  baseStyle: {
+    dialogContainer: {
+      zIndex: "drawer",
+    },
+  },
+}
+
+export default Drawer

dapp/src/theme/index.ts

@@ -2,14 +2,16 @@ import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
-import { colors } from "./utils"
+import { colors, zIndices } from "./utils"
+import Drawer from "./Drawer"
 
 // Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
 // Let's override the defaultProps as follows.
 Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
 
 const defaultTheme = {
   colors,
+  zIndices,
   styles: {
     global: (props: StyleFunctionProps) => ({
       body: {
@@ -21,6 +23,7 @@ const defaultTheme = {
   components: {
     Button,
     Switch,
+    Drawer,
   },
 }
 

dapp/src/theme/utils/index.ts

@@ -1 +1,2 @@
 export * from "./colors"
+export * from "./zIndices"

dapp/src/theme/utils/zIndices.ts

@@ -0,0 +1,17 @@
+export const zIndices = {
+  hide: -1,
+  auto: "auto",
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  sidebar: 1450,
+  drawer: 1470,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800,
+}