create vyper-compile-details plugin

apps/remix-ide/src/app.js

@@ -47,6 +47,7 @@ import {FileDecorator} from './app/plugins/file-decorator'
 import {CodeFormat} from './app/plugins/code-format'
 import {SolidityUmlGen} from './app/plugins/solidity-umlgen'
 import { CompilationDetailsPlugin } from './app/plugins/compile-details'
+import { VyperCompilationDetailsPlugin } from './app/plugins/vyper-compile-details'
 import {ContractFlattener} from './app/plugins/contractFlattener'
 import {OpenAIGpt} from './app/plugins/openaigpt'
 
@@ -187,7 +188,7 @@ class AppComponent {
 
     // ----------------- Compilation Details ----------------------------
     const compilationDetails = new CompilationDetailsPlugin(appManager)
-
+    const vyperCompilationDetails = new VyperCompilationDetailsPlugin(appManager)
     // ----------------- ContractFlattener ----------------------------
     const contractFlattener = new ContractFlattener()
 
@@ -314,6 +315,7 @@ class AppComponent {
       search,
       solidityumlgen,
       compilationDetails,
+      vyperCompilationDetails,
       contractFlattener,
       solidityScript,
       openaigpt,

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

@@ -0,0 +1,85 @@
+import React from 'react'
+import { ViewPlugin } from '@remixproject/engine-web'
+import {PluginViewWrapper} from '@remix-ui/helper'
+import { RemixAppManager } from '../../remixAppManager'
+import { RemixUiVyperCompileDetails } from '@remix-ui/vyper-compile-details'
+
+const _paq = (window._paq = window._paq || [])
+
+const profile = {
+  name: 'vyperCompilationDetails',
+  displayName: 'Vyper Compile Details',
+  description: 'Displays details from vyper compiler',
+  location: 'mainPanel',
+  methods: ['showDetails'],
+  events: []
+}
+
+export class VyperCompilationDetailsPlugin extends ViewPlugin {
+  dispatch: React.Dispatch<any> = () => {}
+  appManager: RemixAppManager
+  element: HTMLDivElement
+  payload: any
+  constructor(appManager: RemixAppManager) {
+    super(profile)
+    this.appManager = appManager
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'vypercompileDetails')
+    this.payload = {
+      contractProperties: {} as any,
+      selectedContract: '',
+      help: {} as any,
+      insertValue: {} as any,
+      saveAs: {} as any,
+    }
+  }
+
+  async onActivation() {
+    await this.call('tabs', 'focus', 'vyperCompilationDetails')
+    this.renderComponent()
+    _paq.push(['trackEvent', 'plugin', 'activated', 'vyperCompilationDetails'])
+  }
+
+  onDeactivation(): void {
+
+  }
+
+  async showDetails(sentPayload: any) {
+    console.log({ sentPayload })
+    await this.call('tabs', 'focus', 'vyperCompilationDetails')
+    this.payload = sentPayload
+    this.renderComponent()
+  }
+
+  setDispatch(dispatch: React.Dispatch<any>): void {
+    this.dispatch = dispatch
+  }
+  render() {
+    return (
+      <div id="compileDetails">
+        <PluginViewWrapper plugin={this} />
+      </div>
+    )
+  }
+
+  renderComponent() {
+    this.dispatch({
+      ...this,
+      ...this.payload
+    })
+  }
+
+  updateComponent(state: any) {
+    return (
+      <RemixUiVyperCompileDetails
+        // plugin={this}
+        // contractProperties={state.contractProperties}
+        // selectedContract={state.selectedContract}
+        // saveAs={state.saveAs}
+        // help={state.help}
+        // insertValue={state.insertValue}
+      />
+    )
+  }
+
+}

apps/remix-ide/src/remixAppManager.js

@@ -71,6 +71,7 @@ const requiredModules = [ // services + layout views + system views
   'codeFormatter',
   'solidityumlgen',
   'compilationDetails',
+  'vyperCompilationDetails',
   'contractflattener',
   'solidity-script',
   'openaigpt',
@@ -117,7 +118,8 @@ export function isNative(name) {
     'doc-gen',
     'doc-viewer',
     'circuit-compiler',
-    'compilationDetails'
+    'compilationDetails',
+    'vyperCompilationDetails'
   ]
   return nativePlugins.includes(name) || requiredModules.includes(name)
 }

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

@@ -0,0 +1,11 @@
+
+export function RemixUiVyperCompileDetails() {
+
+  return (
+    <>
+      <div>
+        <h1>Welcome to Vyper Compile Details Plugin!!</h1>
+      </div>
+    </>
+  )
+}

tsconfig.paths.json

@@ -156,6 +156,9 @@
             ],
             "@remixproject/walletconnect-plugin": [
                 "apps/walletconnect/src/index.ts"
+            ],
+            "@remixproject/vyper-compile-details": [
+                "apps/vyper-compile-details/src/index.ts"
             ]
         }
     }