Skip to content

Simplify Proposal Creation and Sending Process #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
osiastedian merged 3 commits into from
Nov 22, 2025
Merged

Simplify Proposal Creation and Sending Process #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1c8265
Separate proposal creation into two distinct steps
claude Oct 27, 2025
8a132ac
Refactor proposal creation into separate components
claude Oct 27, 2025
04f7304
Fix lint issues in proposal components
claude Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 101 additions & 0 deletions src/components/proposal/PrepareProposal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import {useForm} from 'react-hook-form';
import {ErrorMessage} from '@hookform/error-message';
import {yupResolver} from '@hookform/resolvers';
import * as yup from 'yup';
import swal from 'sweetalert2';

const schema = yup.object().shape({
paymentTxId: yup.string()
.test('len', 'Must be exactly 64 characters', val => val && val.length === 64)
.required('Payment txid is required')
});

/**
* Component to show the prepare proposal step (Step 5)
* @component
* @subcategory Proposal
* @example
* return (
* <PrepareProposal
* prepareCommand={prepareCommand}
* onSubmit={handlePaymentTxId}
* onCancel={handleCancel}
* />
* )
*/
function PrepareProposal({ prepareCommand, onSubmit, onCancel }) {
const {register, handleSubmit, errors} = useForm({
mode: 'onSubmit',
resolver: yupResolver(schema)
});

/**
* function that triggers sweet alert to show the copy is successful
* @function
*/
const copyButton = () => {
swal.fire({
icon: 'success',
title: 'Copied',
timer: 2000,
showConfirmButton: false,
});
};

return (
<div>
<div className="form-group article">
<div className="cli-command-container">
<textarea
className="styled"
name="prepareCommand"
id="prepareCommand"
rows="5"
disabled
value={prepareCommand}
></textarea>
<CopyToClipboard
text={prepareCommand}
onCopy={copyButton}
>
<button className="copy-icon" type="button" title="Copy command">📋</button>
</CopyToClipboard>
</div>
<small>
<p style={{lineHeight: "1.5"}}>
Prepare command is ready to be copied. Please copy and paste it into Syscoin Q.T console for payment txid.
</p>
</small>
</div>

<div className="form-actions-spaced">
<CopyToClipboard
text={prepareCommand}
onCopy={copyButton}
>
<button className="btn btn--blue" type="button">Copy Command</button>
</CopyToClipboard>
</div>

<form className="input-form" onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<label htmlFor="paymentTxId">Payment txid</label>
<input type="text" id="paymentTxId" ref={register} name="paymentTxId" className="styled" maxLength="64"/>
<ErrorMessage
errors={errors}
name="paymentTxId"
render={({message}) => <small><p style={{lineHeight: '1.5'}}>{message}</p></small>}
/>
</div>
<div className="form-actions-spaced">
<button className="btn btn-outline-primary" type="button" onClick={onCancel}>Cancel</button>
<button className="btn btn--blue" type="submit">Next</button>
</div>
</form>
</div>
);
}

export default PrepareProposal;
197 changes: 33 additions & 164 deletions src/components/proposal/ProposalForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import React, {useState, useEffect, useMemo, useRef} from "react";
import {CopyToClipboard} from "react-copy-to-clipboard";
import React, {useState, useEffect, useMemo, useRef, useCallback} from "react";
import swal from "sweetalert2";
import {Collapse} from 'react-collapse';
import {useHistory} from "react-router";
import {useForm} from "react-hook-form";
import {ErrorMessage} from '@hookform/error-message';
import {yupResolver} from '@hookform/resolvers';
import * as yup from "yup";

import {checkProposal, prepareProposal, notCompletedProposal, destroyProposal} from "../../utils/request";
import {getAxiosErrorFooter, getAxiosErrorMessage, logAxiosError} from "../../utils/errorHandler";
Expand All @@ -16,21 +10,11 @@ import TitleProposal from './TitleProposal';
import DescriptionProposal from './DescriptionProposal';
import PaymentProposal from './PaymentProposal';
import ProposalPreview from "./ProposalPreview";
import PrepareProposal from "./PrepareProposal";
import SubmitProposal from "./SubmitProposal";
import axios from 'axios';
import useProposalSubmission from './hooks/useProposalSubmission';


const schema = yup.object().shape({
paymentTxId: yup.string()
.test('len', 'Must be exactly 64 characters', val => val.length === 64)
.required('Payment txid is required')
});
const schema2 = yup.object().shape({
proposalHash: yup.string()
.test('len', 'Must be exactly 64 characters', val => val.length === 64)
.required('proposal hash is required')
});

