dApp: Wallet connection info alert (#917)

Closes: AENG-24

This pull request focuses on refactoring the wallet connection error
handling system to use alerts of multiple types. The changes include
renaming components and contexts, updating imports and hooks, and
modifying the structure of connection alerts.

### Changes: 
- Remove `status` from `WalletConnectionAlertContext`: Storing `status`
in context is redundant. It was always `"error"` and having it in
context made it difficult to control. The `status` property has only
presentational purpose so it should be adjustable at the component
level.
- Adjust `Alert` component styling: Change title font weight and removed
margin.
- Adjust `Modal` component styling to match designs: Update paddings to
match designs

<details>
  <summary>Before:</summary>
<img width="552" alt="image"
src="https://github.com/user-attachments/assets/97c5c23c-caa0-43e6-bbc4-fae874770f87">
</details>

<details>
  <summary>After:</summary>
<img width="574" alt="image"
src="https://github.com/user-attachments/assets/0f4c7dbb-aee1-4711-9bb0-068bc93e1778">
</details>

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/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/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

@@ -38,8 +38,8 @@ const baseStyleHeader = defineStyle({
   fontSize: "xl",
   lineHeight: "xl",
   fontWeight: "bold",
-  pt: { sm: 10 },
-  px: { sm: 10 },
+  pt: { sm: 8 },
+  px: { sm: 8 },
   pb: 8,
 })
 
@@ -51,15 +51,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)