Merge branch 'main' into fix-drop-message

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>