dApp: Sidebar component removal (#913)

Closes: AENG-142

### Changes
- Removed `Sidebar` component
- Removed `SidebarContext`
- Removed `useSidebar` hook
- Removed `Sidebar` theme definition

dapp/src/DApp.tsx

@@ -9,7 +9,6 @@ import { AcreSdkProvider } from "./acre-react/contexts"
 import GlobalStyles from "./components/GlobalStyles"
 import {
   DocsDrawerContextProvider,
-  SidebarContextProvider,
   WalletConnectionAlertContextProvider,
 } from "./contexts"
 import { useInitApp } from "./hooks"
@@ -67,15 +66,13 @@ function DAppProviders() {
         <QueryClientProvider client={queryClient}>
           <AcreSdkProvider>
             <DocsDrawerContextProvider>
-              <SidebarContextProvider>
-                <WalletConnectionAlertContextProvider>
-                  <ReduxProvider store={store}>
-                    <PostHogProvider>
-                      <DApp />
-                    </PostHogProvider>
-                  </ReduxProvider>
-                </WalletConnectionAlertContextProvider>
-              </SidebarContextProvider>
+              <WalletConnectionAlertContextProvider>
+                <ReduxProvider store={store}>
+                  <PostHogProvider>
+                    <DApp />
+                  </PostHogProvider>
+                </ReduxProvider>
+              </WalletConnectionAlertContextProvider>
             </DocsDrawerContextProvider>
           </AcreSdkProvider>
         </QueryClientProvider>

dapp/src/components/Layout.tsx

@@ -7,7 +7,6 @@ import { usePostHogPageViewCapture } from "#/hooks/posthog"
 import DocsDrawer from "./DocsDrawer"
 import Header from "./Header"
 import ModalRoot from "./ModalRoot"
-import Sidebar from "./Sidebar"
 import MobileModeBanner from "./MobileModeBanner"
 import Footer from "./Footer"
 
@@ -51,7 +50,6 @@ function Layout() {
       >
         <Outlet />
 
-        <Sidebar />
         <DocsDrawer />
         <ModalRoot />
       </Flex>

dapp/src/components/ModalRoot/withBaseModal.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType, useCallback } from "react"
 import { Modal, ModalContent, ModalOverlay, ModalProps } from "@chakra-ui/react"
 import { BaseModalProps } from "#/types"
-import { useAppNavigate, useSidebar } from "#/hooks"
+import { useAppNavigate } from "#/hooks"
 
 const MODAL_BASE_SIZE = "lg"
 
@@ -12,7 +12,6 @@ function withBaseModal<T extends BaseModalProps>(
   return function ModalBase(props: T) {
     const { closeModal, closeOnEsc, navigateToOnClose } = props
 
-    const { isOpen: isSidebarOpen } = useSidebar()
     const navigate = useAppNavigate()
 
     const handleCloseModal = useCallback(() => {
@@ -33,13 +32,7 @@ function withBaseModal<T extends BaseModalProps>(
         {...modalProps}
       >
         <ModalOverlay zIndex="modalOverlay" />
-        <ModalContent
-          zIndex="modalContent"
-          mr={{
-            base: isSidebarOpen ? "var(--chakra-sizes-sidebar_width)" : 0,
-            xl: 0,
-          }}
-        >
+        <ModalContent>
           <WrappedModalContent {...props} closeModal={handleCloseModal} />
         </ModalContent>
       </Modal>

dapp/src/contexts/index.tsx

@@ -1,5 +1,4 @@
 export * from "./DocsDrawerContext"
-export * from "./SidebarContext"
 export * from "./StakeFlowContext"
 export * from "./PaginationContext"
 export * from "./WalletConnectionAlertContext"

dapp/src/hooks/index.ts

@@ -2,7 +2,6 @@ export * from "./store"
 export * from "./sdk"
 export * from "./orangeKit"
 export * from "./useDetectThemeMode"
-export * from "./useSidebar"
 export * from "./useDocsDrawer"
 export * from "./useTransactionDetails"
 export * from "./useStakeFlowContext"
@@ -34,7 +33,6 @@ export { default as useTriggerConnectWalletModal } from "./useTriggerConnectWall
 export { default as useLastUsedBtcAddress } from "./useLastUsedBtcAddress"
 export { default as useAcrePoints } from "./useAcrePoints"
 export { default as useSignMessageAndCreateSession } from "./useSignMessageAndCreateSession"
-export { default as useScrollbarVisibility } from "./useScrollbarVisibility"
 export { default as useAccessCode } from "./useAccessCode"
 export { default as useFormField } from "./useFormField"
 export { default as useDepositBTCTransaction } from "./useDepositBTCTransaction"

dapp/src/theme/index.ts

@@ -13,7 +13,6 @@ import { modalTheme } from "./Modal"
 import { cardTheme } from "./Card"
 import { tooltipTheme } from "./Tooltip"
 import { headingTheme } from "./Heading"
-import { sidebarTheme } from "./Sidebar"
 import { currencyBalanceTheme } from "./CurrencyBalance"
 import { tokenBalanceInputTheme } from "./TokenBalanceInput"
 import { inputTheme } from "./Input"
@@ -61,7 +60,6 @@ const defaultTheme = {
     Input: inputTheme,
     Link: linkTheme,
     Modal: modalTheme,
-    Sidebar: sidebarTheme,
     Spinner: spinnerTheme,
     Tag: tagTheme,
     TokenBalanceInput: tokenBalanceInputTheme,

dapp/src/theme/utils/semanticTokens.ts

@@ -5,7 +5,4 @@ export const semanticTokens = {
     modal_shift: "9.75rem", // 156px
     dashboard_card_padding: 5,
   },
-  sizes: {
-    sidebar_width: 80,
-  },
 }

dapp/src/theme/utils/zIndices.ts

@@ -1,9 +1,7 @@
 export const zIndices = {
-  sidebar: 1450,
   drawer: 1470,
   mobileBanner: 1500,
   header: 1400,
   footer: 1380,
-  modalContent: 1410,
   modalOverlay: 1390,
 }