dApp: Alerts cleanup (#519)

Closes: #505 This PR resolves an issue with inconsistency in `Alert` components. ### Changes: - Now styles are defined as Chakra theme only. - Components from `shared/alerts/...` have been removed in favor of `shared/Alert` component. - `ErrorAlert` component has been removed and replaced by `<Alert status="error" />` component. - `CardAlert` component has been removed and replaced by `<Alert variant="elevated" />` component. - The `process` variant has been ported from #400 **Note:** Changes are not fully accurate with designs (especially in color levels) because of inconsistency. It can be adjusted in the future as the design system will be introduced.
thesis · Jul 5, 2024 · 0e56fc2 · 0e56fc2
2 parents 6f5124f + 4f4e34e
commit 0e56fc2
Show file tree

Hide file tree

Showing 16 changed files with 128 additions and 229 deletions.
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletErrorAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletErrorAlert.tsx
@@ -1,11 +1,12 @@
 import React from "react"
-import { Box } from "@chakra-ui/react"
+import { Box, VStack } from "@chakra-ui/react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
 import { ConnectionErrorData } from "#/types"
 import {
   Alert,
   AlertDescription,
   AlertTitle,
+  AlertIcon,
   AlertProps,
 } from "../shared/Alert"
 
@@ -36,8 +37,11 @@ export default function ConnectWalletErrorAlert(
           w="full"
         >
           <Alert status="error" mb={6} {...restProps}>
-            <AlertTitle>{title}</AlertTitle>
-            <AlertDescription>{description}</AlertDescription>
+            <AlertIcon />
+            <VStack w="full" align="start" spacing={0}>
+              <AlertTitle>{title}</AlertTitle>
+              <AlertDescription>{description}</AlertDescription>
+            </VStack>
           </Alert>
         </Box>
       )}

diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
@@ -12,8 +12,8 @@ import { eip1193, logPromiseFailure } from "#/utils"
 import { PROCESS_STATUSES } from "#/types"
 import { Highlight } from "@chakra-ui/react"
 import { TextMd } from "#/components/shared/Typography"
-import { CardAlert } from "#/components/shared/alerts"
 import { setStatus, setTxHash } from "#/store/action-flow"
