From 6745f6242fbec52227698dcadfdfe3467e3b76a0 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Wed, 25 Oct 2023 14:25:23 +0200
Subject: [PATCH 01/75] vyper: use apewrx

---
 apps/vyper/src/app/app.tsx            |  4 +--
 apps/vyper/src/app/utils/compiler.tsx | 35 ++++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index aa4ab4093f..ebe9812988 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -31,7 +31,7 @@ const App: React.FC = () => {
   const [state, setState] = useState<AppState>({
     status: 'idle',
     environment: 'local',
-    localUrl: 'http://localhost:8000/compile'
+    localUrl: 'http://localhost:8000'
   })
 
   useEffect(() => {
@@ -61,7 +61,7 @@ const App: React.FC = () => {
   }
 
   function compilerUrl() {
-    return state.environment === 'remote' ? 'https://vyper.remixproject.org/compile' : state.localUrl
+    return state.environment === 'remote' ? 'https://vyper.remixproject.org' : state.localUrl
   }
 
   return (
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index d1312322c4..cecfe687d7 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -43,10 +43,16 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   if (extension !== 'vy') {
     throw new Error('Use extension .vy for Vyper.')
   }
-  const response = await fetch(url, {
+
+  const files = new FormData();
+  const content = new Blob([contract.content], {
+    type: 'text/plain'
+  });
+  files.append("file", content, 'contract.vy');
+  let response = await fetch(url + '/compile', {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({code: contract.content})
+    body: files
   })
 
   if (response.status === 404) {
@@ -55,7 +61,30 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   /*if (response.status === 400) {
     throw new Error(`Vyper compilation failed: ${response.statusText}`)
   }*/
-  return response.json()
+
+  const initCallResult = await response.json()
+
+  let apiCallFinished = false
+  while (!apiCallFinished) {
+    response = await fetch(url + '/status/' + initCallResult.id , {
+      method: 'Get'
+    })
+    const res = await response.json()
+    if (res.status === 'SUCCESS') {
+      response = await fetch(url + '/compiled_artifact/' + initCallResult.id , {
+        method: 'Get'
+      })
+      apiCallFinished = true
+      return response.json()
+    } else if (res.status === 'FAILED') {
+      response = await fetch(url + '/exceptions/' + initCallResult.id , {
+        method: 'Get'
+      })
+      apiCallFinished = true
+      return response.json()
+    }
+    await new Promise((resolve) => setTimeout(() => resolve({}), 2000))
+  }
 }
 
 /**

From ceaf37ec4ad9b16932763ddc86bd8d0cfaf57b7e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 2 Nov 2023 16:44:47 +0100
Subject: [PATCH 02/75] fixes to compile function

---
 apps/vyper/src/app/utils/compiler.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index cecfe687d7..7df3e21dda 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -36,6 +36,7 @@ export function isCompilationError(output: VyperCompilationOutput): output is Vy
  * @param contract The name and content of the contract
  */
 export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
+  console.log('vyper reloaded!')
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -43,12 +44,16 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   if (extension !== 'vy') {
     throw new Error('Use extension .vy for Vyper.')
   }
+  const data = new URLSearchParams()
+  data.append('files', contract.content)
 
   const files = new FormData();
   const content = new Blob([contract.content], {
     type: 'text/plain'
   });
-  files.append("file", content, 'contract.vy');
+  files.append("files", content, 'contract.vy')
+  files.append('vyper_version', '0.3.10')
+  console.log({ files, contract, content, url })
   let response = await fetch(url + '/compile', {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},

From 4476180f8094893a4e19c4f46162e07a4386e89d Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 3 Nov 2023 14:34:38 +0100
Subject: [PATCH 03/75] tracking

---
 apps/vyper/src/app/utils/compiler.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 7df3e21dda..3e12445363 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -44,14 +44,12 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   if (extension !== 'vy') {
     throw new Error('Use extension .vy for Vyper.')
   }
-  const data = new URLSearchParams()
-  data.append('files', contract.content)
 
   const files = new FormData();
   const content = new Blob([contract.content], {
     type: 'text/plain'
   });
-  files.append("files", content, 'contract.vy')
+  files.append("files", content, `${contract.name}.vy`)
   files.append('vyper_version', '0.3.10')
   console.log({ files, contract, content, url })
   let response = await fetch(url + '/compile', {
@@ -59,7 +57,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
     headers: {'Content-Type': 'application/json'},
     body: files
   })
-
+  console.log('compile done...')
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
   }

From 5ca7e51c78d7afdb95f921877f98938ae5c29131 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 3 Nov 2023 15:57:26 +0100
Subject: [PATCH 04/75] trying to change mime type of Blob

---
 apps/vyper/src/app/utils/compiler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 3e12445363..f9b2ae27eb 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -47,7 +47,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
 
   const files = new FormData();
   const content = new Blob([contract.content], {
-    type: 'text/plain'
+    type: 'text/python'
   });
   files.append("files", content, `${contract.name}.vy`)
   files.append('vyper_version', '0.3.10')

From ab04a43ee56f42188784a3002c4da9d73fb7d89f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 7 Nov 2023 13:06:30 +0100
Subject: [PATCH 05/75] change mime type to vy

---
 apps/vyper/src/app/utils/compiler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index f9b2ae27eb..2331527cc1 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -47,7 +47,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
 
   const files = new FormData();
   const content = new Blob([contract.content], {
-    type: 'text/python'
+    type: 'text/vy'
   });
   files.append("files", content, `${contract.name}.vy`)
   files.append('vyper_version', '0.3.10')

From 5f85c2ba9544814af6ece347f2e5f91ca48e5cbf Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 7 Nov 2023 23:00:14 +0100
Subject: [PATCH 06/75] fix compile function. remove while loop

---
 apps/vyper/src/app/utils/compiler.tsx | 72 +++++++++++++--------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 2331527cc1..89ded0eedc 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -1,4 +1,5 @@
 import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
+import axios from 'axios'
 
 export interface Contract {
   name: string
@@ -30,13 +31,25 @@ export function isCompilationError(output: VyperCompilationOutput): output is Vy
   return output.status === 'failed'
 }
 
+export function normalizeContractPath(contractPath: string): string[] {
+  const paths = contractPath.split('/')
+  const filename = paths[paths.length - 1].split('.')[0]
+  let folders = ''
+  for (let i = 0; i < paths.length - 1; i++) {
+    if(i !== paths.length -1) {
+      folders += `${paths[i]}/`
+    }
+  }
+  const resultingPath = `${folders}${filename}`
+  return [folders,resultingPath, filename]
+}
+
 /**
  * Compile the a contract
  * @param url The url of the compiler
  * @param contract The name and content of the contract
  */
-export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
-  console.log('vyper reloaded!')
+export async function compile(url: string, contract: Contract): Promise<any> {
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -47,47 +60,34 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
 
   const files = new FormData();
   const content = new Blob([contract.content], {
-    type: 'text/vy'
+    type: 'text/plain'
   });
-  files.append("files", content, `${contract.name}.vy`)
-  files.append('vyper_version', '0.3.10')
-  console.log({ files, contract, content, url })
-  let response = await fetch(url + '/compile', {
-    method: 'POST',
-    headers: {'Content-Type': 'application/json'},
-    body: files
-  })
-  console.log('compile done...')
-  if (response.status === 404) {
+  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}".`)
   }
-  /*if (response.status === 400) {
+  if (response.data.status === 400) {
     throw new Error(`Vyper compilation failed: ${response.statusText}`)
-  }*/
+  }
 
-  const initCallResult = await response.json()
 
-  let apiCallFinished = false
-  while (!apiCallFinished) {
-    response = await fetch(url + '/status/' + initCallResult.id , {
-      method: 'Get'
-    })
-    const res = await response.json()
-    if (res.status === 'SUCCESS') {
-      response = await fetch(url + '/compiled_artifact/' + initCallResult.id , {
-        method: 'Get'
-      })
-      apiCallFinished = true
-      return response.json()
-    } else if (res.status === 'FAILED') {
-      response = await fetch(url + '/exceptions/' + initCallResult.id , {
-        method: 'Get'
-      })
-      apiCallFinished = true
-      return response.json()
-    }
-    await new Promise((resolve) => setTimeout(() => resolve({}), 2000))
+  // let apiCallFinished = false
+  const statusResponse = await axios.get(`${url}/status/${response.data}`)
+  let responsePayload = {}
+  if (statusResponse.data !== 'SUCCESS' && statusResponse.data !== 'FAILED') {
+    const errorResponse = await axios.get(`${url}/exceptions/${response.data}`)
+    responsePayload = errorResponse.data
+    return responsePayload
   }
+
+  const resultResponse = await axios.get(`${url}/compiled_artifact/${response.data}`)
+  console.log({ resultResponse })
+  return resultResponse.data
 }
 
 /**

From 18214c79b16a7580cbfea3afed32e6984a2245c8 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 8 Nov 2023 14:43:06 +0100
Subject: [PATCH 07/75] fix types on compile function

---
 apps/vyper/src/app/utils/compiler.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 89ded0eedc..51f83f1097 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -49,7 +49,7 @@ export function normalizeContractPath(contractPath: string): string[] {
  * @param url The url of the compiler
  * @param contract The name and content of the contract
  */
-export async function compile(url: string, contract: Contract): Promise<any> {
+export async function compile(url: string, contract: Contract): Promise<any | VyperCompilationOutput> {
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -75,8 +75,6 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     throw new Error(`Vyper compilation failed: ${response.statusText}`)
   }
 
-
-  // let apiCallFinished = false
   const statusResponse = await axios.get(`${url}/status/${response.data}`)
   let responsePayload = {}
   if (statusResponse.data !== 'SUCCESS' && statusResponse.data !== 'FAILED') {

From 1261f25f592ba39619f867073522ad5758998a7f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 8 Nov 2023 17:25:17 +0100
Subject: [PATCH 08/75] more changes to json react component

---
 apps/vyper/src/app/app.tsx                       | 10 ++++++++--
 apps/vyper/src/app/components/CompilerButton.tsx |  5 ++++-
 apps/vyper/src/app/components/VyperResult.tsx    |  9 +++++++--
 apps/vyper/src/app/utils/compiler.tsx            |  9 ++++++---
 package.json                                     |  1 +
 yarn.lock                                        |  5 +++++
 6 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index ebe9812988..73850794cf 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/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>
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 9cb3ac630a..b85a356337 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/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
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 016271805b..d209246483 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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}>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 51f83f1097..2bb0aaffaa 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/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: {
diff --git a/package.json b/package.json
index 3ad91b7184..f934d2eb4d 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index e75886fbe1..6df878e4b2 100644
--- a/yarn.lock
+++ b/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"

From 5434ebee72cda7928a32b85ab6853ece1641f6da Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 11 Nov 2023 09:52:22 +0100
Subject: [PATCH 09/75] mapping compile results

---
 apps/vyper/src/app/utils/compiler.tsx | 46 +++++++++------
 apps/vyper/src/app/utils/types.ts     | 85 +++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 19 deletions(-)
 create mode 100644 apps/vyper/src/app/utils/types.ts

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 2bb0aaffaa..e846ac2bfe 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -49,7 +49,8 @@ export function normalizeContractPath(contractPath: string): string[] {
  * @param url The url of the compiler
  * @param contract The name and content of the contract
  */
-export async function compile(url: string, contract: Contract): Promise<any | VyperCompilationOutput> {
+export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
+
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -62,28 +63,40 @@ export async function compile(url: string, contract: Contract): Promise<any | Vy
   const content = new Blob([contract.content], {
     type: 'text/plain'
   });
+
   const nameResult = normalizeContractPath(contract.name)
   files.append('files', content, `${nameResult[2]}.vy`)
-  const response = await axios.post(url + '/compile?vyper_version=0.2.16', files)
+  const response = await axios.post(url + '/compile?vyper_version=0.3.10', files)
 
-  if (response.data.status === 404) {
+  if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
   }
-  if (response.data.status === 400) {
+  if (response.status === 400) {
     throw new Error(`Vyper compilation failed: ${response.statusText}`)
   }
 
-  const statusResponse = await axios.get(`${url}/status/${response.data}`)
-  let responsePayload = {}
-  if (statusResponse.data !== 'SUCCESS' && statusResponse.data !== 'FAILED') {
-    const errorResponse = await axios.get(`${url}/exceptions/${response.data}`)
-    responsePayload = errorResponse.data
-    return responsePayload
+  const compileCode = response.data
+  let result: any
+
+  const status = await (await axios.get(url + '/status/' + compileCode , {
+    method: 'Get'
+  })).data
+
+  if (status === 'SUCCESS') {
+    result = await(await axios.get(url + '/compiled_artifact/' + compileCode , {
+      method: 'Get'
+    })).data
+    console.log({ result })
+    return result.data
+  } else if (status === 'FAILED') {
+    result = await(await axios.get(url + '/exceptions/' + compileCode , {
+      method: 'Get'
+    })).data
+    return result.data
   }
+  console.log({ result })
+  await new Promise((resolve) => setTimeout(() => resolve({}), 2000))
 
-  const resultResponse = await axios.get(`${url}/compiled_artifact/${response.data}`)
-  console.log({ resultResponse })
-  return resultResponse.data
 }
 
 /**
@@ -91,13 +104,8 @@ 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 | any): CompilationResult {
+export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResult): 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: {
diff --git a/apps/vyper/src/app/utils/types.ts b/apps/vyper/src/app/utils/types.ts
new file mode 100644
index 0000000000..269a6dae64
--- /dev/null
+++ b/apps/vyper/src/app/utils/types.ts
@@ -0,0 +1,85 @@
+import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
+
+export interface VyperCompilationResult {
+  status: 'success'
+  bytecode: string
+  bytecode_runtime: string
+  abi: ABIDescription[]
+  ir: string
+  method_identifiers: {
+    [method: string]: string
+  }
+}
+
+export interface VyperCompilationError {
+  status: 'failed'
+  column?: number
+  line?: number
+  message: string
+}
+
+
+export type VyperCompilationResultType = {
+  buildDependencies: any
+  compilers: [
+    contractTypes: [],
+    name: string,
+    settings: {
+      optimize: boolean
+      outputSelection: {
+        ['fileName']: {
+          ['contractName']: string[]
+        }
+      }
+      version: string
+    }
+  ]
+  contractTypes: {
+    ['fileName']: {
+      abi: any[]
+      ast: {
+        name: string,
+        children: any[]
+        classification: number
+        col_offset: number
+        end_col_offset: number
+        end_lineno: number
+        lineno: number
+        src: {
+          length: number
+          jump_code: string
+        }
+      }
+      contractName: string
+      deploymentBytecode: {
+        bytecode: string
+      }
+      dev_messages: any
+      devdoc: {
+        methods: any
+      }
+      pcmap: any
+      runtimeBytecode: {
+        bytecode: string
+      }
+      sourceId: string
+      sourcemap: string
+      userdoc: {
+        methods: any
+      }
+    }
+  }
+  deployments: any
+  manifest: string
+  meta: any
+  sources: {
+    ['fileName'] : {
+      checksum: any
+      content: string
+      imports: string[]
+      references: []
+      urls: []
+    }
+  }
+
+}

From e748a32e181669621046f9f4a0385bec0c7498bd Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 11 Nov 2023 09:52:40 +0100
Subject: [PATCH 10/75] fixes for compile result mapping

---
 apps/vyper/src/app/components/CompilerButton.tsx |  2 ++
 apps/vyper/src/app/components/VyperResult.tsx    |  3 ++-
 apps/vyper/src/app/utils/compiler.tsx            | 15 +++++++++------
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index b85a356337..057323882f 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -36,7 +36,9 @@ function CompilerButton({contract, setOutput, compilerUrl, setCompilerResponse}:
       })
       let output
       try {
+        console.log('calling comile endpoint now')
         output = await compile(compilerUrl, _contract)
+        console.log('output from compile endpoint', {output})
       } catch (e: any) {
         setOutput(_contract.name, {status: 'failed', message: e.message})
         return
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index d209246483..e6ad250d79 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -1,11 +1,12 @@
 import React, {useState} from 'react'
-import {VyperCompilationResult, VyperCompilationOutput, isCompilationError} from '../utils'
+import {VyperCompilationOutput, isCompilationError} from '../utils'
 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'
+import { VyperCompilationResult } from '../utils/types'
 
 interface VyperResultProps {
   output?: VyperCompilationOutput
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index e846ac2bfe..8b7c39bc73 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -1,5 +1,6 @@
 import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
 import axios from 'axios'
+import { VyperCompilationResultType } from './types'
 
 export interface Contract {
   name: string
@@ -50,7 +51,7 @@ export function normalizeContractPath(contractPath: string): string[] {
  * @param contract The name and content of the contract
  */
 export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
-
+  console.log('responding to call to comile')
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -87,11 +88,13 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
       method: 'Get'
     })).data
     console.log({ result })
-    return result.data
-  } else if (status === 'FAILED') {
+    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 })
@@ -104,9 +107,9 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
  * @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: VyperCompilationResultType): CompilationResult {
   const contractName = fileName.split('/').slice(-1)[0].split('.')[0]
-  const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
+  //const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
   return {
     sources: {
       [fileName]: {
@@ -133,7 +136,7 @@ export function toStandardOutput(fileName: string, compilationResult: VyperCompi
               object: compilationResult['bytecode_runtime'].replace('0x', ''),
               opcodes: ''
             },
-            methodIdentifiers: methodIdentifiers
+            // methodIdentifiers: methodIdentifiers
           }
         }
       } as any

From cca2242fe9b2d0df5040844e910e93ecca8e79a1 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 11 Nov 2023 13:20:36 +0100
Subject: [PATCH 11/75] cleanup console logs

---
 apps/vyper/src/app/components/CompilerButton.tsx |  2 --
 apps/vyper/src/app/utils/compiler.tsx            | 14 ++++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 057323882f..b85a356337 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -36,9 +36,7 @@ function CompilerButton({contract, setOutput, compilerUrl, setCompilerResponse}:
       })
       let output
       try {
-        console.log('calling comile endpoint now')
         output = await compile(compilerUrl, _contract)
-        console.log('output from compile endpoint', {output})
       } catch (e: any) {
         setOutput(_contract.name, {status: 'failed', message: e.message})
         return
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 8b7c39bc73..e131b52e27 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -51,7 +51,6 @@ export function normalizeContractPath(contractPath: string): string[] {
  * @param contract The name and content of the contract
  */
 export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
-  console.log('responding to call to comile')
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -87,7 +86,6 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
     result = await(await axios.get(url + '/compiled_artifact/' + compileCode , {
       method: 'Get'
     })).data
-    console.log({ result })
     return result
   } else if (status === 'PENDING' || status === 'FAILED') {
     console.log('pending or failed state encountered')
@@ -109,12 +107,16 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
  */
 export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResultType): CompilationResult {
   const contractName = fileName.split('/').slice(-1)[0].split('.')[0]
+  const compiledAbi = compilationResult['contractTypes'][contractName].abi
+  const deployedBytecode = compilationResult['contractTypes'][contractName].deploymentBytecode.bytecode.replace('0x', '')
+  const bytecode = compilationResult['contractTypes'][contractName].runtimeBytecode.bytecode.replace('0x', '')
+  const compiledAst = compilationResult['contractTypes'][contractName].abi
   //const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
   return {
     sources: {
       [fileName]: {
         id: 1,
-        ast: {} as any,
+        ast: compiledAst,//{} as any,
         legacyAST: {} as any
       }
     },
@@ -124,16 +126,16 @@ export function toStandardOutput(fileName: string, compilationResult: VyperCompi
         [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: compilationResult['abi'],
+          abi: compiledAbi,
           evm: {
             bytecode: {
               linkReferences: {},
-              object: compilationResult['bytecode'].replace('0x', ''),
+              object: deployedBytecode,
               opcodes: ''
             },
             deployedBytecode: {
               linkReferences: {},
-              object: compilationResult['bytecode_runtime'].replace('0x', ''),
+              object: bytecode,
               opcodes: ''
             },
             // methodIdentifiers: methodIdentifiers

From 5bb96b4369324df5b85f6ce5b1b2ec02ee69452b Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 11 Nov 2023 22:46:42 +0100
Subject: [PATCH 12/75] fix remaining issues

---
 apps/vyper/src/app/app.tsx                    | 55 +++++++++++++++++--
 .../src/app/components/CompilerButton.tsx     |  5 +-
 apps/vyper/src/app/components/VyperResult.tsx |  9 +--
 apps/vyper/src/app/utils/compiler.tsx         |  6 +-
 package.json                                  |  1 -
 yarn.lock                                     |  5 --
 6 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 73850794cf..dc925a8756 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/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>
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index b85a356337..49ef98bec6 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/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)) {
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index e6ad250d79..6ba82c4ce4 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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}>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index e131b52e27..8db1f0c12a 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/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
       }
     },
diff --git a/package.json b/package.json
index f934d2eb4d..3ad91b7184 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 6df878e4b2..e75886fbe1 100644
--- a/yarn.lock
+++ b/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"

From 215329f69be0c088878403da62a3d32201cac81c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 14 Nov 2023 22:52:38 +0300
Subject: [PATCH 13/75] changes to talk to hetzner

---
 apps/vyper/src/app/app.tsx            | 4 ++--
 apps/vyper/src/app/utils/compiler.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index dc925a8756..fe1fa98421 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -109,7 +109,7 @@ const App: React.FC = () => {
   }
 
   function compilerUrl() {
-    return state.environment === 'remote' ? 'https://vyper.remixproject.org' : state.localUrl
+    return state.environment === 'remote' ? 'https://vyper2.remixproject.org/' : state.localUrl
   }
 
   return (
@@ -131,7 +131,7 @@ const App: React.FC = () => {
         </div>
         <ToggleButtonGroup name="remote" onChange={setEnvironment} type="radio" value={state.environment}>
           <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">
-            Remote Compiler v0.2.16
+            Remote Compiler v0.3.10
           </ToggleButton>
           <ToggleButton data-id="local-compiler" variant="secondary" name="local" value="local">
             Local Compiler
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 8db1f0c12a..fdfdd1b34f 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -66,7 +66,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
 
   const nameResult = normalizeContractPath(contract.name)
   files.append('files', content, `${nameResult[2]}.vy`)
-  const response = await axios.post(url + '/compile?vyper_version=0.3.10', files)
+  const response = await axios.post(url + 'compile?vyper_version=0.3.10', files)
 
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)

From 5632b328de571cd0f1924bc3bc8643579c877405 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 15 Nov 2023 10:10:32 +0300
Subject: [PATCH 14/75] fix vyper test init with right url for e2e

---
 apps/remix-ide-e2e/src/tests/vyper_api.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 817b65cd14..90cf953c64 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -9,7 +9,7 @@ declare global {
 module.exports = {
   '@disabled': true,
   before: function (browser: NightwatchBrowser, done: VoidFunction) {
-    init(browser, done)
+    init(browser, done, 'http://localhost:8080')
   },
 
   'Should connect to vyper plugin #group1': function (browser: NightwatchBrowser) {
@@ -60,7 +60,7 @@ module.exports = {
           browser.assert.ok(okVisible.value === true, 'ABI should be visible')
         }
       })
-      
+
 
   },
 
@@ -136,4 +136,4 @@ def _createPokemon(_name: String[32], _dna: uint256, _HP: uint256):
         matches: 0,
         wins: 0
     })
-    self.totalPokemonCount += 1`
\ No newline at end of file
+    self.totalPokemonCount += 1`

From 7d9a52d5bfaede1486fd43ad4f28cd7d68fb3399 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 15 Nov 2023 10:34:27 +0300
Subject: [PATCH 15/75] change address to 127.

---
 apps/remix-ide-e2e/src/tests/vyper_api.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 90cf953c64..e641af04be 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -9,7 +9,7 @@ declare global {
 module.exports = {
   '@disabled': true,
   before: function (browser: NightwatchBrowser, done: VoidFunction) {
-    init(browser, done, 'http://localhost:8080')
+    init(browser, done, 'http://127.0.0.1:8080')
   },
 
   'Should connect to vyper plugin #group1': function (browser: NightwatchBrowser) {

From 1a93e0c848127a87ed3716988cb0413b4bac0538 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 15 Nov 2023 14:30:45 +0300
Subject: [PATCH 16/75] flaky

---
 .circleci/config.yml                           | 2 +-
 apps/remix-ide-e2e/src/tests/vyper_api.test.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7f101ed684..528e9484e4 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: false
+    default: true
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
 jobs:
diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index e641af04be..3c29526ea1 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -9,10 +9,10 @@ declare global {
 module.exports = {
   '@disabled': true,
   before: function (browser: NightwatchBrowser, done: VoidFunction) {
-    init(browser, done, 'http://127.0.0.1:8080')
+    init(browser, done, 'http://localhost:8080')
   },
 
-  'Should connect to vyper plugin #group1': function (browser: NightwatchBrowser) {
+  'Should connect to vyper plugin #group1 #flaky': function (browser: NightwatchBrowser) {
     browser.clickLaunchIcon('pluginManager')
       .scrollAndClick('[data-id="pluginManagerComponentActivateButtonvyper"]')
       .clickLaunchIcon('vyper')

From f60f105b7b6f05faa8be1bbcd24a3a6b4dd65b75 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 15 Nov 2023 14:34:25 +0300
Subject: [PATCH 17/75] update version test script

---
 apps/remix-ide-e2e/src/tests/vyper_api.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 3c29526ea1..7e81c68885 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -105,7 +105,6 @@ module.exports = {
 }
 
 const testContract = `
-# @version >=0.2.4 <0.3.0
 
 DNA_DIGITS: constant(uint256) = 16
 DNA_MODULUS: constant(uint256) = 10 ** DNA_DIGITS

From c261f04c4bcbbc40437f2a917b6f369857b409a2 Mon Sep 17 00:00:00 2001
From: bunsenstraat <filip.mertens@ethereum.org>
Date: Wed, 15 Nov 2023 14:53:26 +0300
Subject: [PATCH 18/75] find button

---
 apps/remix-ide-e2e/src/commands/createContract.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/commands/createContract.ts b/apps/remix-ide-e2e/src/commands/createContract.ts
index 046f747c83..efc874108e 100644
--- a/apps/remix-ide-e2e/src/commands/createContract.ts
+++ b/apps/remix-ide-e2e/src/commands/createContract.ts
@@ -16,7 +16,9 @@ class CreateContract extends EventEmitter {
 function createContract (browser: NightwatchBrowser, inputParams: string, callback: VoidFunction) {
   if (inputParams) {
     browser.setValue('.udapp_contractActionsContainerSingle > input', inputParams, function () {
-      browser.click('.udapp_contractActionsContainerSingle > div').pause(500).perform(function () { callback() })
+      browser
+        .waitForElementVisible('.udapp_contractActionsContainerSingle > div')
+        .click('.udapp_contractActionsContainerSingle > div').pause(500).perform(function () { callback() })
     })
   } else {
     browser

From bf81cf3dbc9214efb8561e5f87b430631bd68d10 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 15 Nov 2023 14:38:01 +0300
Subject: [PATCH 19/75] fix abi display in vyper ui

---
 apps/vyper/src/app/app.tsx                    | 46 -------------------
 apps/vyper/src/app/components/VyperResult.tsx |  3 +-
 2 files changed, 1 insertion(+), 48 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index fe1fa98421..aad3dd429f 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -53,52 +53,6 @@ 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})
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 6ba82c4ce4..c2b942a818 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -54,8 +54,7 @@ function VyperResult({ output }: VyperResultProps) {
             Copy ABI
           </Button>
         </CopyToClipboard>
-        {/* <JSONTree src={output.abi} /> */}
-        <ReactJson src={output.abi} />
+        <JSONTree src={output.abi} />
       </Tab>
       <Tab eventKey="bytecode" title="Bytecode">
         <CopyToClipboard getContent={() => output.bytecode}>

From ae91d82a78d98a33b5cecb14526f094d2529ebc0 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 15 Nov 2023 14:58:53 +0300
Subject: [PATCH 20/75] fix urls

---
 apps/vyper/src/app/app.tsx            | 5 ++---
 apps/vyper/src/app/utils/compiler.tsx | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index aad3dd429f..7d09e10d9d 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -32,7 +32,7 @@ const App: React.FC = () => {
   const [state, setState] = useState<AppState>({
     status: 'idle',
     environment: 'local',
-    localUrl: 'http://localhost:8000'
+    localUrl: 'http://localhost:8000/'
   })
   const [compilerResponse, setCompilerResponse] = useState<any>({})
 
@@ -101,8 +101,7 @@ const App: React.FC = () => {
           />
         </div>
         <article id="result" className="px-2">
-          {/* <VyperResult output={contract ? output[contract] : undefined} contractName={contract} /> */}
-          <VyperResult output={contract ? output : undefined} />
+          <VyperResult output={contract ? output[contract] : undefined} />
         </article>
       </section>
     </main>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index fdfdd1b34f..47d6b7e544 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -78,17 +78,17 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   const compileCode = response.data
   let result: any
 
-  const status = await (await axios.get(url + '/status/' + compileCode , {
+  const status = await (await axios.get(url + 'status/' + compileCode , {
     method: 'Get'
   })).data
 
   if (status === 'SUCCESS') {
-    result = await(await axios.get(url + '/compiled_artifact/' + compileCode , {
+    result = await(await axios.get(url + 'compiled_artifact/' + compileCode , {
       method: 'Get'
     })).data
     return result
   } else if (status === 'PENDING' || status === 'FAILED') {
-    result = await(await axios.get(url + '/exceptions/' + compileCode , {
+    result = await(await axios.get(url + 'exceptions/' + compileCode , {
       method: 'Get'
     })).data
     return result.data

From 218b69709dcc3b3434686e79973c31bfde5fd60b Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 16 Nov 2023 02:49:59 +0300
Subject: [PATCH 21/75] fix abi and bytecode copy and presentation

---
 apps/vyper/src/app/app.tsx                    |  8 +++---
 .../src/app/components/CompilerButton.tsx     | 28 ++++++++++++++++---
 apps/vyper/src/app/components/VyperResult.tsx | 27 +++++++++---------
 apps/vyper/src/app/utils/compiler.tsx         |  4 ++-
 apps/vyper/src/app/utils/remix-client.tsx     |  8 ++++++
 5 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 7d09e10d9d..343c1ea98b 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 
-import {VyperCompilationOutput, remixClient, toStandardOutput} from './utils'
+import {VyperCompilationOutput, normalizeContractPath, remixClient, toStandardOutput} from './utils'
 import {CompilationResult} from '@remixproject/plugin-api'
 
 // Components
@@ -13,7 +13,6 @@ 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'
@@ -34,7 +33,7 @@ const App: React.FC = () => {
     environment: 'local',
     localUrl: 'http://localhost:8000/'
   })
-  const [compilerResponse, setCompilerResponse] = useState<any>({})
+
 
   useEffect(() => {
     async function start() {
@@ -100,8 +99,9 @@ const App: React.FC = () => {
             setOutput={(name, update) => setOutput({...output, [name]: update})}
           />
         </div>
+
         <article id="result" className="px-2">
-          <VyperResult output={contract ? output[contract] : undefined} />
+          {Object.keys(output).length > 0 ? <VyperResult output={ output} themeColor={remixClient.checkActiveTheme()} /> : null}
         </article>
       </section>
     </main>
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 49ef98bec6..90ebda1a05 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
-import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient} from '../utils'
+import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils'
 import Button from 'react-bootstrap/Button'
+import _ from 'lodash'
+import { runtime } from 'webpack'
 
 interface Props {
   compilerUrl: string
   contract?: string
-  setOutput: (name: string, output: VyperCompilationOutput) => void
+  setOutput: (name: string, output: any) => void
 }
 
 function CompilerButton({contract, setOutput, compilerUrl}: Props) {
@@ -40,8 +42,26 @@ function CompilerButton({contract, setOutput, compilerUrl}: Props) {
         setOutput(_contract.name, {status: 'failed', message: e.message})
         return
       }
-      setOutput(_contract.name, output)
-      // setCompilerResponse(output)
+      const compileReturnType = () => {
+        const t: any = toStandardOutput(contract, output)
+        const temp = _.merge(t['contracts'][contract])
+        const normal = normalizeContractPath(contract)[2]
+        console.log(normal)
+        const abi = temp[normal]['abi']
+        const evm = _.merge(temp[normal]['evm'])
+        const dpb = evm.deployedBytecode
+        const runtimeBytecode = evm.bytecode
+
+        const result = {
+          contractName: normal,
+          abi: abi,
+          bytecode: dpb,
+          runtimeBytecode: runtimeBytecode,
+          ir: ''
+        }
+        return result
+      }
+      setOutput(_contract.name, compileReturnType())
 
       // ERROR
       if (isCompilationError(output)) {
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index c2b942a818..94544de273 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -3,13 +3,14 @@ import {VyperCompilationOutput, isCompilationError} from '../utils'
 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 JSONTree, { ThemeKeys } from 'react-json-view'
 import ReactJson from 'react-json-view'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import { VyperCompilationResult } from '../utils/types'
 
 interface VyperResultProps {
-  output?: VyperCompilationOutput
+  output?: any
+  themeColor?: string
 }
 
 export type ExampleContract = {
@@ -17,7 +18,7 @@ export type ExampleContract = {
   address: string
 }
 
-function VyperResult({ output }: VyperResultProps) {
+function VyperResult({ output, themeColor }: VyperResultProps) {
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
@@ -49,36 +50,36 @@ function VyperResult({ output }: VyperResultProps) {
   return (
     <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
       <Tab eventKey="abi" title="ABI">
-        <CopyToClipboard getContent={() => JSON.stringify(output.abi)}>
+        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['abi'])}>
           <Button variant="info" className="copy" data-id="copy-abi">
             Copy ABI
           </Button>
         </CopyToClipboard>
-        <JSONTree src={output.abi} />
+        <JSONTree src={Object.values(output)[0]['abi']} theme={themeColor as any}/>
       </Tab>
       <Tab eventKey="bytecode" title="Bytecode">
-        <CopyToClipboard getContent={() => output.bytecode}>
+        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['bytecode'].object.toString())}>
           <Button variant="info" className="copy">
             Copy Bytecode
           </Button>
         </CopyToClipboard>
-        <textarea defaultValue={output.bytecode}></textarea>
+        <textarea defaultValue={Object.values(output)[0]['bytecode'].object.toString()}></textarea>
       </Tab>
       <Tab eventKey="bytecode_runtime" title="Runtime Bytecode">
-        <CopyToClipboard getContent={() => output.bytecode_runtime}>
+        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['runtimeBytecode'].object.toString())}>
           <Button variant="info" className="copy">
             Copy Runtime Bytecode
           </Button>
         </CopyToClipboard>
-        <textarea defaultValue={output.bytecode_runtime}></textarea>
+        <textarea defaultValue={Object.values(output)[0]['runtimeBytecode'].object.toString()}></textarea>
       </Tab>
       <Tab eventKey="ir" title="LLL">
-        <CopyToClipboard getContent={() => output.ir}>
-          <Button variant="info" className="copy">
-            Copy LLL Code
+        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['ir'])}>
+          <Button disabled={Object.values(output)[0]['ir'].length <= 1} variant="info" className="copy">
+            {Object.values(output)[0]['ir'].length > 1 ? 'Copy LLL Code' : 'Nothing to copy yet'}
           </Button>
         </CopyToClipboard>
-        <textarea defaultValue={output.ir}></textarea>
+        <textarea defaultValue={Object.values(output)[0]['ir'].toString()}></textarea>
       </Tab>
     </Tabs>
   )
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 47d6b7e544..4dfd11f0ac 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -10,6 +10,7 @@ export interface Contract {
 export interface VyperCompilationResult {
   status: 'success'
   bytecode: string
+  contractName?: string
   bytecode_runtime: string
   abi: ABIDescription[]
   ir: string
@@ -102,7 +103,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
  * @param compilationResult Result returned by the compiler
  */
 export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResultType): CompilationResult {
-  const contractName = fileName.split('/').slice(-1)[0].split('.')[0]
+  const contractName = normalizeContractPath(fileName)[2]
   const compiledAbi = compilationResult['contractTypes'][contractName].abi
   const deployedBytecode = compilationResult['contractTypes'][contractName].deploymentBytecode.bytecode.replace('0x', '')
   const bytecode = compilationResult['contractTypes'][contractName].runtimeBytecode.bytecode.replace('0x', '')
@@ -123,6 +124,7 @@ export function toStandardOutput(fileName: string, compilationResult: VyperCompi
           // 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,
+          contractName: contractName,
           evm: {
             bytecode: {
               linkReferences: {},
diff --git a/apps/vyper/src/app/utils/remix-client.tsx b/apps/vyper/src/app/utils/remix-client.tsx
index b9f94320f5..74cb87d2c6 100644
--- a/apps/vyper/src/app/utils/remix-client.tsx
+++ b/apps/vyper/src/app/utils/remix-client.tsx
@@ -4,6 +4,7 @@ import {createClient} from '@remixproject/plugin-webview'
 import {PluginClient} from '@remixproject/plugin'
 import {Contract} from './compiler'
 import {ExampleContract} from '../components/VyperResult'
+import { ThemeKeys } from 'react-json-view'
 
 export class RemixClient extends PluginClient {
   private client = createClient<Api, Readonly<RemixApi>>(this)
@@ -66,6 +67,13 @@ export class RemixClient extends PluginClient {
     this.client.emit('statusChanged', status)
   }
 
+  checkActiveTheme() {
+    const active = this.client.call('theme', 'currentTheme')
+    if (active === 'dark') {
+      return 'monokai' as any
+    }
+  }
+
   /** Highlight a part of the editor */
   async highlight(lineColumnPos: HighlightPosition, name: string, message: string) {
     await this.client.call('editor', 'highlight', lineColumnPos, name)

From 67be320f98aad0f9ad75112a24d669e0cd1b65d7 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 16 Nov 2023 15:36:14 +0300
Subject: [PATCH 22/75] fix bug where compiled artifacts are not cleared before
 another compile completes

---
 apps/vyper/src/app/app.tsx                       | 5 +++++
 apps/vyper/src/app/components/CompilerButton.tsx | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 343c1ea98b..c4e738b98b 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -65,6 +65,10 @@ const App: React.FC = () => {
     return state.environment === 'remote' ? 'https://vyper2.remixproject.org/' : state.localUrl
   }
 
+  function resetCompilerResultState() {
+    setOutput({})
+  }
+
   return (
     <main id="vyper-plugin">
       <header>
@@ -97,6 +101,7 @@ const App: React.FC = () => {
             compilerUrl={compilerUrl()}
             contract={contract}
             setOutput={(name, update) => setOutput({...output, [name]: update})}
+            resetCompilerState={resetCompilerResultState}
           />
         </div>
 
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 90ebda1a05..39432263c7 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -8,9 +8,10 @@ interface Props {
   compilerUrl: string
   contract?: string
   setOutput: (name: string, output: any) => void
+  resetCompilerState: () => void
 }
 
-function CompilerButton({contract, setOutput, compilerUrl}: Props) {
+function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}: Props) {
   if (!contract || !contract) {
     return <Button disabled>No contract selected</Button>
   }
@@ -21,6 +22,7 @@ function CompilerButton({contract, setOutput, compilerUrl}: Props) {
 
   /** Compile a Contract */
   async function compileContract() {
+    resetCompilerState()
     try {
       await remixClient.discardHighlight()
       let _contract: any
@@ -46,7 +48,6 @@ function CompilerButton({contract, setOutput, compilerUrl}: Props) {
         const t: any = toStandardOutput(contract, output)
         const temp = _.merge(t['contracts'][contract])
         const normal = normalizeContractPath(contract)[2]
-        console.log(normal)
         const abi = temp[normal]['abi']
         const evm = _.merge(temp[normal]['evm'])
         const dpb = evm.deployedBytecode

From d5416f3d503ea3697a8d0797b823939b8d46d47e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 16 Nov 2023 15:58:34 +0300
Subject: [PATCH 23/75] change tab html element from anchor to span

---
 apps/vyper/src/app/components/CompilerButton.tsx | 4 ++--
 apps/vyper/src/app/components/VyperResult.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 39432263c7..bb857571ea 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -118,10 +118,10 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   }
 
   return (
-    <Button data-id="compile" onClick={compileContract} variant="primary" title={contract} className="d-flex flex-column">
+    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary btn-block">
       <span>Compile</span>
       <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
-    </Button>
+    </button>
   )
 }
 
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 94544de273..10e2a30a87 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -48,8 +48,8 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
   }
 
   return (
-    <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
-      <Tab eventKey="abi" title="ABI">
+    <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
+      <Tab eventKey="abi" title="ABI" as={'span'}>
         <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['abi'])}>
           <Button variant="info" className="copy" data-id="copy-abi">
             Copy ABI

From 4e3cd35150e7b69dd3e5a7dfe8995da628df4bf6 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 16 Nov 2023 18:27:03 +0300
Subject: [PATCH 24/75] fix double css rule for button. refactor tab
 presentation logic. fix button width

---
 apps/vyper/src/app/app.css                    |  6 +-
 apps/vyper/src/app/app.tsx                    |  6 +-
 .../src/app/components/CompilerButton.tsx     |  2 +-
 apps/vyper/src/app/components/LocalUrl.tsx    |  2 +-
 apps/vyper/src/app/components/VyperResult.tsx | 84 ++++++++++++-------
 5 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index db9ee76b63..67e0fb59b1 100644
--- a/apps/vyper/src/app/app.css
+++ b/apps/vyper/src/app/app.css
@@ -45,11 +45,11 @@ html, body, #root, main {
 }
 
 #local-url {
-  width: 90%;
+
 }
 
 #compile-btn {
-  width: 100%;
+
 }
 
 #compile-btn * {
@@ -120,4 +120,4 @@ html, body, #root, main {
   border: none;
   height: 100%;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index c4e738b98b..5705e1010a 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -81,8 +81,8 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
-        <div className="px-4 w-100">
-          <Button data-id="add-repository" className="w-100 text-dark w-100 bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
+        <div className="px-3 w-100">
+          <Button data-id="add-repository" className="w-100 text-dark bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
             Clone Vyper examples repository
           </Button>
         </div>
@@ -96,7 +96,7 @@ const App: React.FC = () => {
         </ToggleButtonGroup>
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
         <WarnRemote environment={state.environment} />
-        <div className="px-4" id="compile-btn">
+        <div className="px-3" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index bb857571ea..b0aa583ef5 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -118,7 +118,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   }
 
   return (
-    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary btn-block">
+    <button data-id="compile" onClick={compileContract} title={contract} className="d-flex flex-column btn btn-primary w-100">
       <span>Compile</span>
       <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
     </button>
diff --git a/apps/vyper/src/app/components/LocalUrl.tsx b/apps/vyper/src/app/components/LocalUrl.tsx
index 58f4b3d3c7..88a01c79e0 100644
--- a/apps/vyper/src/app/components/LocalUrl.tsx
+++ b/apps/vyper/src/app/components/LocalUrl.tsx
@@ -18,7 +18,7 @@ function LocalUrlInput({url, setUrl, environment}: Props) {
 
   return (
     <Form id="local-url">
-      <Form.Group controlId="localUrl">
+      <Form.Group controlId="w-100 px-3">
         <Form.Text className="text-warning pb-2">{'Currently we support vyper version > 0.2.16'}</Form.Text>
         <Form.Label>Local Compiler Url</Form.Label>
         <Form.Control onBlur={updateUrl} defaultValue={url} type="email" placeholder="eg http://localhost:8000/compile" />
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 10e2a30a87..c4ef8959a9 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -18,6 +18,13 @@ export type ExampleContract = {
   address: string
 }
 
+type TabContentMembers = {
+  tabText: string
+  tabPayload: any
+  tabMemberType: 'abi' | 'bytecode' | 'bytecode_runtime' | 'ir'
+  className: string
+}
+
 function VyperResult({ output, themeColor }: VyperResultProps) {
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
@@ -47,40 +54,53 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
     )
   }
 
+  const tabContent = [
+    {
+      tabHeadingText: 'ABI',
+      tabPayload: Object.values(output)[0]['abi'],
+      tabMemberType: 'abi',
+      tabButtonText: () => 'Copy ABI',
+      eventKey: 'abi'
+    },
+    {
+      tabHeadingText: 'Bytecode',
+      tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
+      tabMemberType: 'bytecode',
+      tabButtonText: () => 'Copy Bytecode',
+      eventKey: 'bytecode'
+    },
+    {
+      tabHeadingText: 'Runtime Bytecode',
+      tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
+      tabMemberType: 'bytecode_runtime',
+      tabButtonText: () => 'Copy Runtime Bytecode',
+      eventKey: 'bytecode_runtime'
+    }
+    // {
+    //   tabHeadingText: 'LLL',
+    //   tabPayload: Object.values(output)[0]['ir'] ? '' : '',
+    //   tabMemberType: 'ir',
+    //   tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
+    //   eventKey: 'ir'
+    // }
+  ]
+
   return (
     <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
-      <Tab eventKey="abi" title="ABI" as={'span'}>
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['abi'])}>
-          <Button variant="info" className="copy" data-id="copy-abi">
-            Copy ABI
-          </Button>
-        </CopyToClipboard>
-        <JSONTree src={Object.values(output)[0]['abi']} theme={themeColor as any}/>
-      </Tab>
-      <Tab eventKey="bytecode" title="Bytecode">
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['bytecode'].object.toString())}>
-          <Button variant="info" className="copy">
-            Copy Bytecode
-          </Button>
-        </CopyToClipboard>
-        <textarea defaultValue={Object.values(output)[0]['bytecode'].object.toString()}></textarea>
-      </Tab>
-      <Tab eventKey="bytecode_runtime" title="Runtime Bytecode">
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['runtimeBytecode'].object.toString())}>
-          <Button variant="info" className="copy">
-            Copy Runtime Bytecode
-          </Button>
-        </CopyToClipboard>
-        <textarea defaultValue={Object.values(output)[0]['runtimeBytecode'].object.toString()}></textarea>
-      </Tab>
-      <Tab eventKey="ir" title="LLL">
-        <CopyToClipboard getContent={() => JSON.stringify(Object.values(output)[0]['ir'])}>
-          <Button disabled={Object.values(output)[0]['ir'].length <= 1} variant="info" className="copy">
-            {Object.values(output)[0]['ir'].length > 1 ? 'Copy LLL Code' : 'Nothing to copy yet'}
-          </Button>
-        </CopyToClipboard>
-        <textarea defaultValue={Object.values(output)[0]['ir'].toString()}></textarea>
-      </Tab>
+      {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(output)[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={themeColor as any}/> : (
+              <textarea defaultValue={content.tabPayload}></textarea>
+            )
+          }
+        </Tab>))
+      }
     </Tabs>
   )
 }

From db134784509dbf2845b227fdb374f3f0ea5ead45 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 17 Nov 2023 10:01:36 +0300
Subject: [PATCH 25/75] adding fixes for other compile artifacts

---
 apps/vyper/src/app/app.tsx                    |  2 +-
 apps/vyper/src/app/components/LocalUrl.tsx    |  4 ++--
 apps/vyper/src/app/components/VyperResult.tsx | 14 +++++++-------
 apps/vyper/src/app/utils/compiler.tsx         |  1 +
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 5705e1010a..8c200c28a7 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -96,7 +96,7 @@ const App: React.FC = () => {
         </ToggleButtonGroup>
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
         <WarnRemote environment={state.environment} />
-        <div className="px-3" id="compile-btn">
+        <div className="px-3 w-100" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}
diff --git a/apps/vyper/src/app/components/LocalUrl.tsx b/apps/vyper/src/app/components/LocalUrl.tsx
index 88a01c79e0..560482b5d3 100644
--- a/apps/vyper/src/app/components/LocalUrl.tsx
+++ b/apps/vyper/src/app/components/LocalUrl.tsx
@@ -17,8 +17,8 @@ function LocalUrlInput({url, setUrl, environment}: Props) {
   }
 
   return (
-    <Form id="local-url">
-      <Form.Group controlId="w-100 px-3">
+    <Form id="local-url" className="w-100 px-3">
+      <Form.Group controlId="localUrl">
         <Form.Text className="text-warning pb-2">{'Currently we support vyper version > 0.2.16'}</Form.Text>
         <Form.Label>Local Compiler Url</Form.Label>
         <Form.Control onBlur={updateUrl} defaultValue={url} type="email" placeholder="eg http://localhost:8000/compile" />
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index c4ef8959a9..afeffcbe93 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -75,14 +75,14 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
       tabMemberType: 'bytecode_runtime',
       tabButtonText: () => 'Copy Runtime Bytecode',
       eventKey: 'bytecode_runtime'
+    },
+    {
+      tabHeadingText: 'LLL',
+      tabPayload: Object.values(output)[0]['ir'] ? '' : '',
+      tabMemberType: 'ir',
+      tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
+      eventKey: 'ir'
     }
-    // {
-    //   tabHeadingText: 'LLL',
-    //   tabPayload: Object.values(output)[0]['ir'] ? '' : '',
-    //   tabMemberType: 'ir',
-    //   tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
-    //   eventKey: 'ir'
-    // }
   ]
 
   return (
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 4dfd11f0ac..7ace5cfa7a 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -87,6 +87,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
     result = await(await axios.get(url + 'compiled_artifact/' + compileCode , {
       method: 'Get'
     })).data
+    console.log({result})
     return result
   } else if (status === 'PENDING' || status === 'FAILED') {
     result = await(await axios.get(url + 'exceptions/' + compileCode , {

From 0e98dc718bc77fa673d3f377f856c5f50564ce95 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sun, 19 Nov 2023 20:54:56 +0300
Subject: [PATCH 26/75] stuff

---
 apps/vyper/src/app/components/CompilerButton.tsx            | 4 ++++
 .../src/lib/solidity-compile-details.tsx                    | 6 +++---
 .../solidity-compiler/src/lib/contract-selection.tsx        | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index b0aa583ef5..9ae62e9394 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -108,6 +108,10 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       })
       const data = toStandardOutput(_contract.name, output)
       remixClient.compilationFinish(_contract.name, _contract.content, data)
+
+      //map data to compilation details shape
+      
+      remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
         key: 'failed',
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index a0cee65d12..070eef3055 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
@@ -18,7 +18,7 @@ export interface RemixUiCompileDetailsProps {
 const _paq = (window._paq = window._paq || [])
 
 export function RemixUiCompileDetails({ plugin, contractProperties, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
-
+  console.log({selectedContract, contractProperties})
   const intl = useIntl()
   const downloadFn = () => {
     _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
@@ -33,7 +33,7 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
         </CustomTooltip>
       </div>
       <div className="remixui_detailsJSON">
-        <TreeView>
+        {<TreeView>
           {Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => {
             const copyDetails = (
               <span className="remixui_copyDetails">
@@ -69,7 +69,7 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
               </div>
             )
           })}
-        </TreeView>
+        </TreeView>}
       </div>
     </>
   )
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index a6436db88b..f39eb74146 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -123,6 +123,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   }
 
   const insertValue = (details, propertyName: ContractPropertyName) => {
+    console.log({ details })
     let node
     if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
       node = <pre>{details[propertyName]}</pre>

From 6594e163d80d3bd1d3281a6b91a9ff157fc5acfc Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 24 Nov 2023 10:22:00 +0100
Subject: [PATCH 27/75] debugging errors and add types for packagemanifest
 format

---
 apps/vyper/src/app/components/VyperResult.tsx |  13 +-
 apps/vyper/src/app/utils/compiler.tsx         |   3 +-
 apps/vyper/src/app/utils/types.ts             | 273 ++++++++++++++++++
 3 files changed, 283 insertions(+), 6 deletions(-)

diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index afeffcbe93..40f9e5a5a6 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -64,14 +64,14 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
     },
     {
       tabHeadingText: 'Bytecode',
-      tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
+      // tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
       tabMemberType: 'bytecode',
       tabButtonText: () => 'Copy Bytecode',
       eventKey: 'bytecode'
     },
     {
       tabHeadingText: 'Runtime Bytecode',
-      tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
+      // tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
       tabMemberType: 'bytecode_runtime',
       tabButtonText: () => 'Copy Runtime Bytecode',
       eventKey: 'bytecode_runtime'
@@ -89,7 +89,7 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
     <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(output)[0]['abi'])}>
+          {/* <CopyToClipboard getContent={() => content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(output)[0]['abi'])}>
             <Button variant="info" className="copy" data-id={content.eventKey === 'abi' ? "copy-abi" : ''}>
               {content.tabButtonText()}
             </Button>
@@ -99,8 +99,11 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
               <textarea defaultValue={content.tabPayload}></textarea>
             )
           }
-        </Tab>))
-      }
+        } */}
+          <Button>
+            {content.tabButtonText()}
+          </Button>
+        </Tab>))}
     </Tabs>
   )
 }
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 7ace5cfa7a..b1cdc71e30 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -67,8 +67,9 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
 
   const nameResult = normalizeContractPath(contract.name)
   files.append('files', content, `${nameResult[2]}.vy`)
+  files.append('data', JSON.stringify({vyper_version: '0.3.10'}))
   const response = await axios.post(url + 'compile?vyper_version=0.3.10', files)
-
+  console.log({response})
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
   }
diff --git a/apps/vyper/src/app/utils/types.ts b/apps/vyper/src/app/utils/types.ts
index 269a6dae64..575c289244 100644
--- a/apps/vyper/src/app/utils/types.ts
+++ b/apps/vyper/src/app/utils/types.ts
@@ -83,3 +83,276 @@ export type VyperCompilationResultType = {
   }
 
 }
+
+export interface PackageManifest {
+  title:       string;
+  description: string;
+  type:        TypeEnum;
+  required:    string[];
+  version:     string;
+  properties:  PackageManifestProperties;
+  definitions: Definitions;
+}
+
+export interface Definitions {
+  packageMeta:                 ByteString;
+  contractType:                ByteString;
+  contractInstance:            ContractInstance;
+  byteString:                  ByteString;
+  bytecodeObject:              BytecodeObject;
+  linkReference:               LinkReference;
+  linkValue:                   LinkValue;
+  identifier:                  ByteString;
+  contractInstanceName:        ByteString;
+  deployment:                  Deployment;
+  packageContractInstanceName: ByteString;
+  compilerInformation:         CompilerInformation;
+  address:                     Address;
+  transactionHash:             Address;
+  blockHash:                   Address;
+  contentURI:                  ByteString;
+}
+
+export interface Address {
+  title:       string;
+  description: string;
+  allOf:       AllOf[];
+}
+
+export interface AllOf {
+  ref?:       string;
+  minLength?: number;
+  maxLength?: number;
+}
+
+export interface ByteStringProperties {
+  contractName?:       ByteString;
+  deploymentBytecode?: Meta;
+  runtimeBytecode?:    Meta;
+  abi?:                ByteString;
+  natspec?:            ByteString;
+  compiler?:           Meta;
+  authors?:            ByteString;
+  license?:            ByteString;
+  description?:        ByteString;
+  keywords?:           ByteString;
+  links?:              Links;
+}
+
+export interface ByteString {
+  title:              string;
+  description?:       string;
+  type:               TypeEnum;
+  pattern?:           string;
+  format?:            string;
+  items?:             Items;
+  properties?:        ByteStringProperties;
+  patternProperties?: { [key: string]: Meta };
+}
+
+export interface Meta {
+  ref: string;
+}
+
+export interface Links {
+  title:                string;
+  descriptions:         string;
+  type:                 TypeEnum;
+  additionalProperties: AdditionalProperties;
+}
+
+export interface AdditionalProperties {
+  type:   TypeEnum;
+  format: string;
+}
+
+export type TypeEnum = "string" | "array" | "object";
+
+export interface Items {
+  ref?:  string;
+  type?: TypeEnum;
+}
+
+export interface BytecodeObject {
+  title:      string;
+  type:       TypeEnum;
+  anyOf:      BytecodeObjectAnyOf[];
+  properties: BytecodeObjectProperties;
+}
+
+export interface BytecodeObjectAnyOf {
+  required: string[];
+}
+
+export interface BytecodeObjectProperties {
+  bytecode:         Meta;
+  linkReferences:   Link;
+  linkDependencies: Link;
+}
+
+export interface Link {
+  type:  TypeEnum;
+  items: Meta;
+}
+
+export interface CompilerInformation {
+  title:       string;
+  description: string;
+  type:        TypeEnum;
+  required:    string[];
+  properties:  CompilerInformationProperties;
+}
+
+export interface CompilerInformationProperties {
+  name:     Name;
+  version:  Name;
+  settings: Name;
+}
+
+export interface Name {
+  description: string;
+  type:        TypeEnum;
+}
+
+export interface ContractInstance {
+  title:       string;
+  description: string;
+  type:        TypeEnum;
+  required:    string[];
+  properties:  ContractInstanceProperties;
+}
+
+export interface ContractInstanceProperties {
+  contractType:     ByteString;
+  address:          Meta;
+  transaction:      Meta;
+  block:            Meta;
+  runtimeBytecode:  Meta;
+  compiler:         Meta;
+  linkDependencies: ByteString;
+}
+
+export interface Deployment {
+  title:             string;
+  type:              TypeEnum;
+  patternProperties: DeploymentPatternProperties;
+}
+
+export interface DeploymentPatternProperties {
+  aZAZAZAZ09_0254$: Meta;
+}
+
+export interface LinkReference {
+  title:       string;
+  description: string;
+  type:        TypeEnum;
+  required:    string[];
+  properties:  LinkReferenceProperties;
+}
+
+export interface LinkReferenceProperties {
+  offsets: Offsets;
+  length:  Length;
+  name:    Meta;
+}
+
+export interface Length {
+  type:    string;
+  minimum: number;
+}
+
+export interface Offsets {
+  type:  TypeEnum;
+  items: Length;
+}
+
+export interface LinkValue {
+  title:       string;
+  description: string;
+  type:        TypeEnum;
+  required:    string[];
+  properties:  LinkValueProperties;
+  oneOf:       OneOf[];
+}
+
+export interface OneOf {
+  properties: OneOfProperties;
+}
+
+export interface OneOfProperties {
+  type:  TypeClass;
+  value: PurpleValue;
+}
+
+export interface TypeClass {
+  enum: string[];
+}
+
+export interface PurpleValue {
+  ref?:   string;
+  anyOf?: Meta[];
+}
+
+export interface LinkValueProperties {
+  offsets: Offsets;
+  type:    Name;
+  value:   FluffyValue;
+}
+
+export interface FluffyValue {
+  description: string;
+}
+
+export interface PackageManifestProperties {
+  manifestVersion:   ManifestVersion;
+  packageName:       ByteString;
+  meta:              Meta;
+  version:           Version;
+  sources:           Sources;
+  contractTypes:     ByteString;
+  deployments:       ByteString;
+  buildDependencies: BuildDependencies;
+}
+
+export interface BuildDependencies {
+  title:             string;
+  type:              TypeEnum;
+  patternProperties: BuildDependenciesPatternProperties;
+}
+
+export interface BuildDependenciesPatternProperties {
+  aZAZ090254$: Meta;
+}
+
+export interface ManifestVersion {
+  type:        TypeEnum;
+  title:       string;
+  description: string;
+  default:     string;
+  enum:        string[];
+}
+
+export interface Sources {
+  title:             string;
+  type:              TypeEnum;
+  patternProperties: SourcesPatternProperties;
+}
+
+export interface SourcesPatternProperties {
+  empty: Empty;
+}
+
+export interface Empty {
+  anyOf: AnyOf[];
+}
+
+export interface AnyOf {
+  title?: string;
+  type?:  TypeEnum;
+  ref?:   string;
+}
+
+export interface Version {
+  title: string;
+  type:  TypeEnum;
+}

From 734153a100bfb95df7408cedcfd1c99c7ce0065c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 27 Nov 2023 15:47:16 +0100
Subject: [PATCH 28/75] changes to type for request

---
 apps/vyper/src/app/utils/compiler.tsx |  55 ++++++--
 apps/vyper/src/app/utils/types.ts     | 190 +++++++++++++++++++++++++-
 2 files changed, 232 insertions(+), 13 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index b1cdc71e30..1bdef67f36 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -1,6 +1,6 @@
 import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
 import axios from 'axios'
-import { VyperCompilationResultType } from './types'
+import { VyperCompilationResultType, CompileFormat, BytecodeObject, AST, ABI, ETHPM3Format, CompilerInformationObject } from './types'
 
 export interface Contract {
   name: string
@@ -59,16 +59,53 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   if (extension !== 'vy') {
     throw new Error('Use extension .vy for Vyper.')
   }
+  const nameResult = normalizeContractPath(contract.name)
 
-  const files = new FormData();
-  const content = new Blob([contract.content], {
-    type: 'text/plain'
-  });
+  // const files = new FormData();
+  // const content = new Blob([contract.content], {
+  //   type: 'text/plain'
+  // });
 
-  const nameResult = normalizeContractPath(contract.name)
-  files.append('files', content, `${nameResult[2]}.vy`)
-  files.append('data', JSON.stringify({vyper_version: '0.3.10'}))
-  const response = await axios.post(url + 'compile?vyper_version=0.3.10', files)
+  // files.append('files', content, `${nameResult[2]}.vy`)
+  // files.append('data', JSON.stringify({vyper_version: '0.3.10'}))
+  type ByteCodeType = { bytecode: string, linkReferences: { offset: any; length: number; name?: string; }; linkDependencies?: { offsets: number[]; }; }
+
+  const compilePackage: ETHPM3Format = {
+    manifest: 'ethpm/3',
+    name: nameResult[2],
+    version: '0.3.10',
+    meta: {
+      authors: [],
+      license: '',
+      description: '',
+      keywords: []
+    },
+    sources: {
+      [contract.name] : {
+        content: contract.content,
+        checksum: {
+          'keccak256': '',
+          hash: ''
+        },
+        type: '',
+        license: ''
+      }
+    },
+    buildDependencies: {},
+    compilers: {} as CompilerInformationObject[],
+    contractTypes: {
+      [nameResult[2]]: {
+        content: contract.content
+      },
+      contractName: nameResult[2],
+      abi: {} as ABI[],
+      ast: {} as AST,
+      depolymentBytecode: {} as ByteCodeType,
+      runtimeBytecode: {} as any,
+    },
+    deployments: {}
+  }
+  const response = await axios.post(`${url}compile`, compilePackage )
   console.log({response})
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
diff --git a/apps/vyper/src/app/utils/types.ts b/apps/vyper/src/app/utils/types.ts
index 575c289244..fc7b3d56c5 100644
--- a/apps/vyper/src/app/utils/types.ts
+++ b/apps/vyper/src/app/utils/types.ts
@@ -174,10 +174,13 @@ export interface Items {
 }
 
 export interface BytecodeObject {
-  title:      string;
-  type:       TypeEnum;
-  anyOf:      BytecodeObjectAnyOf[];
-  properties: BytecodeObjectProperties;
+  title:      string
+  type:       TypeEnum
+  offsets: number[]
+  anyOf:      BytecodeObjectAnyOf[]
+  properties: BytecodeObjectProperties
+  bytecode: string
+  linkReferences?: { offset?: any; length?: number; name?: string}[]
 }
 
 export interface BytecodeObjectAnyOf {
@@ -356,3 +359,182 @@ export interface Version {
   title: string;
   type:  TypeEnum;
 }
+
+export type CompileFormat = {
+  contractTypes: {
+    abi?: ABI[]
+    ast?: AST
+    contractName?: string
+    depolymentBytecode?: BytecodeObject
+    devMessages?: { [key: string]: string }
+    devdoc?: Devdoc
+    methodIdentifiers?: { [key: string]: string }
+    pcmap?: any
+    runtimeBytecode?: BytecodeObject
+    sourceId?: string
+    sourcemap?: string
+    userdoc?: { [key: string]: string }
+  }
+  manifest?: string
+  sources?: {
+    [fileName: string]: {
+      content: string
+      urls?: string[]
+      references?: string[]
+      imports?: string[]
+      checksum?: { [key: string]: string }
+    }
+  }
+}
+
+export type Devdoc = {
+  methods: any
+}
+
+export type ETHPM3Format = {
+  manifest: 'ethpm/3'
+  name: string
+  version: string
+  meta: Record<string, any>
+  buildDependencies: Record<string, any>
+  sources: {
+    [fileName: string]: {
+      content: string
+      checksum?: {
+        keccak256: string
+        hash: string
+      }
+      type?: any
+      license?: string
+    }
+  }
+  compilers: CompilerInformationObject[]
+  contractTypes: {
+    contractName: string
+    sourceId?: string
+    depolymentBytecode: {
+      bytecode: string
+      linkReferences: {
+        offset: any
+        length: number
+        name?: string
+      }
+      linkDependencies?: { offsets: number[]}
+    }
+    runtimeBytecode: {
+      bytecode: string
+      linkReferences: {
+        offset: any
+        length: number
+        name?: string
+      }
+      linkDependencies?: LinkValueObject
+    }
+    abi: ABI[]
+    ast: AST
+    userDoc?: {
+      methods: any
+      notice: string
+    }
+    devDoc?: {
+      methods: any,
+      author: string
+      details: string
+      title: string
+      license: string
+  }
+}
+deployments: {
+  [contractName: string]: ContractInstanceObject
+}
+
+
+}
+
+export type CompilerInformationObject = {
+  name: string
+  version: string
+  settings?: {
+    optimizer: {
+      enabled: boolean
+      runs: number
+    }
+    outputSelection: {
+      [fileName: string]: {
+        [contractName: string]: string[]
+      }
+    }
+  },
+  contractTypes?: string[]
+}
+
+export type LinkValueObject = {
+  offsets: number[]
+  type: string
+  value: string
+}
+
+export type PackageMetaDataObject = {
+  authors?: string[]
+  description?: string
+  keywords?: string[]
+  license?: string
+  links?: {
+    [key: string]: string
+  }
+}
+
+export type ContractInstanceObject = {
+  contractType: string
+  address: string
+  transaction?: string
+  block?: string
+  runtimeBytecode?: BytecodeObject
+  compiler?: string
+  linkDependencies?: LinkValueObject
+}
+
+export type ASTSrc = {
+  jumpCode: string;
+  length:   number;
+}
+
+export type Child = {
+  astType:        string;
+  children:       Child[];
+  classification: number;
+  colOffset:      number;
+  endColOffset:   number;
+  endLineno:      number;
+  lineno:         number;
+  name?:          string;
+  src:            ChildSrc;
+  docStr?:        Child;
+}
+
+export type ChildSrc = {
+  jumpCode: string;
+  length:   number;
+  start:    number;
+}
+
+export type AST = {
+  astType:        string;
+  children:       Child[];
+  classification: number;
+  colOffset:      number;
+  endColOffset:   number;
+  endLineno:      number;
+  lineno:         number;
+  name:           string;
+  src:            ASTSrc;
+}
+
+export type ABI = {
+  anonymous?:       boolean;
+  inputs:           any[];
+  name?:            string;
+  type:             any
+  stateMutability?: any;
+  outputs?:         any[];
+}

From 626bd9711ad8deb65115a8554dcdecdcefacfe99 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 28 Nov 2023 14:28:43 +0100
Subject: [PATCH 29/75] change types to fit compile results

---
 .../src/app/components/CompilerButton.tsx     |  3 +-
 apps/vyper/src/app/components/VyperResult.tsx |  1 +
 apps/vyper/src/app/utils/compiler.tsx         | 52 +++++--------------
 3 files changed, 15 insertions(+), 41 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 9ae62e9394..59601a9dd2 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -44,6 +44,7 @@ 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])
@@ -110,7 +111,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       remixClient.compilationFinish(_contract.name, _contract.content, data)
 
       //map data to compilation details shape
-      
+
       remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 40f9e5a5a6..f82c4cea0e 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -26,6 +26,7 @@ type TabContentMembers = {
 }
 
 function VyperResult({ output, themeColor }: VyperResultProps) {
+  // const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 1bdef67f36..d29fa9dd00 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -51,7 +51,7 @@ export function normalizeContractPath(contractPath: string): string[] {
  * @param url The url of the compiler
  * @param contract The name and content of the contract
  */
-export async function compile(url: string, contract: Contract): Promise<VyperCompilationOutput> {
+export async function compile(url: string, contract: Contract): Promise<any> {
   if (!contract.name) {
     throw new Error('Set your Vyper contract file.')
   }
@@ -69,41 +69,12 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   // files.append('files', content, `${nameResult[2]}.vy`)
   // files.append('data', JSON.stringify({vyper_version: '0.3.10'}))
   type ByteCodeType = { bytecode: string, linkReferences: { offset: any; length: number; name?: string; }; linkDependencies?: { offsets: number[]; }; }
-
-  const compilePackage: ETHPM3Format = {
+  const contractName = contract['name']
+  const compilePackage = {
     manifest: 'ethpm/3',
-    name: nameResult[2],
-    version: '0.3.10',
-    meta: {
-      authors: [],
-      license: '',
-      description: '',
-      keywords: []
-    },
     sources: {
-      [contract.name] : {
-        content: contract.content,
-        checksum: {
-          'keccak256': '',
-          hash: ''
-        },
-        type: '',
-        license: ''
-      }
-    },
-    buildDependencies: {},
-    compilers: {} as CompilerInformationObject[],
-    contractTypes: {
-      [nameResult[2]]: {
-        content: contract.content
-      },
-      contractName: nameResult[2],
-      abi: {} as ABI[],
-      ast: {} as AST,
-      depolymentBytecode: {} as ByteCodeType,
-      runtimeBytecode: {} as any,
-    },
-    deployments: {}
+      [contractName] : {content : contract.content}
+    }
   }
   const response = await axios.post(`${url}compile`, compilePackage )
   console.log({response})
@@ -122,7 +93,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
   })).data
 
   if (status === 'SUCCESS') {
-    result = await(await axios.get(url + 'compiled_artifact/' + compileCode , {
+    result = await(await axios.get(url + 'artifacts/' + compileCode , {
       method: 'Get'
     })).data
     console.log({result})
@@ -131,6 +102,7 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
     result = await(await axios.get(url + 'exceptions/' + compileCode , {
       method: 'Get'
     })).data
+    console.log({result})
     return result.data
   }
   await new Promise((resolve) => setTimeout(() => resolve({}), 2000))
@@ -141,19 +113,19 @@ export async function compile(url: string, contract: Contract): Promise<VyperCom
  * @param name Name of the contract file
  * @param compilationResult Result returned by the compiler
  */
-export function toStandardOutput(fileName: string, compilationResult: VyperCompilationResultType): CompilationResult {
+export function toStandardOutput(fileName: string, compilationResult: any): any {
   const contractName = normalizeContractPath(fileName)[2]
   const compiledAbi = compilationResult['contractTypes'][contractName].abi
   const deployedBytecode = compilationResult['contractTypes'][contractName].deploymentBytecode.bytecode.replace('0x', '')
   const bytecode = compilationResult['contractTypes'][contractName].runtimeBytecode.bytecode.replace('0x', '')
-  const compiledAst = compilationResult['contractTypes'][contractName].abi
+  const compiledAst = compilationResult['contractTypes'][contractName].ast
+  const methodIdentifiers = compilationResult['contractTypes'][contractName].methodIdentifiers
   //const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
   return {
     sources: {
       [fileName]: {
         id: 1,
-        ast: compiledAst,
-        legacyAST: {} as any
+        ast: compiledAst
       }
     },
     contracts: {
@@ -175,7 +147,7 @@ export function toStandardOutput(fileName: string, compilationResult: VyperCompi
               object: bytecode,
               opcodes: ''
             },
-            // methodIdentifiers: methodIdentifiers
+            methodIdentifiers: methodIdentifiers
           }
         }
       } as any

From fc981590034052931c879b1e5b9af6b02c841d3e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 00:05:37 +0100
Subject: [PATCH 30/75] remove excessive console logs in suggestion service and
 workspacetemplate

---
 .../suggestion-service/copilot-suggestion.ts  |  5 +++--
 .../suggestion-service/suggestion-service.ts  |  8 ++++----
 .../src/app/components/CompilerButton.tsx     | 20 +++++++++----------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/copilot/suggestion-service/copilot-suggestion.ts b/apps/remix-ide/src/app/plugins/copilot/suggestion-service/copilot-suggestion.ts
index f58b76888d..3a0e0a3a38 100644
--- a/apps/remix-ide/src/app/plugins/copilot/suggestion-service/copilot-suggestion.ts
+++ b/apps/remix-ide/src/app/plugins/copilot/suggestion-service/copilot-suggestion.ts
@@ -1,5 +1,6 @@
 import {Plugin} from '@remixproject/engine'
 import {SuggestionService, SuggestOptions} from './suggestion-service'
+//@ts-ignore
 const _paq = (window._paq = window._paq || []) //eslint-disable-line
 
 const profile = {
@@ -26,7 +27,7 @@ export class CopilotSuggestion extends Plugin {
     })
     this.service.events.on('ready', (data) => {
       this.ready = true
-    })    
+    })
   }
 
   status () {
@@ -64,7 +65,7 @@ export class CopilotSuggestion extends Plugin {
         importsContent += '\n\n' + (await this.call('contentImport', 'resolve', imp)).content
       } catch (e) {
         console.log(e)
-      }      
+      }
     }
     return importsContent
   }
diff --git a/apps/remix-ide/src/app/plugins/copilot/suggestion-service/suggestion-service.ts b/apps/remix-ide/src/app/plugins/copilot/suggestion-service/suggestion-service.ts
index fefe485490..b85647cb9f 100644
--- a/apps/remix-ide/src/app/plugins/copilot/suggestion-service/suggestion-service.ts
+++ b/apps/remix-ide/src/app/plugins/copilot/suggestion-service/suggestion-service.ts
@@ -58,11 +58,11 @@ export class SuggestionService {
             this.responses[e.data.id](null, e.data)
           } else {
             this.responses[e.data.id]('aborted')
-          }          
+          }
           delete this.responses[e.data.id]
           this.current = null
         }
-          
+
         // Generation complete: re-enable the "Generate" button
         break;
       }
@@ -95,6 +95,6 @@ export class SuggestionService {
         if (error) return reject(error)
         resolve(result)
       }
-    })    
+    })
   }
-}
\ No newline at end of file
+}
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 59601a9dd2..87597cc563 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -24,7 +24,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   async function compileContract() {
     resetCompilerState()
     try {
-      await remixClient.discardHighlight()
+      // await remixClient.discardHighlight()
       let _contract: any
       try {
         _contract = await remixClient.getContract()
@@ -73,27 +73,27 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
             start: {line: line - 1, column: 10},
             end: {line: line - 1, column: 10}
           }
-          remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
+          // remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
         } else {
-          const regex = output.message.match(/line ((\d+):(\d+))+/g)
-          const errors = output.message.split(/line ((\d+):(\d+))+/g) // extract error message
+          const regex = output?.message?.match(/line ((\d+):(\d+))+/g)
+          const errors = output?.message?.split(/line ((\d+):(\d+))+/g) // extract error message
           if (regex) {
             let errorIndex = 0
             regex.map((errorLocation) => {
-              const location = errorLocation.replace('line ', '').split(':')
+              const location = errorLocation?.replace('line ', '').split(':')
               let message = errors[errorIndex]
               errorIndex = errorIndex + 4
-              if (message && message.split('\n\n').length > 0) {
+              if (message && message?.split('\n\n').length > 0) {
                 try {
-                  message = message.split('\n\n')[message.split('\n\n').length - 1]
+                  message = message?.split('\n\n')[message.split('\n\n').length - 1]
                 } catch (e) {}
               }
-              if (location.length > 0) {
+              if (location?.length > 0) {
                 const lineColumnPos = {
                   start: {line: parseInt(location[0]) - 1, column: 10},
                   end: {line: parseInt(location[0]) - 1, column: 10}
                 }
-                remixClient.highlight(lineColumnPos as any, _contract.name, message)
+                // remixClient.highlight(lineColumnPos as any, _contract.name, message)
               }
             })
           }
@@ -101,7 +101,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
         throw new Error(output.message)
       }
       // SUCCESS
-      remixClient.discardHighlight()
+      // remixClient.discardHighlight()
       remixClient.changeStatus({
         key: 'succeed',
         type: 'success',

From 95826557d23c01da2c38126140bc869bc053629c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 01:53:52 +0100
Subject: [PATCH 31/75] removed console log

---
 .../src/lib/solidity-compile-details.tsx                         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index 070eef3055..cac1531659 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
@@ -18,7 +18,6 @@ export interface RemixUiCompileDetailsProps {
 const _paq = (window._paq = window._paq || [])
 
 export function RemixUiCompileDetails({ plugin, contractProperties, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
-  console.log({selectedContract, contractProperties})
   const intl = useIntl()
   const downloadFn = () => {
     _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])

From 898606a0e2c1ef540612caf4e0778ad58182758c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 01:56:18 +0100
Subject: [PATCH 32/75] fixed mapping code in compiler.tsx

---
 apps/vyper/src/app/utils/compiler.tsx | 25 ++++++++-----------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index d29fa9dd00..7cb6b8dc57 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -59,16 +59,7 @@ export async function compile(url: string, contract: Contract): Promise<any> {
   if (extension !== 'vy') {
     throw new Error('Use extension .vy for Vyper.')
   }
-  const nameResult = normalizeContractPath(contract.name)
 
-  // const files = new FormData();
-  // const content = new Blob([contract.content], {
-  //   type: 'text/plain'
-  // });
-
-  // files.append('files', content, `${nameResult[2]}.vy`)
-  // files.append('data', JSON.stringify({vyper_version: '0.3.10'}))
-  type ByteCodeType = { bytecode: string, linkReferences: { offset: any; length: number; name?: string; }; linkDependencies?: { offsets: number[]; }; }
   const contractName = contract['name']
   const compilePackage = {
     manifest: 'ethpm/3',
@@ -76,8 +67,9 @@ export async function compile(url: string, contract: Contract): Promise<any> {
       [contractName] : {content : contract.content}
     }
   }
+  console.log('about to compile contract!!!')
   const response = await axios.post(`${url}compile`, compilePackage )
-  console.log({response})
+
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
   }
@@ -91,21 +83,18 @@ export async function compile(url: string, contract: Contract): Promise<any> {
   const status = await (await axios.get(url + 'status/' + compileCode , {
     method: 'Get'
   })).data
-
   if (status === 'SUCCESS') {
     result = await(await axios.get(url + 'artifacts/' + compileCode , {
       method: 'Get'
     })).data
-    console.log({result})
     return result
   } else if (status === 'PENDING' || status === 'FAILED') {
     result = await(await axios.get(url + 'exceptions/' + compileCode , {
       method: 'Get'
     })).data
-    console.log({result})
-    return result.data
+    return result
   }
-  await new Promise((resolve) => setTimeout(() => resolve({}), 2000))
+  await new Promise((resolve) => setTimeout(() => resolve({}), 3000))
 }
 
 /**
@@ -119,8 +108,10 @@ export function toStandardOutput(fileName: string, compilationResult: any): any
   const deployedBytecode = compilationResult['contractTypes'][contractName].deploymentBytecode.bytecode.replace('0x', '')
   const bytecode = compilationResult['contractTypes'][contractName].runtimeBytecode.bytecode.replace('0x', '')
   const compiledAst = compilationResult['contractTypes'][contractName].ast
-  const methodIdentifiers = compilationResult['contractTypes'][contractName].methodIdentifiers
-  //const methodIdentifiers = JSON.parse(JSON.stringify(compilationResult['method_identifiers']).replace(/0x/g, ''))
+  const methodIds = compilationResult['contractTypes'][contractName].methodIdentifiers
+  const methodIdentifiers = Object.entries(methodIds as Record<any,string>).map(([key, value]) => {
+    return { [key]: value.replace('0x', '') }
+  })
   return {
     sources: {
       [fileName]: {

From 0bbf016411775b05725979ae1cd457b3976734b3 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 02:05:47 +0100
Subject: [PATCH 33/75] fix line that crashes the ide when compile is done

---
 .../src/app/components/CompilerButton.tsx     | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 87597cc563..838e04b6db 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -24,7 +24,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   async function compileContract() {
     resetCompilerState()
     try {
-      // await remixClient.discardHighlight()
+      await remixClient.discardHighlight()
       let _contract: any
       try {
         _contract = await remixClient.getContract()
@@ -44,26 +44,26 @@ 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)
+      //   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 result = {
-          contractName: normal,
-          abi: abi,
-          bytecode: dpb,
-          runtimeBytecode: runtimeBytecode,
-          ir: ''
-        }
-        return result
-      }
-      setOutput(_contract.name, compileReturnType())
+      //   const result = {
+      //     contractName: normal,
+      //     abi: abi,
+      //     bytecode: dpb,
+      //     runtimeBytecode: runtimeBytecode,
+      //     ir: ''
+      //   }
+      //   return result
+      // }
+      // setOutput(_contract.name, compileReturnType())
 
       // ERROR
       if (isCompilationError(output)) {
@@ -73,7 +73,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
             start: {line: line - 1, column: 10},
             end: {line: line - 1, column: 10}
           }
-          // remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
+          remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
         } else {
           const regex = output?.message?.match(/line ((\d+):(\d+))+/g)
           const errors = output?.message?.split(/line ((\d+):(\d+))+/g) // extract error message
@@ -93,7 +93,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
                   start: {line: parseInt(location[0]) - 1, column: 10},
                   end: {line: parseInt(location[0]) - 1, column: 10}
                 }
-                // remixClient.highlight(lineColumnPos as any, _contract.name, message)
+                remixClient.highlight(lineColumnPos as any, _contract.name, message)
               }
             })
           }
@@ -101,7 +101,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
         throw new Error(output.message)
       }
       // SUCCESS
-      // remixClient.discardHighlight()
+      remixClient.discardHighlight()
       remixClient.changeStatus({
         key: 'succeed',
         type: 'success',
@@ -109,10 +109,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       })
       const data = toStandardOutput(_contract.name, output)
       remixClient.compilationFinish(_contract.name, _contract.content, data)
-
-      //map data to compilation details shape
-
-      remixClient.call('compilationDetails' as any, 'showDetails', data)
+      // remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
         key: 'failed',

From aed6ef13798fe5921dd98e81f0823c1f6ba6a7ff Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 03:12:34 +0100
Subject: [PATCH 34/75] add function to handle errors from endpoint

---
 apps/vyper/src/app/utils/compiler.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 7cb6b8dc57..098beb8b03 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -46,6 +46,24 @@ export function normalizeContractPath(contractPath: string): string[] {
   return [folders,resultingPath, filename]
 }
 
+function parseErrorString(errorString) {
+  // Split the string into lines
+  const lines = errorString.trim().split('\n')
+  // Extract the line number and message
+  const message = lines[1].trim()
+  const targetLine = lines[2].split(',')
+  const lineColumn = targetLine[targetLine.length - 1].split(' ')[2].split(':')
+  console.log('lineColumn', lineColumn)
+
+  const errorObject = {
+    status: 'failed',
+    message: message,
+    column: parseInt(lineColumn[1]),
+    line: parseInt(lineColumn[0])
+  }
+  return errorObject
+}
+
 /**
  * Compile the a contract
  * @param url The url of the compiler
@@ -88,10 +106,11 @@ export async function compile(url: string, contract: Contract): Promise<any> {
       method: 'Get'
     })).data
     return result
-  } else if (status === 'PENDING' || status === 'FAILED') {
-    result = await(await axios.get(url + 'exceptions/' + compileCode , {
+  } else if (status === 'FAILED') {
+    const intermediate = await(await axios.get(url + 'exceptions/' + compileCode , {
       method: 'Get'
     })).data
+    result = parseErrorString(intermediate[0])
     return result
   }
   await new Promise((resolve) => setTimeout(() => resolve({}), 3000))

From e371ad765e3568845e686691637cb78629a19730 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 03:15:54 +0100
Subject: [PATCH 35/75] fix wrong value for meesage in hightlightfunc

---
 apps/vyper/src/app/components/CompilerButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 838e04b6db..fe1aec546e 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -73,7 +73,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
             start: {line: line - 1, column: 10},
             end: {line: line - 1, column: 10}
           }
-          remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
+          remixClient.highlight(lineColumnPos as any, _contract.name, output.message)
         } else {
           const regex = output?.message?.match(/line ((\d+):(\d+))+/g)
           const errors = output?.message?.split(/line ((\d+):(\d+))+/g) // extract error message

From e5d0ebe5ca6ca675852ec809c61fbaa69b9568c3 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 03:27:07 +0100
Subject: [PATCH 36/75] cleanup and stop memory hoggers

---
 apps/vyper/src/app/utils/compiler.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 098beb8b03..249d6f70c8 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -48,19 +48,21 @@ export function normalizeContractPath(contractPath: string): string[] {
 
 function parseErrorString(errorString) {
   // Split the string into lines
-  const lines = errorString.trim().split('\n')
+  let lines = errorString.trim().split('\n')
   // Extract the line number and message
-  const message = lines[1].trim()
-  const targetLine = lines[2].split(',')
-  const lineColumn = targetLine[targetLine.length - 1].split(' ')[2].split(':')
-  console.log('lineColumn', lineColumn)
-
+  let message = lines[1].trim()
+  let targetLine = lines[2].split(',')
+  let lineColumn = targetLine[targetLine.length - 1].split(' ')[2].split(':')
   const errorObject = {
     status: 'failed',
     message: message,
     column: parseInt(lineColumn[1]),
     line: parseInt(lineColumn[0])
   }
+  message = null
+  targetLine = null
+  lineColumn = null
+  lines = null
   return errorObject
 }
 
@@ -78,15 +80,14 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     throw new Error('Use extension .vy for Vyper.')
   }
 
-  const contractName = contract['name']
+  let contractName = contract['name']
   const compilePackage = {
     manifest: 'ethpm/3',
     sources: {
       [contractName] : {content : contract.content}
     }
   }
-  console.log('about to compile contract!!!')
-  const response = await axios.post(`${url}compile`, compilePackage )
+  let response = await axios.post(`${url}compile`, compilePackage )
 
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
@@ -96,6 +97,8 @@ export async function compile(url: string, contract: Contract): Promise<any> {
   }
 
   const compileCode = response.data
+  contractName = null
+  response = null
   let result: any
 
   const status = await (await axios.get(url + 'status/' + compileCode , {

From 57be7f4c35090d8ffe828d1b25004ebab32b224a Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 03:28:35 +0100
Subject: [PATCH 37/75] restore component

---
 apps/vyper/src/app/app.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 8c200c28a7..f80d91e1b1 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -22,7 +22,7 @@ interface AppState {
 }
 
 interface OutputMap {
-  [fileName: string]: VyperCompilationOutput
+  [fileName: string]: any
 }
 
 const App: React.FC = () => {
@@ -106,7 +106,8 @@ const App: React.FC = () => {
         </div>
 
         <article id="result" className="px-2">
-          {Object.keys(output).length > 0 ? <VyperResult output={ output} themeColor={remixClient.checkActiveTheme()} /> : null}
+          <h5>Result Output!</h5>
+          {Object.keys(output).length > 0 ? <VyperResult output={output} themeColor={remixClient.checkActiveTheme()} /> : null}
         </article>
       </section>
     </main>

From 03738f966b1207d31ef4a443ecf4cf960d1aedf2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 03:33:38 +0100
Subject: [PATCH 38/75] fix typo in vyper success badge

---
 apps/vyper/src/app/components/CompilerButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index fe1aec546e..28ac810b60 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -105,7 +105,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       remixClient.changeStatus({
         key: 'succeed',
         type: 'success',
-        title: 'succeed'
+        title: 'success'
       })
       const data = toStandardOutput(_contract.name, output)
       remixClient.compilationFinish(_contract.name, _contract.content, data)

From 2890a82b7943e52707ab7967fe6f5d0f2004c45e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 03:34:03 +0100
Subject: [PATCH 39/75] comment out markup temporarily

---
 apps/vyper/src/app/components/VyperResult.tsx | 99 ++++++++++---------
 1 file changed, 50 insertions(+), 49 deletions(-)

diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index f82c4cea0e..2b273631ec 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -55,57 +55,58 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
     )
   }
 
-  const tabContent = [
-    {
-      tabHeadingText: 'ABI',
-      tabPayload: Object.values(output)[0]['abi'],
-      tabMemberType: 'abi',
-      tabButtonText: () => 'Copy ABI',
-      eventKey: 'abi'
-    },
-    {
-      tabHeadingText: 'Bytecode',
-      // tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
-      tabMemberType: 'bytecode',
-      tabButtonText: () => 'Copy Bytecode',
-      eventKey: 'bytecode'
-    },
-    {
-      tabHeadingText: 'Runtime Bytecode',
-      // tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
-      tabMemberType: 'bytecode_runtime',
-      tabButtonText: () => 'Copy Runtime Bytecode',
-      eventKey: 'bytecode_runtime'
-    },
-    {
-      tabHeadingText: 'LLL',
-      tabPayload: Object.values(output)[0]['ir'] ? '' : '',
-      tabMemberType: 'ir',
-      tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
-      eventKey: 'ir'
-    }
-  ]
+  // const tabContent = [
+  //   {
+  //     tabHeadingText: 'ABI',
+  //     tabPayload: Object.values(output)[0]['abi'],
+  //     tabMemberType: 'abi',
+  //     tabButtonText: () => 'Copy ABI',
+  //     eventKey: 'abi'
+  //   },
+  //   {
+  //     tabHeadingText: 'Bytecode',
+  //     // tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
+  //     tabMemberType: 'bytecode',
+  //     tabButtonText: () => 'Copy Bytecode',
+  //     eventKey: 'bytecode'
+  //   },
+  //   {
+  //     tabHeadingText: 'Runtime Bytecode',
+  //     // tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
+  //     tabMemberType: 'bytecode_runtime',
+  //     tabButtonText: () => 'Copy Runtime Bytecode',
+  //     eventKey: 'bytecode_runtime'
+  //   },
+  //   {
+  //     tabHeadingText: 'LLL',
+  //     tabPayload: Object.values(output)[0]['ir'] ? '' : '',
+  //     tabMemberType: 'ir',
+  //     tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
+  //     eventKey: 'ir'
+  //   }
+  // ]
 
   return (
-    <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(output)[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={themeColor as any}/> : (
-              <textarea defaultValue={content.tabPayload}></textarea>
-            )
-          }
-        } */}
-          <Button>
-            {content.tabButtonText()}
-          </Button>
-        </Tab>))}
-    </Tabs>
+    // <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(output)[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={themeColor as any}/> : (
+    //           <textarea defaultValue={content.tabPayload}></textarea>
+    //         )
+    //       }
+    //     } */}
+    //       <Button>
+    //         {content.tabButtonText()}
+    //       </Button>
+    //     </Tab>))}
+    // </Tabs>
+    <h1>There was a result!</h1>
   )
 }
 

From 8ec50238f65bc11383a2df5bbcd12e36f8a7977a Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 11:17:36 +0100
Subject: [PATCH 40/75] conditional rendering of vyper results

---
 apps/vyper/src/app/app.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index f80d91e1b1..9105cdc342 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -105,9 +105,15 @@ const App: React.FC = () => {
           />
         </div>
 
-        <article id="result" className="px-2">
-          <h5>Result Output!</h5>
-          {Object.keys(output).length > 0 ? <VyperResult output={output} themeColor={remixClient.checkActiveTheme()} /> : null}
+        {console.log(output)}
+        <article id="result" className="px-2 mx-2 border-top mt-3">
+          {
+            output && Object.keys(output).length > 0 ? (
+              <>
+                <VyperResult output={output} />
+              </>
+            ) : null
+          }
         </article>
       </section>
     </main>

From 4a75e124fb202d06c4c16fa1044916a76f2fb05b Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 11:18:04 +0100
Subject: [PATCH 41/75] tracking compile results

---
 .../src/app/components/CompilerButton.tsx     |  2 +
 apps/vyper/src/app/components/VyperResult.tsx | 65 +++----------
 apps/vyper/src/app/utils/compiler.tsx         | 34 ++++++-
 .../src/lib/components/solidityCompile.tsx    | 64 +++++++++++++
 .../src/lib/components/vyperCompile.tsx       | 92 +++++++++++++++++++
 .../src/lib/solidity-compile-details.tsx      | 77 +++++-----------
 .../src/lib/contract-selection.tsx            |  2 +-
 7 files changed, 226 insertions(+), 110 deletions(-)
 create mode 100644 libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
 create mode 100644 libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 28ac810b60..b02cc2406d 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -109,6 +109,8 @@ 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)
       // remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 2b273631ec..8218aa3be3 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -10,7 +10,6 @@ import { VyperCompilationResult } from '../utils/types'
 
 interface VyperResultProps {
   output?: any
-  themeColor?: string
 }
 
 export type ExampleContract = {
@@ -25,9 +24,8 @@ type TabContentMembers = {
   className: string
 }
 
-function VyperResult({ output, themeColor }: VyperResultProps) {
+function VyperResult({ output }: VyperResultProps) {
   // const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
-  const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
 
   if (!output)
     return (
@@ -55,58 +53,17 @@ function VyperResult({ output, themeColor }: VyperResultProps) {
     )
   }
 
-  // const tabContent = [
-  //   {
-  //     tabHeadingText: 'ABI',
-  //     tabPayload: Object.values(output)[0]['abi'],
-  //     tabMemberType: 'abi',
-  //     tabButtonText: () => 'Copy ABI',
-  //     eventKey: 'abi'
-  //   },
-  //   {
-  //     tabHeadingText: 'Bytecode',
-  //     // tabPayload: Object.values(output)[0]['bytecode'].object.toString(),
-  //     tabMemberType: 'bytecode',
-  //     tabButtonText: () => 'Copy Bytecode',
-  //     eventKey: 'bytecode'
-  //   },
-  //   {
-  //     tabHeadingText: 'Runtime Bytecode',
-  //     // tabPayload: Object.values(output)[0]['runtimeBytecode'].object.toString(),
-  //     tabMemberType: 'bytecode_runtime',
-  //     tabButtonText: () => 'Copy Runtime Bytecode',
-  //     eventKey: 'bytecode_runtime'
-  //   },
-  //   {
-  //     tabHeadingText: 'LLL',
-  //     tabPayload: Object.values(output)[0]['ir'] ? '' : '',
-  //     tabMemberType: 'ir',
-  //     tabButtonText: () => Object.values(output)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
-  //     eventKey: 'ir'
-  //   }
-  // ]
-
   return (
-    // <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(output)[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={themeColor as any}/> : (
-    //           <textarea defaultValue={content.tabPayload}></textarea>
-    //         )
-    //       }
-    //     } */}
-    //       <Button>
-    //         {content.tabButtonText()}
-    //       </Button>
-    //     </Tab>))}
-    // </Tabs>
-    <h1>There was a result!</h1>
+    <>
+      <div className="border border-top"></div>
+      <div>
+        <button className="btn btn-secondary btn-block mx-2" onClick={() => {
+
+        }}>
+          <span>Compilation Details</span>
+        </button>
+      </div>
+    </>
   )
 }
 
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 249d6f70c8..1d6ae34ae0 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -1,6 +1,6 @@
 import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
 import axios from 'axios'
-import { VyperCompilationResultType, CompileFormat, BytecodeObject, AST, ABI, ETHPM3Format, CompilerInformationObject } from './types'
+import { VyperCompilationResultType, CompileFormat, ETHPM3Format, CompilerInformationObject } from './types'
 
 export interface Contract {
   name: string
@@ -108,6 +108,7 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     result = await(await axios.get(url + 'artifacts/' + compileCode , {
       method: 'Get'
     })).data
+    console.log(result)
     return result
   } else if (status === 'FAILED') {
     const intermediate = await(await axios.get(url + 'exceptions/' + compileCode , {
@@ -167,6 +168,37 @@ export function toStandardOutput(fileName: string, compilationResult: any): any
     }
   }
 }
+export type StandardOutput = {
+  sources: {
+    [fileName: string]: {
+      id: number,
+      ast: AST
+    }
+  },
+  contracts: {
+    [fileName: string]: {
+      [contractName: string]: {
+        abi: ABI,
+        contractName: string,
+        evm: {
+          bytecode: BytecodeObject,
+          deployedBytecode: BytecodeObject,
+          methodIdentifiers: {
+            [method: string]: string
+          }
+        }
+      }
+    }
+  }
+}
+
+type AST = any // Replace with the actual AST type
+type ABI = ABIDescription[] // Replace with the actual ABI type
+type BytecodeObject = {
+  linkReferences: Record<string, any>,
+  object: string,
+  opcodes: string
+}
 
 /*
 export function createCompilationResultMessage(name: string, result: any) {
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
new file mode 100644
index 0000000000..52fd791dfd
--- /dev/null
+++ b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
@@ -0,0 +1,64 @@
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import { CustomTooltip } from '@remix-ui/helper'
+import { ContractPropertyName } from '@remix-ui/solidity-compiler'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { useIntl } from 'react-intl'
+const _paq = (window._paq = window._paq || [])
+
+
+export default function SolidityCompile({ contractProperties, selectedContract, help, insertValue, saveAs, plugin }: any) {
+  const intl = useIntl()
+  const downloadFn = () => {
+    _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
+    saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`)
+  }
+  return (
+    <>
+      <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 className="remixui_detailsJSON">
+        {<TreeView>
+          {Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => {
+            const copyDetails = (
+              <span className="remixui_copyDetails">
+                <CopyToClipboard tip={intl.formatMessage({id: 'solidity.copy'})} content={contractProperties[propertyName]} direction="top" />
+              </span>
+            )
+            const questionMark = (
+              <span className="remixui_questionMark">
+                <i
+                  title={intl.formatMessage({
+                    id: `solidity.${propertyName}`,
+                    defaultMessage: help[propertyName]
+                  })}
+                  className="fas fa-question-circle"
+                  aria-hidden="true"
+                ></i>
+              </span>
+            )
+
+            return (
+              <div className="remixui_log" key={index}>
+                <TreeViewItem
+                  label={
+                    <div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">
+                      {propertyName} {copyDetails} {questionMark}
+                    </div>
+                  }
+                  expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false}
+                  iconY='fas fa-caret-down'
+                >
+                  {insertValue(contractProperties, propertyName)}
+                </TreeViewItem>
+              </div>
+            )
+          })}
+        </TreeView>}
+      </div>
+    </>
+  )
+}
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx b/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx
new file mode 100644
index 0000000000..10e73d5031
--- /dev/null
+++ b/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx
@@ -0,0 +1,92 @@
+import { CopyToClipboard } from '@remix-ui/clipboard'
+import { CustomTooltip } from '@remix-ui/helper'
+import JSONTree, { ThemeKeys } from 'react-json-view'
+import React, { useState } from 'react'
+// import { Tabs, Tab, Button } from 'react-bootstrap'
+import { useIntl } from 'react-intl'
+import Tabs from 'react-bootstrap/Tabs'
+import Tab from 'react-bootstrap/Tab'
+import Button from 'react-bootstrap/Button'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+import { ABIDescription } from '@remixproject/plugin-api'
+const _paq = (window._paq = window._paq || [])
+
+export interface VyperCompilationResult {
+  status: 'success'
+  bytecode: string
+  bytecode_runtime: string
+  abi: ABIDescription[]
+  ir: string
+  method_identifiers: {
+    [method: string]: string
+  }
+}
+
+
+export default function VyperCompile({ saveAs, contractProperties, selectedContract }: any) {
+  const intl = useIntl()
+  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'],
+      tabMemberType: 'abi',
+      tabButtonText: () => 'Copy ABI',
+      eventKey: 'abi'
+    },
+    {
+      tabHeadingText: 'Bytecode',
+      tabPayload: Object.values(contractProperties)[0]['bytecode'].object.toString(),
+      tabMemberType: 'bytecode',
+      tabButtonText: () => 'Copy Bytecode',
+      eventKey: 'bytecode'
+    },
+    {
+      tabHeadingText: 'Runtime Bytecode',
+      tabPayload: Object.values(contractProperties)[0]['runtimeBytecode'].object.toString(),
+      tabMemberType: 'bytecode_runtime',
+      tabButtonText: () => 'Copy Runtime Bytecode',
+      eventKey: 'bytecode_runtime'
+    }
+    // {
+    //   tabHeadingText: 'LLL',
+    //   tabPayload: Object.values(contractProperties)[0]['ir'] ? '' : '',
+    //   tabMemberType: 'ir',
+    //   tabButtonText: () => Object.values(contractProperties)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
+    //   eventKey: 'ir'
+    // }
+  ]
+  return (
+    <>
+      <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>
+      <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'])}>
+              <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>
+              )
+            }
+            <Button>
+              {content.tabButtonText()}
+            </Button>
+          </Tab>))}
+      </Tabs>
+    </>
+  )
+}
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index cac1531659..449eb84f63 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
@@ -4,72 +4,41 @@ import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { ContractPropertyName } from '@remix-ui/solidity-compiler'
 
 import React from 'react'
