use latest Ape docker

apps/vyper/src/app/app.tsx

@@ -15,7 +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'
+import { VyperCompilationResultWrapper, VyperCompilationErrorsWrapper } from './utils/types'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -24,13 +24,9 @@ interface AppState {
   localUrl: string
 }
 
-interface OutputMap {
-  [fileName: string]: any
-}
-
 const App = () => {
   const [contract, setContract] = useState<string>()
-  const [output, setOutput] = useState<VyperCompilationError[] | VyperCompilationResultType>(remixClient.compilerOutput)
+  const [output, setOutput] = useState<VyperCompilationErrorsWrapper | VyperCompilationResultWrapper>(remixClient.compilerOutput)
   const [state, setState] = useState<AppState>({
     status: 'idle',
     environment: 'remote',
@@ -45,7 +41,7 @@ const App = () => {
         await remixClient.loaded()
         remixClient.onFileChange((name) => {
           !name.endsWith('.vy') && remixClient.changeStatus({ key: 'none' })
-          setOutput({})
+          setOutput(null)
           setContract(name)
         })
         remixClient.onNoFileSelected(() => setContract(''))
@@ -101,16 +97,8 @@ const App = () => {
     setOutput(remixClient.compilerOutput)
   }
 
-  const startingCompilation = () => {
-    if (!spinnerIcon.current) return
-    spinnerIcon.current.setAttribute('title', 'compiling...')
-    spinnerIcon.current.classList.remove('remixui_bouncingIcon')
-    spinnerIcon.current.classList.add('remixui_spinningIcon')
-  }
-
   const [cloneCount, setCloneCount] = useState(0)
 
-  console.log((output))
   return (
     <main id="vyper-plugin">
       <section>

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

@@ -2,7 +2,7 @@ import { ABIDescription } from '@remixproject/plugin-api'
 import axios from 'axios'
 import { remixClient } from './remix-client'
 import _ from 'lodash'
-import { VyperCompilationError , VyperCompilationOutput} from './types'
+import { VyperCompilationError , VyperCompilationOutput, VyperCompilationResult } from './types'
 
 export interface Contract {
   name: string
@@ -62,7 +62,7 @@ const buildError = (output) => {
   }
 }
 
-const compileReturnType = (output, contract) => {
+const compileReturnType = (output, contract): VyperCompilationResult => {
   const t: any = toStandardOutput(contract, output)
   const temp = _.merge(t['contracts'][contract])
   const normal = normalizeContractPath(contract)[2]

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

@@ -1,16 +1,5 @@
 import { CompilationResult, ABIDescription } from '@remixproject/plugin-api'
 
-export interface VyperCompilationResult {
-  status: 'success'
-  bytecode: string
-  bytecode_runtime: string
-  abi: ABIDescription[]
-  ir: string
-  method_identifiers: {
-    [method: string]: string
-  }
-}
-
 export type VyperCompilationError = {
   status: 'failed'
   column?: number
@@ -19,8 +8,18 @@ export type VyperCompilationError = {
   error_type: string
 }
 
-export type VyperCompilationOutput = VyperCompilationResult | VyperCompilationError
+export type VyperCompilationOutput = VyperCompilationResultWrapper | VyperCompilationError
 
+export type VyperCompilationErrorsWrapper = {
+  status: 'failed'
+  errors: VyperCompilationError[]
+}
+
+export type VyperCompilationResultWrapper = {
+  status: 'success'
+  contractName: string
+  compileResult: VyperCompilationResult
+}
 
 export type VyperCompilationResult = {
   contractName: string