Adds markdown to plm preview (#521)

* Adds markdown to plm preview * Adds simulation state to preview page * Add link to valid tx
voteagora · Sep 24, 2024 · f407848 · f407848
1 parent da80bb1
commit f407848
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/src/app/proposals/draft/components/BasicProposalForm.tsx b/src/app/proposals/draft/components/BasicProposalForm.tsx
@@ -83,9 +83,30 @@ const TransactionFormItem = ({
                 <span>No simulation</span>
               </span>
             ) : (
-              <span className="bg-green-100 text-green-500 px-2 py-1 rounded-lg text-xs font-semibold">
-                Valid
-              </span>
+              <a
+                href={`https://dashboard.tenderly.co/shared/simulation/${simulationId}`}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="bg-green-100 text-green-500 px-2 py-1 rounded-lg text-xs font-semibold flex flex-row items-center space-x-1"
+              >
+                <span>Valid</span>
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="mb-[1px]"
+                >
+                  <path
+                    d="M9 6.5V9.5C9 9.76522 8.89464 10.0196 8.70711 10.2071C8.51957 10.3946 8.26522 10.5 8 10.5H2.5C2.23478 10.5 1.98043 10.3946 1.79289 10.2071C1.60536 10.0196 1.5 9.76522 1.5 9.5V4C1.5 3.73478 1.60536 3.48043 1.79289 3.29289C1.98043 3.10536 2.23478 3 2.5 3H5.5M7.5 1.5H10.5M10.5 1.5V4.5M10.5 1.5L5 7"
+                    stroke="currentColor"
+                    strokeWidth="1.3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </a>
             ))}
         </div>
         <span

diff --git a/src/app/proposals/draft/components/DraftPreview.tsx b/src/app/proposals/draft/components/DraftPreview.tsx
@@ -12,6 +12,9 @@ import { DraftProposal, ProposalGatingType } from "@/app/proposals/draft/types";
 import Tenant from "@/lib/tenant/tenant";
 import { ProposalType } from "@/app/proposals/draft/types";
 import toast from "react-hot-toast";
+import styles from "@/components/Proposals/ProposalPage/ProposalDescription/proposalDescription.module.scss";
+import { cn } from "@/lib/utils";
+import ReactMarkdown from "react-markdown";
 
 const PreText = ({ text }: { text: string }) => {
   return (
@@ -129,6 +132,10 @@ const DraftPreview = ({
                   ) as `0x${string}`[]
                 }
                 values={proposalDraft.transactions.map((t) => t.value)}
+                simulationDetails={{
+                  id: proposalDraft.transactions[0].simulation_id,
+                  state: proposalDraft.transactions[0].simulation_state,
+                }}
               />
             )}
         </div>
@@ -164,7 +171,17 @@ const DraftPreview = ({
         )}
 
         <h3 className="font-semibold mt-6">Description</h3>
-        <p className="text-agora-stone-700 mt-2">{proposalDraft.abstract}</p>
+        <div className="mt-2 p-4 bg-wash border border-line rounded-lg">
+          <ReactMarkdown
+            className={cn(
+              styles.proposal_description_md,
+              "max-w-none",
+              "prose"
+            )}
+          >
+            {proposalDraft.abstract}
+          </ReactMarkdown>
+        </div>
       </FormCard.Section>
       <FormCard.Section className="z-0">
         {proposalDraft.sponsor_address &&

diff --git a/src/components/Proposals/ProposalPage/ApprovedTransactions/ProposalTransactionDisplay.tsx b/src/components/Proposals/ProposalPage/ApprovedTransactions/ProposalTransactionDisplay.tsx
@@ -21,12 +21,17 @@ const ProposalTransactionDisplay = ({
   values,
   descriptions,
   executedTransactionHash,
+  simulationDetails,
 }: {
   targets: string[];
   calldatas: `0x${string}`[];
   values: string[];
   descriptions?: string[];
   executedTransactionHash?: string | null;
+  simulationDetails?: {
+    id?: string | null;
+    state?: string | null;
+  };
 }) => {
   const [collapsed, setCollapsed] = useState(true);
   return (
@@ -43,6 +48,27 @@ const ProposalTransactionDisplay = ({
               <ArrowTopRightOnSquareIcon className="w-3 h-3 ml-1" />
             </a>
           )}
+          {simulationDetails?.id && simulationDetails?.state && (
+            <>
+              {simulationDetails.state === "UNCONFIRMED" ? (
+                <div className="bg-tertiary/20 text-secondary rounded-lg px-2 py-1 text-xs flex items-center gap-x-1">
+                  <span>Simulation {simulationDetails.state}</span>
+                </div>
+              ) : (
+                <a
+                  href={`https://dashboard.tenderly.co/shared/simulation/${simulationDetails.id}`}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  className={`
+                ${simulationDetails.state === "VALID" ? "bg-positive/20 hover:bg-positive/30 text-positive" : simulationDetails.state === "INVALID" ? "bg-negative/20 hover:bg-negative/30 text-negative" : "bg-wash text-secondary"}
+                transition-colors cursor-pointer rounded-lg px-2 py-1 text-xs flex items-center gap-x-1`}
+                >
+                  <span>Simulation {simulationDetails.state}</span>
+                  <ArrowTopRightOnSquareIcon className="w-3 h-3 ml-1" />
+                </a>
+              )}
+            </>
+          )}
         </div>
 
         {(collapsed ? [targets[0]] : targets).map((target, idx) => (