fix issues with displaying vyper results

apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx

@@ -45,10 +45,11 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   }
 
   async showDetails(sentPayload: any) {
-    console.log({ sentPayload })
+    console.log(sentPayload )
     const contractName = Object.entries(sentPayload).find(([key, value]) =>  key )
-    this.profile.displayName = `${contractName}`
     await this.call('tabs', 'focus', 'vyperCompilationDetails')
+    this.profile.displayName = `${contractName}`
+    this.renderComponent()
     this.payload = sentPayload
     this.renderComponent()
   }
@@ -74,12 +75,7 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   updateComponent(state: any) {
     return (
       <RemixUiVyperCompileDetails
-        // plugin={this}
-        // contractProperties={state.contractProperties}
-        // selectedContract={state.selectedContract}
-        // saveAs={state.saveAs}
-        // help={state.help}
-        // insertValue={state.insertValue}
+        payload={this.payload}
       />
     )
   }

apps/vyper/src/app/app.css

@@ -48,14 +48,6 @@ html, body, #root, main {
 
 }
 
-#compile-btn {
-
-}
-
-#compile-btn * {
-  width: 100%;
-}
-
 #result {
   flex: 1;
   display: flex;

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Fragment, useState } from 'react'
 import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils'
 import Button from 'react-bootstrap/Button'
 import _ from 'lodash'
@@ -46,25 +46,29 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
         setOutput(_contract.name, {status: 'failed', message: e.message})
         return
       }
-      // console.log({ output })
-      // const compileReturnType = () => {
-      //   const t: any = toStandardOutput(contract, output)
-      //   const temp = _.merge(t['contracts'][contract])
-      //   const normal = normalizeContractPath(contract)[2]
-      //   const abi = temp[normal]['abi']
-      //   const evm = _.merge(temp[normal]['evm'])
-      //   const dpb = evm.deployedBytecode
-      //   const runtimeBytecode = evm.bytecode
+      console.log({ output })
+      const compileReturnType = () => {
+        const t: any = toStandardOutput(contract, output)
+        console.log(t)
+        const temp = _.merge(t['contracts'][contract])
+        const normal = normalizeContractPath(contract)[2]
+        const abi = temp[normal]['abi']
+        const evm = _.merge(temp[normal]['evm'])
+        const dpb = evm.deployedBytecode
+        const runtimeBytecode = evm.bytecode
+        const methodIdentifiers = evm.methodIdentifiers
 
-      //   const result = {
-      //     contractName: normal,
-      //     abi: abi,
-      //     bytecode: dpb,
-      //     runtimeBytecode: runtimeBytecode,
-      //     ir: ''
-      //   }
-      //   return result
-      // }
+        const result = {
+          contractName: normal,
+          abi: abi,
+          bytecode: dpb,
+          runtimeBytecode: runtimeBytecode,
+          ir: '',
+          methodIdentifiers: methodIdentifiers
+        }
+        console.log(result)
+        return result
+      }
       // setOutput(_contract.name, compileReturnType())
 
       // ERROR
@@ -111,9 +115,9 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       })
       const data = toStandardOutput(_contract.name, output)
       remixClient.compilationFinish(_contract.name, _contract.content, data)
-      console.log(data)
-      setOutput(_contract.name, data)
-      setLoadingSpinnerState(false)
+      // console.log(data)
+      setOutput(_contract.name, compileReturnType())
+      // setLoadingSpinnerState(false)
       // remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
@@ -125,13 +129,15 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   }
 
   return (
-    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary w-100">
-      <div className="d-flex justify-content-center align-item-center">
-        {loadingSpinner ? <span className="fas fa-sync fa-pulse" role="status" aria-hidden="true" /> : null}
-        <span>Compile</span>
-        <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
-      </div>
-    </button>
+    <Fragment>
+      <button data-id="compile" onClick={compileContract} title={contract} className="btn btn-primary btn-block d-block w-100 text-break remixui_disabled mb-1 mt-3">
+        <div className="fa-1x">
+          {/* {loadingSpinner ? <span className="fas fa-sync fa-pulse" role="status" aria-hidden="true" /> : null} */}
+          <span>Compile</span>
+          <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
+        </div>
+      </button>
+    </Fragment>
   )
 }
 

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

@@ -53,7 +53,7 @@ function VyperResult({ output, plugin }: VyperResultProps) {
       </div>
     )
   }
