feat: Add some input check

filecoin-project · Jun 27, 2024 · b716a76 · b716a76
1 parent ea878d2
commit b716a76
Show file tree

Hide file tree

Showing 21 changed files with 323 additions and 971 deletions.
diff --git a/power-voting/package-lock.json b/power-voting/package-lock.json
diff --git a/power-voting/package.json b/power-voting/package.json
@@ -34,6 +34,7 @@
     "markdown-it-emoji": "^3.0.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-ins": "^3.0.1",
+    "markdown-it-link-attributes": "^4.0.1",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",

diff --git a/power-voting/src/common/consts.ts b/power-voting/src/common/consts.ts
@@ -501,9 +501,11 @@ export const NO_FIP_EDITOR_REVOKE_ADDRESS_MSG = 'Please select an address!';
 export const NO_ENOUGH_FIP_EDITOR_REVOKE_ADDRESS_MSG = 'There must be more than two FIP editors to revoke';
 export const FIP_ALREADY_EXECUTE_MSG="Address has an active proposal "
 export const FIP_APPROVE_SELF_MSG="Cannot propose to self"
-
+export const FIP_APPROVE_ALREADY_MSG="Address is already a FIP editor"
 export const HAVE_APPROVED_MSG = 'You have already approved!';
 export const HAVE_REVOKED_MSG = 'You have already revoked!';
 export const CAN_NOT_REVOKE_YOURSELF_MSG = 'You can\'t revoke yourself!';
 export const SAVE_DRAFT_SUCCESS = "Save Success"
-export const SAVE_DRAFT_FAIL = "Save FAIL"
+export const SAVE_DRAFT_TOO_LARGE = "Data too large"
+export const SAVE_DRAFT_FAIL = "Save Fail"
+export const UPLOAD_DATA_FAIL_MSG="Save Data Fail"
diff --git a/power-voting/src/common/styles/common.less b/power-voting/src/common/styles/common.less
@@ -91,4 +91,8 @@
 	border-radius: 1px;
 	background-color: currentColor;
 	box-shadow: -0.3em 0 currentColor, 0 0 currentColor, 0.3em 0 currentColor;
+}
+
+:focus{
+	outline: solid #3b82f6;
 }
