feat(governance-ui#40): add SeeAll component and Execution code view

app/(routes)/proposals/[id]/page.tsx

@@ -7,19 +7,20 @@ import {
   Badge,
   Button,
   Card,
+  ExecutionCodeView,
   Loader,
   TabList,
   WalletAddressWithCopy,
 } from "@components/_shared";
 import { Countdown } from "@components/countdown/countdown.component";
+import { ProposalCurrentVotes } from "@components/proposal-current-votes/proposal-current-votes.component";
 import { VotesList } from "@components/votes-list/votes-list.component";
 import { stateToBadgeColorMap } from "@interfaces/proposal.interface";
 import { IVoteType } from "@interfaces/vote.interface";
 import classNames from "classnames";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
 import styles from "./page.module.scss";
-import { ProposalCurrentVotes } from "@components/proposal-current-votes/proposal-current-votes.component";
 
 const voteTypeToModalType = (voteType: IVoteType) => {
   switch (voteType) {
@@ -109,6 +110,8 @@ const Page = ({ params }: { params: { id: string } }) => {
                 Proposal Description
               </h3>
               <MarkdownView markdown={proposal.description} />
+              {/* add proper execution code data */}
+              <ExecutionCodeView code={proposal.description} />
             </div>
             <div className={styles.proposal_addons}>
               <div className={classNames(styles.mobile_controls)}>

app/components/_shared/execution-code-view/execution-code-view.component.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { SeeAll } from "..";
+import styles from "./execution-code-view.module.scss";
+
+interface ExecutionCodeViewProps {
+  code: unknown;
+}
+
+export const ExecutionCodeView = ({ code }: ExecutionCodeViewProps) => {
+  const [isExecutionViewOpen, setIsExecutionViewOpen] = useState(false);
+
+  return (
+    <div className={styles.container}>
+      <h3 className={styles.form_data_title}>Execution Code</h3>
+      <div className={styles.execution}>
+        <SeeAll
+          height="210"
+          isOpen={isExecutionViewOpen}
+          setIsOpen={setIsExecutionViewOpen}
+        >
+          <div>
+            <pre>{JSON.stringify(code, null, 2)}</pre>
+          </div>
+        </SeeAll>
+      </div>
+    </div>
+  );
+};

app/components/_shared/execution-code-view/execution-code-view.module.scss

@@ -0,0 +1,18 @@
+@import "@/app/brand";
+
+.container {
+  .form_data_title {
+    margin: 5 * $theme-unit 0;
+    display: flex;
+    justify-content: center;
+    font-size: 6 * $theme-unit;
+    line-height: 6 * $theme-unit;
+    font-weight: 500
+  }
+
+  .execution {
+    border-radius: 8px;
+    border: 1px solid $c-lightGrey;
+    padding: 4 * $theme-unit;
+  }
+}

app/components/_shared/index.tsx

@@ -22,3 +22,5 @@ export { Loader } from "./loader/loader.component";
 export { Textarea } from "./textarea/textarea.component";
 export { WalletAddressWithCopy } from "./wallet-address-with-copy/wallet-address-with-copy.component";
 export { MarkdownView } from "./markdown-view/markdown-view.component";
+export { SeeAll } from "./see-all/see-all.component";
+export { ExecutionCodeView } from "./execution-code-view/execution-code-view.component";

app/components/_shared/input/input.component.tsx

@@ -1,7 +1,7 @@
 import styles from "./input.module.scss";
 import BaseComponentProps from "@interfaces/base-component-props.interface";
 import classNames from "classnames";
-import { ReactNode, useMemo } from "react";
+import { ReactNode } from "react";
 import BaseInputProps from "@interfaces/base-input-props.interface";
 
 interface InputProps extends BaseComponentProps, BaseInputProps {

app/components/_shared/see-all/see-all.component.tsx

@@ -0,0 +1,44 @@
+import classNames from "classnames";
+import styles from "./see-all.module.scss";
+import { ReactNode } from "react";
+
+interface SeeAllProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  children: ReactNode;
+  height: string;
+}
+
+export const SeeAll = ({
+  isOpen,
+  setIsOpen,
+  children,
+  height,
+}: SeeAllProps) => {
+  return (
+    <div className={styles.container}>
+      <div
+        style={{
+          maxHeight: isOpen ? "max-content" : `${height}px`,
+          height: isOpen ? "max-content" : "auto",
+        }}
+        className={classNames(styles.see_all, isOpen && styles.see_all__opened)}
+      >
+        {children}
+        {!isOpen && (
+          <div
+            className={classNames(styles.shadow)}
+            style={{ height: `${height}px` }}
+          />
+        )}
+      </div>
+      <div className={styles.button_wrapper}>
+        {isOpen ? (
+          <button onClick={() => setIsOpen(false)}>Hide</button>
+        ) : (
+          <button onClick={() => setIsOpen(true)}>See all</button>
+        )}
+      </div>
+    </div>
+  );
+};

app/components/_shared/see-all/see-all.module.scss

@@ -0,0 +1,39 @@
+@import "@/app/brand";
+
+.container {
+  position: relative;
+
+  .see_all {
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+
+    .shadow {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      background: linear-gradient(0deg, var(--theme-card-background) 0%, rgba(255, 255, 255, 0.00) 100%);
+    }
+
+    &__opened {
+      width: auto;
+    }
+  }
+
+  .button_wrapper {
+    width: 100%;
+    text-align: center;
+
+    button {
+      margin-top: 3 * $theme-unit;
+      color: $c-primary;
+      text-align: center;
+      font-size: 4 * $theme-unit;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 100%; 
+      text-align: center;
+    }
+  }
+}

app/components/create-proposal/create-proposal-execution-step/create-proposal-execution-step.component.tsx

@@ -6,6 +6,7 @@ import { useForm } from "react-hook-form";
 import { InferType, object, setLocale, string } from "yup";
 import { Textarea } from "@components/_shared";
 import { useCreateProposalStore } from "@/app/store";
+import { useEffect } from "react";
 
 const validationSchema = object({
   code: string().required().typeError("Invalid code"),
@@ -16,7 +17,7 @@ type FormData = InferType<typeof validationSchema>;
 const formStep = CreateProposalFormStepEnum.execution;
 
 export const CreateProposalExecutionStep = () => {
-  const { form } = useCreateProposalStore();
+  const { patchExecutionStep } = useCreateProposalStore();
 
   const {
     register,
@@ -36,6 +37,15 @@ export const CreateProposalExecutionStep = () => {
     },
   });
 
+  useEffect(() => {
+    const subscription = watch((value) => {
+      patchExecutionStep({
+        code: value.code || "",
+      });
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, patchExecutionStep]);
+
   return (
     <Wrapper step={formStep} title="Execution Code">
       <div>
@@ -46,7 +56,7 @@ export const CreateProposalExecutionStep = () => {
         <Textarea
           className="mt-x5 mb-x5 min-h-[266px]"
           form={{ ...register("code") }}
-          id="proposal-execution"
+          id="code"
           error={errors.code?.message}
           placeholder="Paste your code here"
         />

app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx

@@ -1,12 +1,13 @@
 "use client";
 import { GovernorABI } from "@/app/abis/Governor";
 import { useCreateProposalStore } from "@/app/store";
-import { MarkdownView } from "@components/_shared";
+import { ExecutionCodeView, MarkdownView, SeeAll } from "@components/_shared";
 import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
 import { CreateProposalFormStepEnum } from "@interfaces/create-proposal.interface";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Address } from "viem";
-import { useSimulateContract, useWriteContract } from "wagmi";
+import { useWriteContract } from "wagmi";
+import styles from "./create-proposal-preview-step.module.scss";
 
 const formStep = CreateProposalFormStepEnum.preview;
 
@@ -20,6 +21,7 @@ type ProposalCreateParams = {
 };
 
 export const CreateProposalPreviewStep = () => {
+  const [isProposalPreviewOpen, setIsProposalPreviewOpen] = useState(false);
   const { form } = useCreateProposalStore();
 
   const proposal: ProposalCreateParams = useMemo(() => {
@@ -70,23 +72,30 @@ export const CreateProposalPreviewStep = () => {
   }, [writeContract, proposal]);
 
   return (
-    <Wrapper step={formStep} title="Preview your proposal" onSave={onSave}>
-      <span>Hello</span>
+    <Wrapper
+      step={formStep}
+      title="Preview your proposal"
+      onSave={onSave}
+      className={styles.container}
+    >
       <pre>{JSON.stringify(data, null, 2)}</pre>
       <pre>{error ? error.message : null}</pre>
       <div className="ml-x7">
         <p className="font-size-x4 line-height-x5">
           You&apos;ve successfully finished all the steps. Now, take a moment to
           go over your proposal and then submit it.
         </p>
-        <div className="font-size-x6 line-height-x7 text-center mt-x5 mb-x7 font-medium">
-          {proposal.metadata.title}
-        </div>
+        <div className={styles.title}>{proposal.metadata.title}</div>
         <div>
-          <h3 className="flex justify-center font-size-x6 line-height-x6 font-medium">
-            Proposal Description
-          </h3>
-          <MarkdownView markdown={proposal.metadata.description} />
+          <h3 className={styles.form_data_title}>Proposal Description</h3>
+          <SeeAll
+            height="315"
+            isOpen={isProposalPreviewOpen}
+            setIsOpen={setIsProposalPreviewOpen}
+          >
+            <MarkdownView markdown={proposal.metadata.description} />
+          </SeeAll>
+          <ExecutionCodeView code={proposal.transactions} />
         </div>
       </div>
     </Wrapper>

app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.module.scss

@@ -0,0 +1,42 @@
+@import "@/app/brand";
+
+.container {
+  .title {
+    margin-top: 5 * $theme-unit;
+    text-align: center;
+    font-size: 8 * $theme-unit;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 8 * $theme-unit;
+  }
+
+  .form_data_title {
+    margin: 5 * $theme-unit 0;
+    display: flex;
+    justify-content: center;
+    font-size: 6 * $theme-unit;
+    line-height: 6 * $theme-unit;
+    font-weight: 500
+  }
+
+  .button_wrapper {
+    width: 100%;
+    text-align: center;
+
+    button {
+      color: $c-primary;
+      text-align: center;
+      font-size: 4 * $theme-unit;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 100%; 
+      text-align: center;
+    }
+  }
+
+  .execution {
+    border-radius: 8px;
+    border: 1px solid $c-lightGrey;
+    padding: 4 * $theme-unit;
+  }
+}