-
+  console.log(output)
   return (
     <>
       <div className="border border-top"></div>

libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx

@@ -5,7 +5,6 @@ import { ContractPropertyName } from '@remix-ui/solidity-compiler'
 
 import React from 'react'
 import SolidityCompile from './components/solidityCompile'
-import VyperCompile from './components/vyperCompile'
 
 export interface RemixUiCompileDetailsProps {
   plugin?: any

libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx

@@ -1,12 +1,24 @@
 import React from 'react'
+import VyperCompile from './vyperCompile'
+//@ts-nocheck
 
-export function RemixUiVyperCompileDetails() {
+
+interface RemixUiVyperCompileDetailsProps {
+  payload: any
+}
+
+export function RemixUiVyperCompileDetails({ payload }: RemixUiVyperCompileDetailsProps) {
+  const dpayload = Object.values(payload) as any
 
   return (
     <>
-      <div>
-        <h1>Welcome to Vyper Compile Details Plugin!!</h1>
-      </div>
+      <VyperCompile
+        ir={dpayload[0].ir}
+        methodIdentifiers={dpayload[0].methodIdentifiers}
+        abi={dpayload[0].abi}
+        bytecode={dpayload[0].bytecode}
+        bytecodeRuntime={dpayload[0].bytecodeRuntime}
+      />
     </>
   )
 }

libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx

@@ -12,43 +12,43 @@ import { ABIDescription } from '@remixproject/plugin-api'
 const _paq = (window._paq = window._paq || [])
 
 export interface VyperCompilationResult {
-  status: 'success'
+  status?: 'success'
   bytecode: string
-  bytecode_runtime: string
+  bytecodeRuntime: string
   abi: ABIDescription[]
   ir: string
-  method_identifiers: {
+  methodIdentifiers: {
     [method: string]: string
   }
 }
 
 
-export default function VyperCompile({ saveAs, contractProperties, selectedContract }: any) {
+export default function VyperCompile(props: VyperCompilationResult) {
   const intl = useIntl()
-  const downloadFn = () => {
-    _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
-    saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`)
-  }
+  // const downloadFn = () => {
+  //   _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
+  //   saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`)
+  // }
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   const tabContent = [
     {
       tabHeadingText: 'ABI',
-      tabPayload: Object.values(contractProperties)[0]['abi'],
+      tabPayload: props.abi, //Object.values(props)[0]['abi'],
       tabMemberType: 'abi',
       tabButtonText: () => 'Copy ABI',
       eventKey: 'abi'
     },
     {
       tabHeadingText: 'Bytecode',
-      tabPayload: Object.values(contractProperties)[0]['bytecode'].object.toString(),
+      tabPayload: props.bytecode, //Object.values(props)[0]['bytecode'].object.toString(),
       tabMemberType: 'bytecode',
       tabButtonText: () => 'Copy Bytecode',
       eventKey: 'bytecode'
     },
     {
       tabHeadingText: 'Runtime Bytecode',
-      tabPayload: Object.values(contractProperties)[0]['runtimeBytecode'].object.toString(),
+      tabPayload: props.bytecodeRuntime,// Object.values(props)[0]['runtimeBytecode'].object.toString(),
       tabMemberType: 'bytecode_runtime',
       tabButtonText: () => 'Copy Runtime Bytecode',
       eventKey: 'bytecode_runtime'
@@ -63,28 +63,28 @@ export default function VyperCompile({ saveAs, contractProperties, selectedContr
   ]
   return (
     <>
-      <div className="d-flex justify-content-between align-items-center mr-1">
+      {/* <div className="d-flex justify-content-between align-items-center mr-1">
         <span className="lead">{selectedContract}</span>
         <CustomTooltip tooltipText={intl.formatMessage({id: 'solidity.compileDetails'})}>
           <span className="btn btn-outline-success border-success mr-1" onClick={downloadFn}>Download</span>
         </CustomTooltip>
-      </div>
+      </div> */}
       <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
         {tabContent.map((content, index) => (
           <Tab eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
-            <CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(contractProperties)[0]['abi'])}>
+            <CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(props)[0]['abi'])}>
               <Button variant="info" className="copy" data-id={content.eventKey === 'abi' ? "copy-abi" : ''}>
                 {content.tabButtonText()}
               </Button>
             </CopyToClipboard>
             {
-              content.eventKey === 'abi' ? <JSONTree src={content.tabPayload} theme={{} as any}/> : (
-                <textarea defaultValue={content.tabPayload}></textarea>
+              content.eventKey === 'abi' ? <JSONTree src={content.tabPayload as ABIDescription[]} theme={{} as any}/> : (
+                <textarea defaultValue={content.tabPayload as string}></textarea>
               )
             }
-            <Button>
+            {/* <Button>
               {content.tabButtonText()}
-            </Button>
+            </Button> */}
           </Tab>))}
       </Tabs>
     </>