added compiling interface

DadeKuma · DadeKuma · commit 75a4ceefa849 · 2022-10-13T15:09:05.000+02:00
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,13 +1,34 @@
 import type { NextPage } from 'next';
 import Head from 'next/head';
+import { useState } from 'react';
+import { compile } from '../src/sol/compiler';
 import styles from '../styles/Home.module.css';
 
 const Home: NextPage = () => {
+  const [sourceCode, setSourceCode] = useState("");
+  const [byteCode, setByteCode] = useState("");
+  const [abi, setAbi] = useState("");
+
+  const compileSourceCode = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const button = event.currentTarget;
+    button.disabled = true;
+    compile(sourceCode)
+      .then(contractData => {
+        const data = contractData[0];
+        setByteCode(() => data.byteCode);
+        setAbi(() => JSON.stringify(data.abi));
+      })
+      .catch(console.error)
+      .finally(() => {
+        button.disabled = false;
+      });
+  };
+
   return (
     <div className={styles.container}>
       <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
+        <title>Frontend Solidity Compiler</title>
+        <meta name="description" content="Compile solidity code on frontend with Next.js and Solc-js" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -19,18 +40,16 @@ const Home: NextPage = () => {
         <div className={styles.grid}>
           <div className={styles.card}>
             <h2>Source Code</h2>
-            <textarea rows={30} cols={40}>
-
-            </textarea>
+            <textarea rows={20} cols={50} onChange={e => setSourceCode(e.target.value)} />
             <div className={styles.buttonWrapper}>
-              <button>Compile</button>
+              <button onClick={compileSourceCode}>Compile</button>
             </div>
           </div>
           <div className={styles.card}>
-            <h2>Compiled ByteCode</h2>
-            <textarea readOnly rows={30} cols={40}>
-
-            </textarea>
+            <h2>ABI</h2>
+            <textarea readOnly rows={10} cols={60} value={abi} />
+            <h2 className={styles.subtitle}>Compiled ByteCode</h2>
+            <textarea readOnly rows={10} cols={60} value={byteCode} />
           </div>
         </div>
       </main>
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -24,7 +24,7 @@
 }
 
 .title {
-  margin: 0rem 0rem 2rem;
+  margin: 0rem 0rem 4rem;
   text-align: center;
   line-height: 1.15;
   font-size: 4rem;
@@ -66,6 +66,10 @@
   font-size: 1.5rem;
 }
 
+.card .subtitle {
+  margin-top: 2rem;
+}
+
 .card p {
   margin: 0;
   font-size: 1.25rem;
diff --git a/styles/globals.css b/styles/globals.css
@@ -11,6 +11,10 @@ a {
   text-decoration: none;
 }
 
+textarea {
+  resize: vertical;
+}
+
 button {
   background-color: black;
   color: white;
