Add limit to project readme (#233)

* Add description overflow hooks

* Update wasm_exec file

* Add readme limits. Add styles for error. Remove placeholder

* Add color prop to label

* Set actual size of a limit

Author: MaxStalker

src/components/Arguments/SingleArgument/styles.tsx

@@ -12,11 +12,16 @@ export const InputBlock = styled.div<InpubBlockProps>`
   position: relative;
 `
 
-export const Label = styled.p`
+
+interface LabelProps {
+  error?: boolean
+}
+
+export const Label = styled.p<LabelProps>`
   margin: 0;
   font-size: 14px;
   margin-bottom: 5px;
-  color: #000;
+  color: ${({error})=> error ? "#EE431E" : "#000"};
 `;
 
 export const Type = styled.span`

src/components/MdeEditor.tsx

@@ -1,23 +1,22 @@
 import React from 'react';
 import SimpleMDE from "react-simplemde-editor";
-import { PLACEHOLDER_README } from "providers/Project/projectDefault";
 import "easymde/dist/easymde.min.css";
 import "unreset-css/dist/unreset.min.css"; // restore browser default element styles
-
+import "../styles/markdown.css"
 
 export const MdeEditor: React.FC<{
   value: string;
   onChange: (v: string) => void;
-}> = ({ value, onChange }) => {
+  overflow: boolean
+}> = ({ value, onChange, overflow }) => {
+
+  const className = overflow ? "unreset ease-md-red-border" : "unreset"
 
   return (
     <SimpleMDE
-      className="unreset"
+      className={className}
       value={value}
       onChange={v => onChange(v)}
-      options={{
-        placeholder: PLACEHOLDER_README
-      }}
     />
   )
 }

src/containers/Editor/components.tsx

@@ -213,6 +213,12 @@ const compareContracts = (prev: Account[], current: Account[]) => {
 
 let monacoServicesInstalled = false;
 
+const MAX_DESCRIPTION_SIZE = Math.pow(1024, 2) // 1mb of storage can be saved into readme field
+const calculateSize = (readme: string) => {
+  const { size } = new Blob([readme])
+  return size >= MAX_DESCRIPTION_SIZE
+}
+
 const EditorContainer: React.FC<EditorContainerProps> = ({
   isLoading,
   project,
@@ -231,6 +237,8 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
 
   const projectAccess = useProject()
 
+  const [descriptionOverflow, setDescriptionOverflow] = useState(calculateSize(project.readme))
+
   useEffect(() => {
     if (isLoading) {
       setCode('');
@@ -350,6 +358,10 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
   };
 
   const isReadmeEditor = active.type === 4;
+  const readmeLabel =  `README.md${descriptionOverflow
+          ? " - Content can't be more than 1Mb in size"
+          : ""
+  }`
 
   return (
     <MainRoot>
@@ -395,13 +407,18 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
                   }}
                 />
               </InputBlock>
-              <Label>README.md</Label>
+              <Label error={descriptionOverflow}>{readmeLabel} </Label>
               <MdeEditor
                 value={readme}
                 onChange={(readme: string) => {
+                  const overflow = calculateSize(readme)
+                  setDescriptionOverflow(overflow)
                   setReadme(readme);
-                  updateProject(title, description, readme);
+                  if(!overflow){
+                    updateProject(title, description, readme);
+                  }
                 }}
+                overflow={descriptionOverflow}
               />
             </>
           )}

src/styles/markdown.css

@@ -0,0 +1,5 @@
+.ease-md-red-border .editor-toolbar,
+.ease-md-red-border .CodeMirror-wrap{
+    border-color: #EE431E;
+    transition: border 0.5s ease-in-out;
+}

src/wasm_exec.js

@@ -247,7 +247,7 @@
 					},
 
 					// func walltime() (sec int64, nsec int32)
-					"runtime.walltime": (sp) => {
+					"runtime.walltime1": (sp) => {
 						sp >>>= 0;
 						const msec = (new Date).getTime();
 						setInt64(sp + 8, msec / 1000);