Merge branch 'main' of github.com:thesis/acre into remove-unneeded-code

dapp/src/DApp.tsx

@@ -7,10 +7,7 @@ import { QueryClientProvider } from "@tanstack/react-query"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { AcreSdkProvider } from "./acre-react/contexts"
 import GlobalStyles from "./components/GlobalStyles"
-import {
-  DocsDrawerContextProvider,
-  WalletConnectionAlertContextProvider,
-} from "./contexts"
+import { WalletConnectionAlertContextProvider } from "./contexts"
 import { useInitApp } from "./hooks"
 import { router } from "./router"
 import { store } from "./store"
@@ -65,15 +62,13 @@ function DAppProviders() {
       <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>
           <AcreSdkProvider>
-            <DocsDrawerContextProvider>
-              <WalletConnectionAlertContextProvider>
-                <ReduxProvider store={store}>
-                  <PostHogProvider>
-                    <DApp />
-                  </PostHogProvider>
-                </ReduxProvider>
-              </WalletConnectionAlertContextProvider>
-            </DocsDrawerContextProvider>
+            <WalletConnectionAlertContextProvider>
+              <ReduxProvider store={store}>
+                <PostHogProvider>
+                  <DApp />
+                </PostHogProvider>
+              </ReduxProvider>
+            </WalletConnectionAlertContextProvider>
           </AcreSdkProvider>
         </QueryClientProvider>
       </WagmiProvider>

dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Box, Link, VStack } from "@chakra-ui/react"
+import { AlertStatus, Box, Link, VStack } from "@chakra-ui/react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
 import { EXTERNAL_HREF } from "#/constants"
 import {
@@ -18,6 +18,15 @@ export enum ConnectionAlert {
   Default = "DEFAULT",
 }
 
+type ConnectionAlertData = {
+  title: string
+  description?: React.ReactNode
+  status?: AlertStatus
+  colorScheme?: string
+}
+
+type ConnectionAlerts = Record<ConnectionAlert, ConnectionAlertData>
+
 function ContactSupport() {
   return (
     <Box as="span">
@@ -36,10 +45,11 @@ function ContactSupport() {
   )
 }
 
-const CONNECTION_ALERTS = {
+const CONNECTION_ALERTS: ConnectionAlerts = {
   [ConnectionAlert.Rejected]: {
-    title: "Wallet connection rejected.",
-    description: "If you encountered an error, please try again.",
+    title: "Please connect your wallet to start using Acre",
+    status: "info",
+    colorScheme: "blue",
   },
   [ConnectionAlert.NotSupported]: {
     title: "Not supported.",
@@ -66,16 +76,23 @@ const collapseVariants: Variants = {
   expanded: { height: "auto" },
 }
 
-type ConnectWalletAlertProps = AlertProps & { type?: ConnectionAlert }
+type ConnectWalletAlertProps = Omit<AlertProps, "status"> & {
+  type?: ConnectionAlert
+}
 
 export default function ConnectWalletAlert(props: ConnectWalletAlertProps) {
-  const { type, status, ...restProps } = props
+  const { type, ...restProps } = props
 
-  const data = type ? CONNECTION_ALERTS[type] : undefined
+  const {
+    status = "error",
+    title,
+    description,
+    ...restData
+  } = (type ? CONNECTION_ALERTS[type] : {}) as ConnectionAlertData
 
   return (
     <AnimatePresence initial={false}>
-      {data && (
+      {type && (
         <Box
           as={motion.div}
           variants={collapseVariants}
@@ -85,11 +102,13 @@ export default function ConnectWalletAlert(props: ConnectWalletAlertProps) {
           overflow="hidden"
           w="full"
         >
-          <Alert status={status} mb={6} {...restProps}>
+          <Alert status={status} mb={6} {...restProps} {...restData}>
             <AlertIcon />
             <VStack w="full" align="start" spacing={0}>
-              <AlertTitle textAlign="start">{data.title}</AlertTitle>
-              <AlertDescription>{data.description}</AlertDescription>
+              <AlertTitle textAlign="start">{title}</AlertTitle>
+              {description && (
+                <AlertDescription>{description}</AlertDescription>
+              )}
             </VStack>
           </Alert>
         </Box>

dapp/src/components/ConnectWalletModal/index.tsx

@@ -30,7 +30,7 @@ export function ConnectWalletModalBase({
   }))
 
   const [selectedConnectorId, setSelectedConnectorId] = useState<string>()
-  const { type, status, resetConnectionAlert } = useWalletConnectionAlert()
+  const { type, resetConnectionAlert } = useWalletConnectionAlert()
   const isSignedMessage = useIsSignedMessage()
 
   const handleButtonOnClick = (connector: OrangeKitConnector) => {
@@ -59,7 +59,7 @@ export function ConnectWalletModalBase({
       <ModalHeader>{`Select your ${isEmbed ? "account" : "wallet"}`}</ModalHeader>
 
       <ModalBody gap={0}>
-        <ConnectWalletAlert type={type} status={status} />
+        <ConnectWalletAlert type={type} />
 
         {enabledConnectors.map((connector) => (
           <ConnectWalletButton

dapp/src/components/Layout.tsx

@@ -4,7 +4,6 @@ import { Flex, VStack } from "@chakra-ui/react"
 import { useIsEmbed, useMobileMode } from "#/hooks"
 import { DappMode } from "#/types"
 import { usePostHogPageViewCapture } from "#/hooks/posthog"
-import DocsDrawer from "./DocsDrawer"
 import Header from "./Header"
 import ModalRoot from "./ModalRoot"
 import MobileModeBanner from "./MobileModeBanner"
@@ -50,7 +49,6 @@ function Layout() {
       >
         <Outlet />
 
-        <DocsDrawer />
         <ModalRoot />
       </Flex>
 

dapp/src/contexts/WalletConnectionAlertContext.tsx

@@ -1,11 +1,9 @@
 import { ConnectionAlert } from "#/components/ConnectWalletModal/ConnectWalletAlert"
-import { AlertStatus } from "@chakra-ui/react"
 import React, { createContext, useCallback, useMemo, useState } from "react"
 
 type WalletConnectionAlertContextValue = {
   type?: ConnectionAlert
-  status: AlertStatus
-  setConnectionAlert: (type: ConnectionAlert, status?: AlertStatus) => void
+  setConnectionAlert: (type: ConnectionAlert) => void
   resetConnectionAlert: () => void
 }
 
@@ -20,17 +18,14 @@ export function WalletConnectionAlertContextProvider({
   children: React.ReactNode
 }): React.ReactElement {
   const [type, setType] = useState<ConnectionAlert>()
-  const [status, setStatus] = useState<AlertStatus>("error")
 
   const resetConnectionAlert = useCallback(() => {
     setType(undefined)
-    setStatus("error")
   }, [setType])
 
   const setConnectionAlert = useCallback(
-    (connectionAlert: ConnectionAlert, alertStatus: AlertStatus = "error") => {
+    (connectionAlert: ConnectionAlert) => {
       setType(connectionAlert)
-      setStatus(alertStatus)
     },
     [setType],
   )
@@ -39,11 +34,10 @@ export function WalletConnectionAlertContextProvider({
     useMemo<WalletConnectionAlertContextValue>(
       () => ({
         type,
-        status,
         setConnectionAlert,
         resetConnectionAlert,
       }),
-      [resetConnectionAlert, setConnectionAlert, status, type],
+      [resetConnectionAlert, setConnectionAlert, type],
     )
 
   return (

dapp/src/contexts/index.tsx

@@ -1,4 +1,3 @@
-export * from "./DocsDrawerContext"
 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 "./useDocsDrawer"
 export * from "./useTransactionDetails"
 export * from "./useStakeFlowContext"
 export * from "./useInitApp"

dapp/src/theme/Alert.ts

@@ -15,6 +15,11 @@ const baseStyle = multiStyleConfig.definePartsStyle({
     p: 4,
     rounded: "xl",
   },
+  title: {
+    fontWeight: "semibold",
+    mr: 0,
+  },
+
   description: {
     fontWeight: "medium",
     textAlign: "start",

dapp/src/theme/Modal.ts

@@ -41,8 +41,8 @@ const baseStyleHeader = defineStyle({
   fontSize: "xl",
   lineHeight: "xl",
   fontWeight: "bold",
-  pt: { sm: 10 },
-  px: { sm: 10 },
+  pt: { sm: 8 },
+  px: { sm: 8 },
   pb: 8,
 })
 
@@ -54,15 +54,15 @@ const baseStyleBody = defineStyle({
   alignItems: "center",
   gap: 6,
   pt: 0,
-  px: { base: 0, sm: 10 },
-  pb: { base: 0, sm: 10 },
+  px: { base: 0, sm: 8 },
+  pb: { base: 0, sm: 8 },
 })
 
 const baseStyleFooter = defineStyle({
   flexDirection: "column",
   gap: 6,
   px: { base: 0, sm: 8 },
-  pb: { base: 0, sm: 10 },
+  pb: { base: 0, sm: 8 },
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)

dapp/src/theme/index.ts

@@ -8,7 +8,6 @@ import {
   styles,
   zIndices,
 } from "./utils"
-import { drawerTheme } from "./Drawer"
 import { modalTheme } from "./Modal"
 import { cardTheme } from "./Card"
 import { tooltipTheme } from "./Tooltip"
@@ -52,7 +51,6 @@ const defaultTheme = {
     Card: cardTheme,
     CloseButton: closeButtonTheme,
     CurrencyBalance: currencyBalanceTheme,
-    Drawer: drawerTheme,
     Form: formTheme,
     FormLabel: formLabelTheme,
     FormError: formErrorTheme,

dapp/src/theme/utils/semanticTokens.ts

@@ -1,7 +1,5 @@
 export const semanticTokens = {
   space: {
-    header_height: 28,
-    header_height_xl: 36,
     dashboard_card_padding: 5,
   },
 }