diff --git a/power-voting/src/components/Footer.tsx b/power-voting/src/components/Footer.tsx
@@ -73,8 +73,10 @@ const Footer = () => {
         <p className='text-[12px] font-normal text-[#ffffff]'>Powered by</p>
 
         <div className="flex mt-[35px]">
-          <a href="https://www.storswift.com"><img src="/images/logo_1.png" alt="" className='w-[144px] h-[31px] mr-8' /></a>
-          <a href="https://fil.org/"><img src="/images/logo_2.png" alt="" className='w-[120px] mr-8' /></a>
+          <a target="_blank"
+            rel="noopener" href="https://www.storswift.com"><img src="/images/logo_1.png" alt="" className='w-[144px] h-[31px] mr-8' /></a>
+          <a target="_blank"
+            rel="noopener" href="https://fil.org/"><img src="/images/logo_2.png" alt="" className='w-[120px] mr-8' /></a>
         </div>
 
         <div style={{

diff --git a/power-voting/src/components/MDEditor/index.less b/power-voting/src/components/MDEditor/index.less
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @md-bgcolor-pre: #F6F6F6;
-@md-border-color: #313D4F;
+@md-border-color: #eeeeee;
 
 .MDEditor {
   .wmde-markdown {
@@ -33,7 +33,7 @@
 .rcmd {
     border: 1px solid @md-border-color;
     background: @md-bgcolor-pre;
-
+    // border-radius: 8px;
   .rc-md-navigation {
     // background: @md-bgcolor;
     // border-bottom-color: @md-border-color;

diff --git a/power-voting/src/components/MDEditor/index.tsx b/power-voting/src/components/MDEditor/index.tsx
@@ -38,6 +38,9 @@ import mark from 'markdown-it-mark';
 import tasklists from 'markdown-it-task-lists';
 // @ts-ignore
 import anchor from 'markdown-it-anchor';
+// @ts-ignore
+import linkAttributes  from 'markdown-it-link-attributes'; 
+
 import 'katex/dist/katex.css';
 import 'react-markdown-editor-lite/lib/index.css';
 import './index.less';
@@ -66,6 +69,13 @@ const mdParser = markdownIt({
   .use(abbreviation)
   .use(insert)
   .use(mark)
+  .use(linkAttributes, {
+    pattern: /^https?:\/\//, 
+    attrs: {
+      target: '_blank',     
+      rel: 'noopener' 
+    }
+  })
   .use(anchor, {
     slugify: slugify,
     permalink: false,
@@ -133,9 +143,9 @@ const Index: React.FC<Props> = ({ value = '', onChange, ...rest }) => {
     if (value.length > 800) {
       return (
         <>
-          <div className={`absolute bottom-0 h-[80px] w-full bg-gradient-to-t from-[#1b2331] ${showMore ? 'flex' : 'hidden'}`} />
-          <div className={`flex w-full justify-center  ${showMore ? 'absolute -bottom-5' : ''}`}>
-            <button className="border-[#eeeeee] hover:border-[#eeeeee] border-[1px] border-solid text-black mt-4 self-center rounded-xl py-2 px-4" onClick={handleClickShowMore}>
+          <div className={`absolute bottom-0 h-[200px] w-full bg-gradient-to-t from-[#F6F6F6] ${showMore ? 'flex' : 'hidden'}`} />
+          <div className={`flex w-full justify-center  ${showMore ? 'absolute -bottom-[50px]' : ''}`}>
+            <button className="focus:outline-none border-[#DFDFDF] hover:border-[#DFDFDF] border-[1px] border-solid text-[#575757] mt-4 self-center rounded-xl py-2 px-4 font-semibold" onClick={handleClickShowMore}>
               {showMore ? "Show More" : "Show Less"}
             </button>
           </div>

diff --git a/power-voting/src/components/Table.tsx b/power-voting/src/components/Table.tsx
@@ -43,7 +43,6 @@ export default function Table({ title = '', link = {} as { type: string, action:
           <th scope='col' colSpan={2}>
             <div className='font-normal text-black px-8 py-7 text-2xl border-b border-[#313D4F] flex items-center'>
               <span>{title}</span>
-
               {
                 href && (
                   <div className='flex items-start cursor-pointer' onClick={handleJump}>
@@ -54,7 +53,7 @@ export default function Table({ title = '', link = {} as { type: string, action:
             </div>
             <div className='px-8'>
             {subTitle && (
-                <span className='text-[#4B535B]'>{subTitle}</span>
+                <div  className='text-[#4B535B]'>{subTitle}</div>
               )}
             </div>
           </th>
@@ -63,12 +62,11 @@ export default function Table({ title = '', link = {} as { type: string, action:
       <tbody className='divide-y divide-[#111111]'>
         {list.filter((item: { name: string, hide?: boolean, comp: ReactNode, width?: number, desc?: ReactNode }) => !item.hide).map((item: { name: string, hide?: boolean, comp: ReactNode, width?: number, desc?: ReactNode }) => (
           <tr key={item.name} className='divide-x divide-[#313D4F]  '>
-            <td className={`${item.width ? `w-[${item.width}px]` : 'w-[280px]'} whitespace-nowrap py-9 px-8 text-base text-[#313D4F] align-top`}>
-              {item.name}
-              {item.desc && <div className={`${item.width ? `w-[${item.width}px]` : 'w-[280px]'} text-sm whitespace-normal text-[#4B535B] mt-8`}>
+            <td className={`${item.width ? `w-[${item.width}px]` : 'w-[280px]'} align-top py-9 px-8 `}>
+              <div className='whitespace-nowrap text-base font-medium text-[#313D4F] '>{item.name}</div>
+              {item.desc && <div className={`${item.width ? `w-[${item.width}px]` : 'w-[280px]'} text-sm font-sm whitespace-normal text-[#4B535B] mt-8`}>
                 {item.desc}
               </div>}
-
             </td>
 
             <td className='py-5 px-4 text-xl text-white'>

diff --git a/power-voting/src/components/VoteList/index.tsx b/power-voting/src/components/VoteList/index.tsx
@@ -138,7 +138,7 @@ const VoteList: React.FC<Props> = ({ voteList, chain }) => {
     <div className="border-y border-skin-border bg-skin-block-bg text-base md:rounded-xl md:border my-12">
       <div className="group flex h-[57px] justify-between rounded-t-none border-b border-skin-border px-6 pb-[12px] pt-3 md:rounded-t-lg">
         <h4 className="flex items-center">
-          <div className="font-semibold">Votes</div>
+          <div className="font-medium">Votes</div>
         </h4>
         <div className="flex items-center" />
       </div>
@@ -149,10 +149,10 @@ const VoteList: React.FC<Props> = ({ voteList, chain }) => {
               voteList?.map((item: any, index: number) => {
 
                 const powers = []
-                if (item.tokenHolderPower > 0) {
+                if (item.tokenHolderPower > 0 ) {
                   powers.push("TokenHolder")
                 }
-                if (item.spPower > 0) {
+                if (item.spPower > 0 ) {
                   powers.push("Sp")
                 }
                 if (item.developerPower > 0) {
@@ -164,64 +164,52 @@ const VoteList: React.FC<Props> = ({ voteList, chain }) => {
                 const isApprove = item.optionName === VOTE_OPTIONS[0]
                 return (
                   <div className={`flex items-center gap-3 border-t px-4 py-[14px] ${index === 0 && '!border-0'}`} key={item.address + index}>
-                    <div className="w-[300px] flex items-center">
+                    <div className="flex items-center">
                       <img className="w-[20px] h-[20px] rounded-full mr-2" src={`${web3AvatarUrl}:${item.address}`} alt="" />
                       <a
-                        className="text-[#313D4F]"
+                        className="text-[#313D4F] text-sm font-medium"
                         target="_blank"
                         rel="noopener noreferrer"
                         href={`${chain?.blockExplorers?.default.url}/address/${item?.address}`}
                       >
                         {EllipsisMiddle({ suffixCount: 4, children: item?.address })}
                       </a>
-                      <div >
+                      <div className='ml-[5px]'>
                         {powers.length > 0 && <div className='flex'>
                           {
-                            powers.slice(0, 2).map((v, index) => {
+                            powers.slice(0, 4).map((v, index) => {
                               return <div
                                 key={index}
                                 style={{ marginLeft: "4px", borderColor: "#C3E5FF", backgroundColor: "#E7F4FF", color: "#005292" }}
-                                className={`flex items-center justify-center border-solid h-[32px] px-[12px] rounded-full`}>
+                                className={`font-medium text-xs flex items-center justify-center border-solid h-[22px] px-[8px] rounded-full`}>
                                 {v}
                               </div>
                             })
                           }
                         </div>}
-                        {
-                          powers.length > 2 && <div className='flex mt-[5px]'>
-                            {
-                              powers.slice(2).map((v, index) => {
-                                return <div
-                                  key={index}
-                                  style={{ marginLeft: "4px", borderColor: "#C3E5FF", backgroundColor: "#E7F4FF", color: "#005292" }}
-                                  className={`flex items-center justify-center border-solid h-[32px] px-[12px] rounded-full`}>
-                                  {v}
-                                </div>
-                              })
-                            }
-                          </div>
-                        }
                       </div>
                     </div>
 
-                    <div className="flex min-w-[110px] items-center justify-end whitespace-nowrap text-center text-skin-link xs:w-[130px] xs:min-w-[130px] cursor-pointer">
-                      <Popover content={
-                        <Table
-                          rowKey={(record: any) => record.key}
-                          dataSource={getPowerData(item)}
-                          columns={columns}
-                          pagination={false}
-                          footer={(currentData: any) => renderFooter(currentData, item.votes)}
-                        />
-                      }>
-                        <span className='text-[14px] text-[#273141]'>{item.votes}% <InfoCircleOutlined style={{ fontSize: 14 }} /></span>
-                      </Popover>
-                    </div>
+                    <div className='absolute right-[10px] flex items-center'>
+                      <div className="mr-[5px] flex min-w-[110px] items-center justify-end whitespace-nowrap text-center text-skin-link xs:w-[130px] xs:min-w-[130px] cursor-pointer">
+                        <Popover content={
+                          <Table
+                            rowKey={(record: any) => record.key}
+                            dataSource={getPowerData(item)}
+                            columns={columns}
+                            pagination={false}
+                            footer={(currentData: any) => renderFooter(currentData, item.votes)}
+                          />
+                        }>
+                          <span className='text-[14px] text-[#273141] text-sm'>{item.votes}% <InfoCircleOutlined style={{ fontSize: 14 }} /></span>
+                        </Popover>
+                      </div>
 
-                    <div className="w-[180px] flex truncate px-2 justify-end text-skin-link">
-                      <div className="w-[100px] text-c truncate text-skin-link" style={{ color: isApprove ? "green" : "red" }}>
-                        {isApprove ? <CheckCircleOutlined style={{ fontSize: 14, marginRight: "4px" }} /> : <CloseCircleOutlined style={{ fontSize: 14, marginRight: "4px" }} />}
-                        {isApprove ? "Approved" : "Rejected"}</div>
+                      <div className="flex truncate px-2 text-skin-link ">
+                        <div className="pr-[20px] text-right w-[100px] text-c truncate text-skin-link text-xs font-medium" style={{ color: isApprove ? "green" : "red" }}>
+                          {isApprove ? <CheckCircleOutlined style={{ fontSize: 14, marginRight: "4px" }} /> : <CloseCircleOutlined style={{ fontSize: 14, marginRight: "4px" }} />}
+                          {isApprove ? "Approved" : "Rejected"}</div>
+                      </div>
                     </div>
                   </div>
                 )

diff --git a/power-voting/src/components/VoteStatusBtn.tsx b/power-voting/src/components/VoteStatusBtn.tsx
@@ -21,7 +21,7 @@ export default function VoteStatusBtn({ status = 0 }) {
     return (
         <div
             style={{ borderColor: proposal?.bgColor, backgroundColor: proposal?.bgColor, color: proposal?.textColor }}
-            className={`flex items-center justify-center border-solid h-[32px] px-[12px] rounded-full`}>
+            className={`flex items-center justify-center border-solid h-[32px] px-[12px] rounded-full font-medium text-base`}>
             <div className='rounded-full w-[10px] h-[10px] mr-[5px]' style={{ backgroundColor: proposal?.dotColor }} />
             {proposal?.label}
         </div>

diff --git a/power-voting/src/index.tsx b/power-voting/src/index.tsx
@@ -39,7 +39,7 @@ const filecoinCalibrationChain = {
     symbol: 'tFIL',
   },
   rpcUrls: {
-    default: { http: ['/rpc/v1'] },
+    default: { http: ['https://api.calibration.node.glif.io/rpc/v1'] },
   },
   blockExplorers: {
     default: {

diff --git a/power-voting/src/pages/CreateVote/index.tsx b/power-voting/src/pages/CreateVote/index.tsx
@@ -36,7 +36,9 @@ import {
   proposalDraftGetApi,
   proposalDraftAddApi,
   SAVE_DRAFT_SUCCESS,
-  SAVE_DRAFT_FAIL
+  SAVE_DRAFT_FAIL,
+  UPLOAD_DATA_FAIL_MSG,
+  SAVE_DRAFT_TOO_LARGE
 } from '../../common/consts';
 import { useStoringCid, useVoterInfo } from "../../common/store";
 import timezoneOption from '../../../public/json/timezons.json';
@@ -73,7 +75,7 @@ const CreateVote = () => {
   } = useForm({
     defaultValues: {
       timezone: DEFAULT_TIMEZONE,
-      time: [''],
+      time: [] as string[],
       name: '',
       descriptions: '',
       option: [
@@ -138,7 +140,9 @@ const CreateVote = () => {
         const result = (resp.data.data as ProposalDraft[])[0]
         setValue("descriptions", result.Descriptions)
         setValue("name", result.Name)
-        setValue("time", result.Time.split(OPTION_SPLIT_TAG) ?? [])
+        if(result.Time.length){
+          setValue("time", result.Time.split(OPTION_SPLIT_TAG) ?? [])
+        }
         if (result.Timezone) {
           setValue("timezone", result.Timezone)
         }
@@ -234,6 +238,16 @@ const CreateVote = () => {
     };
 
     const cid = await getWeb3IpfsId(_values);
+
+    if (!cid?.length) {
+      messageApi.open({
+        type: 'warning',
+        content: UPLOAD_DATA_FAIL_MSG,
+      });
+      setLoading(false);
+      return
+    }
+
     setCid(cid);
 
     if (isConnected) {
@@ -298,6 +312,14 @@ const CreateVote = () => {
     ) {
       return
     }
+
+    if(values.descriptions.length>=2000){
+      messageApi.open({
+        type: "warning",
+        content: SAVE_DRAFT_TOO_LARGE,
+      });
+      return
+    }
     setDraftSave(true)
     const data = {
       Timezone: values.timezone,
@@ -364,6 +386,9 @@ const CreateVote = () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [])
+  // const disabledDate = (current:any) => {
+  //   return current && current < dayjs().startOf('day');
+  // };
   //VOTE_OPTIONS
   const list = [
     {
@@ -391,11 +416,12 @@ const CreateVote = () => {
       )
     },
     {
-      name: 'Proposal Description',
-      width: 260,
+      name: 'Description',
+      width: 280,
       desc: <div className="text-red">
-        <span>
-          Describe FIP objectives, implementation details, risks, and include GitHub links for transparency. See a template <a href="" style={{ color: "blue" }}>here↗</a>.
+        <span className="text-sm" style={{fontFamily:"SuisseIntl"}}>
+          Describe FIP objectives, implementation details, risks, and include GitHub links for transparency. See a template <a target="_blank"
+            rel="noopener" href="" className="text-sm" style={{ color: "blue" }}>here↗</a>.
           <br /> You can use Markdown formatting in the text input field.
         </span>
 
@@ -436,6 +462,7 @@ const CreateVote = () => {
                   <>
                     <RangePicker
                       showTime
+                      // disabledDate={disabledDate}
                       format="YYYY-MM-DD HH:mm"
                       placeholder={['Start Time', 'End Time']}
                       allowClear={true}
@@ -514,8 +541,9 @@ const CreateVote = () => {
       </div>
       <form onSubmit={handleSubmit(onSubmit)} >
         <div className='flow-root space-y-8'>
-          <Table title='Create A Proposal' subTitle={<div className="text-m">
-            Proposals should be clear, concise, and focused on specific improvements or changes. FIPs must adhere to the Filecoin community's <a href="" style={{ color: "blue" }}>code of conduct and best practices↗</a>.
+          <Table title='Create A Proposal' subTitle={<div className="text-base font-normal">
+            Proposals should be clear, concise, and focused on specific improvements or changes. FIPs must adhere to the Filecoin community's <a target="_blank"
+              rel="noopener" href="" style={{ color: "blue" }}>code of conduct and best practices↗</a>.
           </div>} list={list} />
 
           <div className="flex justify-center items-center text-center ">
@@ -528,7 +556,7 @@ const CreateVote = () => {
                   Save Draft
                 </div>
               </Link>
-              <LoadingButton className="create-submit" text='Create' loading={loading || writeContractPending || transactionLoading} />
+              <LoadingButton className="create-submit" text='Create Proposal' loading={loading || writeContractPending || transactionLoading} />
             </div>
           </div>
         </div>