Display alerts with links

aragon · Feb 27, 2024 · 1d69725 · 1d69725
1 parent 1617b0a
commit 1d69725
Showing 1 changed file with 26 additions and 2 deletions.
diff --git a/components/alert/alert-container.tsx b/components/alert/alert-container.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { useAlertContext } from "@/context/AlertContext";
-import { AlertCard, AlertVariant } from "@aragon/ods";
+import { AlertCard, AlertVariant, Icon, IconType } from "@aragon/ods";
 import { IAlert } from "@/utils/types";
 
 const AlertContainer: FC = () => {
@@ -13,7 +13,7 @@ const AlertContainer: FC = () => {
           className="mt-4 drop-shadow-lg"
           key={alert.id}
           message={alert.message}
-          description={alert.description}
+          description={resolveDescription(alert)}
           variant={resolveVariant(alert.type)}
         />
       ))}
@@ -33,4 +33,28 @@ function resolveVariant(type: IAlert["type"]) {
   return result;
 }
 
+function resolveDescription(alert: IAlert) {
+  if (!alert.explorerLink) {
+    return <div className="">{alert.description}</div>;
+  }
+
+  return (
+    <>
+      <div className="">{alert.description}</div>
+      <a href={alert.explorerLink} target="_blank">
+        <div className="flex flex-row text-xs underline text-primary-200">
+          <div className="">Show transaction</div>
+          <div>
+            <Icon
+              className="ml-2 mt-1"
+              size="sm"
+              icon={IconType.LINK_EXTERNAL}
+            />
+          </div>
+        </div>
+      </a>
+    </>
+  );
+}
+
 export default AlertContainer;