Alert Component

Display status messages and notifications with different severity levels

Alert Component

Overview

The Alert component displays important messages or notifications with different severity levels, each with its own distinct color scheme and icon. It is useful for displaying success messages, errors, warnings, or general information.

Usage

To use the Alert component in your tool handler, please follow these steps:

  1. Import the AlertUIBuilder and DainResponse from the @dainprotocol/utils package:
import { AlertUIBuilder, DainResponse } from "@dainprotocol/utils";
  1. Create an AlertUIBuilder instance, set its properties (such as variant, title, message), then call .build():
const alertUI = new AlertUIBuilder()
  .variant("success")   // Mandatory: info | warning | error | success
  .title("Operation successful")  // Mandatory
  .message("Your changes have been saved") // Mandatory
  .icon(true)            // Optional (default is true)
  .build();
  1. Return the AlertUIBuilder instance in a DainResponse object:
return new DainResponse({
  text: "Generated alert message",
  data: { /* Your data */ },
  ui: alertUI
});

Configuration

Mandatory Props

  • variant (info, warning, error, or success): Defines the severity or style of the Alert.
  • title (string): The heading or title to display in the Alert.
  • message (string): The main content of the Alert.

Optional Props

  • icon (boolean): Whether to show an icon (true by default).
  • type (string): An additional field if you want more granular control. Typically, variant is sufficient.

Examples

Success Alert

const successAlert = new AlertUIBuilder()
  .variant("success")
  .title("Payment Processed")
  .message("Your payment of $99.99 has been successfully processed")
  .build();

return new DainResponse({
  text: "Payment",
  data: {},
  ui: successAlert
});

Error Alert

const errorAlert = new AlertUIBuilder()
  .variant("error")
  .title("Connection Failed")
  .message("Unable to connect to the server. Please check your internet connection and try again.")
  .build();

return new DainResponse({
  text: "Connection Issue",
  data: {},
  ui: errorAlert
});

Warning Alert

const warningAlert = new AlertUIBuilder()
  .variant("warning")
  .title("Storage Space Low")
  .message("You have used 90% of your storage space. Consider upgrading your plan or removing unused files.")
  .build();

return new DainResponse({
  text: "Storage Warning",
  data: {},
  ui: warningAlert
});

Info Alert without Icon

const infoAlert = new AlertUIBuilder()
  .variant("info")
  .title("Scheduled Maintenance")
  .message("System maintenance is scheduled for tomorrow at 2 AM UTC. Service interruptions may occur.")
  .icon(false) // hide icon
  .build();

return new DainResponse({
  text: "Maintenance Notice",
  data: {},
  ui: infoAlert
});