Make conection rejected alert status of info

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 ConnectionAlerts = Record<
+  ConnectionAlert,
+  {
+    title: string
+    description?: React.ReactNode
+    status?: AlertStatus
+  }
+>
+
 function ContactSupport() {
   return (
     <Box as="span">
@@ -36,10 +45,10 @@ 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",
   },
   [ConnectionAlert.NotSupported]: {
     title: "Not supported.",
@@ -66,10 +75,12 @@ 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
 
@@ -85,11 +96,13 @@ export default function ConnectWalletAlert(props: ConnectWalletAlertProps) {
           overflow="hidden"
           w="full"
         >
-          <Alert status={status} mb={6} {...restProps}>
+          <Alert status={data.status || "error"} mb={6} {...restProps}>
             <AlertIcon />
             <VStack w="full" align="start" spacing={0}>
               <AlertTitle textAlign="start">{data.title}</AlertTitle>
-              <AlertDescription>{data.description}</AlertDescription>
+              {data.description && (
+                <AlertDescription>{data.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/shared/Alert.tsx

@@ -22,7 +22,7 @@ import Spinner from "./Spinner"
 const STATUSES = {
   info: {
     icon: IconInfoCircle,
-    colorScheme: "gold",
+    colorScheme: "blue",
   },
   warning: {
     icon: IconExclamationCircle,

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)