/**
* Component to show the create Proposal form
* @component
Expand All @@ -46,8 +30,6 @@ function ProposalForm() {
//COMPONENT STATES
const [currentStep, setCurrentStep] = useState(0);
const [openModal, setOpenModal] = useState(false);
const [collapse, setCollapse] = useState(true);
const [useCollapse, setUseCollapse] = useState(false);

//PROPOSAL STATES
const [title, setTitle] = useState('');
Expand All @@ -61,21 +43,15 @@ function ProposalForm() {

const cancelSource = useMemo(() => axios.CancelToken.source(), []);

const onPaymentTxIdEntered = useCallback(() => {
setCurrentStep(prev => prev + 1); // Move to step 6 (submit proposal)
}, []);

const { enterPaymentTxId, enterProposalHash } = useProposalSubmission({
proposalUid,
history,
setSubmitCommand,
setUseCollapse,
setCollapse,
});

const {register, handleSubmit, errors} = useForm({
mode: 'onSubmit',
resolver: yupResolver(schema)
});
const {register: register2, handleSubmit: handleSubmit2, errors: errors2} = useForm({
mode: 'onSubmit',
resolver: yupResolver(schema2)
onPaymentTxIdEntered,
});

/**
Expand Down Expand Up @@ -179,10 +155,15 @@ function ProposalForm() {
* @function
*/
const continueProposal = () => {
setCurrentStep(4);
if (submitCommand !== "") {
setUseCollapse(true);
setCollapse(false);
// If submit command exists, go to step 6 (submit)
setCurrentStep(5);
} else if (prepareCommand !== "") {
// If only prepare command exists, go to step 5 (prepare)
setCurrentStep(4);
} else {
// Otherwise go to step 5 (prepare) to start fresh
setCurrentStep(4);
}
setOpenModal(false);
}
Expand All @@ -200,8 +181,6 @@ function ProposalForm() {
confirmButtonText: 'Delete'
})
if (swalConfirm.isConfirmed) {
setUseCollapse(false);
setCollapse(true);
cancelCurrentProposal();
}
}
Expand All @@ -216,25 +195,12 @@ function ProposalForm() {

/**
* function to set next step of the proposal form
* @function
* @function
*/
const next = () => {
setCurrentStep(currentStep + 1);
};

/**
* function that triggers sweet alert to show the copy is successful
* @function
*/
const copyButton = () => {
swal.fire({
icon: "success",
title: "Copied",
timer: 2000,
showConfirmButton: false,
});
}

/**
* function that sets in the state the title from the input
* @function
Expand Down Expand Up @@ -371,122 +337,25 @@ function ProposalForm() {
</div>

<div className="wizard-head">
<span>5</span>Create proposal
<span>5</span>Prepare proposal
</div>
<div className={`wizard-body ${currentStep === 4 ? "" : "collapsed"}`}>
<Collapse
isOpened={collapse}
initialStyle={{height: 0, overflow: 'hidden'}}
>
<div className="form-group article">
<div className="cli-command-container">
<textarea
className="styled"
name="prepareCommand"
id="prepareCommand"
rows="5"
disabled
value={prepareCommand}
></textarea>
<CopyToClipboard
text={prepareCommand}
onCopy={copyButton}
>
<button className="copy-icon" type="button" title="Copy command">📋</button>
</CopyToClipboard>
</div>
<small>
<p style={{lineHeight: "1.5"}}>
Prepare command is ready to be copied. Please copy and paste it into Syscoin Q.T console for payment txid.
</p>
</small>
</div>

<div className="form-actions-spaced">
<CopyToClipboard
text={prepareCommand}
onCopy={copyButton}
>
<button className="btn btn--blue" type="button">Copy Command</button>
</CopyToClipboard>
</div>

<form className="input-form" onSubmit={handleSubmit(enterPaymentTxId)}>
<div className="form-group">
<label htmlFor="paymentTxId">Payment txid</label>
<input type="text" id="paymentTxId" ref={register} name="paymentTxId" className="styled" maxLength="64"/>
<ErrorMessage
errors={errors}
name="paymentTxId"
render={({message}) => <small><p style={{lineHeight: '1.5'}}>{message}</p></small>}
/>
</div>
<div className="form-actions-spaced">
<button className="btn btn-outline-primary" type="button" onClick={cancelProposalBtn}>Cancel</button>
<button className="btn btn--blue" type="submit">Next</button>
</div>
</form>

</Collapse>


<Collapse
isOpened={useCollapse}
initialStyle={{height: 0, overflow: 'hidden'}}
>
<div className="form-group article">
{/* Disclaimer about waiting before go_submit */}
<div className="alert alert-warning mb-3 py-2 px-3" role="alert">
<strong>Important:</strong> Please wait at least <b>5 minutes</b> or <b>1 block confirmation</b> after sending the payment transaction before running <code>go_submit</code>. Submitting too early may cause your proposal to fail.
</div>
<div className="cli-command-container">
<textarea
className="styled"
name="submitCommand"
id="submitCommand"
rows="5"
disabled
value={submitCommand}
></textarea>
<CopyToClipboard
text={submitCommand}
onCopy={copyButton}
>
<button className="copy-icon" type="button" title="Copy command">📋</button>
</CopyToClipboard>
</div>
<small>
<p style={{lineHeight: "1.5"}}>
Submit command is ready to be copied. Please copy and paste it into Syscoin Q.T console to submit your proposal. This could take a couple minutes.
</p>
</small>
</div>

<div className="form-actions-spaced">
<CopyToClipboard
text={submitCommand}
onCopy={copyButton}
>
<button className="btn btn--blue" type="button">Copy Command</button>
</CopyToClipboard>
</div>
<PrepareProposal
prepareCommand={prepareCommand}
onSubmit={enterPaymentTxId}
onCancel={cancelProposalBtn}
/>
</div>

<form className="input-form" onSubmit={handleSubmit2(enterProposalHash)}>
<div className="form-group">
<label htmlFor="proposalHash">Proposal hash</label>
<input type="text" id="proposalHash" ref={register2} name="proposalHash" className="styled" maxLength="64"/>
<ErrorMessage
errors={errors2}
name="proposalHash"
render={({message}) => <small><p style={{lineHeight: '1.5'}}>{message}</p></small>}
/>
</div>
<div className="form-actions-spaced">
<button className="btn btn-outline-primary" type="button" onClick={cancelProposalBtn}>Cancel</button>
<button className="btn btn--blue" type="submit">Submit</button>
</div>
</form>
</Collapse>
<div className="wizard-head">
<span>6</span>Submit proposal
</div>
<div className={`wizard-body ${currentStep === 5 ? "" : "collapsed"}`}>
<SubmitProposal
submitCommand={submitCommand}
onSubmit={enterProposalHash}
onCancel={cancelProposalBtn}
/>
</div>
</div>
</div>
Expand Down
Loading