Merge pull request #4585 from ethereum/vyperplugin-patch-003

Vyper UI Patch 003

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -224,9 +224,23 @@ export class TabProxy extends Plugin {
     this.removeTab(oldName)
   }
 
+  /**
+   *
+   * @param {string} name
+   * @param {string} title
+   * @param {Function} switchTo
+   * @param {Function} close
+   * @param {string} icon
+   * @param {string} description
+   * @returns
+   */
   addTab (name, title, switchTo, close, icon, description = '') {
     if (this._handlers[name]) return this.renderComponent()
 
+    if ((name.endsWith('.vy') && icon === undefined) || title.includes('Vyper')) {
+      icon = 'assets/img/vyperLogo2.webp'
+    }
+
     var slash = name.split('/')
     const tabPath = slash.reverse()
     const tempTitle = []

apps/vyper/src/app/app.css

@@ -262,3 +262,7 @@ html, body, #root, main {
   padding: 0;
   border-radius: 0;
 }
+
+.vyper-panel-width {
+  width: 94%;
+}

apps/vyper/src/app/app.tsx

@@ -131,19 +131,25 @@ const App = () => {
               </CustomAccordionToggle>
             </div>
             <Accordion.Collapse eventKey="0">
-              <div className="pl-3 pt-3 border-top-0">
+              <div className="pt-2">
                 <Form>
-                  <div className="d-flex flex-row gap-5 mb-3 mt-2">
-                    <Form.Check inline id="remote-compiler" data-id="remote-compiler" type="radio" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} label="Remote Compiler" className={`${state.environment === 'remote' ? 'd-flex mr-4' : 'd-flex mr-4 cursor-status'}`} />
-                    <Form.Check inline id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} label="Local Compiler" className={`${state.environment === 'local' ? '' : `cursor-status`}`} />
+                  <div className="d-flex flex-row justify-content-around mb-1 mt-2">
+                    <div className={`custom-control custom-radio ${state.environment === 'remote' ? 'd-flex' : 'd-flex cursor-status'}`}>
+                      <input type="radio" id="remote-compiler" data-id="remote-compiler" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} className={`custom-control-input  ${state.environment === 'remote' ? 'd-flex mr-1' : 'd-flex mr-1 cursor-status'}`} />
+                      <label htmlFor="remote-compiler" className="form-check-label custom-control-label">Remote Compiler</label>
+                    </div>
+                    <div className={`custom-control custom-radio ${state.environment === 'local' ? 'mr-2' : `cursor-status`}`}>
+                      <input id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} className={`custom-control-input  ${state.environment === 'local' ? '' : `cursor-status`}`} />
+                      <label htmlFor="local-compiler" className="form-check-label custom-control-label">Local Compiler</label>
+                    </div>
                   </div>
                 </Form>
+                <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
               </div>
             </Accordion.Collapse>
           </div>
         </Accordion>
-        <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
-        <span className="px-3 mt-1 mb-1 small text-warning">
+        <span className="px-3 mt-3 mb-3 small text-warning">
           Specify the{' '}
           <a className="text-warning" target="_blank" href="https://remix-ide.readthedocs.io/en/latest/vyper.html#specify-vyper-version">
             compiler version
@@ -164,7 +170,7 @@ const App = () => {
               <VyperResult output={output} plugin={remixClient} />
             </>
           ) : output.status === 'failed' ? (
-            <CompileErrorCard output={output} askGpt={remixClient.askGpt} />
+            <CompileErrorCard output={output} plugin={remixClient} />
           ) : null}
         </article>
       </section>

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

@@ -1,15 +1,13 @@
 import {CopyToClipboard} from '@remix-ui/clipboard'
 import Reaact from 'react'
+import { RemixClient } from '../utils'
 