-import { useIntl } from 'react-intl'
+import SolidityCompile from './components/solidityCompile'
+import VyperCompile from './components/vyperCompile'
 
 export interface RemixUiCompileDetailsProps {
-  plugin: any
+  plugin?: any
   contractProperties: any
   selectedContract: string
-  help: any
-  insertValue: any
+  help?: any
+  insertValue?: any
   saveAs: any
 }
 
 const _paq = (window._paq = window._paq || [])
 
 export function RemixUiCompileDetails({ plugin, contractProperties, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
-  const intl = useIntl()
-  const downloadFn = () => {
-    _paq.push(['trackEvent', 'compiler', 'compilerDetails', 'download'])
-    saveAs(new Blob([JSON.stringify(contractProperties, null, '\t')]), `${selectedContract}_compData.json`)
-  }
+  console.log(contractProperties)
+
   return (
     <>
-      <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 className="remixui_detailsJSON">
-        {<TreeView>
-          {Object.keys(contractProperties).map((propertyName: ContractPropertyName, index) => {
-            const copyDetails = (
-              <span className="remixui_copyDetails">
-                <CopyToClipboard tip={intl.formatMessage({id: 'solidity.copy'})} content={contractProperties[propertyName]} direction="top" />
-              </span>
-            )
-            const questionMark = (
-              <span className="remixui_questionMark">
-                <i
-                  title={intl.formatMessage({
-                    id: `solidity.${propertyName}`,
-                    defaultMessage: help[propertyName]
-                  })}
-                  className="fas fa-question-circle"
-                  aria-hidden="true"
-                ></i>
-              </span>
-            )
-
-            return (
-              <div className="remixui_log" key={index}>
-                <TreeViewItem
-                  label={
-                    <div data-id={`remixui_treeviewitem_${propertyName}`} className="remixui_key">
-                      {propertyName} {copyDetails} {questionMark}
-                    </div>
-                  }
-                  expand={propertyName === 'metadata' || propertyName === 'bytecode' ? true : false}
-                  iconY='fas fa-caret-down'
-                >
-                  {insertValue(contractProperties, propertyName)}
-                </TreeViewItem>
-              </div>
-            )
-          })}
-        </TreeView>}
-      </div>
+      {
+        contractProperties.abi && contractProperties.gasEstimates.Creation && contractProperties.web3Deploy ? (
+          <SolidityCompile
+            contractProperties={contractProperties}
+            plugin={plugin}
+            selectedContract={selectedContract}
+            help={help}
+            insertValue={insertValue}
+            saveAs={saveAs}
+          /> ) :
+          <VyperCompile
+            saveAs={saveAs}
+            contractProperties={contractProperties}
+            selectedContract={selectedContract}
+          />
+      }
     </>
   )
 }
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index f39eb74146..25b92593c0 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -123,7 +123,6 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   }
 
   const insertValue = (details, propertyName: ContractPropertyName) => {
-    console.log({ details })
     let node
     if (propertyName === 'web3Deploy' || propertyName === 'name' || propertyName === 'Assembly') {
       node = <pre>{details[propertyName]}</pre>
@@ -311,6 +310,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
                 </span>
               </CustomTooltip>
             </button>
+            {console.log(payload)}
             <button
               data-id="compilation-details"
               className="btn btn-secondary btn-block"

From 39ce2748c34fabed0c92f723e2bcea19d27d6f10 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 12:00:38 +0100
Subject: [PATCH 42/75] fix react imports

---
 .../src/lib/components/solidityCompile.tsx                       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
index 52fd791dfd..f951fe9a2e 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/components/solidityCompile.tsx
@@ -1,6 +1,7 @@
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { CustomTooltip } from '@remix-ui/helper'
 import { ContractPropertyName } from '@remix-ui/solidity-compiler'
+import React from 'react'
 import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { useIntl } from 'react-intl'
 const _paq = (window._paq = window._paq || [])

From 448242aa15413a3d8bd0c38e1efa22d44c071850 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 13:08:17 +0100
Subject: [PATCH 43/75] create vyper-compile-details plugin

---
 apps/remix-ide/src/app.js                     |  4 +-
 .../src/app/plugins/vyper-comile-details.tsx  | 85 +++++++++++++++++++
 apps/remix-ide/src/remixAppManager.js         |  4 +-
 .../vyper-compile-details/src/index.ts        |  0
 .../src/lib/vyper-compile-details.tsx         | 11 +++
 tsconfig.paths.json                           |  3 +
 6 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 apps/remix-ide/src/app/plugins/vyper-comile-details.tsx
 create mode 100644 libs/remix-ui/vyper-compile-details/src/index.ts
 create mode 100644 libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 30ead7e4fe..1e92f1af3c 100644
--- a/apps/remix-ide/src/app.js
+++ b/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,
diff --git a/apps/remix-ide/src/app/plugins/vyper-comile-details.tsx b/apps/remix-ide/src/app/plugins/vyper-comile-details.tsx
new file mode 100644
index 0000000000..8c9c63b7f2
--- /dev/null
+++ b/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}
+      />
+    )
+  }
+
+}
diff --git a/apps/remix-ide/src/remixAppManager.js b/apps/remix-ide/src/remixAppManager.js
index ef3dda2982..eaaf59cce6 100644
--- a/apps/remix-ide/src/remixAppManager.js
+++ b/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)
 }
