feat: update proposal description (#1425)

apps/namadillo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namada/namadillo",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Namadillo",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <[email protected]>",

apps/namadillo/src/App/Governance/ProposalDescription.tsx

@@ -1,10 +1,21 @@
 import { SkeletonLoading, Stack } from "@namada/components";
 import { Proposal } from "@namada/types";
+import { proposalFamily } from "atoms/proposals";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
+import { twMerge } from "tailwind-merge";
 
-import { proposalFamily } from "atoms/proposals";
+const formatLinks = (string: string): ReactNode => {
+  const regex = /(http.*)/;
+  return string.split(regex).map((part, index) =>
+    regex.test(part) ?
+      <a key={index} href={part} target="_blank" rel="noreferrer nofollow">
+        {part}
+      </a>
+    : part
+  );
+};
 
 export const ProposalDescription: React.FC<{
   proposalId: bigint;
@@ -42,15 +53,21 @@ export const Loaded: React.FC<{
 
   return (
     <>
-      <section>{abstract}</section>
-
-      {expanded &&
-        formattedDetails.map(([key, value], i) => (
+      <Stack
+        gap={4}
+        className={twMerge(
+          "overflow-hidden whitespace-pre-line [&_a]:underline [&_a:hover]:text-yellow",
+          !expanded && "max-h-[350px]"
+        )}
+      >
+        <section>{abstract}</section>
+        {formattedDetails.map(([key, value], i) => (
           <section key={i}>
             <h3 className="text-[#8A8A8A]">{key}</h3>
-            <p>{value}</p>
+            <p>{formatLinks(value ?? "")}</p>
           </section>
         ))}
+      </Stack>
 
       <a
         className={clsx(