-export function CompileErrorCard(props: any) {
+export function CompileErrorCard(props: { output: any, plugin: RemixClient }) {
   return (
     <div
       id="vyperErrorResult"
-      className=" d-flex flex-column p-2 alert alert-danger error vyper-compile-error"
+      className=" d-flex flex-column p-2 alert alert-danger error vyper-compile-error vyper-panel-width"
       title={props.output?.title}
-      style={{
-        width: '94%'
-      }}
     >
       <span
         data-id="error-message"
@@ -21,16 +19,16 @@ export function CompileErrorCard(props: any) {
       >
         {props.output.message.trim()}
       </span>
-      {/* <div className="d-flex flex-column pt-3 align-items-end mb-2">
+      <div className="d-flex flex-column pt-3 align-items-end mb-2">
         <div>
-          <span className="border border-success text-success btn-sm" onClick={() => props.askGpt(props.output.message)}>
+          <span className="border border-success text-success btn-sm" onClick={async () => await props.plugin.askGpt(props.output.message)}>
             Ask GPT
           </span>
           <span className="ml-3 pt-1 py-1">
             <CopyToClipboard content={props.output.message} className={`p-0 m-0 far fa-copy alert alert-danger`} direction={'top'} />
           </span>
         </div>
-      </div> */}
+      </div>
     </div>
   )
 }

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

@@ -58,9 +58,8 @@ function VyperResult({ output, plugin }: VyperResultProps) {
 
   return (
     <>
-      <div className="border border-top"></div>
-      <div className="d-flex justify-content-center px-2 w-100 flex-column">
-        <button data-id="compilation-details" className="btn btn-secondary w-100" onClick={async () => {
+      <div className="d-flex justify-content-center mx-3 mb-3 mt-1 vyper-panel-width flex-column">
+        <button data-id="compilation-details" className="btn btn-secondary d-block btn-block" onClick={async () => {
           await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
           <span>Compilation Details</span>

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

@@ -50,12 +50,10 @@ function parseErrorString(errorString) {
   // Split the string into lines
   let lines = errorString.trim().split('\n')
   // Extract the line number and message
-  console.log(lines)
   let message = errorString.trim()
   let targetLine = lines[2].split(',')
   let tline = lines[2].trim().split(' ')[1].split(':')
 
-  console.log('tline', tline)
   const errorObject = {
     status: 'failed',
     message: message,
@@ -192,7 +190,6 @@ export async function compile(url: string, contract: Contract): Promise<any> {
       method: 'Get'
     })).data
     result = parseErrorString(intermediate[0])
-    console.log('error payload', intermediate)
     return result
   }
   await new Promise((resolve) => setTimeout(() => resolve({}), 3000))
@@ -273,7 +270,6 @@ export async function compileContract(contract: string, compilerUrl: string, set
     // try {
     output = await compile(compilerUrl, _contract)
     if (output.status === 'failed') {
-      console.log('possible error', output)
       remixClient.changeStatus({
         key: 'failed',
         type: 'error',

apps/vyper/src/app/utils/remix-client.tsx

@@ -61,8 +61,16 @@ export class RemixClient extends PluginClient {
   }
 
   async askGpt(message: string) {
+    if (message.length === 0) {
+      this.client.call('terminal', 'log', { type: 'log', value: 'kindly send a proper message so I can respond please' })
+      return
+    }
     try {
-      await this.client.call('openaigpt', 'message', message)
+      const formattedMessage = `
+        ${message}
+        can you explain why this error occurred and how to fix it?
+      `
+      await this.client.call('openaigpt' as any, 'message', formattedMessage)
     } catch (err) {
       console.error('unable to askGpt')
       console.error(err)
@@ -153,4 +161,3 @@ export class RemixClient extends PluginClient {
 }
 
 export const remixClient = new RemixClient()
-// export const RemixClientContext = React.createContext(new RemixClient())

libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts

@@ -360,6 +360,8 @@ export const CompilerApiMixin = (Base) => class extends Base {
           else this.compileTabLogic.runCompiler(undefined)
         } else if (this.currentFile && this.currentFile.endsWith('.circom')) {
           await this.call('circuit-compiler', 'compile', this.currentFile)
+        } else if (this.currentFile && this.currentFile.endsWith('.vy')) {
+          await this.call('vyper', 'vyperCompileCustomAction', this.currentFile)
         }
       }
     }