diff --git a/libs/remix-ui/vyper-compile-details/src/index.ts b/libs/remix-ui/vyper-compile-details/src/index.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
new file mode 100644
index 0000000000..f7eef8f84e
--- /dev/null
+++ b/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>
+    </>
+  )
+}
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
index 044cb56ed7..54fa2e8876 100644
--- a/tsconfig.paths.json
+++ b/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"
             ]
         }
     }

From 45a41e1526e6c5e0ec728c6847237d001ffadce3 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 13:10:23 +0100
Subject: [PATCH 44/75] strip all vyper code from compile details

---
 .../src/lib/solidity-compile-details.tsx      | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index 449eb84f63..b2d743f8db 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
@@ -9,8 +9,8 @@ import VyperCompile from './components/vyperCompile'
 
 export interface RemixUiCompileDetailsProps {
   plugin?: any
-  contractProperties: any
-  selectedContract: string
+  contractProperties?: any
+  selectedContract?: string
   help?: any
   insertValue?: any
   saveAs: any
@@ -23,22 +23,14 @@ export function RemixUiCompileDetails({ plugin, contractProperties, selectedCont
 
   return (
     <>
-      {
-        contractProperties.abi && contractProperties.gasEstimates.Creation && contractProperties.web3Deploy ? (
-          <SolidityCompile
-            contractProperties={contractProperties}
-            plugin={plugin}
-            selectedContract={selectedContract}
-            help={help}
-            insertValue={insertValue}
-            saveAs={saveAs}
-          /> ) :
-          <VyperCompile
-            saveAs={saveAs}
-            contractProperties={contractProperties}
-            selectedContract={selectedContract}
-          />
-      }
+      <SolidityCompile
+        contractProperties={contractProperties}
+        plugin={plugin}
+        selectedContract={selectedContract}
+        help={help}
+        insertValue={insertValue}
+        saveAs={saveAs}
+      />
     </>
   )
 }

From 262266e4af4a859f027bfe7cc85a34d2bbde3370 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 13:57:19 +0100
Subject: [PATCH 45/75] fix path and file name change

---
 apps/remix-ide/src/app.js                            | 12 +++++-------
 ...ile-details.tsx => vyper-compilation-details.tsx} |  2 +-
 tsconfig.paths.json                                  |  6 +++---
 3 files changed, 9 insertions(+), 11 deletions(-)
 rename apps/remix-ide/src/app/plugins/{vyper-comile-details.tsx => vyper-compilation-details.tsx} (99%)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 1e92f1af3c..572043cd4f 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -47,7 +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 { VyperCompilationDetailsPlugin } from './app/plugins/vyper-compilation-details'
 import {ContractFlattener} from './app/plugins/contractFlattener'
 import {OpenAIGpt} from './app/plugins/openaigpt'
 
@@ -131,12 +131,10 @@ class AppComponent {
       'remix.ethereum.org': 23,
       '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
     }
-    
-    this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
-    this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
-    this.showMatamo = matomoDomains[window.location.hostname] && !this.matomoConfAlreadySet
-    
-    this.walkthroughService = new WalkthroughService(appManager)
+    this.showMatamo = matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
+    this.showEnter = matomoDomains[window.location.hostname] && !localStorage.getItem('hadUsageTypeAsked')
+
+    this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
 
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
     // workaround for Electron support
diff --git a/apps/remix-ide/src/app/plugins/vyper-comile-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
similarity index 99%
rename from apps/remix-ide/src/app/plugins/vyper-comile-details.tsx
rename to apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
index 8c9c63b7f2..52d5931834 100644
--- a/apps/remix-ide/src/app/plugins/vyper-comile-details.tsx
+++ b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
@@ -3,7 +3,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import {PluginViewWrapper} from '@remix-ui/helper'
 import { RemixAppManager } from '../../remixAppManager'
 import { RemixUiVyperCompileDetails } from '@remix-ui/vyper-compile-details'
-
+//@ts-ignore
 const _paq = (window._paq = window._paq || [])
 
 const profile = {
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
index 54fa2e8876..73a9d0ff7e 100644
--- a/tsconfig.paths.json
+++ b/tsconfig.paths.json
@@ -100,6 +100,9 @@
             "@remix-ui/solidity-compile-details": [
                 "libs/remix-ui/solidity-compile-details/src/index.ts"
             ],
+            "@remix-ui/vyper-compile-details": [
+              "libs/remix-ui/vyper-compile-details/src/index.ts"
+          ],
             "@remix-ui/solidity-compiler": [
                 "libs/remix-ui/solidity-compiler/src/index.ts"
             ],
@@ -156,9 +159,6 @@
             ],
             "@remixproject/walletconnect-plugin": [
                 "apps/walletconnect/src/index.ts"
-            ],
-            "@remixproject/vyper-compile-details": [
-                "apps/vyper-compile-details/src/index.ts"
             ]
         }
     }

