feat(Lambda): show warning message to alert users when there is a lam…

…bda execution in a proposal
marigold-dev · Jul 6, 2023 · 7483674 · 7483674
1 parent f70265b
commit 7483674
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 45 deletions.
diff --git a/components/ProposalCard.tsx b/components/ProposalCard.tsx
@@ -1,12 +1,14 @@
 import { InfoCircledIcon, TriangleDownIcon } from "@radix-ui/react-icons";
-import { useContext, useState } from "react";
+import { useContext, useState, useMemo } from "react";
+import { render } from "react-dom";
 import { AppStateContext } from "../context/state";
 import { proposalContent } from "../types/display";
 import { walletToken } from "../utils/useWalletTokens";
 import { signers } from "../versioned/apis";
 import Alias from "./Alias";
 import RenderProposalContentLambda, {
   labelOfProposalContentLambda,
+  contentToData,
 } from "./RenderProposalContentLambda";
 import RenderProposalContentMetadata, {
   labelOfProposalContentMetadata,
@@ -42,6 +44,10 @@ const ProposalCard = ({
   shouldResolve = false,
   metadataRender = false,
 }: ProposalCardProps) => {
+  const rows = useMemo(
+    () => content.map(v => contentToData(v, walletTokens)),
+    content
+  );
   const state = useContext(AppStateContext)!;
   const currentContract = state.currentContract ?? "";
 
@@ -52,6 +58,18 @@ const ProposalCard = ({
 
   const allSigners = signers(state.contracts[currentContract]);
 
+  const renderRow = () => {
+    const tmp = [];
+    for (let i = 0; i < rows.length; i++) {
+      metadataRender
+        ? tmp.push(
+            <RenderProposalContentMetadata key={i} content={content[i]} />
+          )
+        : tmp.push(<RenderProposalContentLambda key={i} data={rows[i]} />);
+    }
+    return tmp;
+  };
+
   return (
     <div
       className={`${
@@ -167,20 +185,10 @@ const ProposalCard = ({
             <span className="justify-self-center">Amount</span>
             <span className="justify-self-center">Address</span>
             <span className="justify-self-end">Entrypoint</span>
-            <span className="justify-self-end">Params/Token</span>
+            <span className="justify-self-end">Params/Tokens</span>
           </div>
           <div className="mt-2 space-y-4 font-light lg:space-y-2">
-            {content.map((v, i) =>
-              metadataRender ? (
-                <RenderProposalContentMetadata key={i} content={v} />
-              ) : (
-                <RenderProposalContentLambda
-                  key={i}
-                  content={v}
-                  walletTokens={walletTokens}
-                />
-              )
-            )}
+            {renderRow().map(v => v)}
           </div>
         </section>
         <section className="text-xs md:text-base">

diff --git a/components/RenderProposalContentLambda.tsx b/components/RenderProposalContentLambda.tsx
@@ -19,15 +19,10 @@ type data = {
   params: undefined | string;
 };
 
-const RenderProposalContentLambda = ({
-  content,
-  walletTokens,
-}: {
-  content: proposalContent;
-  walletTokens: walletToken[];
-}) => {
-  const [hasParam, setHasParam] = useState(false);
-
+export const contentToData = (
+  content: proposalContent,
+  walletTokens: walletToken[]
+): data => {
   let data: data = {
     label: undefined,
     metadata: undefined,
@@ -233,6 +228,12 @@ const RenderProposalContentLambda = ({
       };
     }
   }
+  return data;
+};
+
+const RenderProposalContentLambda = ({ data }: { data: data }) => {
+  const [hasParam, setHasParam] = useState(false);
+  console.log("data", data);
 
   return (
     <div className="after:content[''] relative w-full text-xs after:absolute after:-bottom-2 after:left-0 after:right-0 after:h-px after:bg-zinc-500 md:text-base lg:after:hidden">
@@ -308,7 +309,7 @@ const RenderProposalContentLambda = ({
             !data.params ? "text-zinc-500" : ""
           } justify-self-end text-right`}
         >
-          <p className="font-medium text-zinc-500 lg:hidden">Params/Token</p>
+          <p className="font-medium text-zinc-500 lg:hidden">Params/Tokens</p>
           <div>
             {!!data.params
               ? `${

diff --git a/components/proposalSignForm.tsx b/components/proposalSignForm.tsx
@@ -2,15 +2,17 @@ import { NetworkType } from "@airgap/beacon-sdk";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import { Field, Form, Formik } from "formik";
 import { useRouter } from "next/router";
-import React, { useContext, useState } from "react";
+import React, { useContext, useState, useMemo } from "react";
 import { MODAL_TIMEOUT, PREFERED_NETWORK } from "../context/config";
 import { AppStateContext } from "../context/state";
 import { version, proposal } from "../types/display";
 import { canExecute, canReject } from "../utils/proposals";
 import { walletToken } from "../utils/useWalletTokens";
 import { VersionedApi, signers } from "../versioned/apis";
 import ErrorMessage from "./ErrorMessage";
-import RenderProposalContentLambda from "./RenderProposalContentLambda";
+import RenderProposalContentLambda, {
+  contentToData,
+} from "./RenderProposalContentLambda";
 import Tooltip from "./Tooltip";
 import ContractLoader from "./contractLoader";
 
@@ -35,6 +37,10 @@ function ProposalSignForm({
   walletTokens: walletToken[];
   onSuccess?: () => void;
 }) {
+  const rows = useMemo(
+    () => proposal.ui.content.map(v => contentToData(v, walletTokens)),
+    proposal.ui.content
+  );
   const state = useContext(AppStateContext)!;
   const currentContract = state.currentContract ?? "";
 
@@ -158,6 +164,9 @@ function ProposalSignForm({
     threshold,
     signers(state.contracts[currentContract]).length
   );
+  const isSignOrResolve =
+    (typeof modalState === "boolean" && modalState) ||
+    (typeof modalState !== "boolean" && isExecutable);
 
   return (
     <Formik
@@ -205,29 +214,39 @@ function ProposalSignForm({
               <span className="justify-self-center">Amount</span>
               <span className="justify-self-center">Address</span>
               <span className="justify-self-end">Entrypoint</span>
-              <span className="justify-self-end">Parameters</span>
+              <span className="justify-self-end">Params/Tokens</span>
             </div>
             <div className="mt-2 space-y-4 font-light lg:space-y-2">
-              {proposal.ui.content.map((v, i) => (
-                <RenderProposalContentLambda
-                  content={v}
-                  key={i}
-                  walletTokens={walletTokens}
-                />
-              ))}
+              {rows.length > 0
+                ? rows.map((v, i) => (
+                    <RenderProposalContentLambda data={v} key={i} />
+                  ))
+                : []}
             </div>
-            {!!proposal.ui.content.find(
-              v =>
-                "addOwners" in v ||
-                "removeOwners" in v ||
-                "changeThreshold" in v ||
-                "adjustEffectivePeriod" in v
-            ) && (
-              <span className="mt-2 text-xs font-light text-yellow-500">
-                This proposal will update the settings for all the active
-                proposals
-              </span>
-            )}
+            {isSignOrResolve &&
+              !!proposal.ui.content.find(
+                v =>
+                  "addOwners" in v ||
+                  "removeOwners" in v ||
+                  "changeThreshold" in v ||
+                  "adjustEffectivePeriod" in v
+              ) && (
+                <span className="mt-2 text-xs font-light text-yellow-500">
+                  This proposal will update the settings for all the active
+                  proposals
+                </span>
+              )}
+            {isSignOrResolve &&
+              !!rows.find(v => v.label == "Execute lambda") && (
+                <span className="mt-2 text-xs font-light text-yellow-500">
+                  We strongly advise that refrain from signing this proposal
+                  unless you have a complete understanding of the potential
+                  consequences. Please be aware that the "Metadata" may not
+                  accurately reflect the actual behavior of the "Execute Lambda"
+                  function. It is crucial to verify the behavior on the
+                  "Param/Token."
+                </span>
+              )}
           </section>
           <p className="mt-8 text-lg font-medium text-white">
             Action:{" "}