fix remaining issues

apps/vyper/src/app/app.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 
-import {VyperCompilationOutput, remixClient} from './utils'
+import {VyperCompilationOutput, remixClient, toStandardOutput} from './utils'
 import {CompilationResult} from '@remixproject/plugin-api'
 
 // Components
@@ -13,6 +13,7 @@ import ToggleButton from 'react-bootstrap/ToggleButton'
 import Button from 'react-bootstrap/Button'
 
 import './app.css'
+import { VyperCompilationResultType } from './utils/types'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -27,7 +28,7 @@ interface OutputMap {
 
 const App: React.FC = () => {
   const [contract, setContract] = useState<string>()
-  const [output, setOutput] = useState<OutputMap>({})
+  const [output, setOutput] = useState<any>({})
   const [state, setState] = useState<AppState>({
     status: 'idle',
     environment: 'local',
@@ -52,6 +53,52 @@ const App: React.FC = () => {
     start()
   }, [])
 
+  // useEffect(() => {
+  //   const getStandardOutput = () => {
+  //     const contractName = contract.split('/').slice(-1)[0].split('.')[0]
+  //     const compiledAbi = output['contractTypes'][contractName].abi
+  //     const deployedBytecode = output['contractTypes'][contractName].deploymentBytecode.bytecode.replace('0x', '')
+  //     const bytecode = output['contractTypes'][contractName].runtimeBytecode.bytecode.replace('0x', '')
+  //     const compiledAst = output['contractTypes'][contractName].abi
+  //     //const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
+  //     return {
+  //       sources: {
+  //         [contract]: {
+  //           id: 1,
+  //           ast: compiledAst,
+  //           legacyAST: {} as any
+  //         }
+  //       },
+  //       contracts: {
+  //         [contract]: {
+  //           // If the language used has no contract names, this field should equal to an empty string
+  //           [contractName]: {
+  //             // The Ethereum Contract ABI. If empty, it is represented as an empty array.
+  //             // See https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI
+  //             abi: compiledAbi,
+  //             evm: {
+  //               bytecode: {
+  //                 linkReferences: {},
+  //                 object: deployedBytecode,
+  //                 opcodes: ''
+  //               },
+  //               deployedBytecode: {
+  //                 linkReferences: {},
+  //                 object: bytecode,
+  //                 opcodes: ''
+  //               },
+  //               // methodIdentifiers: methodIdentifiers
+  //             }
+  //           }
+  //         } as any
+  //       }
+  //     }
+  //   }
+  //   const data = getStandardOutput()
+  //   console.log({ data })
+  //   setCompilerResponse(data)
+  // }, [output])
+
   /** Update the environment state value */
   function setEnvironment(environment: 'local' | 'remote') {
     setState({...state, environment})
@@ -97,11 +144,11 @@ const App: React.FC = () => {
             compilerUrl={compilerUrl()}
             contract={contract}
             setOutput={(name, update) => setOutput({...output, [name]: update})}
-            setCompilerResponse={setCompilerResponse}
           />
         </div>
         <article id="result" className="px-2">
-          <VyperResult output={contract ? output[contract] : undefined} compilerResponse={compilerResponse} />
+          {/* <VyperResult output={contract ? output[contract] : undefined} contractName={contract} /> */}
+          <VyperResult output={contract ? output : undefined} />
         </article>
       </section>
     </main>

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

@@ -6,10 +6,9 @@ interface Props {
   compilerUrl: string
   contract?: string
   setOutput: (name: string, output: VyperCompilationOutput) => void
-  setCompilerResponse: (response: any) => void
 }
 
-function CompilerButton({contract, setOutput, compilerUrl, setCompilerResponse}: Props) {
+function CompilerButton({contract, setOutput, compilerUrl}: Props) {
   if (!contract || !contract) {
     return <Button disabled>No contract selected</Button>
   }
@@ -42,7 +41,7 @@ function CompilerButton({contract, setOutput, compilerUrl, setCompilerResponse}:
         return
       }
       setOutput(_contract.name, output)
-      setCompilerResponse(output)
+      // setCompilerResponse(output)
 
       // ERROR
       if (isCompilationError(output)) {

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

@@ -4,13 +4,12 @@ import Tabs from 'react-bootstrap/Tabs'
 import Tab from 'react-bootstrap/Tab'
 import Button from 'react-bootstrap/Button'
 import JSONTree from 'react-json-view'
-import { JsonView } from 'react-json-view-lite'
+import ReactJson from 'react-json-view'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import { VyperCompilationResult } from '../utils/types'
 
 interface VyperResultProps {
   output?: VyperCompilationOutput
-  compilerResponse?: any
 }
 
 export type ExampleContract = {
@@ -18,7 +17,7 @@ export type ExampleContract = {
   address: string
 }
 
-function VyperResult(props, {output, compilerResponse}: VyperResultProps) {
+function VyperResult({ output }: VyperResultProps) {
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
@@ -56,9 +55,7 @@ function VyperResult(props, {output, compilerResponse}: VyperResultProps) {
           </Button>
         </CopyToClipboard>
         {/* <JSONTree src={output.abi} /> */}
-        <JsonView
-          data={compilerResponse}
-        />
+        <ReactJson src={output.abi} />
       </Tab>
       <Tab eventKey="bytecode" title="Bytecode">
         <CopyToClipboard getContent={() => output.bytecode}>

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

@@ -88,16 +88,12 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
     })).data
     return result
   } else if (status === 'PENDING' || status === 'FAILED') {
-    console.log('pending or failed state encountered')
     result = await(await axios.get(url + '/exceptions/' + compileCode , {
       method: 'Get'
     })).data
-    console.log({ result }, 'this is an exception')
     return result.data
   }
-  console.log({ result })
   await new Promise((resolve) => setTimeout(() => resolve({}), 2000))
-
 }
 
 /**
@@ -116,7 +112,7 @@ export function toStandardOutput(fileName: string, compilationResult: VyperCompi
     sources: {
       [fileName]: {
         id: 1,
-        ast: compiledAst,//{} as any,
+        ast: compiledAst,
         legacyAST: {} as any
       }
     },

package.json

@@ -203,7 +203,6 @@
     "react-image-magnifiers": "^1.4.0",
     "react-intl": "^6.0.4",
     "react-json-view": "^1.21.3",
-    "react-json-view-lite": "^1.2.0",
     "react-markdown": "^8.0.5",
     "react-multi-carousel": "^2.8.2",
     "react-router-dom": "^6.3.0",

yarn.lock

@@ -23389,11 +23389,6 @@ react-is@^17.0.1, react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-json-view-lite@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-1.2.0.tgz#2fced1da474ae6e71ccd2352931033f3133311b4"
-  integrity sha512-Z5KSFNDjw3oYr6a2ZZ6SxAiU5OlXrlTbvEUshYeEn9eCEgrfb+DaJRK+6ZG+x7nLVl5RtOOBsfzD5iseUgLMRQ==
-
 react-json-view@^1.21.3:
   version "1.21.3"
   resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475"