From 5beab8f331574e4dd2de6887247c703979ff6692 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 4 Dec 2023 13:57:48 +0100
Subject: [PATCH 46/75] clean up and plugin setup

---
 apps/vyper/src/app/app.tsx                               | 2 +-
 apps/vyper/src/app/components/VyperResult.tsx            | 9 +++++----
 apps/vyper/src/app/utils/compiler.tsx                    | 1 -
 libs/remix-ui/vyper-compile-details/src/index.ts         | 1 +
 .../src/lib/vyper-compile-details.tsx                    | 1 +
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 9105cdc342..727ec9f9d5 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/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
           }
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 8218aa3be3..603b342e98 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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>
-        <button className="btn btn-secondary btn-block mx-2" onClick={() => {
-
+      <div className="d-flex justify-content-center px-2 w-100">
+        <button className="btn btn-secondary w-100" onClick={async () => {
+          await plugin?.call('vyperCompilationDetails', 'showDetails', {})
         }}>
           <span>Compilation Details</span>
         </button>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index 1d6ae34ae0..b9b6fc3dd2 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/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
diff --git a/libs/remix-ui/vyper-compile-details/src/index.ts b/libs/remix-ui/vyper-compile-details/src/index.ts
index e69de29bb2..830ec8dc6a 100644
--- a/libs/remix-ui/vyper-compile-details/src/index.ts
+++ b/libs/remix-ui/vyper-compile-details/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/vyper-compile-details'
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
index f7eef8f84e..5bfb4543c4 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 
 export function RemixUiVyperCompileDetails() {
 

From 81eaa2d9d4c7c777aa3101862ab879577725428a Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 5 Dec 2023 10:57:18 +0100
Subject: [PATCH 47/75] update the call to mainpanel plugin. change label for
 mainpaneltab

---
 apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx | 2 ++
 apps/vyper/src/app/components/VyperResult.tsx                | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
index 52d5931834..1db215c50f 100644
--- a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
+++ b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
@@ -46,6 +46,8 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
 
   async showDetails(sentPayload: any) {
     console.log({ sentPayload })
+    const contractName = Object.entries(sentPayload).find(([key, value]) =>  key )
+    this.profile.displayName = `${contractName}`
     await this.call('tabs', 'focus', 'vyperCompilationDetails')
     this.payload = sentPayload
     this.renderComponent()
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 603b342e98..bc3a789ad4 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -59,7 +59,7 @@ function VyperResult({ output, plugin }: VyperResultProps) {
       <div className="border border-top"></div>
       <div className="d-flex justify-content-center px-2 w-100">
         <button className="btn btn-secondary w-100" onClick={async () => {
-          await plugin?.call('vyperCompilationDetails', 'showDetails', {})
+          await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
           <span>Compilation Details</span>
         </button>

From a0efac661ce0ca6207aeebd6f0df55073f16e5a2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 6 Dec 2023 11:12:42 +0100
Subject: [PATCH 48/75] handle loading state for compileButton spinner

---
 apps/vyper/src/app/components/CompilerButton.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index b02cc2406d..dbb0158330 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils'
 import Button from 'react-bootstrap/Button'
 import _ from 'lodash'
@@ -12,6 +12,7 @@ interface Props {
 }
 
 function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}: Props) {
+  const [loadingSpinner, setLoadingSpinnerState] = useState(false)
   if (!contract || !contract) {
     return <Button disabled>No contract selected</Button>
   }
@@ -23,6 +24,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
   /** Compile a Contract */
   async function compileContract() {
     resetCompilerState()
+    setLoadingSpinnerState(true)
     try {
       await remixClient.discardHighlight()
       let _contract: any
@@ -111,6 +113,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       remixClient.compilationFinish(_contract.name, _contract.content, data)
       console.log(data)
       setOutput(_contract.name, data)
+      setLoadingSpinnerState(false)
       // remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
@@ -123,8 +126,11 @@ 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">
-      <span>Compile</span>
-      <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
+      <div className="d-flex justify-center align-item-center">
+        <span>Compile</span>
+        <span className="overflow-hidden text-truncate text-nowrap">{contract}</span>
+        {loadingSpinner && <span className="fas fa-spinner fa-pulse" role="status" aria-hidden="true" />}
+      </div>
     </button>
   )
 }

From 69f0b2a3a26ca3625dbaf049bed9e267dcc74474 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 6 Dec 2023 11:23:23 +0100
Subject: [PATCH 49/75] change spinner to sync

---
 apps/vyper/src/app/components/CompilerButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index dbb0158330..4e2459aebd 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -126,10 +126,10 @@ 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-center align-item-center">
+      <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>
-        {loadingSpinner && <span className="fas fa-spinner fa-pulse" role="status" aria-hidden="true" />}
       </div>
     </button>
   )

From b87cd2f8b0fc25ad68fffee9d6cfdcb3f3182083 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 7 Dec 2023 13:34:28 +0100
Subject: [PATCH 50/75] fix issues with displaying  vyper results

---
 .../app/plugins/vyper-compilation-details.tsx | 12 ++--
 apps/vyper/src/app/app.css                    |  8 ---
 .../src/app/components/CompilerButton.tsx     | 64 ++++++++++---------
 apps/vyper/src/app/components/VyperResult.tsx |  2 +-
 .../src/lib/solidity-compile-details.tsx      |  1 -
 .../src/lib/vyper-compile-details.tsx         | 20 ++++--
 .../src/lib}/vyperCompile.tsx                 | 36 +++++------
 7 files changed, 74 insertions(+), 69 deletions(-)
 rename libs/remix-ui/{solidity-compile-details/src/lib/components => vyper-compile-details/src/lib}/vyperCompile.tsx (72%)

diff --git a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
index 1db215c50f..d3cb4240ca 100644
--- a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
+++ b/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}
       />
     )
   }
diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index 67e0fb59b1..7e4107ba67 100644
--- a/apps/vyper/src/app/app.css
+++ b/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;
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 4e2459aebd..9d32799dad 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/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>
   )
 }
 
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index bc3a789ad4..4689be6635 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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>
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index b2d743f8db..042c27baa9 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/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
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
index 5bfb4543c4..a017fa8ee6 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
+++ b/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}
+      />
     </>
   )
 }
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
similarity index 72%
rename from libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx
rename to libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
index 10e73d5031..18608b3056 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/components/vyperCompile.tsx
+++ b/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>
     </>

