From f90c9a53f00d74921a36be0de0ac3ae2ec414ca9 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 3 Dec 2024 17:42:14 +0100 Subject: [PATCH 1/4] Remove `Sidebar` component --- dapp/.env | 1 - dapp/src/DApp.tsx | 13 +- dapp/src/components/Layout.tsx | 2 - .../components/ModalRoot/withBaseModal.tsx | 11 +- dapp/src/components/Sidebar.tsx | 117 ------------------ dapp/src/contexts/SidebarContext.tsx | 49 -------- dapp/src/contexts/index.tsx | 1 - dapp/src/hooks/index.ts | 1 - dapp/src/hooks/useSidebar.ts | 12 -- dapp/src/theme/Sidebar.ts | 38 ------ dapp/src/theme/index.ts | 2 - dapp/src/theme/utils/semanticTokens.ts | 3 - dapp/src/theme/utils/zIndices.ts | 1 - 13 files changed, 7 insertions(+), 244 deletions(-) delete mode 100644 dapp/src/components/Sidebar.tsx delete mode 100644 dapp/src/contexts/SidebarContext.tsx delete mode 100644 dapp/src/hooks/useSidebar.ts delete mode 100644 dapp/src/theme/Sidebar.ts diff --git a/dapp/.env b/dapp/.env index fdb71b35d..fd447e796 100644 --- a/dapp/.env +++ b/dapp/.env @@ -19,7 +19,6 @@ VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_" # this VITE_SUBGRAPH_API_KEY="" # Feature flags -VITE_FEATURE_FLAG_GAMIFICATION_ENABLED="false" VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false" VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false" VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false" diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx index 587d248ef..9e4992e53 100644 --- a/dapp/src/DApp.tsx +++ b/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" @@ -66,13 +65,11 @@ function DAppProviders() { - - - - - - - + + + + + diff --git a/dapp/src/components/Layout.tsx b/dapp/src/components/Layout.tsx index 42bc526a7..c9cec76f8 100644 --- a/dapp/src/components/Layout.tsx +++ b/dapp/src/components/Layout.tsx @@ -6,7 +6,6 @@ import { DappMode } from "#/types" import DocsDrawer from "./DocsDrawer" import Header from "./Header" import ModalRoot from "./ModalRoot" -import Sidebar from "./Sidebar" import MobileModeBanner from "./MobileModeBanner" import Footer from "./Footer" @@ -46,7 +45,6 @@ function Layout() { > - diff --git a/dapp/src/components/ModalRoot/withBaseModal.tsx b/dapp/src/components/ModalRoot/withBaseModal.tsx index 5eeb2396a..b15a22cf6 100644 --- a/dapp/src/components/ModalRoot/withBaseModal.tsx +++ b/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( 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( {...modalProps} > - + diff --git a/dapp/src/components/Sidebar.tsx b/dapp/src/components/Sidebar.tsx deleted file mode 100644 index b2e010259..000000000 --- a/dapp/src/components/Sidebar.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React, { ComponentProps, useEffect } from "react" -import { - Box, - Card, - CardBody, - Flex, - useMultiStyleConfig, - Image, -} from "@chakra-ui/react" -import { useScrollbarVisibility, useSidebar } from "#/hooks" -import { - EXTERNAL_HREF, - REWARD_BOOST, - SEASON_KEY, - featureFlags, -} from "#/constants" -import { rewardsBoostArrowImage } from "#/assets/images/benefits" -import ButtonLink from "./shared/ButtonLink" -import { TextSm } from "./shared/Typography" - -const CHAKRA_MODAL_CONTAINER_SELECTOR = ".chakra-modal__content-container" - -const BUTTONS: Partial>[] = [ - { - children: "Docs", - variant: "solid", - href: EXTERNAL_HREF.DOCS, - isExternal: true, - }, - { - children: "FAQ", - colorScheme: "gold", - href: EXTERNAL_HREF.FAQ, - isExternal: true, - }, - { - children: "Contracts", - colorScheme: "gold", - href: EXTERNAL_HREF.CONTRACTS, - isExternal: true, - }, - { - children: "Blog", - colorScheme: "gold", - href: EXTERNAL_HREF.BLOG, - isExternal: true, - }, -] - -const BENEFITS = [ - { ...REWARD_BOOST, imageSrc: rewardsBoostArrowImage }, - SEASON_KEY, -].map((benefit) => ({ ...benefit, name: `1x ${benefit.name}` })) - -export default function Sidebar() { - const { isOpen } = useSidebar() - const { isVisible, scrollbarWidth, refreshState } = useScrollbarVisibility( - CHAKRA_MODAL_CONTAINER_SELECTOR, - ) - const styles = useMultiStyleConfig("Sidebar") - - useEffect(() => { - if (!isOpen) return - refreshState() - }, [isOpen, refreshState]) - - return ( - - - {featureFlags.GAMIFICATION_ENABLED && ( - <> - {/* TODO: Update the component when logic of losing rewards is ready */} - Rewards you’ll unlock - - {BENEFITS.map(({ name, imageSrc }) => ( - - - {name} - - - - ))} - - - )} - - {BUTTONS.map((buttonProps) => ( - - ))} - - - ) -} diff --git a/dapp/src/contexts/SidebarContext.tsx b/dapp/src/contexts/SidebarContext.tsx deleted file mode 100644 index 125b871a1..000000000 --- a/dapp/src/contexts/SidebarContext.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import useIsEmbed from "#/hooks/useIsEmbed" -import React, { createContext, useCallback, useMemo, useState } from "react" - -type SidebarContextValue = { - isOpen: boolean - onOpen: () => void - onClose: () => void -} - -export const SidebarContext = createContext({ - isOpen: false, - onOpen: () => {}, - onClose: () => {}, -}) - -export function SidebarContextProvider({ - children, -}: { - children: React.ReactNode -}): React.ReactElement { - const { isEmbed } = useIsEmbed() - - const [isOpen, setIsOpen] = useState(false) - - const onOpen = useCallback(() => { - if (isEmbed) return - - setIsOpen(true) - }, [isEmbed]) - - const onClose = useCallback(() => { - setIsOpen(false) - }, []) - - const contextValue: SidebarContextValue = useMemo( - () => ({ - isOpen, - onOpen, - onClose, - }), - [isOpen, onClose, onOpen], - ) - - return ( - - {children} - - ) -} diff --git a/dapp/src/contexts/index.tsx b/dapp/src/contexts/index.tsx index 658feecbd..263951aec 100644 --- a/dapp/src/contexts/index.tsx +++ b/dapp/src/contexts/index.tsx @@ -1,5 +1,4 @@ export * from "./DocsDrawerContext" -export * from "./SidebarContext" export * from "./StakeFlowContext" export * from "./PaginationContext" export * from "./WalletConnectionAlertContext" diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index 91b1cfeb6..b075db2e4 100644 --- a/dapp/src/hooks/index.ts +++ b/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" diff --git a/dapp/src/hooks/useSidebar.ts b/dapp/src/hooks/useSidebar.ts deleted file mode 100644 index 944364076..000000000 --- a/dapp/src/hooks/useSidebar.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { useContext } from "react" -import { SidebarContext } from "#/contexts" - -export function useSidebar() { - const context = useContext(SidebarContext) - - if (!context) { - throw new Error("SidebarContext used outside of SidebarContext component") - } - - return context -} diff --git a/dapp/src/theme/Sidebar.ts b/dapp/src/theme/Sidebar.ts deleted file mode 100644 index 1b1a431b1..000000000 --- a/dapp/src/theme/Sidebar.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" - -const PARTS = ["sidebarContainer", "sidebar"] - -const baseStyleSidebarContainer = defineStyle({ - top: 0, - right: 0, - h: "100vh", - position: "fixed", - overflow: "hidden", - zIndex: "sidebar", - transition: "width 0.3s", -}) - -const baseStyleSidebar = defineStyle({ - p: 4, - height: "100%", - w: "sidebar_width", - bg: "gold.200", - borderTop: "2px", - borderLeft: "2px", - borderColor: "gold.100", - borderTopLeftRadius: "xl", - display: "flex", - flexDirection: "column", - gap: 3, -}) - -const multiStyleConfig = createMultiStyleConfigHelpers(PARTS) - -const baseStyle = multiStyleConfig.definePartsStyle({ - sidebarContainer: baseStyleSidebarContainer, - sidebar: baseStyleSidebar, -}) - -export const sidebarTheme = multiStyleConfig.defineMultiStyleConfig({ - baseStyle, -}) diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index aaf6f4765..4c306df41 100644 --- a/dapp/src/theme/index.ts +++ b/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, diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index 8ad1298ba..e33367d84 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/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, - }, } diff --git a/dapp/src/theme/utils/zIndices.ts b/dapp/src/theme/utils/zIndices.ts index 3e9fb1a4b..f0be28d85 100644 --- a/dapp/src/theme/utils/zIndices.ts +++ b/dapp/src/theme/utils/zIndices.ts @@ -1,5 +1,4 @@ export const zIndices = { - sidebar: 1450, drawer: 1470, mobileBanner: 1500, header: 1400, From 5f7db576cae78709cefd42e93c494d196b8042b5 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Tue, 3 Dec 2024 17:45:15 +0100 Subject: [PATCH 2/4] Revert `.env` changes --- dapp/.env | 1 + 1 file changed, 1 insertion(+) diff --git a/dapp/.env b/dapp/.env index fd447e796..fdb71b35d 100644 --- a/dapp/.env +++ b/dapp/.env @@ -19,6 +19,7 @@ VITE_GELATO_RELAY_API_KEY="htaJCy_XHj8WsE3w53WBMurfySDtjLP_TrNPPa6IPIc_" # this VITE_SUBGRAPH_API_KEY="" # Feature flags +VITE_FEATURE_FLAG_GAMIFICATION_ENABLED="false" VITE_FEATURE_FLAG_WITHDRAWALS_ENABLED="false" VITE_FEATURE_FLAG_OKX_WALLET_ENABLED="false" VITE_FEATURE_FLAG_XVERSE_WALLET_ENABLED="false" From 9a506e5670747aea1895aa0f819ac63824258c33 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Fri, 6 Dec 2024 13:05:39 +0100 Subject: [PATCH 3/4] Remove `useScrollbarVisibility` hook --- dapp/src/hooks/index.ts | 1 - dapp/src/hooks/useScrollbarVisibility.ts | 32 ------------------------ 2 files changed, 33 deletions(-) delete mode 100644 dapp/src/hooks/useScrollbarVisibility.ts diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts index b075db2e4..7758c4fd7 100644 --- a/dapp/src/hooks/index.ts +++ b/dapp/src/hooks/index.ts @@ -33,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" diff --git a/dapp/src/hooks/useScrollbarVisibility.ts b/dapp/src/hooks/useScrollbarVisibility.ts deleted file mode 100644 index c1ce79034..000000000 --- a/dapp/src/hooks/useScrollbarVisibility.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useCallback, useEffect, useState } from "react" - -const SCROLLBAR_WIDTH = `${window.innerWidth - document.body.offsetWidth}px` - -function isScrollbarVisible(selector: string) { - const element = document.querySelector(selector) - - if (!element) return false - - return element?.scrollHeight > element?.clientHeight -} - -export default function useScrollbarVisibility(selector: string) { - const [isVisible, setIsVisible] = useState(false) - - useEffect(() => { - const handleResize = () => { - setIsVisible(isScrollbarVisible(selector)) - } - window.addEventListener("resize", handleResize) - - return () => { - window.removeEventListener("resize", handleResize) - } - }, [selector]) - - const refreshState = useCallback(() => { - setIsVisible(isScrollbarVisible(selector)) - }, [selector]) - - return { isVisible, scrollbarWidth: SCROLLBAR_WIDTH, refreshState } -} From d4d447647c090356ed3cbb9edb4318f755d72044 Mon Sep 17 00:00:00 2001 From: Kamil Pyszkowski Date: Fri, 6 Dec 2024 13:07:46 +0100 Subject: [PATCH 4/4] Remove redundant z index --- dapp/src/components/ModalRoot/withBaseModal.tsx | 2 +- dapp/src/theme/utils/zIndices.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/dapp/src/components/ModalRoot/withBaseModal.tsx b/dapp/src/components/ModalRoot/withBaseModal.tsx index b15a22cf6..b5d8cb4d5 100644 --- a/dapp/src/components/ModalRoot/withBaseModal.tsx +++ b/dapp/src/components/ModalRoot/withBaseModal.tsx @@ -32,7 +32,7 @@ function withBaseModal( {...modalProps} > - + diff --git a/dapp/src/theme/utils/zIndices.ts b/dapp/src/theme/utils/zIndices.ts index f0be28d85..0b8c0d5e5 100644 --- a/dapp/src/theme/utils/zIndices.ts +++ b/dapp/src/theme/utils/zIndices.ts @@ -3,6 +3,5 @@ export const zIndices = { mobileBanner: 1500, header: 1400, footer: 1380, - modalContent: 1410, modalOverlay: 1390, }