fix compilation

apps/vyper/src/app/app.tsx

@@ -15,6 +15,7 @@ import { CustomTooltip } from '@remix-ui/helper'
 import { Form } from 'react-bootstrap'
 import { CompileErrorCard } from './components/CompileErrorCard'
 import CustomAccordionToggle from './components/CustomAccordionToggle'
+import { VyperCompilationError, VyperCompilationResultType } from './utils/types'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -29,7 +30,7 @@ interface OutputMap {
 
 const App = () => {
   const [contract, setContract] = useState<string>()
-  const [output, setOutput] = useState<any>(remixClient.compilerOutput)
+  const [output, setOutput] = useState<VyperCompilationError[] | VyperCompilationResultType>(remixClient.compilerOutput)
   const [state, setState] = useState<AppState>({
     status: 'idle',
     environment: 'remote',
@@ -109,6 +110,7 @@ const App = () => {
 
   const [cloneCount, setCloneCount] = useState(0)
 
+  console.log((output))
   return (
     <main id="vyper-plugin">
       <section>
@@ -165,15 +167,17 @@ const App = () => {
         <div className="px-3 w-100 mb-3 mt-1" id="compile-btn">
           <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({ ...output, [name]: update })} resetCompilerState={resetCompilerResultState} output={output} remixClient={remixClient}/>
         </div>
-
         <article id="result" className="p-2 mx-3 border-top mt-2">
-          {output && Object.keys(output).length > 0 && output.status !== 'failed' ? (
+          {output && output.status === 'success' && 
             <>
               <VyperResult output={output} plugin={remixClient} />
             </>
-          ) : output.status === 'failed' ? (
+          }
-            <CompileErrorCard output={output} plugin={remixClient} />
+          {output && output.status === 'failed' &&
-          ) : null}
+            output.errors && output.errors.map((error) => {
+              return <CompileErrorCard output={error} plugin={remixClient} />
+            })            
+          }
         </article>
       </section>
     </main>

apps/vyper/src/app/components/CompileErrorCard.tsx

@@ -1,8 +1,9 @@
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import Reaact from 'react'
 import { RemixClient } from '../utils'
+import { VyperCompilationError} from '../utils/types'
 
-export function CompileErrorCard(props: { output: any, plugin: RemixClient }) {
+export function CompileErrorCard(props: { output: VyperCompilationError, plugin: RemixClient }) {
   return (
     <div
       id="vyperErrorResult"

apps/vyper/src/app/utils/compiler.tsx

@@ -2,33 +2,13 @@ import { ABIDescription } from '@remixproject/plugin-api'
 import axios from 'axios'
 import { remixClient } from './remix-client'
 import _ from 'lodash'
+import { VyperCompilationError , VyperCompilationOutput} from './types'
 
 export interface Contract {
   name: string
   content: string
 }
 
-export interface VyperCompilationResult {
-  status: 'success'
-  bytecode: string
-  contractName?: string
-  bytecode_runtime: string
-  abi: ABIDescription[]
-  ir: string
-  method_identifiers: {
-    [method: string]: string
-  }
-}
-
-export interface VyperCompilationError {
-  status: 'failed'
-  column?: number
-  line?: number
-  message: string
-}
-
-export type VyperCompilationOutput = VyperCompilationResult | VyperCompilationError
-
 /** Check if the output is an error */
 export const isCompilationError = (output: VyperCompilationOutput): output is VyperCompilationError => output.status === 'failed'
 
@@ -45,35 +25,6 @@ export function normalizeContractPath(contractPath: string): string[] {
   return [folders,resultingPath, filename]
 }
 
-function parseErrorString(errorStructure: string[]) {
-  // Split the string into lines
-  let errorType = ''
-  let message = ''
-  let tline = ''
-  errorStructure.forEach(errorMsg => {
-    const choppedup = errorMsg.split(': ')
-    errorType = choppedup[0].trim().split('\n')[1]
-    message = choppedup[1]
-    // if (errorStructure.length > 2) {
-    //   console.log(choppedup[2].split(',')[1])
-    // }
-    // console.log(choppedup)
-  })
-  let lines = errorStructure[0].trim().split('\n')
-
-  const errorObject = {
-    status: 'failed',
-    message: `${errorType} - ${message}`,
-    column: '',
-    line: ''
-  }
-  message = null
-  // targetLine = null
-  lines = null
-  tline = null
-  return errorObject
-}
-
 const buildError = (output) => {
   if (isCompilationError(output)) {
     const line = output.line
@@ -120,8 +71,9 @@ const compileReturnType = (output, contract) => {
   const depByteCode = evm.deployedBytecode
   const runtimeBytecode = evm.bytecode
   const methodIdentifiers = evm.methodIdentifiers
-  const version = output?.compilers[0]?.version ?? '0.4.0'
+  // TODO: verify this is correct
-  const optimized = output?.compilers[0]?.settings?.optimize ?? true
+  const version = output.version || '0.4.0'
+  const optimized = output.optimize || true
   const evmVersion = ''
 
   const result: {
@@ -179,7 +131,7 @@ const fixContractContent = (content: string) => {
  * @param url The url of the compiler
  * @param contract The name and content of the contract
  */
-export async function compile(url: string, contract: Contract): Promise<any> {
+export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -211,7 +163,6 @@ export async function compile(url: string, contract: Contract): Promise<any> {
   contractName = null
   response = null
   let result: any
-  let intermediateError
 
   const status = await (await axios.get(url + 'status/' + compileCode , {
     method: 'Get'
@@ -226,10 +177,7 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     const intermediate = await(await axios.get(url + 'exceptions/' + compileCode , {
       method: 'Get'
     })).data
-    // console.log('Errors found', intermediate)
+    return intermediate
-    result = parseErrorString(intermediate)
-    intermediateError = intermediate
-    return result
   }
   await new Promise((resolve) => setTimeout(() => resolve({}), 3000))
 }
@@ -293,12 +241,13 @@ export async function compileContract(contract: string, compilerUrl: string, set
     try {
       _contract = await remixClient.getContract()
     } catch (e: any) {
-      const errorGettingContract = {
+      const errorGettingContract: VyperCompilationError = {
         status: 'failed',
-        message: e.message
+        message: e.mesaage,
+        error_type: 'fetch_contract'
       }
 
-      remixClient.eventEmitter.emit('setOutput', errorGettingContract)
+      remixClient.eventEmitter.emit('setOutput', { status: 'failed', errors: [errorGettingContract] } )
       return
     }
     remixClient.changeStatus({
@@ -306,10 +255,9 @@ export async function compileContract(contract: string, compilerUrl: string, set
       type: 'info',
       title: 'Compiling'
     })
-    let output
     // try {
-    output = await compile(compilerUrl, _contract)
+    let output = await compile(compilerUrl, _contract)
-    if (output.status === 'failed') {
+    if (output && output[0] && output[0].status === 'failed') {
       remixClient.changeStatus({
         key: 'failed',
         type: 'error',
@@ -317,13 +265,11 @@ export async function compileContract(contract: string, compilerUrl: string, set
       })
 
       setLoadingSpinnerState && setLoadingSpinnerState(false)
-      remixClient.eventEmitter.emit('setOutput', { status: 'failed', message: output.message, title: 'Error compiling...', line: output.line, column: output.column, key: 1 })
+      remixClient.eventEmitter.emit('setOutput', { status: 'failed', errors: output })
-      output = null
       return
     }
 
     // SUCCESS
-    // remixClient.discardHighlight()
     remixClient.changeStatus({
       key: 'succeed',
       type: 'success',
@@ -336,9 +282,9 @@ export async function compileContract(contract: string, compilerUrl: string, set
     const contractName = _contract['name']
     const compileResult = compileReturnType(output, contractName)
     if (setOutput === null || setOutput === undefined) {
-      remixClient.eventEmitter.emit('setOutput', { contractName, compileResult })
+      remixClient.eventEmitter.emit('setOutput', { status: 'success', contractName, compileResult })
     } else {
-      remixClient.eventEmitter.emit('setOutput', { contractName, compileResult })
+      remixClient.eventEmitter.emit('setOutput', { status: 'success', contractName, compileResult })
     }
   } catch (err: any) {
     remixClient.changeStatus({
@@ -347,8 +293,14 @@ export async function compileContract(contract: string, compilerUrl: string, set
       title: `1 error occurred ${err.message}`
     })
 
+    const errorGettingContract: VyperCompilationError = {
+      status: 'failed',
+      message: err.mesaage,
+      error_type: 'unknown_error'
+    }
+
     setLoadingSpinnerState && setLoadingSpinnerState(false)
-    remixClient.eventEmitter.emit('setOutput', { status: 'failed', message: err.message })
+    remixClient.eventEmitter.emit('setOutput', { status: 'failed', errors: [errorGettingContract] })
   }
 }
 

apps/vyper/src/app/utils/types.ts

@@ -11,11 +11,27 @@ export interface VyperCompilationResult {
   }
 }
 
-export interface VyperCompilationError {
+export type VyperCompilationError = {
   status: 'failed'
   column?: number
   line?: number
   message: string
+  error_type: string
+}
+
+export type VyperCompilationOutput = VyperCompilationResult | VyperCompilationError
+
+
+export type VyperCompilationResult = {
+  contractName: string
+  abi: any,
+  bytecode: any,
+  runtimeBytecode: any,
+  ir: string,
+  methodIdentifiers: any,
+  version?: string,
+  evmVersion?: string
+  optimized?: boolean
 }
 
 export type VyperCompilationResultType = {