MGU-8 add dummy 4th step on creating proposal

app/(routes)/create-proposal/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import styles from "./page.module.scss";
-import { CreateProposalExecutionStep, CreateProposalContentStep, CreateProposalWalletStep } from "@components/create-proposal";
+import { CreateProposalExecutionStep, CreateProposalContentStep, CreateProposalWalletStep, CreateProposalPreviewStep } from "@components/create-proposal";
 import { CreateProposalProvider } from "@/app/providers/create-proposal.provider";
 
 const Page = () => {
@@ -11,6 +11,7 @@ const Page = () => {
                 <CreateProposalWalletStep />
                 <CreateProposalContentStep />
                 <CreateProposalExecutionStep />
+                <CreateProposalPreviewStep />
             </div>
         </CreateProposalProvider>
     </main>

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

@@ -1,20 +1,19 @@
 "use client";
-import {statusToBadgeColorMap} from "@interfaces/proposal";
-import {Avatar, Badge, Button, Card, Input, Tab, TabList} from "@components/_shared";
-import {Countdown} from "@components/countdown/countdown.component";
-import {format} from "date-fns";
-import {singleProposal} from "@/app/helpers/mocks";
-import {useForm} from "react-hook-form";
-import styles from "./page.module.scss";
-import {InferType, number, object, setLocale} from "yup";
-import {yupResolver} from "@hookform/resolvers/yup";
-import {VotesList} from "@components/votes-list/votes-list.component";
-import classNames from "classnames";
-import {useState} from "react";
-import { CopyIcon } from "@/app/components/_icons/copy.icon";
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { MarkdownView } from "@/app/components/_shared/markdown-view/markdown-view.component";
+import { WalletAddressWithCopy } from "@/app/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component";
+import { singleProposal } from "@/app/helpers/mocks";
 import useModal from "@/app/providers/modal.provider";
+import { Avatar, Badge, Button, Card, Input, TabList } from "@components/_shared";
+import { Countdown } from "@components/countdown/countdown.component";
+import { VotesList } from "@components/votes-list/votes-list.component";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { statusToBadgeColorMap } from "@interfaces/proposal";
+import classNames from "classnames";
+import { format } from "date-fns";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { InferType, number, object, setLocale } from "yup";
+import styles from "./page.module.scss";
 
 const validationSchema = object({
     votingPower: number().required().typeError('Invalid number').max(400)
@@ -80,14 +79,9 @@ const Page = () => {
                 <Avatar address={proposal.creator || ''}/>
                 <div>by {proposal.creator}</div>
             </div>
-            <div className="flex place-items-center gap-1">
+            <div className="flex place-items-center gap-x2">
                 <code>ID</code>
-                <div>{`${proposal.id.substring(0, 6)}...${proposal.id.substring(proposal.id.length - 4)}`}</div>
-                <CopyToClipboard text={proposal.id}>
-                    <div className="cursor-pointer">
-                        <CopyIcon/>
-                    </div>
-                </CopyToClipboard>
+                <WalletAddressWithCopy address={proposal.id}/>
             </div>
             <div className="flex place-items-center gap-1">
                 <span>Proposed on:</span>

app/components/_shared/markdown-view/markdown-view.component.tsx

@@ -22,7 +22,7 @@ export const MarkdownView = ({ markdown }: MarkdownViewProps) => {
         })();
     }, [markdown]);
 
-    return <div className={classNames('prose', styles.container)} >
+    return <div className={classNames('prose', styles.container, 'max-w-none dark:prose-invert')} >
         {
             markdownParsed && <div dangerouslySetInnerHTML={{ __html: markdownParsed }} />
         }

app/components/_shared/markdown-view/markdown-view.module.scss

@@ -5,6 +5,10 @@
   font-size: $theme-unit * 4;
   line-height: $theme-unit * 4;
 
+  h3, strong {
+    color: var(--theme-foreground-color);
+  }
+
   ul li::marker {
     color: var(--theme-foreground-color);
   }

app/components/_shared/wallet-address-with-copy/wallet-address-with-copy.component.tsx

@@ -0,0 +1,21 @@
+import BaseComponentProps from "@interfaces/base-component-props.interface";
+import { WalletAddress } from "../../wallet-address/wallet-address.component";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { CopyIcon } from "../../_icons/copy.icon";
+import classNames from "classnames";
+
+interface WalletAddressWithCopyProps extends BaseComponentProps {
+    address: string;
+}
+
+export const WalletAddressWithCopy = ({ className, style, address }: WalletAddressWithCopyProps) => {
+    return <div className={classNames(className, 'flex items-center gap-x2')}
+        style={style}>
+        <WalletAddress address={address} />
+        <CopyToClipboard text={address} >
+            <div className="cursor-pointer" >
+                <CopyIcon />
+            </div>
+        </CopyToClipboard>
+    </div>
+}

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

@@ -0,0 +1,55 @@
+"use client";
+import { singleProposal } from "@/app/helpers/mocks";
+import { useCreateProposalContext } from "@/app/providers/create-proposal.provider";
+import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
+import { CreateProposalFormStepEnum } from "@interfaces/create-proposal.interface";
+import { useForm } from "react-hook-form";
+import { MarkdownView } from "../../_shared/markdown-view/markdown-view.component";
+import { format } from "date-fns";
+import { WalletAddressWithCopy } from "../../_shared/wallet-address-with-copy/wallet-address-with-copy.component";
+import { Avatar } from "../../_shared";
+
+const formStep = CreateProposalFormStepEnum.preview
+
+export const CreateProposalPreviewStep = () => {
+
+    const { form } = useCreateProposalContext();
+
+    const {
+        register,
+        watch,
+        setValue,
+        getValues,
+        handleSubmit,
+        formState: { errors, isValid }
+    } = useForm<FormData>({
+        mode: 'onChange'
+    });
+
+    const proposal = singleProposal;
+
+    return <Wrapper isOpened={form[formStep].isOpened} step={formStep} title="Preview your proposal">
+        <div className="ml-x7 mr-x8">
+            <p className="text-lg">You&apos;ve successfully finished all the steps. Now, take a moment to go over your proposal and then submit it.</p>
+            <div className="text-[30px] leading-x7 text-center mt-x5 mb-x7 font-medium">{proposal.title}</div>
+            <div className="flex justify-center gap-x6 mb-x4">
+                <div className="flex place-items-center gap-1">
+                    <span>Proposed on:</span>
+                    <strong>{format(proposal.createdAt, 'MMMM do, yyyy')}</strong>
+                </div>
+                <div className="flex place-items-center gap-1">
+                    <span>Voting deadline:</span>
+                    <strong>{format(proposal.deadlineAt, 'MMMM do, yyyy')}</strong>
+                </div>
+            </div>
+            <div className="flex gap-x2 justify-center mb-x5">
+                <Avatar address={proposal.creator || ''} />
+                <WalletAddressWithCopy address={proposal.id} />
+            </div>
+            <div>
+                <h3 className="flex justify-center text-[30px] leading-x6 font-medium">Details</h3>
+                <MarkdownView markdown={proposal.description} />
+            </div>
+        </div>
+    </Wrapper>
+}

app/components/create-proposal/index.tsx

@@ -1,3 +1,4 @@
 export { CreateProposalWalletStep } from './create-proposal-wallet-step/create-proposal-wallet-step.component';
 export { CreateProposalContentStep } from './create-proposal-content-step/create-proposal-content-step.component';
-export { CreateProposalExecutionStep } from './create-proposal-execution-step/create-proposal-execution-step.component';
+export { CreateProposalExecutionStep } from './create-proposal-execution-step/create-proposal-execution-step.component';
+export { CreateProposalPreviewStep } from './create-proposal-preview-step/create-proposal-preview-step.component';

app/components/create-proposal/wrapper/wrapper.component.tsx

@@ -12,7 +12,7 @@ interface WrapperProps extends BaseComponentProps {
     isOpened: boolean;
 }
 
-const steps = [CreateProposalFormStepEnum.wallet, CreateProposalFormStepEnum.content, CreateProposalFormStepEnum.execution];
+const steps = [CreateProposalFormStepEnum.wallet, CreateProposalFormStepEnum.content, CreateProposalFormStepEnum.execution, CreateProposalFormStepEnum.preview];
 
 const Wrapper = ({children, className, step, title, style, isOpened}: WrapperProps) => {
 
@@ -24,7 +24,7 @@ const Wrapper = ({children, className, step, title, style, isOpened}: WrapperPro
 
     return <Card block className={className} style={style}>
         <Card.Header>
-            <div className="flex gap-4 items-center bg-inherit cursor-pointer" onClick={e => toggleStepOpen(step)}>
+            <div className="flex gap-x2 items-center bg-inherit cursor-pointer" onClick={e => toggleStepOpen(step)}>
                 <StepCounter>{stepIndex}</StepCounter>
                 {title}
             </div>

app/interfaces/create-proposal.interface.ts

@@ -2,6 +2,7 @@ export interface CreateProposalForm {
     [CreateProposalFormStepEnum.wallet]: CreateProposalFormStep;
     [CreateProposalFormStepEnum.content]: CreateProposalFormStep;
     [CreateProposalFormStepEnum.execution]: CreateProposalFormStep;
+    [CreateProposalFormStepEnum.preview]: CreateProposalFormStep;
 }
 
 interface CreateProposalFormStep {
@@ -14,7 +15,8 @@ interface CreateProposalFormStep {
 export enum CreateProposalFormStepEnum {
     wallet = 'wallet',
     content = 'content',
-    execution = 'execution'
+    execution = 'execution',
+    preview = 'preview'
 }
 
 const nextFormStep = {
@@ -32,5 +34,6 @@ export const initialCreateProposalForm: CreateProposalForm = {
         value: {}
     },
     [CreateProposalFormStepEnum.content]: nextFormStep,
-    [CreateProposalFormStepEnum.execution]: nextFormStep
+    [CreateProposalFormStepEnum.execution]: nextFormStep,
+    [CreateProposalFormStepEnum.preview]: nextFormStep
 }