Skip to content

Commit 75a4cee

Browse files
committed
added compiling interface
1 parent 746d0ff commit 75a4cee

File tree

3 files changed

+38
-11
lines changed

3 files changed

+38
-11
lines changed

pages/index.tsx

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,34 @@
11
import type { NextPage } from 'next';
22
import Head from 'next/head';
3+
import { useState } from 'react';
4+
import { compile } from '../src/sol/compiler';
35
import styles from '../styles/Home.module.css';
46

57
const Home: NextPage = () => {
8+
const [sourceCode, setSourceCode] = useState("");
9+
const [byteCode, setByteCode] = useState("");
10+
const [abi, setAbi] = useState("");
11+
12+
const compileSourceCode = (event: React.MouseEvent<HTMLButtonElement>) => {
13+
const button = event.currentTarget;
14+
button.disabled = true;
15+
compile(sourceCode)
16+
.then(contractData => {
17+
const data = contractData[0];
18+
setByteCode(() => data.byteCode);
19+
setAbi(() => JSON.stringify(data.abi));
20+
})
21+
.catch(console.error)
22+
.finally(() => {
23+
button.disabled = false;
24+
});
25+
};
26+
627
return (
728
<div className={styles.container}>
829
<Head>
9-
<title>Create Next App</title>
10-
<meta name="description" content="Generated by create next app" />
30+
<title>Frontend Solidity Compiler</title>
31+
<meta name="description" content="Compile solidity code on frontend with Next.js and Solc-js" />
1132
<link rel="icon" href="/favicon.ico" />
1233
</Head>
1334

@@ -19,18 +40,16 @@ const Home: NextPage = () => {
1940
<div className={styles.grid}>
2041
<div className={styles.card}>
2142
<h2>Source Code</h2>
22-
<textarea rows={30} cols={40}>
23-
24-
</textarea>
43+
<textarea rows={20} cols={50} onChange={e => setSourceCode(e.target.value)} />
2544
<div className={styles.buttonWrapper}>
26-
<button>Compile</button>
45+
<button onClick={compileSourceCode}>Compile</button>
2746
</div>
2847
</div>
2948
<div className={styles.card}>
30-
<h2>Compiled ByteCode</h2>
31-
<textarea readOnly rows={30} cols={40}>
32-
33-
</textarea>
49+
<h2>ABI</h2>
50+
<textarea readOnly rows={10} cols={60} value={abi} />
51+
<h2 className={styles.subtitle}>Compiled ByteCode</h2>
52+
<textarea readOnly rows={10} cols={60} value={byteCode} />
3453
</div>
3554
</div>
3655
</main>

styles/Home.module.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525

2626
.title {
27-
margin: 0rem 0rem 2rem;
27+
margin: 0rem 0rem 4rem;
2828
text-align: center;
2929
line-height: 1.15;
3030
font-size: 4rem;
@@ -66,6 +66,10 @@
6666
font-size: 1.5rem;
6767
}
6868

69+
.card .subtitle {
70+
margin-top: 2rem;
71+
}
72+
6973
.card p {
7074
margin: 0;
7175
font-size: 1.25rem;

styles/globals.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ a {
1111
text-decoration: none;
1212
}
1313

14+
textarea {
15+
resize: vertical;
16+
}
17+
1418
button {
1519
background-color: black;
1620
color: white;

0 commit comments

Comments
 (0)