+import { Alert, AlertIcon, AlertDescription } from "#/components/shared/Alert"
 import TriggerTransactionModal from "../TriggerTransactionModal"
 
 export default function DepositBTCModal() {
@@ -89,14 +89,17 @@ export default function DepositBTCModal() {
 
   return (
     <TriggerTransactionModal callback={handledDepositBTCWrapper}>
-      <CardAlert>
-        <TextMd>
-          <Highlight query="Rewards" styles={{ fontWeight: "bold" }}>
-            You will receive your Rewards once the deposit transaction is
-            completed.
-          </Highlight>
-        </TextMd>
-      </CardAlert>
+      <Alert variant="elevated">
+        <AlertIcon />
+        <AlertDescription>
+          <TextMd>
+            <Highlight query="Rewards" styles={{ fontWeight: "bold" }}>
+              You will receive your Rewards once the deposit transaction is
+              completed.
+            </Highlight>
+          </TextMd>
+        </AlertDescription>
+      </Alert>
     </TriggerTransactionModal>
   )
 }
diff --git a/.../src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/WithdrawWarning.tsx b/.../src/components/TransactionModal/ActiveUnstakingStep/UnstakeFormModal/WithdrawWarning.tsx
@@ -3,9 +3,9 @@ import { Box } from "@chakra-ui/react"
 import { CurrencyType } from "#/types"
 import { MINIMUM_BALANCE } from "#/constants"
 import { formatSatoshiAmount, getCurrencyByType } from "#/utils"
-import { CardAlert } from "#/components/shared/alerts"
 import { TextMd } from "#/components/shared/Typography"
 import { useTokenAmountField } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
+import { Alert, AlertTitle, AlertIcon } from "#/components/shared/Alert"
 
 function WithdrawWarning({
   balance,
@@ -28,32 +28,28 @@ function WithdrawWarning({
 
   if (isMinimumBalanceExceeded && isValid) {
     return (
-      // TODO: Update global styles for the Alert component
-      // Previously, we distinguished more types of alerts.
-      // The following styles should be moved to global styles and unneeded parts removed.
-      <CardAlert
-        status="error"
-        bgColor="red.100"
-        borderColor="red.400"
-        colorIcon="red.400"
-      >
-        <TextMd pr={5}>
+      <Alert status="error">
+        <AlertIcon status="error" />
+
+        <TextMd as={AlertTitle}>
           The new balance is below the required minimum of
           <Box as="strong"> {minimumBalanceText}.</Box> Withdrawing your funds
           will result in the loss of your current rewards.
         </TextMd>
-      </CardAlert>
+      </Alert>
     )
   }
 
   return (
-    <CardAlert>
-      <TextMd>
+    <Alert variant="elevated">
+      <AlertIcon />
+
+      <TextMd as={AlertTitle}>
         A minimum balance of
         <Box as="strong"> {minimumBalanceText}</Box> is required to keep all
         rewards active.
       </TextMd>
-    </CardAlert>
+    </Alert>
   )
 }
 

diff --git a/dapp/src/components/TransactionModal/UnsupportedBitcoinAddressModal.tsx b/dapp/src/components/TransactionModal/UnsupportedBitcoinAddressModal.tsx
@@ -11,21 +11,21 @@ import {
 import { TextMd, TextSm } from "#/components/shared/Typography"
 import { logPromiseFailure } from "#/utils"
 import { BitcoinIcon } from "#/assets/icons"
-import { ErrorAlert, ErrorAlertIcon } from "../shared/alerts"
 import { CurrencyBalance } from "../shared/CurrencyBalance"
+import { Alert, AlertIcon } from "../shared/Alert"
 
-type UnsupportedAccountModalProps = {
+type UnsupportedBitcoinAddressModalProps = {
   account?: {
     name: string
     balance: bigint
   }
   requestAccount: () => Promise<void>
 }
 
-export default function UnsupportedAccountModal({
+export default function UnsupportedBitcoinAddressModal({
   account,
   requestAccount,
-}: UnsupportedAccountModalProps) {
+}: UnsupportedBitcoinAddressModalProps) {
   const handleClick = () => {
     logPromiseFailure(requestAccount())
   }
@@ -39,8 +39,9 @@ export default function UnsupportedAccountModal({
 
       <ModalBody>
         {account && (
-          <ErrorAlert>
-            <ErrorAlertIcon
+          <Alert status="error">
+            <AlertIcon
+              status="error"
               as={BitcoinIcon}
               color="grey.700"
               bg="gold.200"
@@ -80,7 +81,7 @@ export default function UnsupportedAccountModal({
             >
               Unsupported
             </Tag>
-          </ErrorAlert>
+          </Alert>
         )}
 
         <TextMd

diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesList.tsx
@@ -24,7 +24,7 @@ function ActivitiesList(props: ListProps) {
   if (latestActivities.length === 0) return null
 
   return (
-    <MotionList pos="relative" {...props}>
+    <MotionList pos="relative" w="full" {...props}>
       <AnimatePresence mode="popLayout">
         {latestActivities.map((item) => (
           <MotionListItem

diff --git a/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx b/dapp/src/components/shared/ActivitiesList/ActivitiesListItem.tsx
@@ -1,21 +1,17 @@
 import React from "react"
 import { ArrowUpRight, LoadingSpinnerSuccessIcon } from "#/assets/icons"
 import { Activity as ActivityType } from "#/types"
+import { Button, HStack, VStack, VisuallyHidden } from "@chakra-ui/react"
+import { CurrencyBalance } from "../CurrencyBalance"
+import BlockExplorerLink from "../BlockExplorerLink"
 import {
   Alert,
   AlertDescription,
   AlertIcon,
   AlertProps,
   AlertTitle,
-  Button,
-  HStack,
-  Text,
-  VStack,
-  VisuallyHidden,
-} from "@chakra-ui/react"
-import { CurrencyBalance } from "../CurrencyBalance"
-import Spinner from "../Spinner"
-import BlockExplorerLink from "../BlockExplorerLink"
+} from "../Alert"
+import { TextMd } from "../Typography"
 
 type ActivitiesListItemProps = Omit<AlertProps, "status"> &
   ActivityType & {
@@ -28,23 +24,25 @@ function ActivitiesListItem(props: ActivitiesListItemProps) {
   const isCompleted = status === "completed"
 
   return (
-    <Alert as={HStack} variant="process" {...restProps}>
-      <AlertIcon
-        color="brand.400"
-        as={isCompleted ? LoadingSpinnerSuccessIcon : Spinner}
-      />
+    <Alert w="full" variant="process" {...restProps}>
+      {isCompleted ? (
+        <AlertIcon as={LoadingSpinnerSuccessIcon} borderWidth={0} />
+      ) : (
+        <AlertIcon status="loading" variant="filled" />
+      )}
 
       <VStack flex={1} spacing={0} align="stretch">
-        <HStack justify="space-between" as={AlertTitle}>
-          <Text as="span">
+        <AlertTitle justify="space-between" as={HStack}>
+          <TextMd fontWeight="bold">
             {isCompleted
               ? `${type === "withdraw" ? "Unstaking" : "Staking"} completed`
               : `${type === "withdraw" ? "Unstaking" : "Staking"}...`}
-          </Text>
+          </TextMd>
 
           <CurrencyBalance amount={amount} currency="bitcoin" />
-        </HStack>
-        <HStack justify="space-between" as={AlertDescription}>
+        </AlertTitle>
+
+        <AlertDescription justify="space-between" as={HStack}>
           {isCompleted ? (
             <Button
               variant="link"
@@ -64,10 +62,10 @@ function ActivitiesListItem(props: ActivitiesListItemProps) {
               </Text> */}
             </>
           )}
-        </HStack>
+        </AlertDescription>
       </VStack>
 
-      {txHash && (
+      {txHash && status === "pending" && (
         <BlockExplorerLink
           id={txHash}
           chain="bitcoin"

diff --git a/dapp/src/components/shared/Alert.tsx b/dapp/src/components/shared/Alert.tsx
@@ -7,7 +7,6 @@ import {
   AlertDescription,
   AlertStatus,
   useAlertStyles,
-  VStack,
 } from "@chakra-ui/react"
 import {
   IconCircleCheck,
@@ -20,13 +19,10 @@ import Spinner from "./Spinner"
 // as a workaround
 // Ref: https://github.com/chakra-ui/chakra-ui/discussions/5997#discussioncomment-4098525
 
-// TODO: Replace all uses of `components/shared/alerts/...` with this component
-// and remove the old ones
-
 const STATUSES = {
   info: {
     icon: IconInfoCircle,
-    colorScheme: "grey",
+    colorScheme: "gold",
   },
   warning: {
     icon: IconExclamationCircle,
@@ -37,7 +33,7 @@ const STATUSES = {
     colorScheme: "green",
   },
   error: {
-    icon: IconInfoCircle,
+    icon: IconExclamationCircle,
     colorScheme: "red",
   },
   loading: {
@@ -52,11 +48,24 @@ const getStatusColorScheme = (status: AlertStatus) =>
 const getStatusIcon = (status: AlertStatus) => STATUSES[status].icon
 
 function AlertIcon(props: AlertProps) {
-  const { status = "info" } = props
-  const icon = getStatusIcon(status)
+  const { status = "info", as } = props
+  const icon = as ?? getStatusIcon(status)
   const styles = useAlertStyles()
-  const css = status === "loading" ? styles.spinner : styles.icon
-  return <Icon as={icon} __css={css} />
+  const css =
+    status === "loading"
+      ? {
+          ...styles.spinner,
+          ...styles.icon,
+        }
+      : styles.icon
+
+  return (
+    <Icon
+      as={icon}
+      __css={css}
+      variant={status === "loading" ? "filled" : undefined}
+    />
+  )
 }
 
 export default function Alert(props: AlertProps) {
@@ -65,11 +74,7 @@ export default function Alert(props: AlertProps) {
 
   return (
     <ChakraAlert colorScheme={colorScheme} {...restProps}>
-      <AlertIcon status={status} />
-
-      <VStack w="full" align="start" spacing={0}>
-        {children}
-      </VStack>
+      {children}
     </ChakraAlert>
   )
 }

diff --git a/dapp/src/components/shared/alerts/Alert.tsx b/dapp/src/components/shared/alerts/Alert.tsx