clean up and plugin setup

apps/vyper/src/app/app.tsx

@@ -110,7 +110,7 @@ const App: React.FC = () => {
           {
             output && Object.keys(output).length > 0 ? (
               <>
-                <VyperResult output={output} />
+                <VyperResult output={output} plugin={remixClient} />
               </>
             ) : null
           }

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

@@ -10,6 +10,7 @@ import { VyperCompilationResult } from '../utils/types'
 
 interface VyperResultProps {
   output?: any
+  plugin?: any
 }
 
 export type ExampleContract = {
@@ -24,7 +25,7 @@ type TabContentMembers = {
   className: string
 }
 
-function VyperResult({ output }: VyperResultProps) {
+function VyperResult({ output, plugin }: VyperResultProps) {
   // const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
@@ -56,9 +57,9 @@ function VyperResult({ output }: VyperResultProps) {
   return (
     <>
       <div className="border border-top"></div>
-      <div>
+      <div className="d-flex justify-content-center px-2 w-100">
-        <button className="btn btn-secondary btn-block mx-2" onClick={() => {
+        <button className="btn btn-secondary w-100" onClick={async () => {
-
+          await plugin?.call('vyperCompilationDetails', 'showDetails', {})
         }}>
           <span>Compilation Details</span>
         </button>

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

@@ -1,6 +1,5 @@
 import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
 import axios from 'axios'
-import { VyperCompilationResultType, CompileFormat, ETHPM3Format, CompilerInformationObject } from './types'
 
 export interface Contract {
   name: string

libs/remix-ui/vyper-compile-details/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/vyper-compile-details'

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

@@ -1,3 +1,4 @@
+import React from 'react'
 
 export function RemixUiVyperCompileDetails() {