1
1
import type { NextPage } from 'next' ;
2
2
import Head from 'next/head' ;
3
+ import { useState } from 'react' ;
4
+ import { compile } from '../src/sol/compiler' ;
3
5
import styles from '../styles/Home.module.css' ;
4
6
5
7
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
+
6
27
return (
7
28
< div className = { styles . container } >
8
29
< 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 " />
11
32
< link rel = "icon" href = "/favicon.ico" />
12
33
</ Head >
13
34
@@ -19,18 +40,16 @@ const Home: NextPage = () => {
19
40
< div className = { styles . grid } >
20
41
< div className = { styles . card } >
21
42
< 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 ) } />
25
44
< div className = { styles . buttonWrapper } >
26
- < button > Compile</ button >
45
+ < button onClick = { compileSourceCode } > Compile</ button >
27
46
</ div >
28
47
</ div >
29
48
< 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 } / >
34
53
</ div >
35
54
</ div >
36
55
</ main >
0 commit comments