From 1d69725f6152638753b63bfe8caf275a4f1894a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B8r=E2=88=82=C2=A1?= <itsbrickpop@gmail.com>
Date: Tue, 27 Feb 2024 13:06:49 +0100
Subject: [PATCH] Display alerts with links

---
 components/alert/alert-container.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/alert/alert-container.tsx b/components/alert/alert-container.tsx
index 30a43fd..a5226aa 100644
--- 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;