more changes to json react component

apps/vyper/src/app/app.tsx

@@ -33,6 +33,7 @@ const App: React.FC = () => {
     environment: 'local',
     localUrl: 'http://localhost:8000'
   })
+  const [compilerResponse, setCompilerResponse] = useState<any>({})
 
   useEffect(() => {
     async function start() {
@@ -92,10 +93,15 @@ const App: React.FC = () => {
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
         <WarnRemote environment={state.environment} />
         <div className="px-4" id="compile-btn">
-          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} />
+          <CompilerButton
+            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} />
+          <VyperResult output={contract ? output[contract] : undefined} compilerResponse={compilerResponse} />
         </article>
       </section>
     </main>

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

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

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

@@ -4,10 +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 {CopyToClipboard} from '@remix-ui/clipboard'
 
 interface VyperResultProps {
   output?: VyperCompilationOutput
+  compilerResponse?: any
 }
 
 export type ExampleContract = {
@@ -15,7 +17,7 @@ export type ExampleContract = {
   address: string
 }
 
-function VyperResult({output}: VyperResultProps) {
+function VyperResult(props, {output, compilerResponse}: VyperResultProps) {
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
@@ -52,7 +54,10 @@ function VyperResult({output}: VyperResultProps) {
             Copy ABI
           </Button>
         </CopyToClipboard>
-        <JSONTree src={output.abi} />
+        {/* <JSONTree src={output.abi} /> */}
+        <JsonView
+          data={compilerResponse}
+        />
       </Tab>
       <Tab eventKey="bytecode" title="Bytecode">
         <CopyToClipboard getContent={() => output.bytecode}>

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

@@ -63,10 +63,8 @@ export async function compile(url: string, contract: Contract): Promise<any | Vy
     type: 'text/plain'
   });
   const nameResult = normalizeContractPath(contract.name)
-  console.log({ nameResult })
   files.append('files', content, `${nameResult[2]}.vy`)
   const response = await axios.post(url + '/compile?vyper_version=0.2.16', files)
-  console.log({ response })
 
   if (response.data.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
@@ -93,8 +91,13 @@ export async function compile(url: string, contract: Contract): Promise<any | Vy
  * @param name Name of the contract file
  * @param compilationResult Result returned by the compiler
  */
-export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResult): CompilationResult {
+export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResult | any): CompilationResult {
   const contractName = fileName.split('/').slice(-1)[0].split('.')[0]
+
+  if (compilationResult.contractTypes.ast.name !== undefined) {
+    console.log('compilationResult found')
+    return compilationResult
+  }
   const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
   return {
     sources: {

package.json

@@ -203,6 +203,7 @@
     "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,6 +23389,11 @@ 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"