From 2127096016fd4fa5ea2bc4a35fb853f5b8c97922 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 7 Dec 2023 14:25:53 +0100
Subject: [PATCH 51/75] fix test

---
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 42 +++++++------------
 apps/vyper/src/app/components/VyperResult.tsx |  2 +-
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 7e81c68885..6c7e7c129f 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -47,27 +47,22 @@ module.exports = {
       .frame(0)
       .click('[data-id="remote-compiler"]')
       .click('[data-id="compile"]')
-      .isVisible({
-        selector: '[data-id="copy-abi"]',
-        timeout: 4000,
-        abortOnFailure: false,
-        suppressNotFoundErrors: true
-      }, (okVisible) => {
-        if (okVisible.value === null) {
-          console.log('retrying compilation...')
-          browser.click('[data-id="compile"]').waitForElementVisible('[data-id="copy-abi"]')
-        } else{
-          browser.assert.ok(okVisible.value === true, 'ABI should be visible')
-        }
+      .waitForElementVisible({
+        selector:'[data-id="compilation-details"]',
+        timeout: 60000
+      })
+      .click('[data-id="compilation-details"]')
+      .frameParent()
+      .waitForElementVisible('[data-id="copy-abi"]')
+      .waitForElementVisible({
+        selector: "//*[@class='variable-value' and contains(.,'highestBidder')]",
+        locateStrategy: 'xpath',
       })
-
-
   },
 
   'Compile test contract and deploy to remix VM #group1': function (browser: NightwatchBrowser) {
     let contractAddress
     browser
-      .frameParent()
       .clickLaunchIcon('filePanel')
       .switchWorkspace('default_workspace')
       .addFile('test.vy', { content: testContract })
@@ -75,20 +70,13 @@ module.exports = {
       // @ts-ignore
       .frame(0)
       .click('[data-id="compile"]')
-      .isVisible({
-        selector: '[data-id="copy-abi"]',
-        timeout: 4000,
-        abortOnFailure: false,
-        suppressNotFoundErrors: true
-      }, (okVisible) => {
-        if (okVisible.value === null) {
-          console.log('retrying compilation...')
-          browser.click('[data-id="compile"]').waitForElementVisible('[data-id="copy-abi"]')
-        } else{
-          browser.assert.ok(okVisible.value === true, 'ABI should be visible')
-        }
+      .waitForElementVisible({
+        selector:'[data-id="compilation-details"]',
+        timeout: 60000
       })
+      .click('[data-id="compilation-details"]')
       .frameParent()
+      .waitForElementVisible('[data-id="copy-abi"]')
       .clickLaunchIcon('udapp')
       .createContract('')
       .clickInstance(0)
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 4689be6635..d229663f60 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -58,7 +58,7 @@ function VyperResult({ output, plugin }: VyperResultProps) {
     <>
       <div className="border border-top"></div>
       <div className="d-flex justify-content-center px-2 w-100">
-        <button className="btn btn-secondary w-100" onClick={async () => {
+        <button data-id="compilation-details" className="btn btn-secondary w-100" onClick={async () => {
           await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
           <span>Compilation Details</span>

From 364510f82b72bb25b5aed28e42891196ee59fda3 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 7 Dec 2023 14:35:56 +0100
Subject: [PATCH 52/75] increase timeout

---
 apps/remix-ide-e2e/src/tests/vyper_api.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 6c7e7c129f..99cfb01089 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -49,7 +49,7 @@ module.exports = {
       .click('[data-id="compile"]')
       .waitForElementVisible({
         selector:'[data-id="compilation-details"]',
-        timeout: 60000
+        timeout: 120000
       })
       .click('[data-id="compilation-details"]')
       .frameParent()

From 6d5ea61032db7f99987cb200db1158d3f20da461 Mon Sep 17 00:00:00 2001
From: filip mertens <filip.mertens@ethereum.org>
Date: Thu, 7 Dec 2023 14:50:55 +0100
Subject: [PATCH 53/75] rm flaky

---
 .circleci/config.yml                           | 2 +-
 apps/remix-ide-e2e/src/tests/vyper_api.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 528e9484e4..7f101ed684 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,7 +3,7 @@ version: 2.1
 parameters:
   run_flaky_tests:
     type: boolean
-    default: true
+    default: false
 orbs:
   browser-tools: circleci/browser-tools@1.4.4
 jobs:
diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 99cfb01089..8999335a64 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -12,7 +12,7 @@ module.exports = {
     init(browser, done, 'http://localhost:8080')
   },
 
-  'Should connect to vyper plugin #group1 #flaky': function (browser: NightwatchBrowser) {
+  'Should connect to vyper plugin #group1': function (browser: NightwatchBrowser) {
     browser.clickLaunchIcon('pluginManager')
       .scrollAndClick('[data-id="pluginManagerComponentActivateButtonvyper"]')
       .clickLaunchIcon('vyper')

From 46560f8c60a3498bb87db278c2b15e0a670623fe Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 7 Dec 2023 23:19:05 +0100
Subject: [PATCH 54/75] debugging

---
 apps/vyper/src/app/components/VyperResult.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index d229663f60..d8f57f86cb 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -53,7 +53,6 @@ function VyperResult({ output, plugin }: VyperResultProps) {
       </div>
     )
   }
-  console.log(output)
   return (
     <>
       <div className="border border-top"></div>

From 196591c1334494a55ef7678f7c6b797354f67bbf Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 8 Dec 2023 12:58:57 +0100
Subject: [PATCH 55/75] fix disabled buttons visuals

---
 apps/vyper/src/app/components/CompilerButton.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 9d32799dad..6fa418ab62 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -14,11 +14,11 @@ interface Props {
 function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}: Props) {
   const [loadingSpinner, setLoadingSpinnerState] = useState(false)
   if (!contract || !contract) {
-    return <Button disabled>No contract selected</Button>
+    return <Button disabled className="w-100">No contract selected</Button>
   }
 
   if (!isVyper(contract)) {
-    return <Button disabled>Not a vyper contract</Button>
+    return <Button disabled className="w-100">Not a vyper contract</Button>
   }
 
   /** Compile a Contract */
@@ -130,7 +130,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
 
   return (
     <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">
+      <button data-id="compile" onClick={compileContract} title={contract} className="btn btn-primary 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>

From dfc4b003e669a46f90ed6a94711a90da0e5b7d79 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 8 Dec 2023 13:35:55 +0100
Subject: [PATCH 56/75] fix conditional display of compile details button

---
 apps/vyper/src/app/app.tsx                    |  2 +-
 .../src/app/components/CompilerButton.tsx     | 19 ++++++++++++-------
 apps/vyper/src/app/utils/compiler.tsx         |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 727ec9f9d5..ee0bf5fec7 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -108,7 +108,7 @@ const App: React.FC = () => {
         {console.log(output)}
         <article id="result" className="px-2 mx-2 border-top mt-3">
           {
-            output && Object.keys(output).length > 0 ? (
+            output && Object.keys(output).length > 0 && output.status !== 'failed' ? (
               <>
                 <VyperResult output={output} plugin={remixClient} />
               </>
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 6fa418ab62..8e81530994 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -43,10 +43,13 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       try {
         output = await compile(compilerUrl, _contract)
       } catch (e: any) {
-        setOutput(_contract.name, {status: 'failed', message: e.message})
+        remixClient.changeStatus({
+          key: 'failed',
+          type: 'error',
+          title: e.message
+        })
         return
       }
-      console.log({ output })
       const compileReturnType = () => {
         const t: any = toStandardOutput(contract, output)
         console.log(t)
@@ -130,11 +133,13 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
 
   return (
     <Fragment>
-      <button data-id="compile" onClick={compileContract} title={contract} className="btn btn-primary 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>
+      <button data-id="compile" onClick={compileContract} title={contract} className="btn btn-primary w-100 d-block btn-block text-break remixui_disabled mb-1 mt-3">
+        <div className="d-flex align-items-center justify-content-center fa-1x">
+          <span className="fas fa-sync fa-pulse mr-1" />
+          <div className="text-truncate overflow-hidden text-nowrap">
+            <span>Compile</span>
+            <span className="ml-1 text-nowrap">{contract}</span>
+          </div>
         </div>
       </button>
     </Fragment>
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index b9b6fc3dd2..c8193d1b05 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -87,7 +87,7 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     }
   }
   let response = await axios.post(`${url}compile`, compilePackage )
-
+  console.log(response)
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
   }

From 203fdd7b47767c51b6fb8239e83d9776e0d37717 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 8 Dec 2023 13:39:59 +0100
Subject: [PATCH 57/75] clean up commented out code

---
 apps/vyper/src/app/components/CompilerButton.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 8e81530994..67de8e0f18 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -69,10 +69,8 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
           ir: '',
           methodIdentifiers: methodIdentifiers
         }
-        console.log(result)
         return result
       }
-      // setOutput(_contract.name, compileReturnType())
 
       // ERROR
       if (isCompilationError(output)) {
@@ -118,10 +116,7 @@ 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, compileReturnType())
-      // setLoadingSpinnerState(false)
-      // remixClient.call('compilationDetails' as any, 'showDetails', data)
     } catch (err: any) {
       remixClient.changeStatus({
         key: 'failed',

From c77f0068d8c76fe3436ac68f70274ee8deeb9a59 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 9 Dec 2023 01:45:53 +0100
Subject: [PATCH 58/75] cleanup

---
 apps/vyper/src/app/app.tsx                       | 1 -
 apps/vyper/src/app/components/CompilerButton.tsx | 1 -
 apps/vyper/src/app/utils/compiler.tsx            | 4 ++--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index ee0bf5fec7..7b9d99c4a7 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -105,7 +105,6 @@ const App: React.FC = () => {
           />
         </div>
 
-        {console.log(output)}
         <article id="result" className="px-2 mx-2 border-top mt-3">
           {
             output && Object.keys(output).length > 0 && output.status !== 'failed' ? (
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 67de8e0f18..dbd99b1462 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -52,7 +52,6 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
       }
       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']
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index c8193d1b05..bd86bbf3bf 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -87,7 +87,7 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     }
   }
   let response = await axios.post(`${url}compile`, compilePackage )
-  console.log(response)
+
   if (response.status === 404) {
     throw new Error(`Vyper compiler not found at "${url}".`)
   }
@@ -107,7 +107,7 @@ export async function compile(url: string, contract: Contract): Promise<any> {
     result = await(await axios.get(url + 'artifacts/' + compileCode , {
       method: 'Get'
     })).data
-    console.log(result)
+
     return result
   } else if (status === 'FAILED') {
     const intermediate = await(await axios.get(url + 'exceptions/' + compileCode , {

From ccd06461c012b15bc5bf4181ad2d0e20d4f1c1f9 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 9 Dec 2023 01:46:29 +0100
Subject: [PATCH 59/75] remove archvied react-json-viewer

---
 package.json |  2 +-
 yarn.lock    | 50 +++++++++++++++++++++++++-------------------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 3ad91b7184..e1851a4fe8 100644
--- a/package.json
+++ b/package.json
@@ -134,6 +134,7 @@
     "@ethereumjs/vm": "^6.4.1",
     "@ethersphere/bee-js": "^3.2.0",
     "@isomorphic-git/lightning-fs": "^4.4.1",
+    "@microlink/react-json-view": "^1.23.0",
     "@openzeppelin/contracts": "^5.0.0",
     "@openzeppelin/upgrades-core": "^1.30.0",
     "@openzeppelin/wizard": "0.4.0",
@@ -202,7 +203,6 @@
     "react-draggable": "^4.4.4",
     "react-image-magnifiers": "^1.4.0",
     "react-intl": "^6.0.4",
-    "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.5",
     "react-multi-carousel": "^2.8.2",
     "react-router-dom": "^6.3.0",
diff --git a/yarn.lock b/yarn.lock
index e75886fbe1..1a7c7994b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3636,6 +3636,16 @@
     semver "^7.3.8"
     superstruct "^1.0.3"
 
+"@microlink/react-json-view@^1.23.0":
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/@microlink/react-json-view/-/react-json-view-1.23.0.tgz#641c2483b1a0014818303d4e9cce634d5dacc7e9"
+  integrity sha512-HYJ1nsfO4/qn8afnAMhuk7+5a1vcjEaS8Gm5Vpr1SqdHDY0yLBJGpA+9DvKyxyVKaUkXzKXt3Mif9RcmFSdtYg==
+  dependencies:
+    flux "~4.0.1"
+    react-base16-styling "~0.6.0"
+    react-lifecycles-compat "~3.0.4"
+    react-textarea-autosize "~8.3.2"
+
 "@monaco-editor/loader@^1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.3.tgz#7f1742bd3cc21c0362a46a4056317f6e5215cfca"
@@ -13636,9 +13646,9 @@ fbjs-css-vars@^1.0.0:
   integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
 
 fbjs@^3.0.0, fbjs@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.4.tgz#e1871c6bd3083bac71ff2da868ad5067d37716c6"
-  integrity sha512-ucV0tDODnGV3JCnnkmoszb5lf4bNpzjv80K41wd4k798Etq+UYD0y0TIfalLjZoKgjive6/adkRnszwapiDgBQ==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.5.tgz#aa0edb7d5caa6340011790bd9249dbef8a81128d"
+  integrity sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==
   dependencies:
     cross-fetch "^3.1.5"
     fbjs-css-vars "^1.0.0"
@@ -13646,7 +13656,7 @@ fbjs@^3.0.0, fbjs@^3.0.1:
     object-assign "^4.1.0"
     promise "^7.1.1"
     setimmediate "^1.0.5"
-    ua-parser-js "^0.7.30"
+    ua-parser-js "^1.0.35"
 
 fd-slicer@~1.1.0:
   version "1.1.0"
@@ -13950,10 +13960,10 @@ flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-flux@^4.0.1:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/flux/-/flux-4.0.3.tgz#573b504a24982c4768fdfb59d8d2ea5637d72ee7"
-  integrity sha512-yKAbrp7JhZhj6uiT1FTuVMlIAT1J4jqEyBpFApi1kxpGZCvacMVc/t1pMQyotqHhAgvoE3bNvAykhCo2CLjnYw==
+flux@~4.0.1:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/flux/-/flux-4.0.4.tgz#9661182ea81d161ee1a6a6af10d20485ef2ac572"
+  integrity sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==
   dependencies:
     fbemitter "^3.0.0"
     fbjs "^3.0.1"
@@ -23275,7 +23285,7 @@ re-emitter@1.1.3:
   resolved "https://registry.yarnpkg.com/re-emitter/-/re-emitter-1.1.3.tgz#fa9e319ffdeeeb35b27296ef0f3d374dac2f52a7"
   integrity sha1-+p4xn/3u6zWycpbvDz03TawvUqc=
 
-react-base16-styling@^0.6.0:
+react-base16-styling@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c"
   integrity sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==
@@ -23389,17 +23399,7 @@ 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@^1.21.3:
-  version "1.21.3"
-  resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.21.3.tgz#f184209ee8f1bf374fb0c41b0813cff54549c475"
-  integrity sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==
-  dependencies:
-    flux "^4.0.1"
-    react-base16-styling "^0.6.0"
-    react-lifecycles-compat "^3.0.4"
-    react-textarea-autosize "^8.3.2"
-
-react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4, react-lifecycles-compat@~3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -23507,7 +23507,7 @@ react-test-renderer@^17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react-textarea-autosize@^8.3.2:
+react-textarea-autosize@~8.3.2:
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"
   integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==
@@ -27090,10 +27090,10 @@ typescript@^4.8.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.4.tgz#c464abca159669597be5f96b8943500b238e60e6"
   integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
 
-ua-parser-js@^0.7.30:
-  version "0.7.33"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
-  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
+ua-parser-js@^1.0.35:
+  version "1.0.37"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
+  integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==
 
 uglify-js@^2.8.16:
   version "2.8.29"

From 6437dead72b29cae0c7f1d5b7010d90c50f870a9 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 9 Dec 2023 02:34:09 +0100
Subject: [PATCH 60/75] style results. cleanup

---
 .../app/plugins/vyper-compilation-details.tsx | 89 ++++++++++++++++++-
 apps/vyper/src/app/components/VyperResult.tsx |  2 -
 apps/vyper/src/app/utils/remix-client.tsx     |  1 -
 .../src/lib/vyper-compile-details.tsx         | 22 +++--
 .../src/lib/vyperCompile.tsx                  | 76 ++++++++--------
 5 files changed, 136 insertions(+), 54 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
index d3cb4240ca..e819dde854 100644
--- a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
+++ b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
@@ -3,6 +3,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import {PluginViewWrapper} from '@remix-ui/helper'
 import { RemixAppManager } from '../../remixAppManager'
 import { RemixUiVyperCompileDetails } from '@remix-ui/vyper-compile-details'
+import { ThemeKeys, ThemeObject } from '@microlink/react-json-view'
 //@ts-ignore
 const _paq = (window._paq = window._paq || [])
 
@@ -20,6 +21,8 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   appManager: RemixAppManager
   element: HTMLDivElement
   payload: any
+  themeStyle: any
+  theme: ThemeKeys | ThemeObject
   constructor(appManager: RemixAppManager) {
     super(profile)
     this.appManager = appManager
@@ -35,6 +38,7 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   }
 
   async onActivation() {
+    this.handleThemeChange()
     await this.call('tabs', 'focus', 'vyperCompilationDetails')
     this.renderComponent()
     _paq.push(['trackEvent', 'plugin', 'activated', 'vyperCompilationDetails'])
@@ -51,11 +55,88 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
     this.profile.displayName = `${contractName}`
     this.renderComponent()
     this.payload = sentPayload
+    const active = await this.call('theme', 'currentTheme')
+    console.log(active)
+    if (active.quality === 'dark') {
+      switch(active.name) {
+      case 'HackerOwl':
+        this.theme = 'harmonic'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      case 'Black':
+        this.theme = 'eighties'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      case 'Cyborg':
+        this.theme = 'shapeshifter'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      case 'Dark':
+        this.theme = 'flat'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      default:
+        this.theme = 'shapeshifter'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      }
+    } else {
+      switch(active.name) {
+      case 'Candy':
+        this.theme = 'apathy:inverted'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      case 'Midcentury':
+        this.theme = 'apathy:inverted'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      case 'Unicorn':
+        this.theme = 'apathy:inverted'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      case 'Violet':
+        this.theme = 'summerfruit:inverted'
+        this.themeStyle = { backgroundColor: active.backgroundColor }
+        break
+      default:
+        this.theme = 'bright:inverted'
+        break
+      }
+    }
     this.renderComponent()
   }
 
+  private handleThemeChange() {
+    this.on('theme', 'themeChanged', (theme: any) => {
+      if (theme.quality === 'dark') {
+        switch(theme.name) {
+        case 'HackerOwl':
+          this.theme = 'solarized'
+          break
+        case 'Black':
+          this.theme = 'shapeshifter'
+          break
+        case 'Cyborg':
+          this.theme = 'shapeshifter'
+          break
+        case 'Dark':
+          this.theme = 'harmonic'
+          break
+        default:
+          this.theme = 'shapeshifter'
+          break
+        }
+      } else {
+        this.theme = 'bright:inverted'
+      }
+      this.themeStyle = { color: theme.quality === 'dark' ? '#ffffff'/*theme.textColor*/ : theme.textColor }
+      this.renderComponent()
+    })
+  }
+
   setDispatch(dispatch: React.Dispatch<any>): void {
     this.dispatch = dispatch
+    this.renderComponent()
   }
   render() {
     return (
@@ -68,14 +149,18 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   renderComponent() {
     this.dispatch({
       ...this,
-      ...this.payload
+      ...this.payload,
+      themeStyle: this.themeStyle,
+      theme: this.theme
     })
   }
 
   updateComponent(state: any) {
     return (
       <RemixUiVyperCompileDetails
-        payload={this.payload}
+        payload={state.payload}
+        theme={state.theme}
+        themeStyle={state.themeStyle}
       />
     )
   }
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index d8f57f86cb..56c32702de 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -3,8 +3,6 @@ import {VyperCompilationOutput, isCompilationError} from '../utils'
 import Tabs from 'react-bootstrap/Tabs'
 import Tab from 'react-bootstrap/Tab'
 import Button from 'react-bootstrap/Button'
-import JSONTree, { ThemeKeys } from 'react-json-view'
-import ReactJson from 'react-json-view'
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import { VyperCompilationResult } from '../utils/types'
 
diff --git a/apps/vyper/src/app/utils/remix-client.tsx b/apps/vyper/src/app/utils/remix-client.tsx
index 74cb87d2c6..91db5aa5d2 100644
--- a/apps/vyper/src/app/utils/remix-client.tsx
+++ b/apps/vyper/src/app/utils/remix-client.tsx
@@ -4,7 +4,6 @@ import {createClient} from '@remixproject/plugin-webview'
 import {PluginClient} from '@remixproject/plugin'
 import {Contract} from './compiler'
 import {ExampleContract} from '../components/VyperResult'
-import { ThemeKeys } from 'react-json-view'
 
 export class RemixClient extends PluginClient {
   private client = createClient<Api, Readonly<RemixApi>>(this)
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
index a017fa8ee6..63da76b412 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyper-compile-details.tsx
@@ -1,23 +1,27 @@
 import React from 'react'
 import VyperCompile from './vyperCompile'
-//@ts-nocheck
+import { ThemeKeys, ThemeObject } from '@microlink/react-json-view'
 
 
 interface RemixUiVyperCompileDetailsProps {
   payload: any
+  theme?: ThemeKeys | ThemeObject
+  themeStyle?: any
 }
 
-export function RemixUiVyperCompileDetails({ payload }: RemixUiVyperCompileDetailsProps) {
-  const dpayload = Object.values(payload) as any
-
+export function RemixUiVyperCompileDetails({ payload, theme, themeStyle }: RemixUiVyperCompileDetailsProps) {
+  const dpayload = Object.values(payload) as any ?? {}
+  const bcode = dpayload[0].bytecode ? dpayload[0].bytecode.object : ''
+  const runtimeBcode = dpayload[0].runtimeBytecode ? dpayload[0].runtimeBytecode.object : ''
+  const ir = dpayload[0].ir
+  const methodIdentifiers= dpayload[0].methodIdentifiers
+  const abi= dpayload[0].abi
   return (
     <>
       <VyperCompile
-        ir={dpayload[0].ir}
-        methodIdentifiers={dpayload[0].methodIdentifiers}
-        abi={dpayload[0].abi}
-        bytecode={dpayload[0].bytecode}
-        bytecodeRuntime={dpayload[0].bytecodeRuntime}
+        result={{bytecode: bcode, bytecodeRuntime: runtimeBcode, ir: ir, methodIdentifiers: methodIdentifiers, abi: abi}}
+        theme={theme}
+        themeStyle={themeStyle}
       />
     </>
   )
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
index 18608b3056..a3a939a8d8 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
@@ -1,13 +1,10 @@
 import { CopyToClipboard } from '@remix-ui/clipboard'
-import { CustomTooltip } from '@remix-ui/helper'
-import JSONTree, { ThemeKeys } from 'react-json-view'
+import JSONTree, { ThemeKeys, ThemeObject } from '@microlink/react-json-view'
 import React, { useState } from 'react'
-// import { Tabs, Tab, Button } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
 import Tabs from 'react-bootstrap/Tabs'
 import Tab from 'react-bootstrap/Tab'
 import Button from 'react-bootstrap/Button'
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { ABIDescription } from '@remixproject/plugin-api'
 const _paq = (window._paq = window._paq || [])
 
@@ -22,70 +19,69 @@ export interface VyperCompilationResult {
   }
 }
 
+export interface VyperCompileProps {
+  result: VyperCompilationResult
+  theme?: ThemeKeys | ThemeObject
+  themeStyle?: any
+}
+
 
-export default function VyperCompile(props: VyperCompilationResult) {
+export default function VyperCompile({result, theme, themeStyle}: VyperCompileProps) {
   const intl = useIntl()
-  // 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 [active, setActive] = useState<keyof VyperCompilationResult>('abi')
+  console.log(theme, themeStyle)
   const tabContent = [
     {
       tabHeadingText: 'ABI',
-      tabPayload: props.abi, //Object.values(props)[0]['abi'],
+      tabPayload: result.abi,
       tabMemberType: 'abi',
       tabButtonText: () => 'Copy ABI',
       eventKey: 'abi'
     },
     {
       tabHeadingText: 'Bytecode',
-      tabPayload: props.bytecode, //Object.values(props)[0]['bytecode'].object.toString(),
+      tabPayload: result.bytecode,
       tabMemberType: 'bytecode',
       tabButtonText: () => 'Copy Bytecode',
       eventKey: 'bytecode'
     },
     {
       tabHeadingText: 'Runtime Bytecode',
-      tabPayload: props.bytecodeRuntime,// Object.values(props)[0]['runtimeBytecode'].object.toString(),
+      tabPayload: result.bytecodeRuntime,
       tabMemberType: 'bytecode_runtime',
       tabButtonText: () => 'Copy Runtime Bytecode',
       eventKey: 'bytecode_runtime'
     }
-    // {
-    //   tabHeadingText: 'LLL',
-    //   tabPayload: Object.values(contractProperties)[0]['ir'] ? '' : '',
-    //   tabMemberType: 'ir',
-    //   tabButtonText: () => Object.values(contractProperties)[0]['ir'] ? 'Copy LLL Code' : 'Nothing to copy yet',
-    //   eventKey: 'ir'
-    // }
   ]
   return (
     <>
-      {/* <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> */}
       <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(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 as ABIDescription[]} theme={{} as any}/> : (
-                <textarea defaultValue={content.tabPayload as string}></textarea>
-              )
-            }
-            {/* <Button>
-              {content.tabButtonText()}
-            </Button> */}
-          </Tab>))}
+            <div className="d-flex flex-column w-75 justify-content-center mx-auto rounded-2">
+              <CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(result)[0]['abi']))}>
+                <Button variant="info" className="copy mt-3 ml-2" data-id={content.eventKey === 'abi' ? 'copy-abi' : ''}>
+                  <span className="far fa-copy mr-2"></span>
+                  {content.tabButtonText()}
+                </Button>
+              </CopyToClipboard>
+              {content.eventKey === 'abi' ? (
+                <div className="my-3">
+                  <JSONTree
+                    src={content.tabPayload as ABIDescription[]}
+                    theme={theme}
+                    style={themeStyle}
+                  />
+                </div>
+              ) : (
+                <div className="w-100 mt-2 p-2 mx-auto">
+                  <textarea className="form-control rounded-2" defaultValue={content.tabPayload as string} rows={15}></textarea>
+                </div>
+              )}
+            </div>
+          </Tab>
+        ))}
       </Tabs>
     </>
   )

From e4f05774062e63c08c29e062ba12fd53740cef82 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 9 Dec 2023 02:36:12 +0100
Subject: [PATCH 61/75] cleanup

---
 apps/vyper/src/app/components/CompilerButton.tsx             | 2 +-
 apps/vyper/src/app/utils/compiler.tsx                        | 2 +-
 libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index dbd99b1462..d91aa49a2c 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react'
-import {isVyper, compile, toStandardOutput, VyperCompilationOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils'
+import {isVyper, compile, toStandardOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils'
 import Button from 'react-bootstrap/Button'
 import _ from 'lodash'
 import { runtime } from 'webpack'
diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index bd86bbf3bf..c97fdf57dd 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -1,4 +1,4 @@
-import {CompilationResult, ABIDescription} from '@remixproject/plugin-api'
+import { ABIDescription} from '@remixproject/plugin-api'
 import axios from 'axios'
 
 export interface Contract {
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
index a3a939a8d8..82e1e10ee4 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
@@ -1,7 +1,6 @@
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import JSONTree, { ThemeKeys, ThemeObject } from '@microlink/react-json-view'
 import React, { useState } from 'react'
-import { useIntl } from 'react-intl'
 import Tabs from 'react-bootstrap/Tabs'
 import Tab from 'react-bootstrap/Tab'
 import Button from 'react-bootstrap/Button'
@@ -27,10 +26,8 @@ export interface VyperCompileProps {
 
 
 export default function VyperCompile({result, theme, themeStyle}: VyperCompileProps) {
-  const intl = useIntl()
 
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')
-  console.log(theme, themeStyle)
   const tabContent = [
     {
       tabHeadingText: 'ABI',

From b3e636eca51f43a99daab177b1606a781d2cb59a Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 9 Dec 2023 02:37:03 +0100
Subject: [PATCH 62/75] more cleanup

---
 apps/vyper/src/app/app.tsx                       | 2 +-
 apps/vyper/src/app/components/CompilerButton.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 7b9d99c4a7..b14ee3a172 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect} from 'react'
 
-import {VyperCompilationOutput, normalizeContractPath, remixClient, toStandardOutput} from './utils'
+import {remixClient} from './utils'
 import {CompilationResult} from '@remixproject/plugin-api'
 
 // Components
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index d91aa49a2c..452cfcf784 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useState } from 'react'
 import {isVyper, compile, toStandardOutput, isCompilationError, remixClient, normalizeContractPath} from '../utils'
 import Button from 'react-bootstrap/Button'
 import _ from 'lodash'
-import { runtime } from 'webpack'
 
 interface Props {
   compilerUrl: string

From 6581f42df9b86bc5b32707f787b89ddb904c171f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 11 Dec 2023 12:14:49 +0100
Subject: [PATCH 63/75] clean console logs. update themeStyle

---
 .../src/app/plugins/vyper-compilation-details.tsx      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
index e819dde854..6d98009400 100644
--- a/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
+++ b/apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx
@@ -49,14 +49,11 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   }
 
   async showDetails(sentPayload: any) {
-    console.log(sentPayload )
     const contractName = Object.entries(sentPayload).find(([key, value]) =>  key )
     await this.call('tabs', 'focus', 'vyperCompilationDetails')
     this.profile.displayName = `${contractName}`
-    this.renderComponent()
     this.payload = sentPayload
     const active = await this.call('theme', 'currentTheme')
-    console.log(active)
     if (active.quality === 'dark') {
       switch(active.name) {
       case 'HackerOwl':
@@ -112,24 +109,29 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
         switch(theme.name) {
         case 'HackerOwl':
           this.theme = 'solarized'
+          this.themeStyle = { backgroundColor: theme.backgroundColor }
           break
         case 'Black':
           this.theme = 'shapeshifter'
+          this.themeStyle = { backgroundColor: theme.backgroundColor }
           break
         case 'Cyborg':
           this.theme = 'shapeshifter'
+          this.themeStyle = { backgroundColor: theme.backgroundColor }
           break
         case 'Dark':
           this.theme = 'harmonic'
+          this.themeStyle = { backgroundColor: theme.backgroundColor }
           break
         default:
           this.theme = 'shapeshifter'
+          this.themeStyle = { backgroundColor: theme.backgroundColor }
           break
         }
       } else {
         this.theme = 'bright:inverted'
+        this.themeStyle = { backgroundColor: theme.backgroundColor }
       }
-      this.themeStyle = { color: theme.quality === 'dark' ? '#ffffff'/*theme.textColor*/ : theme.textColor }
       this.renderComponent()
     })
   }

From 1045f8f66e244653b4d90b9d743fda2f18a91876 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 18 Dec 2023 10:17:37 +0100
Subject: [PATCH 64/75] fixes as per @LianaHus comments

---
 apps/vyper/src/app/utils/compiler.tsx                           | 2 +-
 .../src/lib/solidity-compile-details.tsx                        | 1 -
 libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx  | 2 +-
 libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx    | 1 -
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/vyper/src/app/utils/compiler.tsx b/apps/vyper/src/app/utils/compiler.tsx
index c97fdf57dd..ed1cc80b50 100644
--- a/apps/vyper/src/app/utils/compiler.tsx
+++ b/apps/vyper/src/app/utils/compiler.tsx
@@ -37,7 +37,7 @@ export function normalizeContractPath(contractPath: string): string[] {
   const filename = paths[paths.length - 1].split('.')[0]
   let folders = ''
   for (let i = 0; i < paths.length - 1; i++) {
-    if(i !== paths.length -1) {
+    if (i !== paths.length -1) {
       folders += `${paths[i]}/`
     }
   }
diff --git a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
index 042c27baa9..f187c37fac 100644
--- a/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
+++ b/libs/remix-ui/solidity-compile-details/src/lib/solidity-compile-details.tsx
@@ -18,7 +18,6 @@ export interface RemixUiCompileDetailsProps {
 const _paq = (window._paq = window._paq || [])
 
 export function RemixUiCompileDetails({ plugin, contractProperties, selectedContract, saveAs, help, insertValue }: RemixUiCompileDetailsProps) {
-  console.log(contractProperties)
 
   return (
     <>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
index 25b92593c0..4410ab2155 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx
@@ -310,7 +310,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
                 </span>
               </CustomTooltip>
             </button>
-            {console.log(payload)}
+
             <button
               data-id="compilation-details"
               className="btn btn-secondary btn-block"
diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
index 82e1e10ee4..27d7ccaf1e 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
@@ -24,7 +24,6 @@ export interface VyperCompileProps {
   themeStyle?: any
 }
 
-
 export default function VyperCompile({result, theme, themeStyle}: VyperCompileProps) {
 
   const [active, setActive] = useState<keyof VyperCompilationResult>('abi')

From bd0024a00ac87e38834afc639b2aa8e8383aeacd Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 18 Dec 2023 10:19:15 +0100
Subject: [PATCH 65/75] update code for walkthroughService

---
 apps/remix-ide/src/app.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 572043cd4f..3195b12bbd 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -131,8 +131,12 @@ class AppComponent {
       'remix.ethereum.org': 23,
       '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
     }
-    this.showMatamo = matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
-    this.showEnter = matomoDomains[window.location.hostname] && !localStorage.getItem('hadUsageTypeAsked')
+
+    this.matomoConfAlreadySet = Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
+    this.matomoCurrentSetting = Registry.getInstance().get('config').api.get('settings/matomo-analytics')
+    this.showMatamo = matomoDomains[window.location.hostname] && !this.matomoConfAlreadySet
+
+    this.walkthroughService = new WalkthroughService(appManager)
 
     this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
 

From 45304b940a70ee538df18aadad99cf612de14062 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 18 Dec 2023 12:17:37 +0100
Subject: [PATCH 66/75] fix app.js

---
 apps/remix-ide/src/app.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/remix-ide/src/app.js b/apps/remix-ide/src/app.js
index 3195b12bbd..eed35827d0 100644
--- a/apps/remix-ide/src/app.js
+++ b/apps/remix-ide/src/app.js
@@ -138,8 +138,6 @@ class AppComponent {
 
     this.walkthroughService = new WalkthroughService(appManager)
 
-    this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
-
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
     // workaround for Electron support
     if (!isElectron() && !hosts.includes(window.location.host)) {

From 9e1e2b44c262aad0019d1a296ab4dad7bd5d3fe2 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 2 Jan 2024 14:08:01 +0100
Subject: [PATCH 67/75] fix abi copy fail bug

---
 libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
index 27d7ccaf1e..9399a747ff 100644
--- a/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
+++ b/libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx
@@ -50,13 +50,14 @@ export default function VyperCompile({result, theme, themeStyle}: VyperCompilePr
       eventKey: 'bytecode_runtime'
     }
   ]
+
   return (
     <>
       <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}`}>
             <div className="d-flex flex-column w-75 justify-content-center mx-auto rounded-2">
-              <CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(Object.values(result)[0]['abi']))}>
+              <CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(result['abi']))}>
                 <Button variant="info" className="copy mt-3 ml-2" data-id={content.eventKey === 'abi' ? 'copy-abi' : ''}>
                   <span className="far fa-copy mr-2"></span>
                   {content.tabButtonText()}

From edb2d87251f5ba3f3e877fad3f4f474e670ccdaa Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 2 Jan 2024 16:46:47 +0100
Subject: [PATCH 68/75] add test to address copy abi

---
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 8999335a64..d88678c23a 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -60,6 +60,28 @@ module.exports = {
       })
   },
 
+  'Should copy abi after blind_auction compile #group1': function (browser: NightwatchBrowser) {
+    browser//.clickLaunchIcon('vyper')
+      .frame(0)
+      .click('[data-id="remote-compiler"]')
+      .click('[data-id="compile"]')
+      .waitForElementVisible({
+        selector:'[data-id="compilation-details"]',
+        timeout: 120000
+      })
+      .click('[data-id="compilation-details"]')
+      .frameParent()
+      .waitForElementVisible('[data-id="copy-abi"]')
+      .click('[data-id="copy-abi"]')
+      .execute(() => {
+        navigator.clipboard.readText()
+          .then((clippedText) => {
+            console.log('clippedText', clippedText)
+          })
+
+      })
+  },
+
   'Compile test contract and deploy to remix VM #group1': function (browser: NightwatchBrowser) {
     let contractAddress
     browser

From eb64a145759f6fd5194bbf8a6fe9d54578614a5e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 4 Jan 2024 10:43:39 +0100
Subject: [PATCH 69/75] remove clipboard test

---
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index d88678c23a..8999335a64 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -60,28 +60,6 @@ module.exports = {
       })
   },
 
-  'Should copy abi after blind_auction compile #group1': function (browser: NightwatchBrowser) {
-    browser//.clickLaunchIcon('vyper')
-      .frame(0)
-      .click('[data-id="remote-compiler"]')
-      .click('[data-id="compile"]')
-      .waitForElementVisible({
-        selector:'[data-id="compilation-details"]',
-        timeout: 120000
-      })
-      .click('[data-id="compilation-details"]')
-      .frameParent()
-      .waitForElementVisible('[data-id="copy-abi"]')
-      .click('[data-id="copy-abi"]')
-      .execute(() => {
-        navigator.clipboard.readText()
-          .then((clippedText) => {
-            console.log('clippedText', clippedText)
-          })
-
-      })
-  },
-
   'Compile test contract and deploy to remix VM #group1': function (browser: NightwatchBrowser) {
     let contractAddress
     browser

From 01bc6a9480e57b85bcd258e20c9018281838695e Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Sat, 2 Dec 2023 00:05:37 +0100
Subject: [PATCH 70/75] remove excessive console logs in suggestion service and
 workspacetemplate

---
 apps/vyper/src/app/components/CompilerButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 452cfcf784..ad04d0ba04 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -25,7 +25,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
     resetCompilerState()
     setLoadingSpinnerState(true)
     try {
-      await remixClient.discardHighlight()
+      // await remixClient.discardHighlight()
       let _contract: any
       try {
         _contract = await remixClient.getContract()
@@ -78,7 +78,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
             start: {line: line - 1, column: 10},
             end: {line: line - 1, column: 10}
           }
-          remixClient.highlight(lineColumnPos as any, _contract.name, output.message)
+          // remixClient.highlight(lineColumnPos as any, _contract.name, '#e0b4b4')
         } else {
           const regex = output?.message?.match(/line ((\d+):(\d+))+/g)
           const errors = output?.message?.split(/line ((\d+):(\d+))+/g) // extract error message
@@ -98,7 +98,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
                   start: {line: parseInt(location[0]) - 1, column: 10},
                   end: {line: parseInt(location[0]) - 1, column: 10}
                 }
-                remixClient.highlight(lineColumnPos as any, _contract.name, message)
+                // remixClient.highlight(lineColumnPos as any, _contract.name, message)
               }
             })
           }
@@ -106,7 +106,7 @@ function CompilerButton({contract, setOutput, compilerUrl, resetCompilerState}:
         throw new Error(output.message)
       }
       // SUCCESS
-      remixClient.discardHighlight()
+      // remixClient.discardHighlight()
       remixClient.changeStatus({
         key: 'succeed',
         type: 'success',

From 2fbee9884873065812fe03dc1c8f4866537a907c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 5 Jan 2024 01:23:15 +0100
Subject: [PATCH 71/75] add clipboard test

---
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 8999335a64..2533ac60c5 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -60,6 +60,29 @@ module.exports = {
       })
   },
 
+  'Should copy abi after blind_auction compile #group1': function (browser: NightwatchBrowser) {
+    console.log(browser as any)
+    browser//.clickLaunchIcon('vyper')
+      .frame(0)
+      .click('[data-id="remote-compiler"]')
+      .click('[data-id="compile"]')
+      .waitForElementVisible({
+        selector:'[data-id="compilation-details"]',
+        timeout: 120000
+      })
+      .click('[data-id="compilation-details"]')
+      .frameParent()
+      .waitForElementVisible('[data-id="copy-abi"]')
+      .click('[data-id="copy-abi"]')
+      .execute(() => {
+        navigator.clipboard.readText()
+          .then((clippedText) => {
+            console.log('clippedText', clippedText)
+          })
+
+      })
+  },
+
   'Compile test contract and deploy to remix VM #group1': function (browser: NightwatchBrowser) {
     let contractAddress
     browser

From 268b9991b906133c339e402bbfcdb17b6111b476 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 5 Jan 2024 04:03:22 +0100
Subject: [PATCH 72/75] clipboard test

---
 .../src/commands/clickLaunchIcon.ts           | 12 ++--
 .../commands/connectToExternalHttpProvider.ts | 68 +++++++++----------
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 11 ++-
 apps/remix-ide-e2e/src/types/index.d.ts       |  1 +
 4 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/apps/remix-ide-e2e/src/commands/clickLaunchIcon.ts b/apps/remix-ide-e2e/src/commands/clickLaunchIcon.ts
index af1a7dbb55..fff9a61929 100644
--- a/apps/remix-ide-e2e/src/commands/clickLaunchIcon.ts
+++ b/apps/remix-ide-e2e/src/commands/clickLaunchIcon.ts
@@ -4,12 +4,12 @@ import EventEmitter from 'events'
 class ClickLaunchIcon extends EventEmitter {
   command (this: NightwatchBrowser, icon: string): NightwatchBrowser {
     this.api
-    .waitForElementVisible('#icon-panel div[plugin="' + icon + '"]')
-    .click('#icon-panel div[plugin="' + icon + '"]')
-    .perform((done) => {
-      done()
-      this.emit('complete')
-    })
+      .waitForElementVisible('#icon-panel div[plugin="' + icon + '"]')
+      .click('#icon-panel div[plugin="' + icon + '"]')
+      .perform((done) => {
+        done()
+        this.emit('complete')
+      })
     return this
   }
 }
diff --git a/apps/remix-ide-e2e/src/commands/connectToExternalHttpProvider.ts b/apps/remix-ide-e2e/src/commands/connectToExternalHttpProvider.ts
index 8bac04f9fe..5a971c02cb 100644
--- a/apps/remix-ide-e2e/src/commands/connectToExternalHttpProvider.ts
+++ b/apps/remix-ide-e2e/src/commands/connectToExternalHttpProvider.ts
@@ -2,40 +2,40 @@ import { NightwatchBrowser } from 'nightwatch'
 import EventEmitter from 'events'
 
 class ConnectToExternalHttpProvider extends EventEmitter {
-    command(this: NightwatchBrowser, url: string, identifier: string): NightwatchBrowser {
-        this.api.element('xpath', `//*[@class='udapp_environment' and contains(.,'${identifier}')]`,
-            (result) => {
-                if (result.status as any === -1) {
-                    console.log("No connection to external provider found. Adding one.", url)
-                    browser
-                        .click({
-                            locateStrategy: 'css selector',
-                            selector: '[data-id="basic-http-provider-modal-footer-ok-react"]',
-                            abortOnFailure: false,
-                            suppressNotFoundErrors: true,
-                            timeout: 5000
-                        })
-                        .switchEnvironment('basic-http-provider')
-                        .waitForElementPresent('[data-id="basic-http-provider-modal-footer-ok-react"]')
-                        .execute(() => {
-                            (document.querySelector('*[data-id="basic-http-providerModalDialogContainer-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
-                        }, [], () => { })
-                        .setValue('[data-id="modalDialogCustomPromp"]', url)
-                        .modalFooterOKClick('basic-http-provider')
-                        .perform((done) => {
-                            done()
-                            this.emit('complete')
-                        })
-                } else {
-                    this.api.perform((done) => {
-                        done()
-                        this.emit('complete')
-                    })
-                }
-            }
-        )
-        return this
-    }
+  command(this: NightwatchBrowser, url: string, identifier: string): NightwatchBrowser {
+    this.api.element('xpath', `//*[@class='udapp_environment' and contains(.,'${identifier}')]`,
+      (result) => {
+        if (result.status as any === -1) {
+          console.log("No connection to external provider found. Adding one.", url)
+          browser
+            .click({
+              locateStrategy: 'css selector',
+              selector: '[data-id="basic-http-provider-modal-footer-ok-react"]',
+              abortOnFailure: false,
+              suppressNotFoundErrors: true,
+              timeout: 5000
+            })
+            .switchEnvironment('basic-http-provider')
+            .waitForElementPresent('[data-id="basic-http-provider-modal-footer-ok-react"]')
+            .execute(() => {
+              (document.querySelector('*[data-id="basic-http-providerModalDialogContainer-react"] input[data-id="modalDialogCustomPromp"]') as any).focus()
+            }, [], () => { })
+            .setValue('[data-id="modalDialogCustomPromp"]', url)
+            .modalFooterOKClick('basic-http-provider')
+            .perform((done) => {
+              done()
+              this.emit('complete')
+            })
+        } else {
+          this.api.perform((done) => {
+            done()
+            this.emit('complete')
+          })
+        }
+      }
+    )
+    return this
+  }
 }
 
 module.exports = ConnectToExternalHttpProvider
diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 2533ac60c5..85ae82919c 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -61,7 +61,12 @@ module.exports = {
   },
 
   'Should copy abi after blind_auction compile #group1': function (browser: NightwatchBrowser) {
-    console.log(browser as any)
+    const chromeBrowser = (browser as any).chrome
+    // const firefoxBrowser = (browser as any).firefox
+    // console.log('chromeBrowser', chromeBrowser)
+    // console.log('firefoxBrowser', firefoxBrowser)
+    chromeBrowser.setPermission('clipboard-read', 'granted')
+    chromeBrowser.setPermission('clipboard-write', 'granted')
     browser//.clickLaunchIcon('vyper')
       .frame(0)
       .click('[data-id="remote-compiler"]')
@@ -77,9 +82,9 @@ module.exports = {
       .execute(() => {
         navigator.clipboard.readText()
           .then((clippedText) => {
-            console.log('clippedText', clippedText)
+            console.log(`clipped text is ${clippedText.length} characters long`)
+            if(clippedText.length === 0) throw new Error('Clipboard is empty')
           })
-
       })
   },
 
diff --git a/apps/remix-ide-e2e/src/types/index.d.ts b/apps/remix-ide-e2e/src/types/index.d.ts
index ada7b9cca9..665a1cc4f5 100644
--- a/apps/remix-ide-e2e/src/types/index.d.ts
+++ b/apps/remix-ide-e2e/src/types/index.d.ts
@@ -15,6 +15,7 @@ declare module 'nightwatch' {
     verifyContracts(compiledContractNames: string[], opts?: {wait: number; version?: string; runs?: string}): NightwatchBrowser
     selectAccount(account?: string): NightwatchBrowser
     clickFunction(fnFullName: string, expectedInput?: NightwatchClickFunctionExpectedInput): NightwatchBrowser
+    checkClipboard(): NightwatchBrowser
     testFunction(txHash: string, expectedInput: NightwatchTestFunctionExpectedInput): NightwatchBrowser
     goToVMTraceStep(step: number, incr?: number): NightwatchBrowser
     checkVariableDebug(id: string, debugValue: NightwatchCheckVariableDebugValue): NightwatchBrowser

From bdb19a1ef9ce495428a1e7fcc9bbe1737ff7d5ee Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 5 Jan 2024 04:15:50 +0100
Subject: [PATCH 73/75] circle complains

---
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index 85ae82919c..b37f989bb4 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -61,12 +61,12 @@ module.exports = {
   },
 
   'Should copy abi after blind_auction compile #group1': function (browser: NightwatchBrowser) {
-    const chromeBrowser = (browser as any).chrome
-    // const firefoxBrowser = (browser as any).firefox
-    // console.log('chromeBrowser', chromeBrowser)
-    // console.log('firefoxBrowser', firefoxBrowser)
-    chromeBrowser.setPermission('clipboard-read', 'granted')
-    chromeBrowser.setPermission('clipboard-write', 'granted')
+    // const chromeBrowser = (browser as any).chrome
+    // // const firefoxBrowser = (browser as any).firefox
+    // // console.log('chromeBrowser', chromeBrowser)
+    // // console.log('firefoxBrowser', firefoxBrowser)
+    // chromeBrowser.setPermission('clipboard-read', 'granted')
+    // chromeBrowser.setPermission('clipboard-write', 'granted')
     browser//.clickLaunchIcon('vyper')
       .frame(0)
       .click('[data-id="remote-compiler"]')
@@ -79,13 +79,13 @@ module.exports = {
       .frameParent()
       .waitForElementVisible('[data-id="copy-abi"]')
       .click('[data-id="copy-abi"]')
-      .execute(() => {
-        navigator.clipboard.readText()
-          .then((clippedText) => {
-            console.log(`clipped text is ${clippedText.length} characters long`)
-            if(clippedText.length === 0) throw new Error('Clipboard is empty')
-          })
-      })
+      // .execute(() => {
+      //   navigator.clipboard.readText()
+      //     .then((clippedText) => {
+      //       console.log(`clipped text is ${clippedText.length} characters long`)
+      //       if(clippedText.length === 0) throw new Error('Clipboard is empty')
+      //     })
+      // })
   },
 
   'Compile test contract and deploy to remix VM #group1': function (browser: NightwatchBrowser) {

From d5079a3009c8c3c06859bc5927c7f9faf0c9a11f Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Fri, 5 Jan 2024 19:12:39 +0100
Subject: [PATCH 74/75] finished clipboard test

---
 .../remix-ide-e2e/src/tests/vyper_api.test.ts | 54 ++++++++++---------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
index b37f989bb4..5ef312d8a2 100644
--- a/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
+++ b/apps/remix-ide-e2e/src/tests/vyper_api.test.ts
@@ -61,31 +61,35 @@ module.exports = {
   },
 
   'Should copy abi after blind_auction compile #group1': function (browser: NightwatchBrowser) {
-    // const chromeBrowser = (browser as any).chrome
-    // // const firefoxBrowser = (browser as any).firefox
-    // // console.log('chromeBrowser', chromeBrowser)
-    // // console.log('firefoxBrowser', firefoxBrowser)
-    // chromeBrowser.setPermission('clipboard-read', 'granted')
-    // chromeBrowser.setPermission('clipboard-write', 'granted')
-    browser//.clickLaunchIcon('vyper')
-      .frame(0)
-      .click('[data-id="remote-compiler"]')
-      .click('[data-id="compile"]')
-      .waitForElementVisible({
-        selector:'[data-id="compilation-details"]',
-        timeout: 120000
-      })
-      .click('[data-id="compilation-details"]')
-      .frameParent()
-      .waitForElementVisible('[data-id="copy-abi"]')
-      .click('[data-id="copy-abi"]')
-      // .execute(() => {
-      //   navigator.clipboard.readText()
-      //     .then((clippedText) => {
-      //       console.log(`clipped text is ${clippedText.length} characters long`)
-      //       if(clippedText.length === 0) throw new Error('Clipboard is empty')
-      //     })
-      // })
+    if (browser.browserName.indexOf('chrome') > -1) {
+      const chromeBrowser = (browser as any).chrome
+      chromeBrowser.setPermission('clipboard-read', 'granted')
+      chromeBrowser.setPermission('clipboard-write', 'granted')
+      browser
+        .frame(0)
+        .click('[data-id="remote-compiler"]')
+        .click('[data-id="compile"]')
+        .waitForElementVisible({
+          selector:'[data-id="compilation-details"]',
+          timeout: 120000
+        })
+        .click('[data-id="compilation-details"]')
+        .frameParent()
+        .waitForElementVisible('[data-id="copy-abi"]')
+        .click('[data-id="copy-abi"]')
+        .executeAsyncScript(function (done) {
+          navigator.clipboard.readText()
+            .then(function (clippedText) {
+              done(clippedText)
+            }).catch(function (error) {
+              console.log('Failed to read clipboard contents: ', error)
+              done()
+            })
+        }, [], function (result) {
+          console.log('clipboard result: ' + result)
+          browser.assert.ok((result as any).value.length > 1, 'abi copied to clipboard')
+        })
+    }
   },
 
   'Compile test contract and deploy to remix VM #group1': function (browser: NightwatchBrowser) {

From b9d94f92ba17466934856e5693fca028e7c12932 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 8 Jan 2024 11:25:34 +0100
Subject: [PATCH 75/75] fix vyper clone issue

---
 apps/vyper/src/app/utils/remix-client.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/utils/remix-client.tsx b/apps/vyper/src/app/utils/remix-client.tsx
index 91db5aa5d2..a4fda680cf 100644
--- a/apps/vyper/src/app/utils/remix-client.tsx
+++ b/apps/vyper/src/app/utils/remix-client.tsx
@@ -45,7 +45,7 @@ export class RemixClient extends PluginClient {
       await this.call(
         'dGitProvider',
         'clone',
-        {url: 'https://github.com/vyperlang/vyper', token: null},
+        {url: 'https://github.com/vyperlang/vyper', token: null, branch: 'v0.3.10'},
         // @ts-ignore
         'vyper-lang'
       )